tailjng 0.1.6 → 0.1.7

package/src/lib/components/viewer/viewer-image/image-viewer.component.html

@@ -1,183 +1,132 @@
-<div class="relative w-full h-full" #container>
+<div class="j-image-viewer" [ngClass]="ngClasses" #container>
   @if (hasAnyControlVisible) {
-    <div
-      class="absolute z-20 flex flex-wrap justify-end items-center gap-1 max-w-[calc(100%-16px)]"
-      [ngClass]="{
-        'top-3 right-3': isFullscreen,
-        'top-2 right-2': !isFullscreen,
-      }"
-    >
+    <div class="j-image-viewer__toolbar" [ngClass]="controlsPositionClasses">
       @if (isControlVisible(showRotateLeft)) {
         <JButton
           jTooltip="Girar a la izquierda"
-          [icon]="iconsService.icons.rotateLeft"
+          [icon]="Icons.RotateCcw"
           [iconSize]="buttonIconSize"
-          (clicked)="rotateLeftImg()"
-          [classes]="
-            'secondary rounded-lg shrink-0 opacity-30 hover:opacity-100 transition-opacity duration-200 ' +
-            buttonSizeClass
-          "
+          (clicked)="rotateLeft()"
+          [classes]="controlButtonClasses"
         />
       }
 
       @if (isControlVisible(showRotateRight)) {
         <JButton
           jTooltip="Girar a la derecha"
-          [icon]="iconsService.icons.rotateRight"
+          [icon]="Icons.RotateCw"
           [iconSize]="buttonIconSize"
-          (clicked)="rotateRightImg()"
-          [classes]="
-            'secondary rounded-lg shrink-0 opacity-30 hover:opacity-100 transition-opacity duration-200 ' +
-            buttonSizeClass
-          "
+          (clicked)="rotateRight()"
+          [classes]="controlButtonClasses"
         />
       }
 
       @if (isControlVisible(showReset)) {
         <JButton
           jTooltip="Restablecer"
-          [icon]="iconsService.icons.reset"
+          [icon]="Icons.RefreshCcw"
           [iconSize]="buttonIconSize"
-          (clicked)="reset()"
-          [classes]="
-            'secondary rounded-lg shrink-0 opacity-30 hover:opacity-100 transition-opacity duration-200 ' +
-            buttonSizeClass
-          "
+          (clicked)="resetView()"
+          [classes]="controlButtonClasses"
         />
       }
 
       @if (isControlVisible(showZoomOut)) {
         <JButton
           jTooltip="Alejar"
-          [icon]="iconsService.icons.zoomOut"
+          [icon]="Icons.ZoomOut"
           [iconSize]="buttonIconSize"
-          [disabled]="zoom === 0.5"
+          [disabled]="isZoomMin"
           (clicked)="zoomOut()"
-          [classes]="
-            'secondary rounded-lg shrink-0 opacity-30 hover:opacity-100 transition-opacity duration-200 ' +
-            buttonSizeClass
-          "
+          [classes]="controlButtonClasses"
         />
       }
 
       @if (isControlVisible(showZoomIn)) {
         <JButton
           jTooltip="Acercar"
-          [icon]="iconsService.icons.zoomIn"
+          [icon]="Icons.ZoomIn"
           [iconSize]="buttonIconSize"
-          [disabled]="zoom === 3"
+          [disabled]="isZoomMax"
           (clicked)="zoomIn()"
-          [classes]="
-            'secondary rounded-lg shrink-0 opacity-30 hover:opacity-100 transition-opacity duration-200 ' +
-            buttonSizeClass
-          "
+          [classes]="controlButtonClasses"
         />
       }
 
       @if (isControlVisible(showDownload)) {
         <JButton
           jTooltip="Descargar"
-          [icon]="iconsService.icons.download"
+          [icon]="Icons.Download"
           [iconSize]="buttonIconSize"
           (clicked)="download()"
           [isLoading]="isDownloading"
-          [classes]="
-            'secondary rounded-lg shrink-0 opacity-30 hover:opacity-100 transition-opacity duration-200 ' +
-            buttonSizeClass
-          "
+          [classes]="controlButtonClasses"
         />
       }
 
       @if (isControlVisible(showFullscreen)) {
         <JButton
           jTooltip="Pantalla completa"
-          [icon]="
-            isFullscreen
-              ? iconsService.icons.exitFullscreen
-              : iconsService.icons.fullscreen
-          "
+          [icon]="fullscreenIcon"
           [iconSize]="buttonIconSize"
           (clicked)="toggleFullscreen(container)"
-          [classes]="
-            'secondary rounded-lg shrink-0 opacity-30 hover:opacity-100 transition-opacity duration-200 ' +
-            buttonSizeClass
-          "
+          [classes]="controlButtonClasses"
         />
       }
     </div>
   }
 
-  <div
-    class="flex justify-center items-center w-full h-full select-none"
-    [class.fullscreen]="isFullscreen"
-  >
-    <div class="relative w-full h-full overflow-hidden">
+  <div class="j-image-viewer__stage" [class.j-image-viewer__stage--fullscreen]="isFullscreen">
+    <div class="j-image-viewer__canvas">
       @if (hasImage && !hasError) {
         <img
           [src]="src"
           [alt]="alt"
-          (load)="handleLoad()"
-          (error)="handleError()"
+          (load)="onImageLoad()"
+          (error)="onImageError()"
           (mousedown)="startDrag($event)"
-          [style.transform]="
-            'scale(' +
-            zoom +
-            ') rotate(' +
-            rotate +
-            'deg) translate(' +
-            posX +
-            'px,' +
-            posY +
-            'px)'
-          "
-          [style.objectFit]="objectFit"
+          [style.transform]="imageTransform"
+          [style.object-fit]="objectFit"
           [style.cursor]="zoom > 1 ? 'grab' : 'default'"
-          [class.invisible]="loading"
-          [class.transition-transform]="animateTransform"
-          [class.duration-200]="animateTransform"
-          [class.ease-in-out]="animateTransform"
-          class="w-full h-full object-contain pointer-events-auto select-none"
+          [ngClass]="imageClasses"
         />
       }
 
       @if (hasImage && loading && !hasError) {
-        <div
-          class="absolute flex flex-col gap-3 inset-0 items-center justify-center bg-white/70 dark:bg-black/40"
-        >
-          <lucide-icon
-            [name]="iconsService.icons.loading"
-            size="30"
-            class="text-primary animate-spin"
-          ></lucide-icon>
-          <span class="text-sm text-gray-500">Cargando imagen...</span>
+        <div class="j-image-viewer__overlay j-image-viewer__overlay--loading">
+          <JIcon
+            [icon]="Icons.Loader2"
+            [size]="30"
+            iconClass="animate-spin text-primary dark:text-dark-primary"
+            [ariaHidden]="true"
+          />
+          <span class="j-image-viewer__message">Cargando imagen...</span>
         </div>
       }
 
       @if (!hasImage) {
-        <div
-          class="absolute flex flex-col gap-3 inset-0 items-center justify-center"
-        >
-          <lucide-icon
-            [name]="iconsService.icons.imageOff"
-            size="30"
-            class="text-gray-400"
+        <div class="j-image-viewer__overlay">
+          <JIcon
+            [icon]="Icons.ImageOff"
+            [size]="30"
+            iconClass="text-muted-foreground"
+            [ariaHidden]="true"
           />
-          <span class="text-sm text-gray-500 dark:text-gray-400">
-            {{ emptyMessage }}
-          </span>
+          <span class="j-image-viewer__message">{{ emptyMessage }}</span>
         </div>
       }
 
       @if (hasImage && hasError) {
-        <div
-          class="absolute flex flex-col gap-3 inset-0 items-center justify-center"
-        >
-          <lucide-icon
-            [name]="iconsService.icons.imageOff"
-            size="30"
-            class="text-red-500"
+        <div class="j-image-viewer__overlay">
+          <JIcon
+            [icon]="Icons.ImageOff"
+            [size]="30"
+            iconClass="text-destructive"
+            [ariaHidden]="true"
           />
-          <span class="text-sm text-red-500">No se pudo cargar la imagen</span>
+          <span class="j-image-viewer__message j-image-viewer__message--error">
+            No se pudo cargar la imagen
+          </span>
         </div>
       }
     </div>