tailjng 0.1.7 → 0.1.8

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

@@ -4,67 +4,6 @@
   height: 100%;
 }
 
-.j-image-viewer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.j-image-viewer__toolbar {
-  position: absolute;
-  z-index: 20;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.25rem;
-  max-width: calc(100% - 1rem);
-}
-
-.j-image-viewer__stage {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-}
-
-.j-image-viewer__stage--fullscreen {
-  background-color: var(--color-background);
-}
-
-:host-context(.dark) .j-image-viewer__stage--fullscreen,
-:host-context(html.dark) .j-image-viewer__stage--fullscreen {
-  background-color: var(--color-dark-background);
-}
-
-.j-image-viewer__canvas {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.j-image-viewer__image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  pointer-events: auto;
-  user-select: none;
-  -webkit-user-drag: none;
-}
-
-.j-image-viewer__overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-}
-
 .j-image-viewer__overlay--loading {
   background-color: color-mix(in srgb, var(--color-background) 70%, transparent);
 }
@@ -73,18 +12,3 @@
 :host-context(html.dark) .j-image-viewer__overlay--loading {
   background-color: color-mix(in srgb, var(--color-dark-background) 55%, transparent);
 }
-
-.j-image-viewer__message {
-  font-size: 0.875rem;
-  line-height: 1.25;
-  color: var(--color-muted-foreground);
-}
-
-:host-context(.dark) .j-image-viewer__message,
-:host-context(html.dark) .j-image-viewer__message {
-  color: var(--color-dark-muted-foreground);
-}
-
-.j-image-viewer__message--error {
-  color: var(--color-destructive);
-}

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

@@ -1,6 +1,9 @@
-<div class="j-image-viewer" [ngClass]="ngClasses" #container>
+<div class="relative h-full w-full" [ngClass]="ngClasses" #container>
   @if (hasAnyControlVisible) {
-    <div class="j-image-viewer__toolbar" [ngClass]="controlsPositionClasses">
+    <div
+      class="absolute z-20 flex max-w-[calc(100%-1rem)] flex-wrap items-center justify-end gap-1"
+      [ngClass]="controlsPositionClasses"
+    >
       @if (isControlVisible(showRotateLeft)) {
         <JButton
           jTooltip="Girar a la izquierda"
@@ -76,10 +79,14 @@
     </div>
   }
 
-  <div class="j-image-viewer__stage" [class.j-image-viewer__stage--fullscreen]="isFullscreen">
-    <div class="j-image-viewer__canvas">
+  <div
+    class="flex h-full w-full select-none items-center justify-center"
+    [ngClass]="{ 'bg-background dark:bg-dark-background': isFullscreen }"
+  >
+    <div class="relative h-full w-full overflow-hidden">
       @if (hasImage && !hasError) {
         <img
+          class="pointer-events-auto h-full w-full select-none [-webkit-user-drag:none]"
           [src]="src"
           [alt]="alt"
           (load)="onImageLoad()"
@@ -93,38 +100,48 @@
       }
 
       @if (hasImage && loading && !hasError) {
-        <div class="j-image-viewer__overlay j-image-viewer__overlay--loading">
+        <div
+          class="j-image-viewer__overlay--loading absolute inset-0 flex flex-col items-center justify-center gap-3"
+        >
           <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>
+          <span
+            class="text-sm leading-tight text-muted-foreground dark:text-dark-muted-foreground"
+          >
+            Cargando imagen...
+          </span>
         </div>
       }
 
       @if (!hasImage) {
-        <div class="j-image-viewer__overlay">
+        <div class="absolute inset-0 flex flex-col items-center justify-center gap-3">
           <JIcon
             [icon]="Icons.ImageOff"
             [size]="30"
             iconClass="text-muted-foreground"
             [ariaHidden]="true"
           />
-          <span class="j-image-viewer__message">{{ emptyMessage }}</span>
+          <span
+            class="text-sm leading-tight text-muted-foreground dark:text-dark-muted-foreground"
+          >
+            {{ emptyMessage }}
+          </span>
         </div>
       }
 
       @if (hasImage && hasError) {
-        <div class="j-image-viewer__overlay">
+        <div class="absolute inset-0 flex flex-col items-center justify-center gap-3">
           <JIcon
             [icon]="Icons.ImageOff"
             [size]="30"
             iconClass="text-destructive"
             [ariaHidden]="true"
           />
-          <span class="j-image-viewer__message j-image-viewer__message--error">
+          <span class="text-sm leading-tight text-destructive">
             No se pudo cargar la imagen
           </span>
         </div>

package/src/lib/components/viewer/viewer-pdf/pdf-viewer.component.css

@@ -4,125 +4,7 @@
   height: 100%;
 }
 
-.j-pdf-viewer {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 18.75rem;
-}
-
-.j-pdf-viewer__frame {
-  display: block;
-  width: 100%;
-  height: 100%;
-  min-height: 18.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  background-color: var(--color-background);
-}
-
-:host-context(.dark) .j-pdf-viewer__frame,
-:host-context(html.dark) .j-pdf-viewer__frame {
-  border-color: var(--color-dark-border);
-  background-color: var(--color-dark-background);
-}
-
-.j-pdf-viewer__frame--mobile {
-  min-height: 60vh;
-  border-radius: 0.75rem 0.75rem 0 0;
-}
-
-.j-pdf-viewer__fallback,
-.j-pdf-viewer__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  padding: 1.5rem;
-  text-align: center;
-  border: 1px dashed var(--color-border);
-  border-radius: 0.75rem;
-  min-height: 18.75rem;
-}
-
-:host-context(.dark) .j-pdf-viewer__fallback,
-:host-context(.dark) .j-pdf-viewer__empty,
-:host-context(html.dark) .j-pdf-viewer__fallback,
-:host-context(html.dark) .j-pdf-viewer__empty {
-  border-color: var(--color-dark-border);
-}
-
-.j-pdf-viewer__fallback {
-  display: none;
-}
-
-.j-pdf-viewer__fallback-title,
-.j-pdf-viewer__mobile-title {
-  margin: 0;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--color-foreground);
-}
-
-:host-context(.dark) .j-pdf-viewer__fallback-title,
-:host-context(.dark) .j-pdf-viewer__mobile-title,
-:host-context(html.dark) .j-pdf-viewer__fallback-title,
-:host-context(html.dark) .j-pdf-viewer__mobile-title {
-  color: var(--color-dark-foreground);
-}
-
-.j-pdf-viewer__fallback-text,
-.j-pdf-viewer__mobile-text,
-.j-pdf-viewer__message {
-  margin: 0;
-  font-size: 0.8125rem;
-  line-height: 1.45;
-  color: var(--color-muted-foreground);
-  max-width: 20rem;
-}
-
-:host-context(.dark) .j-pdf-viewer__fallback-text,
-:host-context(.dark) .j-pdf-viewer__mobile-text,
-:host-context(.dark) .j-pdf-viewer__message,
-:host-context(html.dark) .j-pdf-viewer__fallback-text,
-:host-context(html.dark) .j-pdf-viewer__mobile-text,
-:host-context(html.dark) .j-pdf-viewer__message {
-  color: var(--color-dark-muted-foreground);
-}
-
-.j-pdf-viewer__actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.j-pdf-viewer__actions--stacked {
-  flex-direction: column;
-  width: 100%;
-  max-width: 16rem;
-}
-
-.j-pdf-viewer__mobile {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
-  height: 100%;
-}
-
 .j-pdf-viewer__mobile-card {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.875rem;
-  padding: 1.25rem;
-  text-align: center;
   border: 1px solid var(--color-border);
   border-radius: 0.75rem;
   background: linear-gradient(
@@ -141,37 +23,3 @@
     var(--color-dark-background) 100%
   );
 }
-
-.j-pdf-viewer__mobile-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.j-pdf-viewer__mobile-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.625rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-top: 0;
-  border-radius: 0 0 0.75rem 0.75rem;
-  background-color: var(--color-background);
-}
-
-:host-context(.dark) .j-pdf-viewer__mobile-bar,
-:host-context(html.dark) .j-pdf-viewer__mobile-bar {
-  border-color: var(--color-dark-border);
-  background-color: var(--color-dark-background);
-}
-
-@media (max-width: 767px) {
-  .j-pdf-viewer {
-    min-height: 14rem;
-  }
-
-  .j-pdf-viewer__frame {
-    min-height: 14rem;
-  }
-}

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

@@ -1,39 +1,58 @@
-<div class="j-pdf-viewer" [ngClass]="ngClasses">
+<div
+  class="flex h-full min-h-[18.75rem] w-full flex-col max-md:min-h-56"
+  [ngClass]="ngClasses"
+>
   @if (!hasUrl) {
-    <div class="j-pdf-viewer__empty">
+    <div
+      class="flex min-h-[18.75rem] flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border p-6 text-center max-md:min-h-56 dark:border-dark-border"
+    >
       <JIcon
         [icon]="Icons.CircleAlert"
         [size]="32"
         iconClass="text-muted-foreground"
         [ariaHidden]="true"
       />
-      <p class="j-pdf-viewer__message">{{ emptyMessage }}</p>
+      <p
+        class="m-0 max-w-80 text-[0.8125rem] leading-[1.45] text-muted-foreground dark:text-dark-muted-foreground"
+      >
+        {{ emptyMessage }}
+      </p>
     </div>
   } @else if (showDesktopEmbed) {
     <iframe
-      class="j-pdf-viewer__frame"
+      class="block h-full min-h-[18.75rem] w-full rounded-xl border border-border bg-background max-md:min-h-56 dark:border-dark-border dark:bg-dark-background"
       [src]="safeUrl"
       [title]="documentTitle"
       loading="lazy"
     ></iframe>
   } @else if (useMobileLayout) {
-    <div class="j-pdf-viewer__mobile">
+    <div class="flex h-full w-full flex-col gap-0">
       @if (showMobileActions) {
-        <div class="j-pdf-viewer__mobile-card">
+        <div
+          class="j-pdf-viewer__mobile-card flex flex-1 flex-col items-center justify-center gap-3.5 p-5 text-center"
+        >
           <JIcon
             [icon]="Icons.FileUp"
             [size]="36"
             iconClass="text-primary dark:text-dark-primary"
             [ariaHidden]="true"
           />
-          <div class="j-pdf-viewer__mobile-copy">
-            <h3 class="j-pdf-viewer__mobile-title">{{ documentTitle }}</h3>
-            <p class="j-pdf-viewer__mobile-text">
+          <div class="flex flex-col gap-1.5">
+            <h3
+              class="m-0 text-[0.9375rem] font-semibold text-foreground dark:text-dark-foreground"
+            >
+              {{ documentTitle }}
+            </h3>
+            <p
+              class="m-0 max-w-80 text-[0.8125rem] leading-[1.45] text-muted-foreground dark:text-dark-muted-foreground"
+            >
               En móvil, abre el PDF en el visor del sistema para navegar y hacer zoom con
               mejor experiencia.
             </p>
           </div>
-          <div class="j-pdf-viewer__actions j-pdf-viewer__actions--stacked">
+          <div
+            class="flex w-full max-w-64 flex-col flex-wrap items-center justify-center gap-2"
+          >
             <JButton
               [text]="'Abrir PDF'"
               [icon]="Icons.Eye"
@@ -51,13 +70,15 @@
 
       @if (showMobileEmbed) {
         <iframe
-          class="j-pdf-viewer__frame j-pdf-viewer__frame--mobile"
+          class="block min-h-[60vh] w-full rounded-t-xl border border-border bg-background dark:border-dark-border dark:bg-dark-background"
           [src]="safeUrl"
           [title]="documentTitle"
           loading="lazy"
         ></iframe>
 
-        <div class="j-pdf-viewer__mobile-bar">
+        <div
+          class="flex items-center justify-center gap-2 rounded-b-xl border border-t-0 border-border bg-background px-3 py-2.5 dark:border-dark-border dark:bg-dark-background"
+        >
           <JButton
             [text]="'Abrir'"
             [icon]="Icons.Eye"