Show new page earlier on page flip, add error feedback for wrong inputs

Author: Tugark

libs/client-shared/src/lib/components/pdf-viewer/pdf-viewer-navigation/pdf-viewer-navigation.component.html

@@ -22,12 +22,15 @@
       <input
         #pageInput
         class="navigation__page-input"
+        [class.navigation__page-input--invalid]="showError()"
         type="text"
         inputmode="numeric"
         [value]="currentPage()"
         (keydown.enter)="onPageInputSubmit(pageInput)"
         (blur)="resetInputValue(pageInput)"
         [disabled]="disableInteractions()"
+        [@shake]="showError()"
+        (@shake.done)="onShakeDone()"
       />
       <span>/ {{ pageCount() }}</span>
     } @else {

libs/client-shared/src/lib/components/pdf-viewer/pdf-viewer-navigation/pdf-viewer-navigation.component.scss

@@ -29,5 +29,10 @@
       opacity: 0.5;
       cursor: not-allowed;
     }
+
+    &--invalid {
+      border-color: var(--sgc-color-error, #d32f2f);
+      background-color: var(--sgc-color-error-bg, #fdecea);
+    }
   }
 }

libs/client-shared/src/lib/components/pdf-viewer/pdf-viewer-navigation/pdf-viewer-navigation.component.ts

@@ -1,5 +1,6 @@
+import { animate, keyframes, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
-import { Component, input, output } from '@angular/core';
+import { Component, input, output, signal } from '@angular/core';
 import { SgcButton, SgcIcon } from '@swissgeol/ui-core-angular';
 
 export type PdfNavigationAction = 'next' | 'previous' | 'start' | 'end';
@@ -8,13 +9,31 @@ export type PdfNavigationAction = 'next' | 'previous' | 'start' | 'end';
   imports: [CommonModule, SgcButton, SgcIcon],
   templateUrl: './pdf-viewer-navigation.component.html',
   styleUrl: './pdf-viewer-navigation.component.scss',
+  animations: [
+    trigger('shake', [
+      transition('false => true', [
+        animate(
+          '0.4s ease-in-out',
+          keyframes([
+            style({ transform: 'translateX(0)', offset: 0 }),
+            style({ transform: 'translateX(-4px)', offset: 0.2 }),
+            style({ transform: 'translateX(4px)', offset: 0.4 }),
+            style({ transform: 'translateX(-3px)', offset: 0.6 }),
+            style({ transform: 'translateX(3px)', offset: 0.8 }),
+            style({ transform: 'translateX(0)', offset: 1 }),
+          ]),
+        ),
+      ]),
+    ]),
+  ],
 })
 export class PdfViewerNavigationComponent {
   public readonly currentPage = input<number | undefined>();
   public readonly pageCount = input<number | undefined>();
   public readonly disableInteractions = input(false);
   public readonly navigate = output<PdfNavigationAction>();
   public readonly goToPage = output<number>();
+  protected readonly showError = signal(false);
 
   protected handleNavigate(action: PdfNavigationAction) {
     this.navigate.emit(action);
@@ -24,12 +43,18 @@ export class PdfViewerNavigationComponent {
     const trimmed = input.value.trim();
     const count = this.pageCount();
     const page = /^\d+$/.test(trimmed) ? Number.parseInt(trimmed, 10) : Number.NaN;
+    input.blur();
+
     if (!Number.isNaN(page) && count != null && page >= 1 && page <= count) {
+      input.value = page.toString();
       this.goToPage.emit(page);
     } else {
-      this.resetInputValue(input);
+      this.showError.set(true);
     }
-    input.blur();
+  }
+
+  protected onShakeDone() {
+    this.showError.set(false);
   }
 
   protected resetInputValue(input: HTMLInputElement) {

libs/client-shared/src/lib/components/pdf-viewer/pdf-viewer.component.ts

@@ -288,6 +288,7 @@ export class PdfViewerComponent implements OnDestroy {
 
   private async renderPage(pageNum: number, center?: PdfPageWrapperCenter) {
     this.isRendering.set(true);
+    this.currentPage.set(pageNum);
     for (const canvas of this.pdfCanvasElements.values()) {
       this.renderer.setStyle(canvas.parentElement, 'display', 'none');
     }
@@ -296,7 +297,6 @@ export class PdfViewerComponent implements OnDestroy {
       await this.renderPageAndCache(pageNum, center);
     }
 
-    this.currentPage.set(pageNum);
     this.isRendering.set(false);
   }