@angular/material 18.1.0-next.4 → 18.1.0

package/fesm2022/core.mjs

@@ -13,7 +13,7 @@ import { startWith } from 'rxjs/operators';
 import { ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
 
 /** Current version of Angular Material. */
-const VERSION = new Version('18.1.0-next.4');
+const VERSION = new Version('18.1.0');
 
 /** @docs-private */
 class AnimationCurves {
@@ -968,14 +968,29 @@ class RippleRenderer {
         // are set to zero. The events won't fire anyway and we can save resources here.
         if (!animationForciblyDisabledThroughCss && (enterDuration || animationConfig.exitDuration)) {
             this._ngZone.runOutsideAngular(() => {
-                const onTransitionEnd = () => this._finishRippleTransition(rippleRef);
+                const onTransitionEnd = () => {
+                    // Clear the fallback timer since the transition fired correctly.
+                    if (eventListeners) {
+                        eventListeners.fallbackTimer = null;
+                    }
+                    clearTimeout(fallbackTimer);
+                    this._finishRippleTransition(rippleRef);
+                };
                 const onTransitionCancel = () => this._destroyRipple(rippleRef);
+                // In some cases where there's a higher load on the browser, it can choose not to dispatch
+                // neither `transitionend` nor `transitioncancel` (see b/227356674). This timer serves as a
+                // fallback for such cases so that the ripple doesn't become stuck. We add a 100ms buffer
+                // because timers aren't precise. Note that another approach can be to transition the ripple
+                // to the `VISIBLE` state immediately above and to `FADING_IN` afterwards inside
+                // `transitionstart`. We go with the timer because it's one less event listener and
+                // it's less likely to break existing tests.
+                const fallbackTimer = setTimeout(onTransitionCancel, enterDuration + 100);
                 ripple.addEventListener('transitionend', onTransitionEnd);
                 // If the transition is cancelled (e.g. due to DOM removal), we destroy the ripple
                 // directly as otherwise we would keep it part of the ripple container forever.
                 // https://www.w3.org/TR/css-transitions-1/#:~:text=no%20longer%20in%20the%20document.
                 ripple.addEventListener('transitioncancel', onTransitionCancel);
-                eventListeners = { onTransitionEnd, onTransitionCancel };
+                eventListeners = { onTransitionEnd, onTransitionCancel, fallbackTimer };
             });
         }
         // Add the ripple reference to the list of all active ripples.
@@ -1106,6 +1121,9 @@ class RippleRenderer {
         if (eventListeners !== null) {
             rippleRef.element.removeEventListener('transitionend', eventListeners.onTransitionEnd);
             rippleRef.element.removeEventListener('transitioncancel', eventListeners.onTransitionCancel);
+            if (eventListeners.fallbackTimer !== null) {
+                clearTimeout(eventListeners.fallbackTimer);
+            }
         }
         rippleRef.element.remove();
     }
@@ -1913,14 +1931,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.3",
  */
 class _MatInternalFormField {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.3", ngImport: i0, type: _MatInternalFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0-next.3", type: _MatInternalFormField, isStandalone: true, selector: "div[mat-internal-form-field]", inputs: { labelPosition: "labelPosition" }, host: { properties: { "class.mdc-form-field--align-end": "labelPosition === \"before\"" }, classAttribute: "mdc-form-field mat-internal-form-field" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".mdc-form-field{display:inline-flex;align-items:center;vertical-align:middle}.mdc-form-field[hidden]{display:none}.mdc-form-field>label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0;order:0}[dir=rtl] .mdc-form-field>label,.mdc-form-field>label[dir=rtl]{margin-left:auto;margin-right:0}[dir=rtl] .mdc-form-field>label,.mdc-form-field>label[dir=rtl]{padding-left:0;padding-right:4px}.mdc-form-field--nowrap>label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mdc-form-field--align-end>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px;order:-1}[dir=rtl] .mdc-form-field--align-end>label,.mdc-form-field--align-end>label[dir=rtl]{margin-left:0;margin-right:auto}[dir=rtl] .mdc-form-field--align-end>label,.mdc-form-field--align-end>label[dir=rtl]{padding-left:4px;padding-right:0}.mdc-form-field--space-between{justify-content:space-between}.mdc-form-field--space-between>label{margin:0}[dir=rtl] .mdc-form-field--space-between>label,.mdc-form-field--space-between>label[dir=rtl]{margin:0}.mat-internal-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0-next.3", type: _MatInternalFormField, isStandalone: true, selector: "div[mat-internal-form-field]", inputs: { labelPosition: "labelPosition" }, host: { properties: { "class.mdc-form-field--align-end": "labelPosition === \"before\"" }, classAttribute: "mdc-form-field mat-internal-form-field" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".mat-internal-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-flex;align-items:center;vertical-align:middle}.mat-internal-form-field>label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0;order:0}[dir=rtl] .mat-internal-form-field>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px}.mdc-form-field--align-end>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px;order:-1}[dir=rtl] .mdc-form-field--align-end .mdc-form-field--align-end label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.3", ngImport: i0, type: _MatInternalFormField, decorators: [{
             type: Component,
             args: [{ selector: 'div[mat-internal-form-field]', standalone: true, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'mdc-form-field mat-internal-form-field',
                         '[class.mdc-form-field--align-end]': 'labelPosition === "before"',
-                    }, styles: [".mdc-form-field{display:inline-flex;align-items:center;vertical-align:middle}.mdc-form-field[hidden]{display:none}.mdc-form-field>label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0;order:0}[dir=rtl] .mdc-form-field>label,.mdc-form-field>label[dir=rtl]{margin-left:auto;margin-right:0}[dir=rtl] .mdc-form-field>label,.mdc-form-field>label[dir=rtl]{padding-left:0;padding-right:4px}.mdc-form-field--nowrap>label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mdc-form-field--align-end>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px;order:-1}[dir=rtl] .mdc-form-field--align-end>label,.mdc-form-field--align-end>label[dir=rtl]{margin-left:0;margin-right:auto}[dir=rtl] .mdc-form-field--align-end>label,.mdc-form-field--align-end>label[dir=rtl]{padding-left:4px;padding-right:0}.mdc-form-field--space-between{justify-content:space-between}.mdc-form-field--space-between>label{margin:0}[dir=rtl] .mdc-form-field--space-between>label,.mdc-form-field--space-between>label[dir=rtl]{margin:0}.mat-internal-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}"] }]
+                    }, styles: [".mat-internal-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-flex;align-items:center;vertical-align:middle}.mat-internal-form-field>label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0;order:0}[dir=rtl] .mat-internal-form-field>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px}.mdc-form-field--align-end>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px;order:-1}[dir=rtl] .mdc-form-field--align-end .mdc-form-field--align-end label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0}"] }]
         }], propDecorators: { labelPosition: [{
                 type: Input,
                 args: [{ required: true }]