@angular/material 19.2.0-next.1 → 19.2.0-next.3

package/bottom-sheet/index.d.ts

@@ -1,5 +1,3 @@
-import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
-import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
@@ -69,9 +67,13 @@ export declare class MatBottomSheet implements OnDestroy {
     static ɵprov: i0.ɵɵInjectableDeclaration<MatBottomSheet>;
 }
 
-/** Animations used by the Material bottom sheet. */
+/**
+ * Animations used by the Material bottom sheet.
+ * @deprecated No longer used. Will be removed.
+ * @breaking-change 21.0.0
+ */
 export declare const matBottomSheetAnimations: {
-    readonly bottomSheetState: AnimationTriggerMetadata;
+    readonly bottomSheetState: any;
 };
 
 /**
@@ -94,7 +96,11 @@ export declare class MatBottomSheetConfig<D = any> {
     disableClose?: boolean;
     /** Aria label to assign to the bottom sheet element. */
     ariaLabel?: string | null;
-    /** Whether this is a modal bottom sheet. Used to set the `aria-modal` attribute. */
+    /**
+     * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,
+     * because it can interfere with other overlay-based components (e.g. `mat-select`) and because
+     * it is redundant since the dialog marks all outside content as `aria-hidden` anyway.
+     */
     ariaModal?: boolean;
     /**
      * Whether the bottom sheet should close when the user goes backwards/forwards in history.
@@ -129,10 +135,14 @@ export declare class MatBottomSheetConfig<D = any> {
  */
 export declare class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
     private _breakpointSubscription;
+    protected _animationsDisabled: boolean;
     /** The state of the bottom sheet animations. */
     _animationState: 'void' | 'visible' | 'hidden';
     /** Emits whenever the state of the animation changes. */
-    _animationStateChanged: EventEmitter<AnimationEvent_2>;
+    _animationStateChanged: EventEmitter<{
+        toState: "visible" | "hidden";
+        phase: "start" | "done";
+    }>;
     /** Whether the component has been destroyed. */
     private _destroyed;
     constructor(...args: unknown[]);
@@ -141,8 +151,8 @@ export declare class MatBottomSheetContainer extends CdkDialogContainer implemen
     /** Begin animation of the bottom sheet exiting from view. */
     exit(): void;
     ngOnDestroy(): void;
-    _onAnimationDone(event: AnimationEvent_2): void;
-    _onAnimationStart(event: AnimationEvent_2): void;
+    private _simulateAnimation;
+    protected _handleAnimationEvent(isStart: boolean, animationName: string): void;
     protected _captureInitialFocus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;

package/button/_button-base.scss

@@ -52,7 +52,7 @@
     @include layout-common.fill();
   }
 
-  &:focus .mat-focus-indicator::before {
+  &:focus > .mat-focus-indicator::before {
     content: '';
   }
 }
@@ -71,19 +71,19 @@
       @include token-utils.create-token-slot(background-color, disabled-state-layer-color);
     }
 
-    &:hover .mat-mdc-button-persistent-ripple::before {
+    &:hover > .mat-mdc-button-persistent-ripple::before {
       @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
     }
 
     &.cdk-program-focused,
     &.cdk-keyboard-focused,
     &.mat-mdc-button-disabled-interactive:focus {
-      .mat-mdc-button-persistent-ripple::before {
+      > .mat-mdc-button-persistent-ripple::before {
         @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
       }
     }
 
-    &:active .mat-mdc-button-persistent-ripple::before {
+    &:active > .mat-mdc-button-persistent-ripple::before {
       @include token-utils.create-token-slot(opacity, pressed-state-layer-opacity);
     }
   }

package/checkbox/_checkbox-common.scss

@@ -119,15 +119,17 @@ $_fallback-size: 40px;
       border-color: transparent;
     }
 
-    .mdc-checkbox:hover .mdc-checkbox__native-control:not(:checked) ~ .mdc-checkbox__background,
+    // stylelint-disable selector-combinator-space-before
+    .mdc-checkbox:hover > .mdc-checkbox__native-control:not(:checked) ~ .mdc-checkbox__background,
     .mdc-checkbox:hover
-      .mdc-checkbox__native-control:not(:indeterminate) ~ .mdc-checkbox__background {
+      > .mdc-checkbox__native-control:not(:indeterminate) ~ .mdc-checkbox__background {
       @include token-utils.create-token-slot(border-color, unselected-hover-icon-color);
       background-color: transparent;
     }
+    // stylelint-enable selector-combinator-space-before
 
-    .mdc-checkbox:hover .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
-    .mdc-checkbox:hover .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+    .mdc-checkbox:hover > .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox:hover > .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
       @include token-utils.create-token-slot(border-color, selected-hover-icon-color);
       @include token-utils.create-token-slot(background-color, selected-hover-icon-color);
     }
@@ -147,7 +149,7 @@ $_fallback-size: 40px;
 
     // Needs extra specificity to override the focus, hover, active states.
     .mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive {
-      .mdc-checkbox:hover .mdc-checkbox__native-control ~ .mdc-checkbox__background,
+      .mdc-checkbox:hover > .mdc-checkbox__native-control ~ .mdc-checkbox__background,
       .mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background,
       .mdc-checkbox__background {
         @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
@@ -306,31 +308,31 @@ $_fallback-size: 40px;
     transition: border-color $_transition-duration $_enter-curve,
                 background-color $_transition-duration $_enter-curve;
 
-    .mdc-checkbox__checkmark-path {
+    > .mdc-checkbox__checkmark > .mdc-checkbox__checkmark-path {
       stroke-dashoffset: 0;
     }
   }
 
   .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
-    .mdc-checkbox__checkmark {
+    > .mdc-checkbox__checkmark {
       transition: opacity $_transition-duration * 2 $_enter-curve,
                   transform $_transition-duration * 2 $_enter-curve;
       opacity: 1;
     }
 
-    .mdc-checkbox__mixedmark {
+    > .mdc-checkbox__mixedmark {
       transform: scaleX(1) rotate(-45deg);
     }
   }
   .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
-    .mdc-checkbox__checkmark {
+    > .mdc-checkbox__checkmark {
       transform: rotate(45deg);
       opacity: 0;
       transition: opacity $_transition-duration $_exit-curve,
                   transform $_transition-duration $_exit-curve;
     }
 
-    .mdc-checkbox__mixedmark {
+    > .mdc-checkbox__mixedmark {
       transform: scaleX(1) rotate(0deg);
       opacity: 1;
     }
@@ -445,11 +447,22 @@ $_fallback-size: 40px;
 
 // Conditionally disables the animations of the checkbox.
 @mixin checkbox-noop-animations() {
-  &._mat-animation-noopable .mdc-checkbox {
-    *, *::before {
-      transition: none !important;
-      animation: none !important;
-    }
+  &._mat-animation-noopable > .mat-internal-form-field > .mdc-checkbox {
+    @include checkbox-noop-animations-internal;
+  }
+}
+
+@mixin checkbox-noop-animations-internal() {
+  > .mat-mdc-checkbox-touch-target,
+  > .mdc-checkbox__native-control,
+  > .mdc-checkbox__ripple,
+  > .mat-mdc-checkbox-ripple::before,
+  > .mdc-checkbox__background,
+  > .mdc-checkbox__background > .mdc-checkbox__checkmark,
+  > .mdc-checkbox__background > .mdc-checkbox__checkmark > .mdc-checkbox__checkmark-path,
+  > .mdc-checkbox__background > .mdc-checkbox__mixedmark {
+    transition: none !important;
+    animation: none !important;
   }
 }
 
@@ -457,7 +470,7 @@ $_fallback-size: 40px;
   // MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
   // `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
   &:hover {
-    .mdc-checkbox__ripple {
+    > .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -465,7 +478,7 @@ $_fallback-size: 40px;
       );
     }
 
-    .mat-mdc-checkbox-ripple .mat-ripple-element {
+    > .mat-mdc-checkbox-ripple > .mat-ripple-element {
       @include token-utils.create-token-slot(
         background-color,
         unselected-hover-state-layer-color
@@ -474,7 +487,7 @@ $_fallback-size: 40px;
   }
 
   .mdc-checkbox__native-control:focus {
-    & ~ .mdc-checkbox__ripple {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -490,8 +503,8 @@ $_fallback-size: 40px;
     }
   }
 
-  &:active .mdc-checkbox__native-control {
-    & ~ .mdc-checkbox__ripple {
+  &:active > .mdc-checkbox__native-control {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -508,7 +521,7 @@ $_fallback-size: 40px;
   }
 
   &:hover .mdc-checkbox__native-control:checked {
-    & ~ .mdc-checkbox__ripple {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -525,7 +538,7 @@ $_fallback-size: 40px;
   }
 
   .mdc-checkbox__native-control:focus:checked {
-    & ~ .mdc-checkbox__ripple {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -541,8 +554,8 @@ $_fallback-size: 40px;
     }
   }
 
-  &:active .mdc-checkbox__native-control:checked {
-    & ~ .mdc-checkbox__ripple {
+  &:active > .mdc-checkbox__native-control:checked {
+    & + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
       @include token-utils.create-token-slot(
         background-color,
@@ -561,7 +574,7 @@ $_fallback-size: 40px;
   // Needs extra specificity to override the focus, hover, active states.
   .mdc-checkbox--disabled.mat-mdc-checkbox-disabled-interactive & {
     .mdc-checkbox__native-control ~ .mat-mdc-checkbox-ripple .mat-ripple-element,
-    .mdc-checkbox__native-control ~ .mdc-checkbox__ripple {
+    .mdc-checkbox__native-control + .mdc-checkbox__ripple {
       @include token-utils.create-token-slot(
         background-color,
         unselected-hover-state-layer-color

package/chips/index.d.ts

@@ -600,8 +600,6 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
      */
     _onChange: (value: any) => void;
     protected _defaultRole: string;
-    /** Value that was assigned before the listbox was initialized. */
-    private _pendingInitialValue;
     /** Default chip options. */
     private _defaultOptions;
     /** Whether the user should be allowed to select multiple chips. */

package/core/index.d.ts

@@ -794,6 +794,7 @@ export declare class MatRippleLoader implements OnDestroy {
     private _platform;
     private _ngZone;
     private _injector;
+    private _eventCleanups;
     private _hosts;
     constructor();
     ngOnDestroy(): void;

package/datepicker/index.d.ts

@@ -2,7 +2,6 @@ import { AbstractControl } from '@angular/forms';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewChecked } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
-import { AnimationTriggerMetadata } from '@angular/animations';
 import { ChangeDetectorRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { ControlValueAccessor } from '@angular/forms';
@@ -385,6 +384,7 @@ export declare class MatCalendarBody<D = any> implements OnChanges, OnDestroy, A
     private _ngZone;
     private _platform;
     private _intl;
+    private _eventCleanups;
     /**
      * Used to skip the next focus event when rendering the preview range.
      * We need a flag like this, because some browsers fire focus events asynchronously.
@@ -663,8 +663,8 @@ export declare class MatDatepickerActions implements AfterViewInit, OnDestroy {
  * @breaking-change 21.0.0
  */
 export declare const matDatepickerAnimations: {
-    readonly transformPanel: AnimationTriggerMetadata;
-    readonly fadeInCalendar: AnimationTriggerMetadata;
+    readonly transformPanel: any;
+    readonly fadeInCalendar: any;
 };
 
 /** Button that will close the datepicker and assign the current selection to the data model. */

package/dialog/index.d.ts

@@ -1,4 +1,3 @@
-import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
@@ -43,6 +42,8 @@ export declare function _closeDialogVia<R>(ref: MatDialogRef<R>, interactionType
 /**
  * Default parameters for the animation for backwards compatibility.
  * @docs-private
+ * @deprecated Will stop being exported.
+ * @breaking-change 21.0.0
  */
 export declare const _defaultParams: {
     params: {
@@ -193,9 +194,11 @@ export declare class MatDialogActions extends MatDialogLayoutSection {
 /**
  * Animations used by MatDialog.
  * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
 export declare const matDialogAnimations: {
-    readonly dialogContainer: AnimationTriggerMetadata;
+    readonly dialogContainer: any;
 };
 
 /**
@@ -272,7 +275,11 @@ export declare class MatDialogConfig<D = any> {
     ariaLabelledBy?: string | null;
     /** Aria label to assign to the dialog element. */
     ariaLabel?: string | null;
-    /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
+    /**
+     * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,
+     * because it can interfere with other overlay-based components (e.g. `mat-select`) and because
+     * it is redundant since the dialog marks all outside content as `aria-hidden` anyway.
+     */
     ariaModal?: boolean;
     /**
      * Where the dialog should focus on open.

package/expansion/index.d.ts

@@ -1,6 +1,5 @@
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
-import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkAccordion } from '@angular/cdk/accordion';
 import { CdkAccordionItem } from '@angular/cdk/accordion';
 import { ElementRef } from '@angular/core';
@@ -20,7 +19,11 @@ import { Subject } from 'rxjs';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { TemplateRef } from '@angular/core';
 
-/** Time and timing curve for expansion panel animations. */
+/**
+ * Time and timing curve for expansion panel animations.
+ * @deprecated No longer used. Will be removed.
+ * @breaking-change 21.0.0
+ */
 export declare const EXPANSION_PANEL_ANIMATION_TIMING = "225ms cubic-bezier(0.4,0.0,0.2,1)";
 
 declare namespace i4 {
@@ -151,8 +154,8 @@ export declare type MatAccordionTogglePosition = 'before' | 'after';
  * @breaking-change 21.0.0
  */
 export declare const matExpansionAnimations: {
-    readonly indicatorRotate: AnimationTriggerMetadata;
-    readonly bodyExpansion: AnimationTriggerMetadata;
+    readonly indicatorRotate: any;
+    readonly bodyExpansion: any;
 };
 
 export declare class MatExpansionModule {

package/fesm2022/autocomplete.mjs

@@ -223,10 +223,10 @@ class MatAutocomplete {
     _skipPredicate() {
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.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-autocomplete-panel-animations-enabled]=\"!_animationsDisabled\"\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    #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}@keyframes _mat-autocomplete-enter{from{opacity:0;transform:scaleY(0.8)}to{opacity:1;transform:none}}.mat-autocomplete-panel-animations-enabled{animation:_mat-autocomplete-enter 120ms cubic-bezier(0, 0, 0.2, 1)}mat-autocomplete{display:none}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.3", 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-autocomplete-panel-animations-enabled]=\"!_animationsDisabled\"\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    #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}@keyframes _mat-autocomplete-enter{from{opacity:0;transform:scaleY(0.8)}to{opacity:1;transform:none}}.mat-autocomplete-panel-animations-enabled{animation:_mat-autocomplete-enter 120ms cubic-bezier(0, 0, 0.2, 1)}mat-autocomplete{display:none}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatAutocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'mat-autocomplete', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'matAutocomplete', host: {
                         'class': 'mat-mdc-autocomplete',
@@ -288,10 +288,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
 class MatAutocompleteOrigin {
     elementRef = inject(ElementRef);
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-rc.0", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',
@@ -1135,10 +1135,10 @@ class MatAutocompleteTrigger {
             this._trackedModal = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.3", 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.1.0-rc.0", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[matAutocomplete], textarea[matAutocomplete]`,
@@ -1180,8 +1180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
             }] } });
 
 class MatAutocompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatAutocompleteModule, imports: [OverlayModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: MatAutocompleteModule, imports: [OverlayModule,
             MatOptionModule,
             MatCommonModule,
             MatAutocomplete,
@@ -1192,13 +1192,13 @@ class MatAutocompleteModule {
             MatCommonModule,
             MatAutocompleteTrigger,
             MatAutocompleteOrigin] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.0-rc.0", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [OverlayModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", 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.1.0-rc.0", ngImport: i0, type: MatAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [