import { CommonModule } from '@angular/common';
import { Component, HostListener, Input } from '@angular/core';
import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonModal, IonTitle, IonToolbar, } from '@ionic/angular/standalone';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
 * 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 {
    constructor() {
        this.available = true;
        // Preview mode properties
        this.isPreviewOpen = false;
        this.zoomLevel = 1;
        this.minZoom = 0.5;
        this.maxZoom = 5;
        this.panX = 0;
        this.panY = 0;
        // Touch and mouse interaction properties
        this.isDragging = false;
        this.lastPanX = 0;
        this.lastPanY = 0;
        this.startX = 0;
        this.startY = 0;
        // Touch gesture properties
        this.initialDistance = 0;
        this.initialZoom = 1;
        this.touches = [];
        // Math for template
        this.Math = Math;
    }
    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) {
        if (this.zoomLevel <= 1)
            return;
        this.isDragging = true;
        this.startX = event.clientX - this.panX;
        this.startY = event.clientY - this.panY;
        event.preventDefault();
    }
    onMouseMove(event) {
        if (!this.isDragging || this.zoomLevel <= 1)
            return;
        this.panX = event.clientX - this.startX;
        this.panY = event.clientY - this.startY;
        event.preventDefault();
    }
    onMouseUp(event) {
        this.isDragging = false;
    }
    // Touch events for mobile
    onTouchStart(event) {
        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) {
        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) {
        this.isDragging = false;
        this.touches = Array.from(event.touches);
    }
    // Mouse wheel zoom
    onWheel(event) {
        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
    getDistance(touch1, touch2) {
        const dx = touch1.clientX - touch2.clientX;
        const dy = touch1.clientY - touch2.clientY;
        return Math.sqrt(dx * dx + dy * dy);
    }
    // Keyboard shortcuts
    onKeyDown(event) {
        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;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ImageComponent, isStandalone: true, selector: "val-image", inputs: { props: "props" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, ngImport: i0, 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>
  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.val-image-container{margin:0;padding:0;max-width:100%}.val-image-container--left{margin-right:auto;text-align:left}.val-image-container--center{margin-left:auto;margin-right:auto;text-align:center}.val-image-container--right{margin-left:auto;text-align:right}.val-image-wrapper{display:inline-block;position:relative}.val-image{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.center{margin:0 auto}.val-image.rounded{border-radius:.5rem}.val-image.circular{border-radius:50%;aspect-ratio:1;object-fit:cover}.val-image.box{border-radius:0}.val-image.bordered{border:.0625rem solid var(--ion-color-medium)}.val-image.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}body.dark .val-image.dark,html.ion-palette-dark .val-image.dark,body[data-theme=dark] .val-image.dark{filter:invert(1)}.val-image.limited{max-width:100%}@media (max-width: 768px){.val-image .val-image-wrapper.small{width:40%}.val-image .val-image-wrapper.medium{width:60%}.val-image .val-image-wrapper.large{width:80%}.val-image .val-image-wrapper.xlarge{width:100%}}.val-image.small{width:30%}.val-image.medium{width:50%}.val-image.large{width:70%}.val-image.xlarge{width:100%}.val-image-caption{margin-top:.5rem;color:var(--ion-color-medium-shade, #666);font-style:italic;line-height:1.4}.val-image-caption--small{font-size:.75rem}.val-image-caption--medium{font-size:.875rem}.val-image-caption--large{font-size:1rem}.val-image.visible{animation:appearance ease-in 1s forwards}@keyframes appearance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.val-image-container{flex-shrink:0;align-self:flex-start}.flexbox-container .val-image-container--left{align-self:flex-start}.flexbox-container .val-image-container--center{align-self:center}.flexbox-container .val-image-container--right{align-self:flex-end}.val-image--preview-enabled{cursor:pointer;transition:opacity .2s ease,transform .2s ease}.val-image--preview-enabled:hover{opacity:.9;transform:scale(1.02)}ion-modal ion-content{position:relative;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;align-items:center;gap:15px;background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.9);padding:4px 8px;border-radius:25px;backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000026}.val-image-preview-zoom-level{font-size:.875rem;font-weight:600;min-width:50px;text-align:center;color:var(--ion-text-color)}.val-image-preview-viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.val-image-preview-img{max-width:90vw;max-height:90vh;object-fit:contain;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@media (max-width: 768px){.val-image-preview-controls{bottom:10px;padding:8px 16px;gap:10px}.val-image-preview-zoom-level{font-size:.75rem;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageComponent, decorators: [{
            type: Component,
            args: [{ 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>
  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.val-image-container{margin:0;padding:0;max-width:100%}.val-image-container--left{margin-right:auto;text-align:left}.val-image-container--center{margin-left:auto;margin-right:auto;text-align:center}.val-image-container--right{margin-left:auto;text-align:right}.val-image-wrapper{display:inline-block;position:relative}.val-image{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.center{margin:0 auto}.val-image.rounded{border-radius:.5rem}.val-image.circular{border-radius:50%;aspect-ratio:1;object-fit:cover}.val-image.box{border-radius:0}.val-image.bordered{border:.0625rem solid var(--ion-color-medium)}.val-image.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}body.dark .val-image.dark,html.ion-palette-dark .val-image.dark,body[data-theme=dark] .val-image.dark{filter:invert(1)}.val-image.limited{max-width:100%}@media (max-width: 768px){.val-image .val-image-wrapper.small{width:40%}.val-image .val-image-wrapper.medium{width:60%}.val-image .val-image-wrapper.large{width:80%}.val-image .val-image-wrapper.xlarge{width:100%}}.val-image.small{width:30%}.val-image.medium{width:50%}.val-image.large{width:70%}.val-image.xlarge{width:100%}.val-image-caption{margin-top:.5rem;color:var(--ion-color-medium-shade, #666);font-style:italic;line-height:1.4}.val-image-caption--small{font-size:.75rem}.val-image-caption--medium{font-size:.875rem}.val-image-caption--large{font-size:1rem}.val-image.visible{animation:appearance ease-in 1s forwards}@keyframes appearance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.val-image-container{flex-shrink:0;align-self:flex-start}.flexbox-container .val-image-container--left{align-self:flex-start}.flexbox-container .val-image-container--center{align-self:center}.flexbox-container .val-image-container--right{align-self:flex-end}.val-image--preview-enabled{cursor:pointer;transition:opacity .2s ease,transform .2s ease}.val-image--preview-enabled:hover{opacity:.9;transform:scale(1.02)}ion-modal ion-content{position:relative;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;align-items:center;gap:15px;background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.9);padding:4px 8px;border-radius:25px;backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000026}.val-image-preview-zoom-level{font-size:.875rem;font-weight:600;min-width:50px;text-align:center;color:var(--ion-text-color)}.val-image-preview-viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.val-image-preview-img{max-width:90vw;max-height:90vh;object-fit:contain;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@media (max-width: 768px){.val-image-preview-controls{bottom:10px;padding:8px 16px;gap:10px}.val-image-preview-zoom-level{font-size:.75rem;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { props: [{
                type: Input
            }], onKeyDown: [{
                type: HostListener,
                args: ['document:keydown', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 