valtech-components 2.0.908 → 2.0.911

package/fesm2022/valtech-components.mjs

@@ -45,6 +45,7 @@ import { provideHttpClient, withInterceptors, HttpClient, HttpErrorResponse } fr
 import { isSupported, getMessaging as getMessaging$1 } from 'firebase/messaging';
 import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app';
 import { ImageCropperComponent } from 'ngx-image-cropper';
+import Compressor from 'compressorjs';
 import { Capacitor } from '@capacitor/core';
 import 'prismjs/components/prism-scss';
 import 'prismjs/components/prism-json';
@@ -53,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.908';
+const VERSION = '2.0.911';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -28593,9 +28594,25 @@ class AttachmentUploaderComponent {
             this.uploadFile(id, file);
         }
     }
+    compressImage(file) {
+        return new Promise((resolve, reject) => {
+            new Compressor(file, {
+                quality: 0.8,
+                maxWidth: 1920,
+                maxHeight: 1920,
+                convertSize: 2 * 1024 * 1024, // PNG > 2 MB → JPEG
+                success(result) {
+                    resolve(new File([result], file.name, { type: result.type }));
+                },
+                error: reject,
+            });
+        });
+    }
     async uploadFile(id, file) {
         try {
-            const url = await this.feedbackService.uploadAttachment(file);
+            const shouldCompress = this.props().compressImages !== false && file.type.startsWith('image/');
+            const fileToUpload = shouldCompress ? await this.compressImage(file) : file;
+            const url = await this.feedbackService.uploadAttachment(fileToUpload);
             this.attachments.update(list => list.map(a => (a.id === id ? { ...a, status: 'ready', url } : a)));
         }
         catch {
@@ -38695,6 +38712,7 @@ const AVATAR_UPLOAD_DEFAULTS = {
     maxWidth: 800,
     thumbnailSize: 150,
     backgroundColor: '#6366f1', // Indigo
+    showViewButton: false,
 };
 
 addIcons({ cameraOutline });
@@ -38738,6 +38756,7 @@ class AvatarUploadComponent {
         // Internal state
         this.loading = signal(false);
         this.showCropModal = signal(false);
+        this.showViewModal = signal(false);
         this.selectedFile = signal(null);
         this.previewUrl = signal(null);
         this.imageLoadError = signal(false);
@@ -38757,6 +38776,16 @@ class AvatarUploadComponent {
             this.i18n.lang();
             return this.i18n.t('changePhoto', this.config().i18nNamespace) || 'Cambiar foto';
         });
+        /** Label for view photo button */
+        this.viewPhotoLabel = computed(() => {
+            this.i18n.lang();
+            return this.i18n.t('viewPhoto', this.config().i18nNamespace) || 'Ver foto';
+        });
+        /** Label for close button inside photo viewer */
+        this.closePhotoLabel = computed(() => {
+            this.i18n.lang();
+            return this.i18n.t('closePhoto', this.config().i18nNamespace) || 'Cerrar';
+        });
     }
     /** Open file picker dialog */
     openFilePicker() {
@@ -38926,6 +38955,13 @@ class AvatarUploadComponent {
         hidden
       />
 
+      <!-- View Photo Button -->
+      @if (config().showViewButton && displayUrl()) {
+        <button class="view-photo-btn" type="button" (click)="showViewModal.set(true)">
+          {{ viewPhotoLabel() }}
+        </button>
+      }
+
       <!-- Crop Modal -->
       <ion-modal
         [isOpen]="showCropModal()"
@@ -38947,12 +38983,51 @@ class AvatarUploadComponent {
           }
         </ng-template>
       </ion-modal>
+
+      <!-- Photo Viewer Modal -->
+      <ion-modal
+        [isOpen]="showViewModal()"
+        (didDismiss)="showViewModal.set(false)"
+        [breakpoints]="[0, 0.55]"
+        [initialBreakpoint]="0.55"
+        [handle]="true"
+      >
+        <ng-template>
+          <ion-header [translucent]="true">
+            <ion-toolbar>
+              <ion-title>{{ viewPhotoLabel() }}</ion-title>
+              <ion-buttons slot="end">
+                <ion-button fill="clear" color="dark" (click)="showViewModal.set(false)">
+                  {{ closePhotoLabel() }}
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="photo-viewer">
+              <img class="photo-viewer__img" [src]="displayUrl()" alt="Photo" />
+            </div>
+          </ion-content>
+        </ng-template>
+      </ion-modal>
     </div>
-  `, isInline: true, styles: [".avatar-upload{--avatar-size: 100px;--edit-button-size: 32px;--edit-button-offset: 4px;display:inline-block}.avatar-container{position:relative;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;overflow:visible}.avatar-image{width:100%;height:100%;border-radius:50%;object-fit:cover;background-color:var(--ion-color-light)}.avatar-initials{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(var(--avatar-size) * .4);font-weight:600;color:#fff;text-transform:uppercase;-webkit-user-select:none;user-select:none}.edit-button{position:absolute;bottom:var(--edit-button-offset);right:var(--edit-button-offset);width:var(--edit-button-size);height:var(--edit-button-size);border-radius:50%;border:2px solid white;background:var(--ion-color-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,background-color .2s ease;box-shadow:0 2px 8px #00000026}.edit-button ion-icon{font-size:calc(var(--edit-button-size) * .5)}.edit-button:hover{transform:scale(1.1);background:var(--ion-color-primary-shade)}.edit-button:active{transform:scale(.95)}.edit-button:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:#00000080;display:flex;align-items:center;justify-content:center}.loading-overlay ion-spinner{--color: white;width:calc(var(--avatar-size) * .4);height:calc(var(--avatar-size) * .4)}.avatar-upload--loading .edit-button{display:none}.avatar-upload--loading .avatar-image,.avatar-upload--loading .avatar-initials{filter:brightness(.7)}@container (max-width: 60px){.edit-button{--edit-button-size: 24px;--edit-button-offset: 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ImageCropComponent, selector: "val-image-crop", inputs: ["image", "aspectRatio", "roundCropper", "resizeToWidth", "i18nNamespace"], outputs: ["cropComplete", "cancel", "loadFailed"] }] }); }
+  `, isInline: true, styles: [".avatar-upload{--avatar-size: 100px;--edit-button-size: 32px;--edit-button-offset: 4px;display:inline-block}.avatar-container{position:relative;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;overflow:visible}.avatar-image{width:100%;height:100%;border-radius:50%;object-fit:cover;background-color:var(--ion-color-light)}.avatar-initials{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(var(--avatar-size) * .4);font-weight:600;color:#fff;text-transform:uppercase;-webkit-user-select:none;user-select:none}.edit-button{position:absolute;bottom:var(--edit-button-offset);right:var(--edit-button-offset);width:var(--edit-button-size);height:var(--edit-button-size);border-radius:50%;border:2px solid white;background:var(--ion-color-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,background-color .2s ease;box-shadow:0 2px 8px #00000026}.edit-button ion-icon{font-size:calc(var(--edit-button-size) * .5)}.edit-button:hover{transform:scale(1.1);background:var(--ion-color-primary-shade)}.edit-button:active{transform:scale(.95)}.edit-button:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:#00000080;display:flex;align-items:center;justify-content:center}.loading-overlay ion-spinner{--color: white;width:calc(var(--avatar-size) * .4);height:calc(var(--avatar-size) * .4)}.avatar-upload--loading .edit-button{display:none}.avatar-upload--loading .avatar-image,.avatar-upload--loading .avatar-initials{filter:brightness(.7)}.view-photo-btn{display:block;background:none;border:none;padding:0;margin-top:6px;font-size:.8rem;color:var(--ion-color-primary);cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px;text-align:center;width:var(--avatar-size)}.view-photo-btn:active{opacity:.7}.photo-viewer{display:flex;align-items:center;justify-content:center;padding:20px 24px 28px}.photo-viewer__img{width:min(72vw,280px);height:min(72vw,280px);border-radius:20px;object-fit:cover;box-shadow:0 8px 32px #0000002e}@container (max-width: 60px){.edit-button{--edit-button-size: 24px;--edit-button-offset: 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: ImageCropComponent, selector: "val-image-crop", inputs: ["image", "aspectRatio", "roundCropper", "resizeToWidth", "i18nNamespace"], outputs: ["cropComplete", "cancel", "loadFailed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-avatar-upload', standalone: true, imports: [CommonModule, IonIcon, IonSpinner, IonModal, ImageCropComponent], template: `
+            args: [{ selector: 'val-avatar-upload', standalone: true, imports: [
+                        CommonModule,
+                        IonIcon,
+                        IonSpinner,
+                        IonModal,
+                        IonContent,
+                        IonHeader,
+                        IonToolbar,
+                        IonTitle,
+                        IonButtons,
+                        IonButton,
+                        ImageCropComponent,
+                    ], template: `
     <div class="avatar-upload" [style.--avatar-size.px]="config().size" [class.avatar-upload--loading]="loading()">
       <div class="avatar-container">
         <!-- Avatar Image or Initials -->
@@ -38989,6 +39064,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         hidden
       />
 
+      <!-- View Photo Button -->
+      @if (config().showViewButton && displayUrl()) {
+        <button class="view-photo-btn" type="button" (click)="showViewModal.set(true)">
+          {{ viewPhotoLabel() }}
+        </button>
+      }
+
       <!-- Crop Modal -->
       <ion-modal
         [isOpen]="showCropModal()"
@@ -39010,8 +39092,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           }
         </ng-template>
       </ion-modal>
+
+      <!-- Photo Viewer Modal -->
+      <ion-modal
+        [isOpen]="showViewModal()"
+        (didDismiss)="showViewModal.set(false)"
+        [breakpoints]="[0, 0.55]"
+        [initialBreakpoint]="0.55"
+        [handle]="true"
+      >
+        <ng-template>
+          <ion-header [translucent]="true">
+            <ion-toolbar>
+              <ion-title>{{ viewPhotoLabel() }}</ion-title>
+              <ion-buttons slot="end">
+                <ion-button fill="clear" color="dark" (click)="showViewModal.set(false)">
+                  {{ closePhotoLabel() }}
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <div class="photo-viewer">
+              <img class="photo-viewer__img" [src]="displayUrl()" alt="Photo" />
+            </div>
+          </ion-content>
+        </ng-template>
+      </ion-modal>
     </div>
-  `, styles: [".avatar-upload{--avatar-size: 100px;--edit-button-size: 32px;--edit-button-offset: 4px;display:inline-block}.avatar-container{position:relative;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;overflow:visible}.avatar-image{width:100%;height:100%;border-radius:50%;object-fit:cover;background-color:var(--ion-color-light)}.avatar-initials{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(var(--avatar-size) * .4);font-weight:600;color:#fff;text-transform:uppercase;-webkit-user-select:none;user-select:none}.edit-button{position:absolute;bottom:var(--edit-button-offset);right:var(--edit-button-offset);width:var(--edit-button-size);height:var(--edit-button-size);border-radius:50%;border:2px solid white;background:var(--ion-color-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,background-color .2s ease;box-shadow:0 2px 8px #00000026}.edit-button ion-icon{font-size:calc(var(--edit-button-size) * .5)}.edit-button:hover{transform:scale(1.1);background:var(--ion-color-primary-shade)}.edit-button:active{transform:scale(.95)}.edit-button:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:#00000080;display:flex;align-items:center;justify-content:center}.loading-overlay ion-spinner{--color: white;width:calc(var(--avatar-size) * .4);height:calc(var(--avatar-size) * .4)}.avatar-upload--loading .edit-button{display:none}.avatar-upload--loading .avatar-image,.avatar-upload--loading .avatar-initials{filter:brightness(.7)}@container (max-width: 60px){.edit-button{--edit-button-size: 24px;--edit-button-offset: 0}}\n"] }]
+  `, styles: [".avatar-upload{--avatar-size: 100px;--edit-button-size: 32px;--edit-button-offset: 4px;display:inline-block}.avatar-container{position:relative;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;overflow:visible}.avatar-image{width:100%;height:100%;border-radius:50%;object-fit:cover;background-color:var(--ion-color-light)}.avatar-initials{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(var(--avatar-size) * .4);font-weight:600;color:#fff;text-transform:uppercase;-webkit-user-select:none;user-select:none}.edit-button{position:absolute;bottom:var(--edit-button-offset);right:var(--edit-button-offset);width:var(--edit-button-size);height:var(--edit-button-size);border-radius:50%;border:2px solid white;background:var(--ion-color-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,background-color .2s ease;box-shadow:0 2px 8px #00000026}.edit-button ion-icon{font-size:calc(var(--edit-button-size) * .5)}.edit-button:hover{transform:scale(1.1);background:var(--ion-color-primary-shade)}.edit-button:active{transform:scale(.95)}.edit-button:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:#00000080;display:flex;align-items:center;justify-content:center}.loading-overlay ion-spinner{--color: white;width:calc(var(--avatar-size) * .4);height:calc(var(--avatar-size) * .4)}.avatar-upload--loading .edit-button{display:none}.avatar-upload--loading .avatar-image,.avatar-upload--loading .avatar-initials{filter:brightness(.7)}.view-photo-btn{display:block;background:none;border:none;padding:0;margin-top:6px;font-size:.8rem;color:var(--ion-color-primary);cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px;text-align:center;width:var(--avatar-size)}.view-photo-btn:active{opacity:.7}.photo-viewer{display:flex;align-items:center;justify-content:center;padding:20px 24px 28px}.photo-viewer__img{width:min(72vw,280px);height:min(72vw,280px);border-radius:20px;object-fit:cover;box-shadow:0 8px 32px #0000002e}@container (max-width: 60px){.edit-button{--edit-button-size: 24px;--edit-button-offset: 0}}\n"] }]
         }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']