fix(components/popovers)!: replace @angular/animations with CSS transitions (#4313)

BREAKING CHANGE

`SkyPopoverComponent` has replaced `@angular/animations` with CSS
transitions. Tests that interact with popovers may need to add
`provideNoopSkyAnimations()` from `@skyux/core` to their `TestBed`
providers to disable SKY UX CSS transitions during tests.

```
import { provideNoopSkyAnimations } from '@skyux/core';

TestBed.configureTestingModule({
  providers: [provideNoopSkyAnimations()],
});
```

Author: Blackbaud-SteveBrush

libs/components/code-examples/src/lib/modules/popovers/popover/basic/example.component.spec.ts

@@ -1,6 +1,6 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyPopoverAlignment, SkyPopoverPlacement } from '@skyux/popovers';
 import { SkyPopoverHarness } from '@skyux/popovers/testing';
 
@@ -40,7 +40,8 @@ describe('Basic popover', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [PopoversPopoverBasicExampleComponent, NoopAnimationsModule],
+      imports: [PopoversPopoverBasicExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     });
   });
 

libs/components/datetime/src/lib/modules/datepicker/calendar/daypicker-cell.component.spec.ts

@@ -5,8 +5,8 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SkyAppTestUtility, expect } from '@skyux-sdk/testing';
+import { provideNoopSkyAnimations } from '@skyux/core';
 
 import { SkyDatepickerModule } from '../datepicker.module';
 
@@ -81,8 +81,9 @@ describe('daypicker cell', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [],
-      imports: [SkyDatepickerModule, NoopAnimationsModule],
+      imports: [SkyDatepickerModule],
       providers: [
+        provideNoopSkyAnimations(),
         {
           provide: SkyDatepickerCalendarInnerComponent,
           useValue: calendarInnerComponent,

libs/components/forms/src/lib/modules/input-box/input-box.component.spec.ts

@@ -8,6 +8,7 @@ import {
 import { AbstractControl } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { SkyAppTestUtility, expect, expectAsync } from '@skyux-sdk/testing';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import {
   SkyHelpTestingController,
   SkyHelpTestingModule,
@@ -487,6 +488,7 @@ describe('Input box component', () => {
       TestBed.configureTestingModule({
         imports: [InputBoxFixturesModule, SkyHelpTestingModule],
         providers: [
+          provideNoopSkyAnimations(),
           {
             provide: SkyThemeService,
             useValue: mockThemeSvc,
@@ -1193,6 +1195,7 @@ describe('Input box component', () => {
       TestBed.configureTestingModule({
         imports: [InputBoxFixturesModule],
         providers: [
+          provideNoopSkyAnimations(),
           {
             provide: SkyThemeService,
             useValue: mockThemeSvc,

libs/components/popovers/package.json

@@ -16,7 +16,6 @@
   },
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
-    "@angular/animations": "^21.2.0",
     "@angular/cdk": "^21.2.0",
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",

libs/components/popovers/src/lib/modules/popover/fixtures/popover.component.fixture.ts

@@ -1,10 +1,4 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 
 import { Subject } from 'rxjs';
 
@@ -22,7 +16,7 @@ import { SkyPopoverTrigger } from '../types/popover-trigger';
   styleUrls: ['./popover.component.fixture.scss'],
   standalone: false,
 })
-export class PopoverFixtureComponent implements OnInit, AfterViewInit {
+export class PopoverFixtureComponent implements AfterViewInit {
   //#region directive properties
 
   public alignment: SkyPopoverAlignment | undefined;
@@ -74,12 +68,6 @@ export class PopoverFixtureComponent implements OnInit, AfterViewInit {
 
   public popoverType: 'info' | 'danger' | undefined;
 
-  public ngOnInit(): void {
-    if (this.popoverRef) {
-      this.popoverRef.enableAnimations = false;
-    }
-  }
-
   public ngAfterViewInit(): void {
     // Avoid expression changed after checked errors in unit tests.
     setTimeout(() => {

libs/components/popovers/src/lib/modules/popover/fixtures/popover.module.fixture.ts

@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 
 import { SkyPopoverModule } from '../popover.module';
 
 import { PopoverFixtureComponent } from './popover.component.fixture';
 
 @NgModule({
-  imports: [NoopAnimationsModule, SkyPopoverModule],
+  imports: [SkyPopoverModule],
   exports: [PopoverFixtureComponent],
   declarations: [PopoverFixtureComponent],
+  providers: [provideNoopSkyAnimations()],
 })
 export class PopoverFixturesModule {}

libs/components/popovers/src/lib/modules/popover/popover-animation-state.ts

@@ -1,16 +1,17 @@
 <div
   #popoverRef
   class="sky-popover-container sky-popover-max-height"
-  [@.disabled]="!enableAnimations"
-  [@skyPopoverAnimation]="animationState"
+  skyTransitionEndHandler
+  transitionPropertyToTrack="opacity"
   [class.sky-popover-hidden]="!placement"
   [ngClass]="[
     'sky-popover-alignment-' + horizontalAlignment,
     'sky-popover-placement-' + placement,
     'sky-popover-' + popoverType
   ]"
-  (@skyPopoverAnimation.done)="onAnimationEvent($event)"
-  (@skyPopoverAnimation.start)="onAnimationEvent($event)"
+  [class.sky-popover-visible]="isOpen()"
+  [transitionTrigger]="isOpen()"
+  (transitionEnd)="onAnimationsComplete()"
 >
   <div
     class="sky-popover"

libs/components/popovers/src/lib/modules/popover/popover-animation.ts

@@ -26,6 +26,17 @@ $popover-max-width: 276px;
         )
     )
   );
+  opacity: 0;
+  transition: opacity var(--sky-transition-time-short);
+
+  @starting-style {
+    opacity: 0;
+  }
+
+  &.sky-popover-visible {
+    opacity: 1;
+    transition-duration: var(--sky-transition-time-medium);
+  }
 
   &.sky-popover-hidden {
     visibility: hidden;