@sumaris-net/ngx-components 18.25.4 → 18.25.6

package/package.json

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

package/public_api.d.ts

@@ -13,6 +13,7 @@ export * from './src/app/shared/material/boolean/boolean.module';
 export { MatBooleanField } from './src/app/shared/material/boolean/material.boolean';
 export * from './src/app/shared/material/autocomplete/material.autocomplete.module';
 export * from './src/app/shared/material/autocomplete/material.autocomplete';
+export * from './src/app/shared/material/autocomplete/material.autocomplete.directive';
 export * from './src/app/shared/material/autocomplete/material.autocomplete.config';
 export * from './src/app/shared/material/autocomplete/material.autocomplete.utils';
 export * from './src/app/shared/material/chips/chips.module';
@@ -47,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';
@@ -365,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/app/shared/material/autocomplete/material.autocomplete.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, UntypedFormControl } from '@angular/forms';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { SuggestFn } from '../../services/entity-service.class';
@@ -9,7 +9,6 @@ import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger }
 import { IonSearchbar, ModalController } from '@ionic/angular';
 import { MatAutocompleteFieldConfig } from './material.autocomplete.config';
 import { AppFloatLabelType, DisplayFn, EqualsFn } from '../../types';
-import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export interface MatAutocompleteFieldSelectChange {
     source: MatSelect | MatAutocomplete;
@@ -63,8 +62,8 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     required: boolean;
     hideRequiredMarker: boolean;
     mobile: boolean;
-    showListHeader: boolean;
-    showListFooter: boolean;
+    showPanelHeader: boolean;
+    showPanelFooter: boolean;
     clearable: boolean;
     debounceTime: number;
     displaySeparator: string | null;
@@ -130,8 +129,8 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     matInputText: ElementRef<HTMLInputElement>;
     autocomplete: MatAutocomplete;
     autocompleteTrigger: MatAutocompleteTrigger;
-    listHeaderTemplate?: TemplateRef<any>;
-    listFooterTemplate?: TemplateRef<any>;
+    panelHeaderTemplate?: TemplateRef<any>;
+    panelFooterTemplate?: TemplateRef<any>;
     showTooltip: boolean;
     constructor(injector: Injector, el: ElementRef<HTMLElement>, cd: ChangeDetectorRef, modalController: ModalController, renderer: Renderer2, formGroupDir: FormGroupDirective);
     get itemCount(): number;
@@ -201,12 +200,12 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     protected onBackspace(event: Event): void;
     protected toggleFavoriteClick(event: UIEvent, value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteField, [null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocompleteField, "mat-autocomplete-field", never, { "equals": { "alias": "equals"; "required": false; }; "logPrefix": { "alias": "logPrefix"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "suggestFn": { "alias": "suggestFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hideRequiredMarker": { "alias": "hideRequiredMarker"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "showListHeader": { "alias": "showListHeader"; "required": false; }; "showListFooter": { "alias": "showListFooter"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "displaySeparator": { "alias": "displaySeparator"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "displayAttributes": { "alias": "displayAttributes"; "required": false; }; "displayColumnSizes": { "alias": "displayColumnSizes"; "required": false; }; "displayColumnNames": { "alias": "displayColumnNames"; "required": false; }; "highlightAccent": { "alias": "highlightAccent"; "required": false; }; "showAllOnFocus": { "alias": "showAllOnFocus"; "required": false; }; "showPanelOnFocus": { "alias": "showPanelOnFocus"; "required": false; }; "reloadItemsOnFocus": { "alias": "reloadItemsOnFocus"; "required": false; }; "clearInvalidValueOnBlur": { "alias": "clearInvalidValueOnBlur"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "config": { "alias": "config"; "required": false; }; "i18nPrefix": { "alias": "i18nPrefix"; "required": false; }; "noResultMessage": { "alias": "noResultMessage"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "matAutocompletePosition": { "alias": "matAutocompletePosition"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "fetchMoreThreshold": { "alias": "fetchMoreThreshold"; "required": false; }; "suggestLengthThreshold": { "alias": "suggestLengthThreshold"; "required": false; }; "showLoadingSpinner": { "alias": "showLoadingSpinner"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "showSearchBar": { "alias": "showSearchBar"; "required": false; }; "stickySearchBar": { "alias": "stickySearchBar"; "required": false; }; "applyImplicitValue": { "alias": "applyImplicitValue"; "required": false; }; "dropButtonTitle": { "alias": "dropButtonTitle"; "required": false; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; }; "trimSearchText": { "alias": "trimSearchText"; "required": false; }; "splitSearchText": { "alias": "splitSearchText"; "required": false; }; "selectInputContentOnFocus": { "alias": "selectInputContentOnFocus"; "required": false; }; "selectInputContentOnFocusDelay": { "alias": "selectInputContentOnFocusDelay"; "required": false; }; "previewImplicitValue": { "alias": "previewImplicitValue"; "required": false; }; "showFavorites": { "alias": "showFavorites"; "required": false; }; "toggleFavoriteTitle": { "alias": "toggleFavoriteTitle"; "required": false; }; "favoriteItems": { "alias": "favoriteItems"; "required": false; }; "colSizes": { "alias": "colSizes"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "clicked": "click"; "blurred": "blur"; "focused": "focus"; "dropButtonClick": "dropButtonClick"; "keydownEscape": "keydown.escape"; "keydownBackspace": "keydown.backspace"; "keyupEnter": "keyup.enter"; "arrowUp": "arrowUp"; "arrowDown": "arrowDown"; "enter": "enter"; "selectionChange": "selectionChange"; "openedChange": "openedChange"; "toggleFavorite": "toggleFavorite"; }, ["listHeaderTemplate", "listFooterTemplate"], ["[matAfter]", "[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocompleteField, "mat-autocomplete-field", never, { "equals": { "alias": "equals"; "required": false; }; "logPrefix": { "alias": "logPrefix"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "suggestFn": { "alias": "suggestFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hideRequiredMarker": { "alias": "hideRequiredMarker"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "showPanelHeader": { "alias": "showPanelHeader"; "required": false; }; "showPanelFooter": { "alias": "showPanelFooter"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "displaySeparator": { "alias": "displaySeparator"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "displayAttributes": { "alias": "displayAttributes"; "required": false; }; "displayColumnSizes": { "alias": "displayColumnSizes"; "required": false; }; "displayColumnNames": { "alias": "displayColumnNames"; "required": false; }; "highlightAccent": { "alias": "highlightAccent"; "required": false; }; "showAllOnFocus": { "alias": "showAllOnFocus"; "required": false; }; "showPanelOnFocus": { "alias": "showPanelOnFocus"; "required": false; }; "reloadItemsOnFocus": { "alias": "reloadItemsOnFocus"; "required": false; }; "clearInvalidValueOnBlur": { "alias": "clearInvalidValueOnBlur"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "config": { "alias": "config"; "required": false; }; "i18nPrefix": { "alias": "i18nPrefix"; "required": false; }; "noResultMessage": { "alias": "noResultMessage"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "matAutocompletePosition": { "alias": "matAutocompletePosition"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "fetchMoreThreshold": { "alias": "fetchMoreThreshold"; "required": false; }; "suggestLengthThreshold": { "alias": "suggestLengthThreshold"; "required": false; }; "showLoadingSpinner": { "alias": "showLoadingSpinner"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "showSearchBar": { "alias": "showSearchBar"; "required": false; }; "stickySearchBar": { "alias": "stickySearchBar"; "required": false; }; "applyImplicitValue": { "alias": "applyImplicitValue"; "required": false; }; "dropButtonTitle": { "alias": "dropButtonTitle"; "required": false; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; }; "trimSearchText": { "alias": "trimSearchText"; "required": false; }; "splitSearchText": { "alias": "splitSearchText"; "required": false; }; "selectInputContentOnFocus": { "alias": "selectInputContentOnFocus"; "required": false; }; "selectInputContentOnFocusDelay": { "alias": "selectInputContentOnFocusDelay"; "required": false; }; "previewImplicitValue": { "alias": "previewImplicitValue"; "required": false; }; "showFavorites": { "alias": "showFavorites"; "required": false; }; "toggleFavoriteTitle": { "alias": "toggleFavoriteTitle"; "required": false; }; "favoriteItems": { "alias": "favoriteItems"; "required": false; }; "colSizes": { "alias": "colSizes"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "clicked": "click"; "blurred": "blur"; "focused": "focus"; "dropButtonClick": "dropButtonClick"; "keydownEscape": "keydown.escape"; "keydownBackspace": "keydown.backspace"; "keyupEnter": "keyup.enter"; "arrowUp": "arrowUp"; "arrowDown": "arrowDown"; "enter": "enter"; "selectionChange": "selectionChange"; "openedChange": "openedChange"; "toggleFavorite": "toggleFavorite"; }, ["panelHeaderTemplate", "panelFooterTemplate"], ["[matAfter]", "[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_hideRequiredMarker: unknown;
     static ngAcceptInputType_mobile: unknown;
-    static ngAcceptInputType_showListHeader: unknown;
-    static ngAcceptInputType_showListFooter: unknown;
+    static ngAcceptInputType_showPanelHeader: unknown;
+    static ngAcceptInputType_showPanelFooter: unknown;
     static ngAcceptInputType_clearable: unknown;
     static ngAcceptInputType_debounceTime: unknown;
     static ngAcceptInputType_highlightAccent: unknown;

package/src/app/shared/material/autocomplete/material.autocomplete.directive.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class MaterialAutocompleteHeaderDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaterialAutocompleteHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MaterialAutocompleteHeaderDirective, "ng-template[panelHeader]", never, {}, {}, never, never, false, never>;
+}
+export declare class MaterialAutocompleteFooterDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaterialAutocompleteFooterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MaterialAutocompleteFooterDirective, "ng-template[panelFooter]", never, {}, {}, never, never, false, never>;
+}

package/src/app/shared/material/autocomplete/material.autocomplete.module.d.ts

@@ -1,23 +1,24 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./material.autocomplete";
-import * as i2 from "@angular/common";
-import * as i3 from "@ionic/angular";
-import * as i4 from "@angular/cdk/scrolling";
-import * as i5 from "@angular/forms";
-import * as i6 from "../../pipes/pipes.module";
-import * as i7 from "../../directives/directives.module";
-import * as i8 from "../../rx-state/rx-state.module";
-import * as i9 from "@angular/material/core";
-import * as i10 from "@angular/material/autocomplete";
-import * as i11 from "@angular/material/form-field";
-import * as i12 from "@angular/material/input";
-import * as i13 from "@angular/material/icon";
-import * as i14 from "@angular/material/button";
-import * as i15 from "@angular/material/select";
-import * as i16 from "@ngx-translate/core";
-import * as i17 from "@angular/material/tooltip";
+import * as i2 from "./material.autocomplete.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "@ionic/angular";
+import * as i5 from "@angular/cdk/scrolling";
+import * as i6 from "@angular/forms";
+import * as i7 from "../../pipes/pipes.module";
+import * as i8 from "../../directives/directives.module";
+import * as i9 from "../../rx-state/rx-state.module";
+import * as i10 from "@angular/material/core";
+import * as i11 from "@angular/material/autocomplete";
+import * as i12 from "@angular/material/form-field";
+import * as i13 from "@angular/material/input";
+import * as i14 from "@angular/material/icon";
+import * as i15 from "@angular/material/button";
+import * as i16 from "@angular/material/select";
+import * as i17 from "@ngx-translate/core";
+import * as i18 from "@angular/material/tooltip";
 export declare class SharedMatAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedMatAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedMatAutocompleteModule, [typeof i1.MatAutocompleteField], [typeof i2.CommonModule, typeof i3.IonicModule, typeof i4.ScrollingModule, typeof i5.ReactiveFormsModule, typeof i6.SharedPipesModule, typeof i7.SharedDirectivesModule, typeof i8.RxStateModule, typeof i9.MatCommonModule, typeof i10.MatAutocompleteModule, typeof i11.MatFormFieldModule, typeof i12.MatInputModule, typeof i13.MatIconModule, typeof i14.MatButtonModule, typeof i15.MatSelectModule, typeof i9.MatRippleModule, typeof i16.TranslateModule, typeof i17.MatTooltip], [typeof i10.MatAutocompleteModule, typeof i1.MatAutocompleteField]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedMatAutocompleteModule, [typeof i1.MatAutocompleteField, typeof i2.MaterialAutocompleteHeaderDirective, typeof i2.MaterialAutocompleteFooterDirective], [typeof i3.CommonModule, typeof i4.IonicModule, typeof i5.ScrollingModule, typeof i6.ReactiveFormsModule, typeof i7.SharedPipesModule, typeof i8.SharedDirectivesModule, typeof i9.RxStateModule, typeof i10.MatCommonModule, typeof i11.MatAutocompleteModule, typeof i12.MatFormFieldModule, typeof i13.MatInputModule, typeof i14.MatIconModule, typeof i15.MatButtonModule, typeof i16.MatSelectModule, typeof i10.MatRippleModule, typeof i17.TranslateModule, typeof i18.MatTooltip], [typeof i11.MatAutocompleteModule, typeof i1.MatAutocompleteField, typeof i2.MaterialAutocompleteHeaderDirective, typeof i2.MaterialAutocompleteFooterDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedMatAutocompleteModule>;
 }

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.4",
+  "version": "18.25.6",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_ngx-components.scss

@@ -194,6 +194,12 @@ mat-option {
       padding: 0 !important;
     }
   }
+
+  /* hide pseudo checkbox, in the footer*/
+  &.mat-pseudo-checkbox-hidden mat-pseudo-checkbox {
+    visibility: hidden;
+    display: none;
+  }
 }
 
 mat-option:not(:last-of-type) {
@@ -389,12 +395,14 @@ ion-list,
       /* Offset due to mat-pseudo-checkbox */
       padding-left: 32px;
     }
-    &.column {
+    &.sticky {
       /* Set header as sticky*/
       position: -webkit-sticky;
       position: sticky;
-      top: 0;
+      top: var(--top, 0);
       z-index: 1001;
+    }
+    &.column {
       background-color: var(--ion-color-secondary);
       border-bottom: 1px solid #{$app-select-option-border-color};
       color: var(--ion-color-secondary-contrast);
@@ -402,16 +410,16 @@ ion-list,
       @include font-size(12px);
       font-weight: 500;
       height: 20px;
+      --top: var(--header-column-top, 0);
       ion-col {
         white-space: nowrap;
         text-overflow: ellipsis;
       }
       &.mat-select-searchbar-sticky {
         /* offset because of the searchbar height */
-        top: var(--ion-searchbar-height, 58px);
+        --header-column-top: var(--ion-searchbar-height, 58px);
       }
     }
-
   }
 
   ion-row.ion-list-footer,
@@ -422,7 +430,7 @@ ion-list,
     /* Set footer as sticky*/
     position: -webkit-sticky;
     position: sticky;
-    bottom: 0;
+    bottom: var(--footer-bottom, 0);
     z-index: 1001;
     border-top: 1px solid #{$app-select-option-border-color};
     background-color: var(--ion-toolbar-background, #{$ion-toolbar-background});
@@ -438,6 +446,8 @@ ion-list,
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
+
   }
 
   ion-row {