Merge branch 'main' into text-expand-animations

Author: Blackbaud-SteveBrush

libs/components/code-examples/src/lib/modules/inline-form/inline-form/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 { SkyInlineFormHarness } from '@skyux/inline-form/testing';
 
 import { InlineFormBasicExampleComponent } from './example.component';
@@ -11,7 +11,8 @@ describe('Inline form basic demo', () => {
     fixture: ComponentFixture<InlineFormBasicExampleComponent>;
   }> {
     await TestBed.configureTestingModule({
-      imports: [InlineFormBasicExampleComponent, NoopAnimationsModule],
+      imports: [InlineFormBasicExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(InlineFormBasicExampleComponent);

libs/components/code-examples/src/lib/modules/inline-form/inline-form/custom-buttons/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 { SkyInlineFormHarness } from '@skyux/inline-form/testing';
 
 import { InlineFormCustomButtonsExampleComponent } from './example.component';
@@ -11,7 +11,8 @@ describe('Inline form custom button demo', () => {
     fixture: ComponentFixture<InlineFormCustomButtonsExampleComponent>;
   }> {
     await TestBed.configureTestingModule({
-      imports: [InlineFormCustomButtonsExampleComponent, NoopAnimationsModule],
+      imports: [InlineFormCustomButtonsExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(

libs/components/code-examples/src/lib/modules/inline-form/inline-form/repeaters/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 { SkyInlineFormHarness } from '@skyux/inline-form/testing';
 import { SkyRepeaterHarness } from '@skyux/lists/testing';
 
@@ -13,7 +13,8 @@ describe('Inline form with repeater demo', () => {
     fixture: ComponentFixture<InlineFormRepeatersExampleComponent>;
   }> {
     await TestBed.configureTestingModule({
-      imports: [InlineFormRepeatersExampleComponent, NoopAnimationsModule],
+      imports: [InlineFormRepeatersExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     }).compileComponents();
 
     const fixture = TestBed.createComponent(

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/inline-form/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/inline-form/src/lib/modules/inline-form/animations/slide-dissolve.ts

@@ -1,30 +1,31 @@
-<div [@skySlideDissolve]="showForm">
-  @if (!showForm) {
-    <div class="sky-slide-dissolve-first">
-      <ng-content />
-    </div>
-  } @else if (template) {
-    <div class="sky-slide-dissolve-last">
-      <div
-        class="sky-inline-form sky-shadow sky-box sky-elevation-1-bordered sky-padding-even-md"
-      >
-        <div class="sky-inline-form-content">
-          <ng-container [ngTemplateOutlet]="template" />
-        </div>
-        <div class="sky-inline-form-footer">
-          @for (button of buttons; track button.text) {
-            <button
-              class="sky-btn {{ 'sky-btn-' + button.styleType }}"
-              type="button"
-              [disabled]="button.disabled ? true : null"
-              [ngClass]="{ 'sky-btn-disabled': button.disabled }"
-              (click)="closeInlineForm(button)"
-            >
-              {{ button.text }}
-            </button>
-          }
-        </div>
+@if (!showForm) {
+  <div class="sky-slide-dissolve-first">
+    <ng-content />
+  </div>
+} @else if (template) {
+  <div
+    class="sky-slide-dissolve-last"
+    animate.leave="sky-slide-dissolve-leaving"
+  >
+    <div
+      class="sky-inline-form sky-shadow sky-box sky-elevation-1-bordered sky-padding-even-md"
+    >
+      <div class="sky-inline-form-content">
+        <ng-container [ngTemplateOutlet]="template" />
+      </div>
+      <div class="sky-inline-form-footer">
+        @for (button of buttons; track button.text) {
+          <button
+            class="sky-btn {{ 'sky-btn-' + button.styleType }}"
+            type="button"
+            [disabled]="button.disabled ? true : null"
+            [ngClass]="{ 'sky-btn-disabled': button.disabled }"
+            (click)="closeInlineForm(button)"
+          >
+            {{ button.text }}
+          </button>
+        }
       </div>
     </div>
-  }
-</div>
+  </div>
+}

libs/components/inline-form/src/lib/modules/inline-form/inline-form.component.html

@@ -54,3 +54,51 @@
     }
   }
 }
+
+// When the read-only content re-enters after closing the form, fade it in.
+.sky-slide-dissolve-first {
+  @starting-style {
+    opacity: 0;
+  }
+
+  transition-property: opacity;
+  transition-duration: var(--sky-transition-time-short);
+  transition-timing-function: ease-in;
+}
+
+// When the form enters, expand height first, then fade in opacity (sequential).
+// When the form leaves, snap opacity to 0 immediately, then collapse height.
+.sky-slide-dissolve-last {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+
+  // On enter: height expands (no delay), then opacity fades in after height finishes.
+  // On leave (.sky-slide-dissolve-leaving): overrides below snap opacity and collapse height.
+  transition-property: grid-template-rows, opacity;
+  transition-duration:
+    var(--sky-transition-time-medium), var(--sky-transition-time-medium);
+  transition-timing-function: ease-in, ease-in;
+  transition-delay: 0ms, var(--sky-transition-time-medium);
+
+  @starting-style {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+
+  > .sky-inline-form {
+    min-height: 0;
+    overflow: hidden;
+  }
+}
+
+.sky-slide-dissolve-leaving {
+  grid-template-rows: 0fr;
+  opacity: 0;
+
+  // Snap opacity immediately; height collapses while already invisible.
+  transition-property: grid-template-rows, opacity;
+  transition-duration: var(--sky-transition-time-medium), 0ms;
+  transition-timing-function: ease-in, ease-in;
+  transition-delay: 0ms, 0ms;
+}