@sumaris-net/ngx-components 18.25.5 → 18.25.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "18.25.5",
+  "version": "18.25.7",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/public_api.d.ts

@@ -48,6 +48,7 @@ export * from './src/app/shared/guard/component-dirty.guard';
 export * from './src/app/shared/upload-file/upload-file.model';
 export * from './src/app/shared/upload-file/upload-file-popover.component';
 export * from './src/app/shared/upload-file/upload-file.component';
+export * from './src/app/shared/image/gallery/slideshow/image-gallery-slideshow.component';
 export * from './src/app/shared/image/gallery/image-gallery.component';
 export * from './src/app/shared/image/gallery/image-gallery.module';
 export * from './src/app/shared/image/image.model';
@@ -366,3 +367,4 @@ export * from './src/app/social/job/testing/job.testing.module';
 export * from './src/app/social/job/testing/job-progression.testing';
 export * from './src/app/social/job/testing/job-progression.testing.service';
 export * from './src/app/core/table/testing/table-validator.service';
+export * from './src/app/shared/image/gallery/image-gallery.model';

package/src/app/shared/image/gallery/image-gallery.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentChecked, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { AfterContentChecked, ChangeDetectorRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { TableDataSource, TableElement } from '@e-is/ngx-material-table';
 import { Environment } from '../../../../environments/environment.class';
@@ -9,15 +9,12 @@ import { CollectionViewer, ListRange } from '@angular/cdk/collections';
 import { TranslateService } from '@ngx-translate/core';
 import { AppColors } from '../../types';
 import { FormGroup } from '@angular/forms';
+import { PromiseEvent } from '../../events';
 import { PredefinedColors } from '@ionic/core';
-import { Swiper } from 'swiper/types';
 import { ImageOptions } from '@capacitor/camera';
+import { GalleryMode, ImageEditEvent, ImageExportFormat } from './image-gallery.model';
 import * as i0 from "@angular/core";
-export type GalleryMode = 'mosaic' | 'list';
-export interface ISwiper extends Swiper {
-    activeIndex: number;
-    imagesLoaded: number;
-}
+export type ImageGalleryZoomPresentation = 'modal' | 'inline';
 export interface ImageGallerySizes {
     mosaic: ImageSize | string;
     list: ImageSize | string;
@@ -40,10 +37,13 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
     protected _titleForm: FormGroup;
     protected _titleAutofocus: boolean;
     protected _slidesSubscription: Subscription;
-    protected _swiper: Swiper;
-    protected swiperModules: ((opts: any) => void)[];
     protected zoomActive: boolean;
     protected zoomScale: number;
+    protected _mouseZoomEnabled: boolean;
+    protected _rotationEnabled: boolean;
+    protected _cropEnabled: boolean;
+    /** Whether the inline slideshow overlay is currently shown (only relevant when zoomPresentation === 'inline'). */
+    protected _inlineSlideshowActive: boolean;
     viewChange: BehaviorSubject<ListRange>;
     cardColor: string | PredefinedColors;
     debug: boolean;
@@ -68,20 +68,37 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
     }>;
     imageSizes: ImageGallerySizes;
     imageSizeQueryParam: string;
+    /** Enable mouse-wheel zoom and mouse-drag pan in the slideshow (defaults to true on desktop). */
+    enableMouseZoom: boolean;
+    /** Zoom step applied on each mouse-wheel tick (default 0.3). */
+    wheelZoomStep: number;
+    /** Maximum zoom ratio reachable via mouse wheel (default 3). */
+    maxZoomRatio: number;
+    /** Enable 90° rotation buttons in the slideshow (defaults to true). */
+    enableRotation: boolean;
+    /** Enable the crop tool in the slideshow (defaults to true). */
+    enableCrop: boolean;
+    /** Image format used when emitting the edited (cropped/rotated) image. */
+    imageExportFormat: ImageExportFormat;
+    /** Export quality, applied only when imageExportFormat is 'jpeg' (0 to 1). */
+    imageExportQuality: number;
+    /** Where to show the slideshow: in a full-screen modal (default), or inline, as an overlay over the gallery itself (desktop only). */
+    zoomPresentation: ImageGalleryZoomPresentation;
+    /** Height of the inline slideshow overlay (CSS value, e.g. '60vh'). Only used when zoomPresentation is 'inline'. */
+    inlineZoomHeight: string;
     set dataSource(dataSource: TableDataSource<T, any, any, any>);
     get dataSource(): TableDataSource<T, any, any, any>;
     get enabled(): boolean;
     get rows(): TableElement<T>[] | ReadonlyArray<TableElement<T>>;
     get rowCount(): number;
-    get activeIndex(): number;
     zoomModal: IonModal;
     titlePopover: IonPopover;
-    swiperRef: ElementRef;
-    onBeforeDeleteRows: EventEmitter<import("../../events").PromiseEvent<boolean, {
+    onBeforeDeleteRows: EventEmitter<PromiseEvent<boolean, {
         rows: TableElement<T>[];
     }>>;
     onAfterAddRows: EventEmitter<TableElement<T>[]>;
     onAfterEditRow: EventEmitter<TableElement<T>>;
+    onAfterEditImage: EventEmitter<ImageEditEvent<T>>;
     click: EventEmitter<T>;
     showTooltip: boolean;
     constructor(imageService: ImageService, platform: Platform, alterCtrl: AlertController, translate: TranslateService, cd: ChangeDetectorRef, environment?: Environment);
@@ -108,14 +125,15 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
     protected _observeRenderChanges(): void;
     protected getTableUnknownDataSourceError(): Error;
     protected clickRow(row: TableElement<T>, index: number): Promise<void>;
-    protected activeSlideIndex: number;
-    protected getSwiper(swiperElement?: any): Swiper;
-    protected onSlideChange(swiperElement: any): void;
-    protected initModalSlides(swiperElement: any): void;
-    protected zoom(swiperElement: any, zoomIn: boolean): Promise<void>;
-    protected deleteFromModal(event: any, swiperElement: any): Promise<boolean>;
-    protected slidePrev(swiperElement: any): Promise<void>;
-    protected slideNext(swiperElement: any): Promise<void>;
+    protected closeInlineSlideshow(): void;
+    /**
+     * Handles a delete request coming from the slideshow component (either inline or in the modal):
+     * runs the same confirmation/deletion flow as a card's delete button, then resolves the promise
+     * so the slideshow knows whether to reset its zoom or close.
+     */
+    protected onSlideshowDeleteRequested(promiseEvent: PromiseEvent<boolean, {
+        row: TableElement<T>;
+    }>): Promise<void>;
     protected canDeleteRows(rows: TableElement<T>[], opts?: {
         interactive?: boolean;
     }): Promise<boolean>;
@@ -124,7 +142,7 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
     };
     protected markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppImageGalleryComponent<any>, [null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AppImageGalleryComponent<any>, "app-image-gallery", never, { "cardColor": { "alias": "cardColor"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "confirmBeforeDelete": { "alias": "confirmBeforeDelete"; "required": false; }; "showToolbar": { "alias": "showToolbar"; "required": false; }; "showFabButton": { "alias": "showFabButton"; "required": false; }; "showTitle": { "alias": "showTitle"; "required": false; }; "showAddToolbarButton": { "alias": "showAddToolbarButton"; "required": false; }; "showAddTextButton": { "alias": "showAddTextButton"; "required": false; }; "showAddCardButton": { "alias": "showAddCardButton"; "required": false; }; "showCardToolbar": { "alias": "showCardToolbar"; "required": false; }; "addButtonColor": { "alias": "addButtonColor"; "required": false; }; "addButtonText": { "alias": "addButtonText"; "required": false; }; "cardTemplate": { "alias": "cardTemplate"; "required": false; }; "imageSizes": { "alias": "imageSizes"; "required": false; }; "imageSizeQueryParam": { "alias": "imageSizeQueryParam"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; }, { "onBeforeDeleteRows": "onBeforeDeleteRows"; "onAfterAddRows": "onAfterAddRows"; "onAfterEditRow": "onAfterEditRow"; "click": "click"; }, never, ["ion-buttons[slot=start]", "ion-buttons[slot=end]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppImageGalleryComponent<any>, "app-image-gallery", never, { "cardColor": { "alias": "cardColor"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "confirmBeforeDelete": { "alias": "confirmBeforeDelete"; "required": false; }; "showToolbar": { "alias": "showToolbar"; "required": false; }; "showFabButton": { "alias": "showFabButton"; "required": false; }; "showTitle": { "alias": "showTitle"; "required": false; }; "showAddToolbarButton": { "alias": "showAddToolbarButton"; "required": false; }; "showAddTextButton": { "alias": "showAddTextButton"; "required": false; }; "showAddCardButton": { "alias": "showAddCardButton"; "required": false; }; "showCardToolbar": { "alias": "showCardToolbar"; "required": false; }; "addButtonColor": { "alias": "addButtonColor"; "required": false; }; "addButtonText": { "alias": "addButtonText"; "required": false; }; "cardTemplate": { "alias": "cardTemplate"; "required": false; }; "imageSizes": { "alias": "imageSizes"; "required": false; }; "imageSizeQueryParam": { "alias": "imageSizeQueryParam"; "required": false; }; "enableMouseZoom": { "alias": "enableMouseZoom"; "required": false; }; "wheelZoomStep": { "alias": "wheelZoomStep"; "required": false; }; "maxZoomRatio": { "alias": "maxZoomRatio"; "required": false; }; "enableRotation": { "alias": "enableRotation"; "required": false; }; "enableCrop": { "alias": "enableCrop"; "required": false; }; "imageExportFormat": { "alias": "imageExportFormat"; "required": false; }; "imageExportQuality": { "alias": "imageExportQuality"; "required": false; }; "zoomPresentation": { "alias": "zoomPresentation"; "required": false; }; "inlineZoomHeight": { "alias": "inlineZoomHeight"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; }, { "onBeforeDeleteRows": "onBeforeDeleteRows"; "onAfterAddRows": "onAfterAddRows"; "onAfterEditRow": "onAfterEditRow"; "onAfterEditImage": "onAfterEditImage"; "click": "click"; }, never, ["ion-buttons[slot=start]", "ion-buttons[slot=end]"], false, never>;
     static ngAcceptInputType_debug: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_readOnly: unknown;
@@ -136,4 +154,7 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
     static ngAcceptInputType_showAddTextButton: unknown;
     static ngAcceptInputType_showAddCardButton: unknown;
     static ngAcceptInputType_showCardToolbar: unknown;
+    static ngAcceptInputType_enableMouseZoom: unknown;
+    static ngAcceptInputType_enableRotation: unknown;
+    static ngAcceptInputType_enableCrop: unknown;
 }

package/src/app/shared/image/gallery/image-gallery.model.d.ts

@@ -0,0 +1,11 @@
+import { Image } from '../image.model';
+import { TableElement } from '@e-is/ngx-material-table';
+export type GalleryMode = 'mosaic' | 'list';
+export type ImageExportFormat = 'png' | 'jpeg';
+export interface ImageEditEvent<T extends Image = Image> {
+    row: TableElement<T>;
+    image: T;
+    dataUrl: string;
+    blob: Blob;
+    format: ImageExportFormat;
+}

package/src/app/shared/image/gallery/image-gallery.module.d.ts

@@ -1,15 +1,16 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./image-gallery.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@ionic/angular";
-import * as i4 from "@angular/forms";
-import * as i5 from "../../material/material.module";
-import * as i6 from "../../pipes/pipes.module";
-import * as i7 from "../../directives/directives.module";
-import * as i8 from "@ngx-translate/core";
-import * as i9 from "../../rx-state/rx-state.module";
+import * as i2 from "./slideshow/image-gallery-slideshow.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@ionic/angular";
+import * as i5 from "@angular/forms";
+import * as i6 from "../../material/material.module";
+import * as i7 from "../../pipes/pipes.module";
+import * as i8 from "../../directives/directives.module";
+import * as i9 from "@ngx-translate/core";
+import * as i10 from "../../rx-state/rx-state.module";
 export declare class ImageGalleryModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageGalleryModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ImageGalleryModule, [typeof i1.AppImageGalleryComponent], [typeof i2.CommonModule, typeof i3.IonicModule, typeof i4.ReactiveFormsModule, typeof i5.SharedMaterialModule, typeof i6.SharedPipesModule, typeof i7.SharedDirectivesModule, typeof i8.TranslateModule, typeof i9.RxStateModule], [typeof i3.IonicModule, typeof i8.TranslateModule, typeof i1.AppImageGalleryComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ImageGalleryModule, [typeof i1.AppImageGalleryComponent, typeof i2.AppImageGallerySlideshowComponent], [typeof i3.CommonModule, typeof i4.IonicModule, typeof i5.ReactiveFormsModule, typeof i6.SharedMaterialModule, typeof i7.SharedPipesModule, typeof i8.SharedDirectivesModule, typeof i9.TranslateModule, typeof i10.RxStateModule], [typeof i4.IonicModule, typeof i9.TranslateModule, typeof i1.AppImageGalleryComponent, typeof i2.AppImageGallerySlideshowComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ImageGalleryModule>;
 }

package/src/app/shared/image/gallery/slideshow/image-gallery-slideshow.component.d.ts

@@ -0,0 +1,149 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { TableElement } from '@e-is/ngx-material-table';
+import { AlertController } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
+import { Swiper } from 'swiper/types';
+import { Image, ImageSize } from '../../image.model';
+import { ImageEditEvent, ImageExportFormat } from '../image-gallery.model';
+import * as i0 from "@angular/core";
+interface CropRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+type CropHandle = 'move' | 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
+/**
+ * The zoom/pan/rotate/crop slideshow shown when clicking an image in `AppImageGalleryComponent`.
+ * Extracted into its own component so the exact same slideshow can be presented either inside an
+ * `ion-modal` (default), or inline as an overlay directly within the gallery, without any duplication.
+ */
+export declare class AppImageGallerySlideshowComponent<T extends Image = Image> implements OnDestroy {
+    protected alterCtrl: AlertController;
+    protected translate: TranslateService;
+    protected cd: ChangeDetectorRef;
+    protected activeSlideIndex: number;
+    protected swiperModules: ((opts: any) => void)[];
+    protected _swiper: Swiper;
+    protected _zoomState: {
+        scale: number;
+        tx: number;
+        ty: number;
+    };
+    protected _rotation: number;
+    protected _dragState: {
+        startX: number;
+        startY: number;
+        startTx: number;
+        startTy: number;
+    } | null;
+    protected _wheelListener: ((e: WheelEvent) => void) | null;
+    protected _wheelEl: HTMLElement | null;
+    protected _cropToolActive: boolean;
+    protected _cropRect: CropRect;
+    protected _cropOverlayRect: {
+        width: number;
+        height: number;
+    } | null;
+    protected _cropDragState: {
+        handle: CropHandle;
+        startX: number;
+        startY: number;
+        startRect: CropRect;
+    } | null;
+    protected readonly _cropHandles: CropHandle[];
+    rows: TableElement<T>[] | ReadonlyArray<TableElement<T>>;
+    selectedIndex: number;
+    mobile: boolean;
+    readOnly: boolean;
+    disabled: boolean;
+    debug: boolean;
+    mouseZoomEnabled: boolean;
+    wheelZoomStep: number;
+    maxZoomRatio: number;
+    rotationEnabled: boolean;
+    cropEnabled: boolean;
+    imageExportFormat: ImageExportFormat;
+    imageExportQuality: number;
+    imageSizeQueryParam: string;
+    modalImageSize: ImageSize | string;
+    /** Requests deletion of the given row. The caller (gallery) owns the confirmation/deletion logic and resolves the promise with whether it actually happened. */
+    deleteRequested: EventEmitter<import("../../../events").PromiseEvent<boolean, {
+        row: TableElement<T>;
+    }>>;
+    closeRequested: EventEmitter<void>;
+    afterEditImage: EventEmitter<ImageEditEvent<T>>;
+    afterEditRow: EventEmitter<TableElement<T>>;
+    swiperRef: ElementRef;
+    showTooltip: boolean;
+    protected get hasPendingEdit(): boolean;
+    constructor(alterCtrl: AlertController, translate: TranslateService, cd: ChangeDetectorRef);
+    ngOnDestroy(): void;
+    protected getSwiper(swiperElement?: any): Swiper;
+    protected onSlideChange(swiperElement: any): void;
+    protected onSwiperInit(swiperElement: any): void;
+    /**
+     * Swiper's own touch/mouse-drag-to-swipe gesture is captured very early (before our crop overlay's
+     * own mousedown handler can stop it), so it must be disabled upfront whenever the crop tool is active
+     * -- otherwise dragging inside the crop selection ends up sliding to the next/previous image instead.
+     * Prev/next arrow buttons keep working, since they call the Swiper API directly.
+     */
+    protected _updateSwiperTouchMove(swiperElement: any): void;
+    protected zoom(swiperElement: any, zoomIn: boolean): Promise<void>;
+    protected requestDelete(swiperElement: any): Promise<boolean>;
+    protected slidePrev(swiperElement: any): Promise<void>;
+    protected slideNext(swiperElement: any): Promise<void>;
+    protected getImageSizeQueryParams(): {
+        [key: string]: any;
+    };
+    protected discardEdit(swiperElement: any): void;
+    protected resetCrop(_swiperElement: any): void;
+    protected toggleCropTool(swiperElement: any): void;
+    protected validateEdit(swiperElement: any): Promise<void>;
+    protected _resetEditState(swiperElement: any): void;
+    protected onWindowResize(): void;
+    protected rotate(swiperElement: any, direction: 'left' | 'right'): void;
+    /**
+     * Constrains the displayed image so that, even once rotated 90°/270° via CSS transform,
+     * its visual bounding box always fits inside the slide container (no overflow).
+     */
+    protected _updateEditImageSize(swiperElement: any, retriesLeft?: number): void;
+    protected _getImageNaturalSize(imgEl: HTMLElement): {
+        width: number;
+        height: number;
+    } | null;
+    protected onCropPointerDown(event: MouseEvent | TouchEvent, swiperElement: any, handle: CropHandle): void;
+    protected onCropPointerMove(event: MouseEvent | TouchEvent, _swiperElement: any): void;
+    protected onCropPointerUp(_event: MouseEvent | TouchEvent, swiperElement?: any): void;
+    protected _computeCropRect(handle: CropHandle, start: CropRect, dx: number, dy: number): CropRect;
+    protected _getEventPoint(event: MouseEvent | TouchEvent): {
+        x: number;
+        y: number;
+    };
+    protected _updateCropOverlayPosition(swiperElement: any, retriesLeft?: number): {
+        width: number;
+        height: number;
+    } | null;
+    protected _renderEditedImage(image: Image, rotation: number, cropRect: CropRect): Promise<HTMLCanvasElement>;
+    protected _loadImageElement(src: string): Promise<HTMLImageElement>;
+    protected onPointerDown(event: MouseEvent, swiperElement: any): void;
+    protected onPointerMove(event: MouseEvent, swiperElement: any): void;
+    protected onPointerUp(event: MouseEvent, swiperElement?: any): void;
+    protected _resetZoom(swiperElement?: any): void;
+    protected _setupWheelZoom(swiperElement: any): void;
+    protected _cleanupWheelZoom(): void;
+    protected _applyZoom(swiperElement: any): void;
+    protected _clampTranslations(swiperElement: any): void;
+    protected _getActiveZoomWrapEl(swiperElement: any): HTMLElement | null;
+    protected markForCheck(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppImageGallerySlideshowComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppImageGallerySlideshowComponent<any>, "app-image-gallery-slideshow", never, { "rows": { "alias": "rows"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "mouseZoomEnabled": { "alias": "mouseZoomEnabled"; "required": false; }; "wheelZoomStep": { "alias": "wheelZoomStep"; "required": false; }; "maxZoomRatio": { "alias": "maxZoomRatio"; "required": false; }; "rotationEnabled": { "alias": "rotationEnabled"; "required": false; }; "cropEnabled": { "alias": "cropEnabled"; "required": false; }; "imageExportFormat": { "alias": "imageExportFormat"; "required": false; }; "imageExportQuality": { "alias": "imageExportQuality"; "required": false; }; "imageSizeQueryParam": { "alias": "imageSizeQueryParam"; "required": false; }; "modalImageSize": { "alias": "modalImageSize"; "required": false; }; }, { "deleteRequested": "deleteRequested"; "closeRequested": "closeRequested"; "afterEditImage": "afterEditImage"; "afterEditRow": "afterEditRow"; }, never, never, false, never>;
+    static ngAcceptInputType_mobile: unknown;
+    static ngAcceptInputType_readOnly: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_debug: unknown;
+    static ngAcceptInputType_mouseZoomEnabled: unknown;
+    static ngAcceptInputType_rotationEnabled: unknown;
+    static ngAcceptInputType_cropEnabled: unknown;
+}
+export {};

package/src/app/shared/image/gallery/testing/gallery.testing.d.ts

@@ -1,13 +1,18 @@
 import { OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { ImageAttachment, ImageAttachmentService } from './gallery.service.testing';
 import { EntitiesTableDataSource } from '../../../../core/table/entities-table-datasource.class';
 import { ImageAttachmentFilter } from './gallegry.model.testing';
+import { ImageGalleryZoomPresentation } from '../image-gallery.component';
 import * as i0 from "@angular/core";
 export declare class GalleryTestPage implements OnInit, OnDestroy {
     protected dataService: ImageAttachmentService;
+    protected route: ActivatedRoute;
     private _subscription;
     readonly dataSource: EntitiesTableDataSource<ImageAttachment, ImageAttachmentFilter>;
-    constructor(dataService: ImageAttachmentService);
+    zoomPresentation: ImageGalleryZoomPresentation;
+    protected debug: boolean;
+    constructor(dataService: ImageAttachmentService, route: ActivatedRoute);
     ngOnInit(): void;
     ngOnDestroy(): void;
     save(): void;

package/src/assets/i18n/en-US.json

@@ -661,6 +661,12 @@
     "GALLERY": {
       "BTN_EDIT_TITLE": "Edit title",
       "BTN_ADD_TITLE": "Add a title",
+      "BTN_ROTATE_LEFT": "Rotate left",
+      "BTN_ROTATE_RIGHT": "Rotate right",
+      "BTN_CROP_ACTIVATE": "Crop",
+      "BTN_CROP_DEACTIVATE": "Hide crop",
+      "BTN_CROP_RESET": "Reset crop",
+      "ERROR_EDIT_IMAGE": "Unable to save the edited image",
       "TITLE": "Title"
     }
   },

package/src/assets/i18n/en.json

@@ -661,6 +661,12 @@
     "GALLERY": {
       "BTN_EDIT_TITLE": "Edit title",
       "BTN_ADD_TITLE": "Add a title",
+      "BTN_ROTATE_LEFT": "Rotate left",
+      "BTN_ROTATE_RIGHT": "Rotate right",
+      "BTN_CROP_ACTIVATE": "Crop",
+      "BTN_CROP_DEACTIVATE": "Hide crop",
+      "BTN_CROP_RESET": "Reset crop",
+      "ERROR_EDIT_IMAGE": "Unable to save the edited image",
       "TITLE": "Title"
     }
   },

package/src/assets/i18n/fr.json

@@ -663,6 +663,12 @@
     "GALLERY": {
       "BTN_EDIT_TITLE": "Éditer le titre",
       "BTN_ADD_TITLE": "Ajouter un titre",
+      "BTN_ROTATE_LEFT": "Pivoter à gauche",
+      "BTN_ROTATE_RIGHT": "Pivoter à droite",
+      "BTN_CROP_ACTIVATE": "Recadrer",
+      "BTN_CROP_DEACTIVATE": "Masquer le recadrage",
+      "BTN_CROP_RESET": "Réinitialiser le recadrage",
+      "ERROR_EDIT_IMAGE": "Impossible d'enregistrer l'image modifiée",
       "TITLE": "Titre"
     }
   },

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "18.25.5",
+  "version": "18.25.7",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{