valtech-components 2.0.691 → 2.0.692

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

@@ -1,399 +0,0 @@
-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

@@ -1,317 +0,0 @@
-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>
-    `,
-  }),
-};