valtech-components 2.0.787 → 2.0.795

package/src/lib/components/atoms/image/image.component.ts

@@ -0,0 +1,399 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostListener, Input, OnInit } from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+import { ImageMetadata } from './types';
+
+@Component({
+  selector: 'val-image',
+  standalone: true,
+  imports: [CommonModule, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonIcon, IonButtons],
+  template: `
+    <figure
+      class="val-image-container"
+      [class]="props.containerClass"
+      [ngClass]="{
+        'val-image-container--left': props.alignment === 'left',
+        'val-image-container--center': props.alignment === 'center' || !props.alignment,
+        'val-image-container--right': props.alignment === 'right',
+      }"
+      [ngStyle]="{
+        display: props.flex ? 'flex' : 'inline-block',
+      }"
+    >
+      <div class="val-image-wrapper">
+        @if (props.src.includes('--')) {
+          <img
+            class="val-image"
+            [ngClass]="[
+              props.mode,
+              !props.width ? props.size : '',
+              props.previewMode ? 'val-image--preview-enabled' : '',
+            ]"
+            [ngStyle]="{
+              content: 'var(' + props.src + ')',
+            }"
+            [class.bordered]="props.bordered"
+            [class.shaded]="props.shaded"
+            [class.dark]="props.dark"
+            [class.limited]="props.limited"
+            [class.center]="props.alignment === 'center'"
+            [alt]="props.alt"
+            [style.width.rem]="props.width"
+            [style.max-width.rem]="props.width"
+            [style.height.px]="props.height"
+            (click)="props.previewMode ? openPreview() : null"
+          />
+        } @else {
+          <img
+            class="val-image"
+            [ngClass]="[
+              props.mode,
+              !props.width ? props.size : '',
+              props.previewMode ? 'val-image--preview-enabled' : '',
+            ]"
+            [class.bordered]="props.bordered"
+            [class.shaded]="props.shaded"
+            [class.dark]="props.dark"
+            [class.limited]="props.limited"
+            [class.center]="props.alignment === 'center'"
+            [src]="props.src"
+            [alt]="props.alt"
+            [style.width.rem]="props.width"
+            [style.max-width.rem]="props.width"
+            [style.height.px]="props.height"
+            (click)="props.previewMode ? openPreview() : null"
+          />
+        }
+      </div>
+
+      @if (props.caption) {
+        <figcaption
+          class="val-image-caption"
+          [ngClass]="{
+            'val-image-caption--small': props.captionSize === 'small',
+            'val-image-caption--medium': props.captionSize === 'medium' || !props.captionSize,
+            'val-image-caption--large': props.captionSize === 'large',
+          }"
+        >
+          {{ props.caption }}
+        </figcaption>
+      }
+    </figure>
+
+    <!-- Modal de previsualización con ion-modal -->
+    <ion-modal [isOpen]="isPreviewOpen" (didDismiss)="closePreview()">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <!-- <ion-title>{{ props.alt || 'Previsualización de imagen' }}</ion-title> -->
+            <ion-buttons slot="end">
+              <ion-button (click)="closePreview()" fill="clear">
+                <ion-icon name="close-outline"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content>
+          <!-- Controles de zoom -->
+          <div class="val-image-preview-controls">
+            <ion-button
+              (click)="zoomOut(); $event.stopPropagation()"
+              [disabled]="zoomLevel <= minZoom"
+              fill="clear"
+              size="small"
+            >
+              <ion-icon name="remove-outline"></ion-icon>
+            </ion-button>
+
+            <span class="val-image-preview-zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
+
+            <ion-button
+              (click)="zoomIn(); $event.stopPropagation()"
+              [disabled]="zoomLevel >= maxZoom"
+              fill="clear"
+              size="small"
+            >
+              <ion-icon name="add-outline"></ion-icon>
+            </ion-button>
+          </div>
+
+          <!-- Imagen ampliada -->
+          <div
+            class="val-image-preview-viewport"
+            (touchstart)="onTouchStart($event)"
+            (touchmove)="onTouchMove($event)"
+            (touchend)="onTouchEnd($event)"
+            (wheel)="onWheel($event)"
+            (mousedown)="onMouseDown($event)"
+            (mousemove)="onMouseMove($event)"
+            (mouseup)="onMouseUp($event)"
+            (mouseleave)="onMouseUp($event)"
+          >
+            <img
+              #previewImage
+              class="val-image-preview-img"
+              [src]="props.src.includes('--') ? null : props.src"
+              [ngStyle]="{
+                content: props.src.includes('--') ? 'var(' + props.src + ')' : null,
+                transform: 'scale(' + zoomLevel + ') translate(' + panX + 'px, ' + panY + 'px)',
+                cursor: isDragging ? 'grabbing' : zoomLevel > 1 ? 'grab' : 'default',
+              }"
+              [alt]="props.alt"
+              draggable="false"
+            />
+          </div>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `,
+  styleUrls: ['./image.component.scss'],
+})
+/**
+ * val-image
+ *
+ * Displays an image with various display options (bordered, shaded, dark, etc).
+ * Now includes a container wrapper for better flexbox support and alignment options.
+ *
+ * NEW: Optional preview mode with full-screen zoom capabilities:
+ * - Click to open full-screen preview (when previewMode is enabled)
+ * - Pinch-to-zoom on mobile devices
+ * - Mouse wheel zoom on desktop
+ * - Pan/drag to navigate zoomed images
+ * - Zoom controls with buttons
+ * - Keyboard shortcuts (Esc to close, +/- to zoom, 0 to reset)
+ * - Touch-friendly interface with gesture support
+ *
+ * @example Basic usage:
+ * <val-image [props]="{
+ *   src: 'url',
+ *   alt: 'desc',
+ *   width: 100,
+ *   height: 100,
+ *   bordered: true,
+ *   alignment: 'center',
+ *   caption: 'Image description'
+ * }"></val-image>
+ *
+ * @example With preview mode:
+ * <val-image [props]="{
+ *   src: 'url',
+ *   alt: 'desc',
+ *   previewMode: true,
+ *   bordered: true,
+ *   alignment: 'center'
+ * }"></val-image>
+ *
+ * @input props: ImageMetadata - Configuration for the image (src, alt, size, mode, alignment, caption, previewMode, etc.)
+ */
+export class ImageComponent implements OnInit {
+  @Input()
+  props!: ImageMetadata;
+
+  available: boolean = true;
+
+  // Preview mode properties
+  isPreviewOpen: boolean = false;
+  zoomLevel: number = 1;
+  minZoom: number = 0.5;
+  maxZoom: number = 5;
+  panX: number = 0;
+  panY: number = 0;
+
+  // Touch and mouse interaction properties
+  isDragging: boolean = false;
+  lastPanX: number = 0;
+  lastPanY: number = 0;
+  startX: number = 0;
+  startY: number = 0;
+
+  // Touch gesture properties
+  initialDistance: number = 0;
+  initialZoom: number = 1;
+  touches: Touch[] = [];
+
+  // Math for template
+  Math = Math;
+
+  constructor() {}
+
+  ngOnInit() {
+    // Set default values
+    if (!this.props.alignment) {
+      this.props.alignment = 'center';
+    }
+    if (!this.props.captionSize) {
+      this.props.captionSize = 'medium';
+    }
+    if (!this.props.mode) {
+      this.props.mode = 'box';
+    }
+  }
+
+  changeToVisible() {
+    setInterval(() => {
+      this.available = true;
+    }, 100);
+  }
+
+  // Preview mode methods
+  openPreview() {
+    if (!this.props.previewMode) return;
+    this.isPreviewOpen = true;
+    this.resetZoom();
+  }
+
+  closePreview() {
+    this.isPreviewOpen = false;
+  }
+
+  // Zoom methods
+  zoomIn() {
+    if (this.zoomLevel < this.maxZoom) {
+      this.zoomLevel = Math.min(this.zoomLevel * 1.2, this.maxZoom);
+    }
+  }
+
+  zoomOut() {
+    if (this.zoomLevel > this.minZoom) {
+      this.zoomLevel = Math.max(this.zoomLevel / 1.2, this.minZoom);
+      // Reset pan if zoomed out to 1x or less
+      if (this.zoomLevel <= 1) {
+        this.panX = 0;
+        this.panY = 0;
+      }
+    }
+  }
+
+  resetZoom() {
+    this.zoomLevel = 1;
+    this.panX = 0;
+    this.panY = 0;
+  }
+
+  // Mouse events
+  onMouseDown(event: MouseEvent) {
+    if (this.zoomLevel <= 1) return;
+
+    this.isDragging = true;
+    this.startX = event.clientX - this.panX;
+    this.startY = event.clientY - this.panY;
+    event.preventDefault();
+  }
+
+  onMouseMove(event: MouseEvent) {
+    if (!this.isDragging || this.zoomLevel <= 1) return;
+
+    this.panX = event.clientX - this.startX;
+    this.panY = event.clientY - this.startY;
+    event.preventDefault();
+  }
+
+  onMouseUp(event: MouseEvent) {
+    this.isDragging = false;
+  }
+
+  // Touch events for mobile
+  onTouchStart(event: TouchEvent) {
+    event.preventDefault();
+    this.touches = Array.from(event.touches);
+
+    if (this.touches.length === 1) {
+      // Single touch - start dragging
+      if (this.zoomLevel > 1) {
+        this.isDragging = true;
+        this.startX = this.touches[0].clientX - this.panX;
+        this.startY = this.touches[0].clientY - this.panY;
+      }
+    } else if (this.touches.length === 2) {
+      // Two touches - start pinch zoom
+      this.isDragging = false;
+      this.initialDistance = this.getDistance(this.touches[0], this.touches[1]);
+      this.initialZoom = this.zoomLevel;
+    }
+  }
+
+  onTouchMove(event: TouchEvent) {
+    event.preventDefault();
+    this.touches = Array.from(event.touches);
+
+    if (this.touches.length === 1 && this.isDragging && this.zoomLevel > 1) {
+      // Single touch - drag
+      this.panX = this.touches[0].clientX - this.startX;
+      this.panY = this.touches[0].clientY - this.startY;
+    } else if (this.touches.length === 2) {
+      // Two touches - pinch zoom
+      const currentDistance = this.getDistance(this.touches[0], this.touches[1]);
+      const scale = currentDistance / this.initialDistance;
+      this.zoomLevel = Math.min(Math.max(this.initialZoom * scale, this.minZoom), this.maxZoom);
+
+      // Reset pan if zoomed out to 1x or less
+      if (this.zoomLevel <= 1) {
+        this.panX = 0;
+        this.panY = 0;
+      }
+    }
+  }
+
+  onTouchEnd(event: TouchEvent) {
+    this.isDragging = false;
+    this.touches = Array.from(event.touches);
+  }
+
+  // Mouse wheel zoom
+  onWheel(event: WheelEvent) {
+    event.preventDefault();
+
+    const delta = event.deltaY > 0 ? -1 : 1;
+    const zoomFactor = 1 + delta * 0.1;
+
+    this.zoomLevel = Math.min(Math.max(this.zoomLevel * zoomFactor, this.minZoom), this.maxZoom);
+
+    // Reset pan if zoomed out to 1x or less
+    if (this.zoomLevel <= 1) {
+      this.panX = 0;
+      this.panY = 0;
+    }
+  }
+
+  // Helper methods
+  private getDistance(touch1: Touch, touch2: Touch): number {
+    const dx = touch1.clientX - touch2.clientX;
+    const dy = touch1.clientY - touch2.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  // Keyboard shortcuts
+  @HostListener('document:keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    if (!this.isPreviewOpen) return;
+
+    switch (event.key) {
+      case 'Escape':
+        this.closePreview();
+        break;
+      case '+':
+      case '=':
+        event.preventDefault();
+        this.zoomIn();
+        break;
+      case '-':
+        event.preventDefault();
+        this.zoomOut();
+        break;
+      case '0':
+        event.preventDefault();
+        this.resetZoom();
+        break;
+    }
+  }
+}

package/src/lib/components/atoms/image/image.stories.ts

@@ -0,0 +1,317 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { ImageComponent } from './image.component';
+
+// Sample image URLs for stories
+const SAMPLE_IMAGES = {
+  landscape: 'https://picsum.photos/seed/landscape/800/600',
+  portrait: 'https://picsum.photos/seed/portrait/600/800',
+  square: 'https://picsum.photos/seed/square/400/400',
+  nature: 'https://picsum.photos/seed/nature/600/400',
+  city: 'https://picsum.photos/seed/city/600/400',
+};
+
+const meta: Meta<ImageComponent> = {
+  title: 'Atoms/Image',
+  component: ImageComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ImageComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Image configuration object',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-image
+
+A versatile image component with support for various display modes, sizes, and an optional full-screen preview with zoom capabilities.
+
+### Usage
+
+\`\`\`html
+<val-image [props]="{
+  src: 'image-url.jpg',
+  alt: 'Description',
+  mode: 'box',
+  size: 'medium',
+  bordered: true,
+  alignment: 'center'
+}"></val-image>
+\`\`\`
+
+### Display Modes
+
+- \`box\`: Standard rectangular display (default)
+- \`rounded\`: Rounded corners
+- \`circular\`: Circular crop
+
+### Preview Mode
+
+Enable \`previewMode: true\` for full-screen preview with:
+- Pinch-to-zoom on mobile
+- Mouse wheel zoom on desktop
+- Pan/drag navigation
+- Keyboard shortcuts (Esc, +/-, 0)
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ImageComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.landscape,
+      alt: 'Sample landscape image',
+      mode: 'box',
+      size: 'medium',
+      shaded: false,
+      bordered: false,
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.square,
+      alt: 'Small image',
+      mode: 'box',
+      size: 'small',
+      shaded: false,
+      bordered: false,
+    },
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.nature,
+      alt: 'Medium image',
+      mode: 'box',
+      size: 'medium',
+      shaded: false,
+      bordered: false,
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.city,
+      alt: 'Large image',
+      mode: 'box',
+      size: 'large',
+      shaded: false,
+      bordered: false,
+    },
+  },
+};
+
+export const XLarge: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.landscape,
+      alt: 'Extra large image',
+      mode: 'box',
+      size: 'xlarge',
+      shaded: false,
+      bordered: false,
+    },
+  },
+};
+
+export const Rounded: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.nature,
+      alt: 'Rounded image',
+      mode: 'rounded',
+      size: 'medium',
+      shaded: false,
+      bordered: false,
+    },
+  },
+};
+
+export const Circular: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.square,
+      alt: 'Circular image',
+      mode: 'circular',
+      size: 'medium',
+      shaded: false,
+      bordered: false,
+    },
+  },
+};
+
+export const Bordered: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.landscape,
+      alt: 'Bordered image',
+      mode: 'box',
+      size: 'medium',
+      shaded: false,
+      bordered: true,
+    },
+  },
+};
+
+export const Shaded: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.city,
+      alt: 'Shaded image',
+      mode: 'box',
+      size: 'medium',
+      shaded: true,
+      bordered: false,
+    },
+  },
+};
+
+export const WithCaption: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.nature,
+      alt: 'Image with caption',
+      mode: 'box',
+      size: 'medium',
+      shaded: false,
+      bordered: true,
+      caption: 'Beautiful nature landscape',
+      captionSize: 'medium',
+      alignment: 'center',
+    },
+  },
+};
+
+export const PreviewMode: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.landscape,
+      alt: 'Click to preview',
+      mode: 'box',
+      size: 'medium',
+      shaded: false,
+      bordered: true,
+      previewMode: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Click on the image to open a full-screen preview with zoom capabilities.',
+      },
+    },
+  },
+};
+
+export const AlignmentLeft: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.square,
+      alt: 'Left aligned image',
+      mode: 'box',
+      size: 'small',
+      shaded: false,
+      bordered: false,
+      alignment: 'left',
+    },
+  },
+};
+
+export const AlignmentCenter: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.square,
+      alt: 'Center aligned image',
+      mode: 'box',
+      size: 'small',
+      shaded: false,
+      bordered: false,
+      alignment: 'center',
+    },
+  },
+};
+
+export const AlignmentRight: Story = {
+  args: {
+    props: {
+      src: SAMPLE_IMAGES.square,
+      alt: 'Right aligned image',
+      mode: 'box',
+      size: 'small',
+      shaded: false,
+      bordered: false,
+      alignment: 'right',
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 800px;">
+        <h3 style="margin: 0; font-family: system-ui;">Sizes</h3>
+        <div style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;">
+          <val-image [props]="{ src: '${SAMPLE_IMAGES.square}', alt: 'Small', mode: 'box', size: 'small', shaded: false, bordered: false }"></val-image>
+          <val-image [props]="{ src: '${SAMPLE_IMAGES.square}', alt: 'Medium', mode: 'box', size: 'medium', shaded: false, bordered: false }"></val-image>
+          <val-image [props]="{ src: '${SAMPLE_IMAGES.square}', alt: 'Large', mode: 'box', size: 'large', shaded: false, bordered: false }"></val-image>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Display Modes</h3>
+        <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+          <div style="text-align: center;">
+            <val-image [props]="{ src: '${SAMPLE_IMAGES.nature}', alt: 'Box mode', mode: 'box', size: 'small', shaded: false, bordered: false }"></val-image>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Box</p>
+          </div>
+          <div style="text-align: center;">
+            <val-image [props]="{ src: '${SAMPLE_IMAGES.nature}', alt: 'Rounded mode', mode: 'rounded', size: 'small', shaded: false, bordered: false }"></val-image>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Rounded</p>
+          </div>
+          <div style="text-align: center;">
+            <val-image [props]="{ src: '${SAMPLE_IMAGES.square}', alt: 'Circular mode', mode: 'circular', size: 'small', shaded: false, bordered: false }"></val-image>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Circular</p>
+          </div>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Effects</h3>
+        <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+          <div style="text-align: center;">
+            <val-image [props]="{ src: '${SAMPLE_IMAGES.city}', alt: 'Normal', mode: 'box', size: 'small', shaded: false, bordered: false }"></val-image>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Normal</p>
+          </div>
+          <div style="text-align: center;">
+            <val-image [props]="{ src: '${SAMPLE_IMAGES.city}', alt: 'Bordered', mode: 'box', size: 'small', shaded: false, bordered: true }"></val-image>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Bordered</p>
+          </div>
+          <div style="text-align: center;">
+            <val-image [props]="{ src: '${SAMPLE_IMAGES.city}', alt: 'Shaded', mode: 'box', size: 'small', shaded: true, bordered: false }"></val-image>
+            <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px;">Shaded</p>
+          </div>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Caption</h3>
+        <val-image [props]="{ src: '${SAMPLE_IMAGES.landscape}', alt: 'Landscape with caption', mode: 'box', size: 'medium', shaded: false, bordered: true, caption: 'A beautiful landscape view', captionSize: 'medium', alignment: 'center' }"></val-image>
+      </div>
+    `,
+  }),
+};