valtech-components 2.0.910 → 2.0.912

package/fesm2022/valtech-components.mjs

@@ -54,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.910';
+const VERSION = '2.0.912';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -4688,6 +4688,8 @@ const VALTECH_DEFAULT_CONTENT = {
         es: {
             // Actions
             changePhoto: 'Cambiar foto',
+            viewPhoto: 'Ver foto',
+            closePhoto: 'Cerrar',
             cropImage: 'Recortar imagen',
             confirm: 'Confirmar',
             // Status
@@ -4704,6 +4706,8 @@ const VALTECH_DEFAULT_CONTENT = {
         en: {
             // Actions
             changePhoto: 'Change photo',
+            viewPhoto: 'View photo',
+            closePhoto: 'Close',
             cropImage: 'Crop image',
             confirm: 'Confirm',
             // Status
@@ -38781,6 +38785,11 @@ class AvatarUploadComponent {
             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() {
@@ -38983,12 +38992,21 @@ class AvatarUploadComponent {
       <ion-modal
         [isOpen]="showViewModal()"
         (didDismiss)="showViewModal.set(false)"
-        [breakpoints]="[0, 0.92]"
-        [initialBreakpoint]="0.92"
+        [breakpoints]="[0, 0.55]"
+        [initialBreakpoint]="0.55"
         [handle]="true"
       >
         <ng-template>
-          <ion-content class="ion-padding photo-viewer-content">
+          <ion-header [translucent]="true">
+            <ion-toolbar>
+              <ion-buttons slot="end">
+                <ion-button fill="clear" color="dark" (click)="showViewModal.set(false)">
+                  <strong>{{ closePhotoLabel() }}</strong>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
             <div class="photo-viewer">
               <img class="photo-viewer__img" [src]="displayUrl()" alt="Photo" />
             </div>
@@ -38996,11 +39014,22 @@ class AvatarUploadComponent {
         </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)}.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-content{--background: transparent}.photo-viewer{display:flex;align-items:center;justify-content:center;padding:24px 16px 32px;min-height:200px}.photo-viewer__img{max-width:100%;max-height:65vh;border-radius:16px;object-fit:contain;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: 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: 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, IonContent, ImageCropComponent], template: `
+            args: [{ selector: 'val-avatar-upload', standalone: true, imports: [
+                        CommonModule,
+                        IonIcon,
+                        IonSpinner,
+                        IonModal,
+                        IonContent,
+                        IonHeader,
+                        IonToolbar,
+                        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 -->
@@ -39070,12 +39099,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <ion-modal
         [isOpen]="showViewModal()"
         (didDismiss)="showViewModal.set(false)"
-        [breakpoints]="[0, 0.92]"
-        [initialBreakpoint]="0.92"
+        [breakpoints]="[0, 0.55]"
+        [initialBreakpoint]="0.55"
         [handle]="true"
       >
         <ng-template>
-          <ion-content class="ion-padding photo-viewer-content">
+          <ion-header [translucent]="true">
+            <ion-toolbar>
+              <ion-buttons slot="end">
+                <ion-button fill="clear" color="dark" (click)="showViewModal.set(false)">
+                  <strong>{{ closePhotoLabel() }}</strong>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
             <div class="photo-viewer">
               <img class="photo-viewer__img" [src]="displayUrl()" alt="Photo" />
             </div>
@@ -39083,7 +39121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </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)}.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-content{--background: transparent}.photo-viewer{display:flex;align-items:center;justify-content:center;padding:24px 16px 32px;min-height:200px}.photo-viewer__img{max-width:100%;max-height:65vh;border-radius:16px;object-fit:contain;box-shadow:0 8px 32px #0000002e}@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']