@angular/material 19.1.0-next.2 → 19.1.0-rc.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2024 Google LLC.
+Copyright (c) 2025 Google LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/autocomplete/index.d.ts

@@ -212,7 +212,7 @@ export declare interface MatAutocompleteDefaultOptions {
     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. */
+    /** Whether icon indicators should be hidden for single-selection. */
     hideSingleSelectionIndicator?: boolean;
 }
 
@@ -248,6 +248,7 @@ export declare class MatAutocompleteSelectedEvent {
 
 /** Base class with all of the `MatAutocompleteTrigger` functionality. */
 export declare class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy {
+    private _injector;
     private _element;
     private _overlay;
     private _viewContainerRef;
@@ -257,13 +258,16 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _formField;
     private _document;
     private _viewportRuler;
+    private _scrollStrategy;
+    private _renderer;
     private _defaults;
     private _overlayRef;
     private _portal;
     private _componentDestroyed;
-    private _scrollStrategy;
+    private _initialized;
     private _keydownSubscription;
     private _outsideClickSubscription;
+    private _cleanupWindowBlur;
     /** 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 attached (even if there are no options). */
@@ -330,8 +334,6 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
      * act as a regular input and the user won't be able to open the panel.
      */
     autocompleteDisabled: boolean;
-    private _initialized;
-    private _injector;
     constructor(...args: unknown[]);
     /** Class to apply to the panel when it's above the input. */
     private _aboveClass;
@@ -428,8 +430,6 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _resetActiveItem;
     /** Determines whether the panel can be opened. */
     private _canOpen;
-    /** Use defaultView of injected document if available or fallback to global window reference */
-    private _getWindow;
     /** Scrolls to a particular option in the list. */
     private _scrollToOption;
     /**

package/badge/index.d.ts

@@ -24,10 +24,10 @@ export declare class MatBadge implements OnInit, OnDestroy {
     private _idGenerator;
     /**
      * Theme color of the badge. This API is supported in M2 themes only, it
-     * has no effect in M3 themes.
+     * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/badge/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants.
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     get color(): ThemePalette;
     set color(value: ThemePalette);

package/button/index.d.ts

@@ -65,6 +65,8 @@ export declare class MatAnchor extends MatAnchorBase {
  * Anchor button base.
  */
 declare class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
+    private _renderer;
+    private _cleanupClick;
     tabIndex: number;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -105,10 +107,10 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
     protected _isFab: boolean;
     /**
      * Theme color of the button. This API is supported in M2 themes only, it has
-     * no effect in M3 themes.
+     * no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants.
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color?: string | null;
     /** Whether the ripple effect is disabled or not. */
@@ -201,10 +203,10 @@ export declare class MatFabButton extends MatButtonBase {
 export declare interface MatFabDefaultOptions {
     /**
      * Default theme color of the button. This API is supported in M2 themes
-     * only, it has no effect in M3 themes.
+     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
      */
     color?: ThemePalette;
 }

package/checkbox/index.d.ts

@@ -118,10 +118,10 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     tabIndex: number;
     /**
      * Theme color of the checkbox. This API is supported in M2 themes only, it
-     * has no effect in M3 themes.
+     * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants.
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color: string | undefined;
     /** Whether the checkbox should remain interactive when it is disabled. */
@@ -224,10 +224,10 @@ export declare type MatCheckboxClickAction = 'noop' | 'check' | 'check-indetermi
 export declare interface MatCheckboxDefaultOptions {
     /**
      * Default theme color of the checkbox. This API is supported in M2 themes
-     * only, it has no effect in M3 themes.
+     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color?: ThemePalette;
     /** Default checkbox click action for checkboxes. */

package/chips/index.d.ts

@@ -181,10 +181,10 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     protected _value: any;
     /**
      * Theme color of the chip. This API is supported in M2 themes only, it has no
-     * effect in M3 themes.
+     * effect in M3 themes. For color customization in M3, see https://material.angular.io/components/chips/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants.
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color?: string | null;
     /**
@@ -849,7 +849,7 @@ export declare class MatChipRow extends MatChip implements AfterViewInit {
 export declare interface MatChipsDefaultOptions {
     /** The list of key codes that will trigger a chipEnd event. */
     separatorKeyCodes: readonly number[] | ReadonlySet<number>;
-    /** Wheter icon indicators should be hidden for single-selection. */
+    /** Whether icon indicators should be hidden for single-selection. */
     hideSingleSelectionIndicator?: boolean;
 }
 

package/core/theming/_theming.scss

@@ -15,7 +15,7 @@ $_generate-default-density: true !default;
 
 // Warning that will be printed if duplicated styles are generated by a theme.
 $_duplicate-warning: 'Read more about how style duplication can be avoided in a dedicated ' +
-  'guide. https://github.com/angular/components/blob/main/guides/duplicate-theming-styles.md';
+  'guide. https://v18.material.angular.io/guide/duplicate-theming-styles';
 
 // Warning that will be printed if the legacy theming API is used.
 $private-legacy-theme-warning: 'Angular Material themes should be created from a map containing ' +

package/datepicker/index.d.ts

@@ -35,7 +35,6 @@ import { OnInit } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { Portal } from '@angular/cdk/portal';
 import { ScrollStrategy } from '@angular/cdk/overlay';
-import { Signal } from '@angular/core';
 import { SimpleChanges } from '@angular/core';
 import { Subject } from 'rxjs';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -159,8 +158,6 @@ declare namespace i15 {
 
 declare namespace i16 {
     export {
-        MatDateRangeInputParent,
-        MAT_DATE_RANGE_INPUT_PARENT,
         MatStartDate,
         MatEndDate
     }
@@ -221,12 +218,6 @@ declare namespace i9 {
 
 declare function isSameMultiYearView<D>(dateAdapter: DateAdapter<D>, date1: D, date2: D, minDate: D | null, maxDate: D | null): boolean;
 
-/**
- * Used to provide the date range input wrapper component
- * to the parts without circular dependencies.
- */
-declare const MAT_DATE_RANGE_INPUT_PARENT: InjectionToken<MatDateRangeInputParent<unknown>>;
-
 /** Injection token used to customize the date range selection behavior. */
 export declare const MAT_DATE_RANGE_SELECTION_STRATEGY: InjectionToken<MatDateRangeSelectionStrategy<any>>;
 
@@ -704,10 +695,10 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     startView: 'month' | 'year' | 'multi-year';
     /**
      * Theme color of the datepicker's calendar. This API is supported in M2 themes only, it
-     * has no effect in M3 themes.
+     * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants.
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     get color(): ThemePalette;
     set color(value: ThemePalette);
@@ -864,10 +855,10 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     _calendar: MatCalendar<D>;
     /**
      * Theme color of the internal calendar. This API is supported in M2 themes
-     * only, it has no effect in M3 themes.
+     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants.
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color: ThemePalette;
     /** Reference to the datepicker that created the overlay. */
@@ -1167,10 +1158,10 @@ export declare interface MatDatepickerPanel<C extends MatDatepickerControl<D>, S
     closedStream: EventEmitter<void>;
     /**
      * Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it
-     * has no effect in M3 themes.
+     * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/theming#using-component-color-variants
+     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color: ThemePalette;
     /** The input element the datepicker is associated with. */
@@ -1228,13 +1219,15 @@ export declare class MatDatepickerToggleIcon {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerToggleIcon, "[matDatepickerToggleIcon]", never, {}, {}, never, never, true, never>;
 }
 
-export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>, MatDatepickerControl<D>, MatDateRangeInputParent<D>, MatDateRangePickerInput<D>, AfterContentInit, OnChanges, OnDestroy {
+export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>, MatDatepickerControl<D>, MatDateRangePickerInput<D>, AfterContentInit, OnChanges, OnDestroy {
     private _changeDetectorRef;
     private _elementRef;
     private _dateAdapter;
     private _formField;
     private _closedSubscription;
     private _openedSubscription;
+    _startInput: MatStartDate<D>;
+    _endInput: MatEndDate<D>;
     /** Current value of the range input. */
     get value(): DateRange<D> | null;
     /** Unique ID for the group. */
@@ -1291,8 +1284,6 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     comparisonStart: D | null;
     /** End of the comparison range that should be shown in the calendar. */
     comparisonEnd: D | null;
-    _startInput: MatStartDate<D>;
-    _endInput: MatEndDate<D>;
     /**
      * Implemented as a part of `MatFormFieldControl`.
      * TODO(crisbeto): change type to `AbstractControlDirective` after #18206 lands.
@@ -1351,34 +1342,16 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     /** Checks whether a specific range input directive is required. */
     private _isTargetRequired;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDateRangeInput<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDateRangeInput<any>, "mat-date-range-input", ["matDateRangeInput"], { "rangePicker": { "alias": "rangePicker"; "required": false; }; "required": { "alias": "required"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; }, {}, ["_startInput", "_endInput"], ["input[matStartDate]", "input[matEndDate]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDateRangeInput<any>, "mat-date-range-input", ["matDateRangeInput"], { "rangePicker": { "alias": "rangePicker"; "required": false; }; "required": { "alias": "required"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; }, {}, never, ["input[matStartDate]", "input[matEndDate]"], true, never>;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_disabled: unknown;
 }
 
-/** Parent component that should be wrapped around `MatStartDate` and `MatEndDate`. */
-declare interface MatDateRangeInputParent<D> {
-    id: string;
-    min: D | null;
-    max: D | null;
-    dateFilter: DateFilterFn<D>;
-    rangePicker: {
-        opened: boolean;
-        id: string;
-    };
-    _ariaOwns?: Signal<string | null>;
-    _startInput: MatDateRangeInputPartBase<D>;
-    _endInput: MatDateRangeInputPartBase<D>;
-    _groupDisabled: boolean;
-    _handleChildValueChange(): void;
-    _openDatepicker(): void;
-}
-
 /**
  * Base class for the individual inputs that can be projected inside a `mat-date-range-input`.
  */
-declare abstract class MatDateRangeInputPartBase<D> extends MatDatepickerInputBase<DateRange<D>> implements OnInit, DoCheck {
-    _rangeInput: MatDateRangeInputParent<D>;
+declare abstract class MatDateRangeInputPartBase<D> extends MatDatepickerInputBase<DateRange<D>> implements OnInit, AfterContentInit, DoCheck {
+    _rangeInput: MatDateRangeInput<D>;
     _elementRef: ElementRef<HTMLInputElement>;
     _defaultErrorStateMatcher: ErrorStateMatcher;
     private _injector;
@@ -1392,6 +1365,7 @@ declare abstract class MatDateRangeInputPartBase<D> extends MatDatepickerInputBa
     protected abstract _validator: ValidatorFn | null;
     protected abstract _assignValueToModel(value: D | null): void;
     protected abstract _getValueFromModel(modelValue: DateRange<D>): D | null;
+    protected abstract _register(): void;
     protected readonly _dir: Directionality | null;
     private _errorStateTracker;
     /** Object used to control when error messages are shown. */
@@ -1402,6 +1376,7 @@ declare abstract class MatDateRangeInputPartBase<D> extends MatDatepickerInputBa
     set errorState(value: boolean);
     constructor(...args: unknown[]);
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngDoCheck(): void;
     /** Gets whether the input is empty. */
     isEmpty(): boolean;
@@ -1522,6 +1497,7 @@ export declare abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSe
 export declare class MatEndDate<D> extends MatDateRangeInputPartBase<D> {
     /** Validator that checks that the end date isn't before the start date. */
     private _endValidator;
+    protected _register(): void;
     protected _validator: ValidatorFn | null;
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
     protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean;
@@ -1829,6 +1805,7 @@ export declare class MatStartDate<D> extends MatDateRangeInputPartBase<D> {
     /** Validator that checks that the start date isn't after the end date. */
     private _startValidator;
     protected _validator: ValidatorFn | null;
+    protected _register(): void;
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
     protected _shouldHandleChangeEvent(change: DateSelectionModelChange<DateRange<D>>): boolean;
     protected _assignValueToModel(value: D | null): void;

package/expansion/index.d.ts

@@ -171,6 +171,8 @@ export declare class MatExpansionPanel extends CdkAccordionItem implements After
     private _document;
     private _ngZone;
     private _elementRef;
+    private _renderer;
+    private _cleanupTransitionEnd;
     /** Whether the toggle indicator should be hidden. */
     get hideToggle(): boolean;
     set hideToggle(value: boolean);

package/fesm2022/autocomplete.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, ElementRef, EventEmitter, booleanAttribute, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ContentChildren, Input, Output, Directive, forwardRef, ViewContainerRef, NgZone, Injector, afterNextRender, NgModule } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, ElementRef, EventEmitter, booleanAttribute, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ContentChildren, Input, Output, Directive, forwardRef, Injector, ViewContainerRef, NgZone, Renderer2, afterNextRender, NgModule } from '@angular/core';
 import { MAT_OPTION_PARENT_COMPONENT, MatOption, MAT_OPTGROUP, MatOptionSelectionChange, _countGroupLabelsBeforeOption, _getOptionScrollPosition, MatOptionModule, MatCommonModule } from '@angular/material/core';
 export { MatOptgroup, MatOption } from '@angular/material/core';
 import { ViewportRuler, CdkScrollableModule } from '@angular/cdk/scrolling';
@@ -7,7 +7,7 @@ import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 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';
+import { Subscription, Subject, merge, of, defer, Observable } from 'rxjs';
 import { Directionality } from '@angular/cdk/bidi';
 import { hasModifierKey, ESCAPE, ENTER, UP_ARROW, DOWN_ARROW, TAB } from '@angular/cdk/keycodes';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@@ -242,10 +242,10 @@ class MatAutocomplete {
     _skipPredicate() {
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.2", ngImport: i0, type: MatAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.0-next.2", 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.1.0-next.3", ngImport: i0, type: MatAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.0-next.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-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.1.0-next.2", ngImport: i0, type: MatAutocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.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',
@@ -307,10 +307,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2",
 class MatAutocompleteOrigin {
     elementRef = inject(ElementRef);
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.2", ngImport: i0, type: MatAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.2", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',
@@ -356,6 +356,7 @@ const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
 };
 /** Base class with all of the `MatAutocompleteTrigger` functionality. */
 class MatAutocompleteTrigger {
+    _injector = inject(Injector);
     _element = inject(ElementRef);
     _overlay = inject(Overlay);
     _viewContainerRef = inject(ViewContainerRef);
@@ -365,13 +366,16 @@ class MatAutocompleteTrigger {
     _formField = inject(MAT_FORM_FIELD, { optional: true, host: true });
     _document = inject(DOCUMENT);
     _viewportRuler = inject(ViewportRuler);
+    _scrollStrategy = inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY);
+    _renderer = inject(Renderer2);
     _defaults = inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, { optional: true });
     _overlayRef;
     _portal;
     _componentDestroyed = false;
-    _scrollStrategy = inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY);
+    _initialized = new Subject();
     _keydownSubscription;
     _outsideClickSubscription;
+    _cleanupWindowBlur;
     /** Old value of the native input. Used to work around issues with the `input` event on IE. */
     _previousValue;
     /** Value of the input element when the panel was attached (even if there are no options). */
@@ -444,18 +448,13 @@ class MatAutocompleteTrigger {
      * act as a regular input and the user won't be able to open the panel.
      */
     autocompleteDisabled;
-    _initialized = new Subject();
-    _injector = inject(Injector);
     constructor() { }
     /** Class to apply to the panel when it's above the input. */
     _aboveClass = 'mat-mdc-autocomplete-panel-above';
     ngAfterViewInit() {
         this._initialized.next();
         this._initialized.complete();
-        const window = this._getWindow();
-        if (typeof window !== 'undefined') {
-            this._zone.runOutsideAngular(() => window.addEventListener('blur', this._windowBlurHandler));
-        }
+        this._cleanupWindowBlur = this._renderer.listen('window', 'blur', this._windowBlurHandler);
     }
     ngOnChanges(changes) {
         if (changes['position'] && this._positionStrategy) {
@@ -466,10 +465,7 @@ class MatAutocompleteTrigger {
         }
     }
     ngOnDestroy() {
-        const window = this._getWindow();
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('blur', this._windowBlurHandler);
-        }
+        this._cleanupWindowBlur?.();
         this._handsetLandscapeSubscription.unsubscribe();
         this._viewportSubscription.unsubscribe();
         this._componentDestroyed = true;
@@ -567,26 +563,38 @@ class MatAutocompleteTrigger {
     }
     /** Stream of clicks outside of the autocomplete panel. */
     _getOutsideClickStream() {
-        return merge(fromEvent(this._document, 'click'), fromEvent(this._document, 'auxclick'), fromEvent(this._document, 'touchend')).pipe(filter(event => {
-            // If we're in the Shadow DOM, the event target will be the shadow root, so we have to
-            // fall back to check the first element in the path of the click event.
-            const clickTarget = _getEventTarget(event);
-            const formField = this._formField
-                ? this._formField.getConnectedOverlayOrigin().nativeElement
-                : null;
-            const customOrigin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;
-            return (this._overlayAttached &&
-                clickTarget !== this._element.nativeElement &&
-                // Normally focus moves inside `mousedown` so this condition will almost always be
-                // true. Its main purpose is to handle the case where the input is focused from an
-                // outside click which propagates up to the `body` listener within the same sequence
-                // and causes the panel to close immediately (see #3106).
-                this._document.activeElement !== this._element.nativeElement &&
-                (!formField || !formField.contains(clickTarget)) &&
-                (!customOrigin || !customOrigin.contains(clickTarget)) &&
-                !!this._overlayRef &&
-                !this._overlayRef.overlayElement.contains(clickTarget));
-        }));
+        return new Observable(observer => {
+            const listener = (event) => {
+                // If we're in the Shadow DOM, the event target will be the shadow root, so we have to
+                // fall back to check the first element in the path of the click event.
+                const clickTarget = _getEventTarget(event);
+                const formField = this._formField
+                    ? this._formField.getConnectedOverlayOrigin().nativeElement
+                    : null;
+                const customOrigin = this.connectedTo ? this.connectedTo.elementRef.nativeElement : null;
+                if (this._overlayAttached &&
+                    clickTarget !== this._element.nativeElement &&
+                    // Normally focus moves inside `mousedown` so this condition will almost always be
+                    // true. Its main purpose is to handle the case where the input is focused from an
+                    // outside click which propagates up to the `body` listener within the same sequence
+                    // and causes the panel to close immediately (see #3106).
+                    this._document.activeElement !== this._element.nativeElement &&
+                    (!formField || !formField.contains(clickTarget)) &&
+                    (!customOrigin || !customOrigin.contains(clickTarget)) &&
+                    !!this._overlayRef &&
+                    !this._overlayRef.overlayElement.contains(clickTarget)) {
+                    observer.next(event);
+                }
+            };
+            const cleanups = [
+                this._renderer.listen('document', 'click', listener),
+                this._renderer.listen('document', 'auxclick', listener),
+                this._renderer.listen('document', 'touchend', listener),
+            ];
+            return () => {
+                cleanups.forEach(current => current());
+            };
+        });
     }
     // Implemented as part of ControlValueAccessor.
     writeValue(value) {
@@ -1075,10 +1083,6 @@ class MatAutocompleteTrigger {
         const element = this._element.nativeElement;
         return !element.readOnly && !element.disabled && !this.autocompleteDisabled;
     }
-    /** Use defaultView of injected document if available or fallback to global window reference */
-    _getWindow() {
-        return this._document?.defaultView || window;
-    }
     /** Scrolls to a particular option in the list. */
     _scrollToOption(index) {
         // Given that we are not actually focusing active options, we must manually adjust scroll
@@ -1157,10 +1161,10 @@ class MatAutocompleteTrigger {
             this._trackedModal = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.2", ngImport: i0, type: MatAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.0-next.2", 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.0-next.3", ngImport: i0, type: MatAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.0-next.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-next.2", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[matAutocomplete], textarea[matAutocomplete]`,
@@ -1202,8 +1206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2",
             }] } });
 
 class MatAutocompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.2", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.0-next.2", ngImport: i0, type: MatAutocompleteModule, imports: [OverlayModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatAutocompleteModule, imports: [OverlayModule,
             MatOptionModule,
             MatCommonModule,
             MatAutocomplete,
@@ -1214,13 +1218,13 @@ class MatAutocompleteModule {
             MatCommonModule,
             MatAutocompleteTrigger,
             MatAutocompleteOrigin] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.0-next.2", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [OverlayModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.0-next.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-next.2", ngImport: i0, type: MatAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [