@angular/material 19.2.0-next.2 → 19.2.0-next.4

package/fesm2022/select.mjs

@@ -1,6 +1,6 @@
 import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, ElementRef, Renderer2, NgZone, ANIMATION_MODULE_TYPE, EventEmitter, HostAttributeToken, booleanAttribute, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, ContentChild, Input, ViewChild, Output, Directive, NgModule } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, ElementRef, Renderer2, ANIMATION_MODULE_TYPE, EventEmitter, HostAttributeToken, booleanAttribute, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, ContentChild, Input, ViewChild, Output, Directive, NgModule } from '@angular/core';
 import { _countGroupLabelsBeforeOption, _getOptionScrollPosition, ErrorStateMatcher, _ErrorStateTracker, MAT_OPTION_PARENT_COMPONENT, MatOption, MAT_OPTGROUP, MatOptionModule, MatCommonModule } from '@angular/material/core';
 export { MatOptgroup, MatOption } from '@angular/material/core';
 import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
@@ -14,7 +14,6 @@ import { NgControl, Validators, NgForm, FormGroupDirective } from '@angular/form
 import { Subject, defer, merge } from 'rxjs';
 import { startWith, switchMap, filter, map, takeUntil, take } from 'rxjs/operators';
 import { NgClass } from '@angular/common';
-import { trigger, transition, query, animateChild, state, style, animate } from '@angular/animations';
 
 // Note that these have been copied over verbatim from
 // `material/select` so that we don't have to expose them publicly.
@@ -90,7 +89,6 @@ class MatSelect {
     _dir = inject(Directionality, { optional: true });
     _idGenerator = inject(_IdGenerator);
     _renderer = inject(Renderer2);
-    _ngZone = inject(NgZone);
     _parentFormField = inject(MAT_FORM_FIELD, { optional: true });
     ngControl = inject(NgControl, { self: true, optional: true });
     _liveAnnouncer = inject(LiveAnnouncer);
@@ -575,31 +573,36 @@ class MatSelect {
     /** Triggers the exit animation and detaches the overlay at the end. */
     _exitAndDetach() {
         if (this._animationsDisabled || !this.panel) {
-            this._overlayDir.detachOverlay();
+            this._detachOverlay();
             return;
         }
-        this._ngZone.runOutsideAngular(() => {
-            this._cleanupDetach?.();
-            this._cleanupDetach = () => {
-                cleanupEvent();
-                clearTimeout(exitFallbackTimer);
-                this._cleanupDetach = undefined;
-            };
-            const panel = this.panel.nativeElement;
-            const cleanupEvent = this._renderer.listen(panel, 'animationend', (event) => {
-                if (event.animationName === '_mat-select-exit') {
-                    this._cleanupDetach?.();
-                    this._overlayDir.detachOverlay();
-                }
-            });
-            // Since closing the overlay depends on the animation, we have a fallback in case the panel
-            // doesn't animate. This can happen in some internal tests that do `* {animation: none}`.
-            const exitFallbackTimer = setTimeout(() => {
+        this._cleanupDetach?.();
+        this._cleanupDetach = () => {
+            cleanupEvent();
+            clearTimeout(exitFallbackTimer);
+            this._cleanupDetach = undefined;
+        };
+        const panel = this.panel.nativeElement;
+        const cleanupEvent = this._renderer.listen(panel, 'animationend', (event) => {
+            if (event.animationName === '_mat-select-exit') {
                 this._cleanupDetach?.();
-                this._overlayDir.detachOverlay();
-            }, 200);
-            panel.classList.add('mat-select-panel-exit');
+                this._detachOverlay();
+            }
         });
+        // Since closing the overlay depends on the animation, we have a fallback in case the panel
+        // doesn't animate. This can happen in some internal tests that do `* {animation: none}`.
+        const exitFallbackTimer = setTimeout(() => {
+            this._cleanupDetach?.();
+            this._detachOverlay();
+        }, 200);
+        panel.classList.add('mat-select-panel-exit');
+    }
+    /** Detaches the current overlay directive. */
+    _detachOverlay() {
+        this._overlayDir.detachOverlay();
+        // Some of the overlay detachment logic depends on change detection.
+        // Mark for check to ensure that things get picked up in a timely manner.
+        this._changeDetectorRef.markForCheck();
     }
     /**
      * Sets the select's value. Part of the ControlValueAccessor interface
@@ -1285,26 +1288,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
  * @breaking-change 21.0.0
  */
 const matSelectAnimations = {
+    // Represents
+    // trigger('transformPanelWrap', [
+    //   transition('* => void', query('@transformPanel', [animateChild()], {optional: true})),
+    // ])
     /**
      * This animation ensures the select's overlay panel animation (transformPanel) is called when
      * closing the select.
      * This is needed due to https://github.com/angular/angular/issues/23302
      */
-    transformPanelWrap: trigger('transformPanelWrap', [
-        transition('* => void', query('@transformPanel', [animateChild()], { optional: true })),
-    ]),
+    transformPanelWrap: {
+        type: 7,
+        name: 'transformPanelWrap',
+        definitions: [
+            {
+                type: 1,
+                expr: '* => void',
+                animation: {
+                    type: 11,
+                    selector: '@transformPanel',
+                    animation: [{ type: 9, options: null }],
+                    options: { optional: true },
+                },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+    // Represents
+    // trigger('transformPanel', [
+    //   state(
+    //     'void',
+    //     style({
+    //       opacity: 0,
+    //       transform: 'scale(1, 0.8)',
+    //     }),
+    //   ),
+    //   transition(
+    //     'void => showing',
+    //     animate(
+    //       '120ms cubic-bezier(0, 0, 0.2, 1)',
+    //       style({
+    //         opacity: 1,
+    //         transform: 'scale(1, 1)',
+    //       }),
+    //     ),
+    //   ),
+    //   transition('* => void', animate('100ms linear', style({opacity: 0}))),
+    // ])
     /** This animation transforms the select's overlay panel on and off the page. */
-    transformPanel: trigger('transformPanel', [
-        state('void', style({
-            opacity: 0,
-            transform: 'scale(1, 0.8)',
-        })),
-        transition('void => showing', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
-            opacity: 1,
-            transform: 'scale(1, 1)',
-        }))),
-        transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
-    ]),
+    transformPanel: {
+        type: 7,
+        name: 'transformPanel',
+        definitions: [
+            {
+                type: 0,
+                name: 'void',
+                styles: {
+                    type: 6,
+                    styles: { opacity: 0, transform: 'scale(1, 0.8)' },
+                    offset: null,
+                },
+            },
+            {
+                type: 1,
+                expr: 'void => showing',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 6,
+                        styles: { opacity: 1, transform: 'scale(1, 1)' },
+                        offset: null,
+                    },
+                    timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
+                },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* => void',
+                animation: {
+                    type: 4,
+                    styles: { type: 6, styles: { opacity: 0 }, offset: null },
+                    timings: '100ms linear',
+                },
+                options: null,
+            },
+        ],
+        options: {},
+    },
 };
 
 /**