valtech-components 2.0.360 → 2.0.361

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/esm2022/lib/components/atoms/image/image.component.mjs +67 -76
  2. package/fesm2022/valtech-components.mjs +66 -76
  3. package/fesm2022/valtech-components.mjs.map +1 -1
  4. package/package.json +1 -1
package/fesm2022/valtech-components.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectorRef, HostListener, Pipe, ChangeDetectionStrategy, ViewChild } from '@angular/core';
3
- import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonSelect, IonSelectOption, IonLabel, IonRadioGroup, IonRadio, IonSearchbar, IonToolbar, IonTitle, IonMenuButton, IonFooter, IonHeader, IonList, IonListHeader, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
3
+ import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonLabel, IonRadioGroup, IonRadio, IonSearchbar, IonMenuButton, IonFooter, IonList, IonListHeader, IonNote, IonItem } from '@ionic/angular/standalone';
4
4
  import * as i1 from '@angular/common';
5
5
  import { CommonModule, NgStyle, AsyncPipe, NgFor, NgClass } from '@angular/common';
6
6
  import { addIcons } from 'ionicons';
@@ -1875,11 +1875,9 @@ class ImageComponent {
1875
1875
  return;
1876
1876
  this.isPreviewOpen = true;
1877
1877
  this.resetZoom();
1878
- document.body.style.overflow = 'hidden'; // Prevent background scrolling
1879
1878
  }
1880
1879
  closePreview() {
1881
1880
  this.isPreviewOpen = false;
1882
- document.body.style.overflow = ''; // Restore scrolling
1883
1881
  }
1884
1882
  // Zoom methods
1885
1883
  zoomIn() {
@@ -2079,51 +2077,47 @@ class ImageComponent {
2079
2077
  }
2080
2078
  </figure>
2081
2079
 
2082
- <!-- Modal de previsualización -->
2083
- @if (isPreviewOpen) {
2084
- <div class="val-image-preview-modal" (click)="closePreview()">
2085
- <div class="val-image-preview-container">
2086
- <!-- Botón de cerrar -->
2087
- <button
2088
- class="val-image-preview-close"
2089
- (click)="closePreview()"
2090
- [attr.aria-label]="langService.getText('ImageComponent', 'close')"
2091
- >
2092
- <span>&times;</span>
2093
- </button>
2080
+ <!-- Modal de previsualización con ion-modal -->
2081
+ <ion-modal [isOpen]="isPreviewOpen" (didDismiss)="closePreview()">
2082
+ <ng-template>
2083
+ <ion-header>
2084
+ <ion-toolbar>
2085
+ <ion-title>{{ props.alt || 'Previsualización de imagen' }}</ion-title>
2086
+ <ion-buttons slot="end">
2087
+ <ion-button (click)="closePreview()" fill="clear">
2088
+ <ion-icon name="close"></ion-icon>
2089
+ </ion-button>
2090
+ </ion-buttons>
2091
+ </ion-toolbar>
2092
+ </ion-header>
2094
2093
 
2094
+ <ion-content>
2095
2095
  <!-- Controles de zoom -->
2096
2096
  <div class="val-image-preview-controls">
2097
- <button
2098
- class="val-image-preview-zoom-btn"
2099
- (click)="zoomOut()"
2097
+ <ion-button
2098
+ (click)="zoomOut(); $event.stopPropagation()"
2100
2099
  [disabled]="zoomLevel <= minZoom"
2101
- [attr.aria-label]="langService.getText('ImageComponent', 'zoomOut')"
2100
+ fill="clear"
2101
+ size="large"
2102
2102
  >
2103
- <span>−</span>
2104
- </button>
2103
+ <ion-icon name="remove"></ion-icon>
2104
+ </ion-button>
2105
+
2105
2106
  <span class="val-image-preview-zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
2106
- <button
2107
- class="val-image-preview-zoom-btn"
2108
- (click)="zoomIn()"
2107
+
2108
+ <ion-button
2109
+ (click)="zoomIn(); $event.stopPropagation()"
2109
2110
  [disabled]="zoomLevel >= maxZoom"
2110
- [attr.aria-label]="langService.getText('ImageComponent', 'zoomIn')"
2111
+ fill="clear"
2112
+ size="large"
2111
2113
  >
2112
- <span>+</span>
2113
- </button>
2114
- <button
2115
- class="val-image-preview-reset-btn"
2116
- (click)="resetZoom()"
2117
- [attr.aria-label]="langService.getText('ImageComponent', 'resetZoom')"
2118
- >
2119
- <span>⌂</span>
2120
- </button>
2114
+ <ion-icon name="add"></ion-icon>
2115
+ </ion-button>
2121
2116
  </div>
2122
2117
 
2123
2118
  <!-- Imagen ampliada -->
2124
2119
  <div
2125
2120
  class="val-image-preview-viewport"
2126
- (click)="$event.stopPropagation()"
2127
2121
  (touchstart)="onTouchStart($event)"
2128
2122
  (touchmove)="onTouchMove($event)"
2129
2123
  (touchend)="onTouchEnd($event)"
@@ -2146,14 +2140,14 @@ class ImageComponent {
2146
2140
  draggable="false"
2147
2141
  />
2148
2142
  </div>
2149
- </div>
2150
- </div>
2151
- }
2152
- `, isInline: true, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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}@media (prefers-color-scheme: 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)}.val-image-preview-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.val-image-preview-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.val-image-preview-close{position:absolute;top:20px;right:20px;z-index:10001;background:#ffffff1a;border:none;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;transition:background .2s ease}.val-image-preview-close:hover{background:#fff3}.val-image-preview-close span{line-height:1}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:10001;display:flex;align-items:center;gap:10px;background:#000000b3;padding:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.val-image-preview-zoom-btn,.val-image-preview-reset-btn{background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;font-weight:700;transition:all .2s ease}.val-image-preview-zoom-btn:hover:not(:disabled),.val-image-preview-reset-btn:hover:not(:disabled){background:#fff3;transform:scale(1.1)}.val-image-preview-zoom-btn:disabled,.val-image-preview-reset-btn:disabled{opacity:.4;cursor:not-allowed}.val-image-preview-zoom-btn span,.val-image-preview-reset-btn span{line-height:1}.val-image-preview-zoom-level{color:#fff;font-size:14px;font-weight:600;min-width:50px;text-align:center}.val-image-preview-viewport{flex:1;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}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.val-image-preview-close{top:10px;right:10px;width:40px;height:40px;font-size:20px}.val-image-preview-controls{bottom:10px;padding:8px 16px}.val-image-preview-zoom-btn,.val-image-preview-reset-btn{width:35px;height:35px;font-size:18px}.val-image-preview-zoom-level{font-size:12px;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"] }] }); }
2143
+ </ion-content>
2144
+ </ng-template>
2145
+ </ion-modal>
2146
+ `, isInline: true, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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}@media (prefers-color-scheme: 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:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000026}.val-image-preview-zoom-level{font-size:14px;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:12px;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: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "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"] }] }); }
2153
2147
  }
2154
2148
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, decorators: [{
2155
2149
  type: Component,
2156
- args: [{ selector: 'val-image', standalone: true, imports: [CommonModule], template: `
2150
+ args: [{ selector: 'val-image', standalone: true, imports: [CommonModule, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonIcon, IonButtons], template: `
2157
2151
  <figure
2158
2152
  class="val-image-container"
2159
2153
  [class]="props.containerClass"
@@ -2226,51 +2220,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2226
2220
  }
2227
2221
  </figure>
2228
2222
 
2229
- <!-- Modal de previsualización -->
2230
- @if (isPreviewOpen) {
2231
- <div class="val-image-preview-modal" (click)="closePreview()">
2232
- <div class="val-image-preview-container">
2233
- <!-- Botón de cerrar -->
2234
- <button
2235
- class="val-image-preview-close"
2236
- (click)="closePreview()"
2237
- [attr.aria-label]="langService.getText('ImageComponent', 'close')"
2238
- >
2239
- <span>&times;</span>
2240
- </button>
2223
+ <!-- Modal de previsualización con ion-modal -->
2224
+ <ion-modal [isOpen]="isPreviewOpen" (didDismiss)="closePreview()">
2225
+ <ng-template>
2226
+ <ion-header>
2227
+ <ion-toolbar>
2228
+ <ion-title>{{ props.alt || 'Previsualización de imagen' }}</ion-title>
2229
+ <ion-buttons slot="end">
2230
+ <ion-button (click)="closePreview()" fill="clear">
2231
+ <ion-icon name="close"></ion-icon>
2232
+ </ion-button>
2233
+ </ion-buttons>
2234
+ </ion-toolbar>
2235
+ </ion-header>
2241
2236
 
2237
+ <ion-content>
2242
2238
  <!-- Controles de zoom -->
2243
2239
  <div class="val-image-preview-controls">
2244
- <button
2245
- class="val-image-preview-zoom-btn"
2246
- (click)="zoomOut()"
2240
+ <ion-button
2241
+ (click)="zoomOut(); $event.stopPropagation()"
2247
2242
  [disabled]="zoomLevel <= minZoom"
2248
- [attr.aria-label]="langService.getText('ImageComponent', 'zoomOut')"
2243
+ fill="clear"
2244
+ size="large"
2249
2245
  >
2250
- <span>−</span>
2251
- </button>
2246
+ <ion-icon name="remove"></ion-icon>
2247
+ </ion-button>
2248
+
2252
2249
  <span class="val-image-preview-zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
2253
- <button
2254
- class="val-image-preview-zoom-btn"
2255
- (click)="zoomIn()"
2250
+
2251
+ <ion-button
2252
+ (click)="zoomIn(); $event.stopPropagation()"
2256
2253
  [disabled]="zoomLevel >= maxZoom"
2257
- [attr.aria-label]="langService.getText('ImageComponent', 'zoomIn')"
2254
+ fill="clear"
2255
+ size="large"
2258
2256
  >
2259
- <span>+</span>
2260
- </button>
2261
- <button
2262
- class="val-image-preview-reset-btn"
2263
- (click)="resetZoom()"
2264
- [attr.aria-label]="langService.getText('ImageComponent', 'resetZoom')"
2265
- >
2266
- <span>⌂</span>
2267
- </button>
2257
+ <ion-icon name="add"></ion-icon>
2258
+ </ion-button>
2268
2259
  </div>
2269
2260
 
2270
2261
  <!-- Imagen ampliada -->
2271
2262
  <div
2272
2263
  class="val-image-preview-viewport"
2273
- (click)="$event.stopPropagation()"
2274
2264
  (touchstart)="onTouchStart($event)"
2275
2265
  (touchmove)="onTouchMove($event)"
2276
2266
  (touchend)="onTouchEnd($event)"
@@ -2293,10 +2283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2293
2283
  draggable="false"
2294
2284
  />
2295
2285
  </div>
2296
- </div>
2297
- </div>
2298
- }
2299
- `, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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}@media (prefers-color-scheme: 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)}.val-image-preview-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.val-image-preview-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.val-image-preview-close{position:absolute;top:20px;right:20px;z-index:10001;background:#ffffff1a;border:none;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;transition:background .2s ease}.val-image-preview-close:hover{background:#fff3}.val-image-preview-close span{line-height:1}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:10001;display:flex;align-items:center;gap:10px;background:#000000b3;padding:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.val-image-preview-zoom-btn,.val-image-preview-reset-btn{background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;font-weight:700;transition:all .2s ease}.val-image-preview-zoom-btn:hover:not(:disabled),.val-image-preview-reset-btn:hover:not(:disabled){background:#fff3;transform:scale(1.1)}.val-image-preview-zoom-btn:disabled,.val-image-preview-reset-btn:disabled{opacity:.4;cursor:not-allowed}.val-image-preview-zoom-btn span,.val-image-preview-reset-btn span{line-height:1}.val-image-preview-zoom-level{color:#fff;font-size:14px;font-weight:600;min-width:50px;text-align:center}.val-image-preview-viewport{flex:1;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}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.val-image-preview-close{top:10px;right:10px;width:40px;height:40px;font-size:20px}.val-image-preview-controls{bottom:10px;padding:8px 16px}.val-image-preview-zoom-btn,.val-image-preview-reset-btn{width:35px;height:35px;font-size:18px}.val-image-preview-zoom-level{font-size:12px;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\n"] }]
2286
+ </ion-content>
2287
+ </ng-template>
2288
+ </ion-modal>
2289
+ `, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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}@media (prefers-color-scheme: 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:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000026}.val-image-preview-zoom-level{font-size:14px;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:12px;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\n"] }]
2300
2290
  }], ctorParameters: () => [], propDecorators: { props: [{
2301
2291
  type: Input
2302
2292
  }], onKeyDown: [{