feat(modal): add zoomable image viewer

src/app/shared/components/image-modal/image-modal.component.html

@@ -0,0 +1,52 @@
+<div class="image-modal">
+  <div
+    #viewport
+    class="image-modal__viewport"
+    [class.image-modal__viewport--zoomed]="zoom() > data.minZoom"
+    (wheel)="onWheel($event)"
+    (dblclick)="onDoubleClick($event)"
+    (pointerdown)="onPointerDown($event)"
+    (pointermove)="onPointerMove($event)"
+    (pointerup)="onPointerUp($event)"
+    (pointercancel)="onPointerUp($event)"
+  >
+    @if (!imageFailed()) {
+      <img
+        #image
+        class="image-modal__image"
+        [src]="data.src"
+        [alt]="data.alt"
+        [style.transform]="transform()"
+        draggable="false"
+        (load)="onImageLoad()"
+        (error)="imageFailed.set(true)"
+      />
+    } @else {
+      <p class="image-modal__error" role="alert">No se pudo cargar la imagen.</p>
+    }
+  </div>
+
+  <div class="image-modal__controls" aria-label="Controles de zoom">
+    <button
+      type="button"
+      class="image-modal__control"
+      aria-label="Alejar"
+      [disabled]="zoom() <= data.minZoom"
+      (click)="zoomOut()"
+    >
+      &minus;
+    </button>
+    <button type="button" class="image-modal__zoom" aria-label="Restablecer zoom" (click)="reset()">
+      {{ zoomLabel() }}
+    </button>
+    <button
+      type="button"
+      class="image-modal__control"
+      aria-label="Acercar"
+      [disabled]="zoom() >= data.maxZoom"
+      (click)="zoomIn()"
+    >
+      &plus;
+    </button>
+  </div>
+</div>