fix(components/layout)!: replace @angular/animations in text expand repeater component with CSS transitions (#4317)

BREAKING CHANGE

`SkyTextExpandRepeaterComponent` has replaced `@angular/animations` with
CSS transitions. Tests that interact with text expand repeater 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/layout/text-expand-repeater/example.component.spec.ts

@@ -1,6 +1,6 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyTextExpandRepeaterHarness } from '@skyux/layout/testing';
 
 import { LayoutTextExpandRepeaterExampleComponent } from './example.component';
@@ -14,7 +14,8 @@ describe('Text expand inline example', () => {
     textExpandRepeaterHarness: SkyTextExpandRepeaterHarness;
   }> {
     await TestBed.configureTestingModule({
-      imports: [LayoutTextExpandRepeaterExampleComponent, NoopAnimationsModule],
+      imports: [LayoutTextExpandRepeaterExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(

libs/components/layout/src/lib/modules/text-expand-repeater/fixtures/text-expand-repeater.component.fixture.html

@@ -1,20 +1,18 @@
-<div [@.disabled]="true">
-  <sky-text-expand-repeater
-    [data]="data"
-    [maxItems]="numItems"
-    [listStyle]="listStyle"
-  />
+<sky-text-expand-repeater
+  [data]="data"
+  [maxItems]="numItems"
+  [listStyle]="listStyle"
+/>
 
-  <sky-text-expand-repeater
-    [data]="customTemplateData"
-    [itemTemplate]="myTemplate"
-    [maxItems]="numItems"
-    [listStyle]="listStyle"
-  >
-    <ng-template #myTemplate let-item>
-      <div class="sky-test-custom-template">
-        {{ item.text }} {{ item.number }}
-      </div>
-    </ng-template>
-  </sky-text-expand-repeater>
-</div>
+<sky-text-expand-repeater
+  [data]="customTemplateData"
+  [itemTemplate]="myTemplate"
+  [maxItems]="numItems"
+  [listStyle]="listStyle"
+>
+  <ng-template #myTemplate let-item>
+    <div class="sky-test-custom-template">
+      {{ item.text }} {{ item.number }}
+    </div>
+  </ng-template>
+</sky-text-expand-repeater>

libs/components/layout/src/lib/modules/text-expand-repeater/fixtures/text-expand-repeater.module.fixture.ts

@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { SkyTextExpandRepeaterModule } from '../text-expand-repeater.module';
 
 import { TextExpandRepeaterTestComponent } from './text-expand-repeater.component.fixture';
 
 @NgModule({
-  imports: [NoopAnimationsModule, SkyTextExpandRepeaterModule],
+  imports: [SkyTextExpandRepeaterModule],
   exports: [TextExpandRepeaterTestComponent],
   declarations: [TextExpandRepeaterTestComponent],
 })

libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater-adapter.service.ts

@@ -37,4 +37,12 @@ export class SkyTextExpandRepeaterAdapterService {
   public removeContainerMaxHeight(containerEl: ElementRef): void {
     this.#renderer.removeStyle(containerEl.nativeElement, 'max-height');
   }
+
+  public setContainerMaxHeight(containerEl: ElementRef, height: number): void {
+    this.#renderer.setStyle(
+      containerEl.nativeElement,
+      'max-height',
+      `${height}px`,
+    );
+  }
 }

libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater.component.html

@@ -3,28 +3,26 @@
     <ul
       #container
       class="sky-text-expand-repeater-container"
-      [@expansionAnimation]="{
-        value: isExpanded(),
-        params: { transitionHeight: transitionHeight }
-      }"
+      skyTransitionEndHandler
+      transitionPropertyToTrack="max-height"
+      [transitionTrigger]="isExpanded()"
       [id]="contentSectionId"
       [ngClass]="{
         'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'
       }"
-      (@expansionAnimation.done)="animationEnd()"
+      (transitionEnd)="animationEnd()"
     >
       <ng-template [ngTemplateOutlet]="listItemTemplate" />
     </ul>
   } @else {
     <ol
       #container
       class="sky-text-expand-repeater-container"
-      [@expansionAnimation]="{
-        value: isExpanded(),
-        params: { transitionHeight: transitionHeight }
-      }"
+      skyTransitionEndHandler
+      transitionPropertyToTrack="max-height"
+      [transitionTrigger]="isExpanded()"
       [id]="contentSectionId"
-      (@expansionAnimation.done)="animationEnd()"
+      (transitionEnd)="animationEnd()"
     >
       <ng-template [ngTemplateOutlet]="listItemTemplate" />
     </ol>

libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater.component.scss

@@ -7,6 +7,9 @@
   height: auto;
   margin-bottom: 0;
   margin-top: 0;
+  transition-duration: var(--sky-transition-time-medium);
+  transition-property: max-height;
+  transition-timing-function: ease;
 }
 .sky-text-expand-repeater-see-more {
   white-space: nowrap;

libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { expect, expectAsync } from '@skyux-sdk/testing';
+import { provideNoopSkyAnimations } from '@skyux/core';
 
 import { TextExpandRepeaterTestComponent } from './fixtures/text-expand-repeater.component.fixture';
 import { TextExpandRepeaterFixturesModule } from './fixtures/text-expand-repeater.module.fixture';
@@ -20,6 +21,7 @@ describe('Text expand repeater component', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [TextExpandRepeaterFixturesModule],
+      providers: [provideNoopSkyAnimations()],
     });
 
     fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);

libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater.component.ts

@@ -1,10 +1,3 @@
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
 import {
   ChangeDetectorRef,
   Component,
@@ -30,28 +23,6 @@ import { SkyTextExpandRepeaterListStyleType } from './types/text-expand-repeater
 let nextId = 0;
 
 @Component({
-  animations: [
-    trigger('expansionAnimation', [
-      transition(':enter', []),
-      state(
-        'true',
-        style({
-          maxHeight: '{{transitionHeight}}px',
-        }),
-        { params: { transitionHeight: 0 } },
-      ),
-      state(
-        'false',
-        style({
-          maxHeight: '{{transitionHeight}}px',
-        }),
-        { params: { transitionHeight: 0 } },
-      ),
-      transition('true => false', animate('250ms ease')),
-      transition('false => true', animate('250ms ease')),
-      transition('void => *', []),
-    ]),
-  ],
   selector: 'sky-text-expand-repeater',
   templateUrl: './text-expand-repeater.component.html',
   styleUrls: ['./text-expand-repeater.component.scss'],
@@ -88,7 +59,6 @@ export class SkyTextExpandRepeaterComponent<TData = unknown> {
   public contentSectionId = `sky-text-expand-repeater-content-${++nextId}`;
 
   protected readonly isExpanded = signal(false);
-  protected transitionHeight = 1;
 
   readonly #resources = inject(SkyLibResourcesService);
   readonly #seeMoreText = toSignal(
@@ -131,19 +101,16 @@ export class SkyTextExpandRepeaterComponent<TData = unknown> {
   }
 
   public animationEnd(): void {
-    // Ensure all items that should be hidden are hidden. This is because we need them shown during the animation window for visual purposes.
+    // Ensure all items that should be hidden are hidden.
     if (!this.isExpanded()) {
       this.#hideItems();
     }
 
-    // This set timeout is needed as the `animationEnd` function is called by the angular animation callback prior to the animation setting the style on the element
-    setTimeout(() => {
-      const containerEl = this.containerEl();
-      if (containerEl) {
-        // Set height back to auto so the browser can change the height as needed with window changes
-        this.#textExpandRepeaterAdapter.removeContainerMaxHeight(containerEl);
-      }
-    });
+    const containerEl = this.containerEl();
+    if (containerEl) {
+      // Set height back to auto so the browser can change the height as needed with window changes
+      this.#textExpandRepeaterAdapter.removeContainerMaxHeight(containerEl);
+    }
   }
 
   public repeaterExpand(): void {
@@ -158,22 +125,39 @@ export class SkyTextExpandRepeaterComponent<TData = unknown> {
     const adapter = this.#textExpandRepeaterAdapter;
     const container = this.containerEl();
     if (container) {
+      const containerNative = container.nativeElement;
+
+      // Lock at current height as the transition starting point.
+      const currentHeight = adapter.getContainerHeight(container);
+      adapter.setContainerMaxHeight(container, currentHeight);
+
       if (expanding) {
         this.#showItems();
       } else {
         this.#hideItems();
       }
-      this.transitionHeight = adapter.getContainerHeight(container);
+
+      // Measure the target height.
+      const targetHeight = expanding
+        ? containerNative.scrollHeight
+        : adapter.getContainerHeight(container);
+
       if (!expanding) {
         // Show all items during animation for visual purposes.
         this.#showItems();
       }
+
+      // Force reflow so the browser registers the starting max-height.
+      containerNative.getBoundingClientRect();
+
+      // Set the target max-height to trigger the CSS transition.
+      adapter.setContainerMaxHeight(container, targetHeight);
+
       this.isExpanded.set(expanding);
     }
   }
 
   #setup(): void {
-    const container = this.containerEl();
     const maxItems = this.maxItems();
     const value = this.trackedData();
     this.expandable = false;
@@ -183,10 +167,6 @@ export class SkyTextExpandRepeaterComponent<TData = unknown> {
       if (maxItems && length > maxItems) {
         this.expandable = true;
         this.#hideItems();
-        if (container) {
-          this.transitionHeight =
-            this.#textExpandRepeaterAdapter.getContainerHeight(container);
-        }
       }
     }
     this.#changeDetector.detectChanges();

libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater.module.ts

@@ -1,13 +1,18 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { _SkyTransitionEndHandlerDirective } from '@skyux/core';
 
 import { SkyLayoutResourcesModule } from '../shared/sky-layout-resources.module';
 
 import { SkyTextExpandRepeaterComponent } from './text-expand-repeater.component';
 
 @NgModule({
   declarations: [SkyTextExpandRepeaterComponent],
-  imports: [SkyLayoutResourcesModule, CommonModule],
+  imports: [
+    SkyLayoutResourcesModule,
+    CommonModule,
+    _SkyTransitionEndHandlerDirective,
+  ],
   exports: [SkyTextExpandRepeaterComponent],
 })
 export class SkyTextExpandRepeaterModule {}

libs/components/layout/testing/src/modules/text-expand-repeater/text-expand-repeater-harness.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 { TextExpandRepeaterHarnessTestComponent } from './fixtures/text-expand-repeater-harness-test.component';
 import { SkyTextExpandRepeaterHarness } from './text-expand-repeater-harness';
@@ -15,7 +15,8 @@ describe('Text expand repeater test harness', () => {
     fixture: ComponentFixture<TextExpandRepeaterHarnessTestComponent>;
   }> {
     await TestBed.configureTestingModule({
-      imports: [TextExpandRepeaterHarnessTestComponent, NoopAnimationsModule],
+      imports: [TextExpandRepeaterHarnessTestComponent],
+      providers: [provideNoopSkyAnimations()],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(