feat(image-modal): enhance swipe-to-dismiss functionality with settling animation

src/app/shared/components/image-modal/image-modal.component.spec.ts

@@ -92,14 +92,37 @@ describe('ImageModalComponent', () => {
 
   it('dismisses with a downward swipe while the image is at its base zoom', () => {
     const viewport = fixture.nativeElement.querySelector('.image-modal__viewport') as HTMLElement;
+    const modal = fixture.nativeElement.querySelector('.image-modal') as HTMLElement;
 
     viewport.dispatchEvent(pointerEvent('pointerdown', 1, 150, 100));
     viewport.dispatchEvent(pointerEvent('pointermove', 1, 155, 230));
+    fixture.detectChanges();
+
+    expect(modal.style.transform).toBe('translate3d(0, 130px, 0)');
+    expect(Number(modal.style.opacity)).toBeLessThan(1);
+
     viewport.dispatchEvent(pointerEvent('pointerup', 1, 155, 230));
 
     expect(modalRef.dismiss).toHaveBeenCalledWith('swipe');
   });
 
+  it('returns smoothly to its position when the swipe is too short', () => {
+    const viewport = fixture.nativeElement.querySelector('.image-modal__viewport') as HTMLElement;
+    const modal = fixture.nativeElement.querySelector('.image-modal') as HTMLElement;
+
+    viewport.dispatchEvent(pointerEvent('pointerdown', 1, 150, 100));
+    viewport.dispatchEvent(pointerEvent('pointermove', 1, 150, 160));
+    fixture.detectChanges();
+    expect(modal.style.transform).toBe('translate3d(0, 60px, 0)');
+
+    viewport.dispatchEvent(pointerEvent('pointerup', 1, 150, 160));
+    fixture.detectChanges();
+
+    expect(modalRef.dismiss).not.toHaveBeenCalled();
+    expect(modal.classList.contains('image-modal--settling')).toBe(true);
+    expect(modal.style.transform).toBe('translate3d(0, 0px, 0)');
+  });
+
   it('does not dismiss with a downward gesture while the image is zoomed', () => {
     const element = fixture.nativeElement as HTMLElement;
     const viewport = element.querySelector('.image-modal__viewport') as HTMLElement;