@sumaris-net/ngx-components 18.25.16 → 18.25.17

package/package.json

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

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

@@ -12,7 +12,7 @@ import { FormGroup } from '@angular/forms';
 import { PromiseEvent } from '../../events';
 import { PredefinedColors } from '@ionic/core';
 import { ImageOptions } from '@capacitor/camera';
-import { GalleryMode, ImageEditEvent, ImageEditFormat } from './image-gallery.model';
+import { GalleryMode, ImageEditEvent, ImageEditFormat, ImageGallerySlideChangeEvent } from './image-gallery.model';
 import * as i0 from "@angular/core";
 export type ImageGallerySlideshowMode = 'modal' | 'inline';
 export interface ImageGallerySizes {
@@ -76,13 +76,21 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
     /** Enable the crop tool in the slideshow (defaults to true). */
     enableCrop: boolean;
     /** Image format used when emitting the edited (cropped/rotated) image. */
-    imageExportFormat: ImageEditFormat;
-    /** Export quality, applied only when imageExportFormat is 'jpeg' (0 to 1). */
-    imageExportQuality: number;
+    editionFormat: ImageEditFormat;
+    /** Export quality, applied only when editionFormat is 'jpeg' (0 to 1). */
+    editionQuality: number;
     /** Where to show the slideshow: in a full-screen modal (default), or inline, as an overlay over the gallery itself (desktop only). */
     slideshowMode: ImageGallerySlideshowMode;
     /** Height of the inline slideshow overlay (CSS value, e.g. '60vh'). Only used when zoomPresentation is 'inline'. */
     inlineZoomHeight: string;
+    /** Whether reaching the last (resp. first) image should wrap around to the first (resp. last) one. Default true. */
+    enableSlideshowLoop: boolean;
+    /**
+     * Whether more rows may exist beyond the ones currently loaded (e.g. a further page, not yet fetched).
+     * When true, reaching the last image asks the parent (via `fetchMore`) instead of looping/stopping.
+     * The gallery has no opinion on how fetching is actually done: it's entirely up to the parent.
+     */
+    canFetchMore: boolean;
     set dataSource(dataSource: TableDataSource<T, any, any, any>);
     get dataSource(): TableDataSource<T, any, any, any>;
     get enabled(): boolean;
@@ -97,6 +105,15 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
     onAfterEditRow: EventEmitter<TableElement<T>>;
     onAfterEditImage: EventEmitter<ImageEditEvent<T>>;
     click: EventEmitter<TableElement<T>>;
+    /** Emitted from the slideshow whenever the active slide moves backward (previous image). */
+    previousSlide: EventEmitter<ImageGallerySlideChangeEvent<T>>;
+    /** Emitted from the slideshow whenever the active slide moves forward (next image). */
+    nextSlide: EventEmitter<ImageGallerySlideChangeEvent<T>>;
+    /**
+     * Forwarded as-is from the slideshow when reaching the last image while `canFetchMore` is true: the
+     * parent must fetch the next page (however it does so) and resolve with whether new rows were added.
+     */
+    fetchMore: EventEmitter<PromiseEvent<boolean, void>>;
     showTooltip: boolean;
     constructor(imageService: ImageService, platform: Platform, alterCtrl: AlertController, translate: TranslateService, cd: ChangeDetectorRef, environment?: Environment);
     ngOnInit(): void;
@@ -127,7 +144,7 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
      * Can be called from outside the component (e.g. to open the gallery directly on a given image).
      */
     openSlideshow(event: Event | undefined, row: TableElement<T>): Promise<void>;
-    protected closeInlineSlideshow(): void;
+    closeSlideshow(role?: string): Promise<boolean>;
     /**
      * 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
@@ -144,7 +161,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; }; "enableMouseZoom": { "alias": "enableMouseZoom"; "required": false; }; "wheelZoomStep": { "alias": "wheelZoomStep"; "required": false; }; "maxZoomRatio": { "alias": "maxZoomRatio"; "required": false; }; "enableRotate": { "alias": "enableRotate"; "required": false; }; "enableCrop": { "alias": "enableCrop"; "required": false; }; "imageExportFormat": { "alias": "imageExportFormat"; "required": false; }; "imageExportQuality": { "alias": "imageExportQuality"; "required": false; }; "slideshowMode": { "alias": "slideshowMode"; "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 ɵ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; }; "enableRotate": { "alias": "enableRotate"; "required": false; }; "enableCrop": { "alias": "enableCrop"; "required": false; }; "editionFormat": { "alias": "editionFormat"; "required": false; }; "editionQuality": { "alias": "editionQuality"; "required": false; }; "slideshowMode": { "alias": "slideshowMode"; "required": false; }; "inlineZoomHeight": { "alias": "inlineZoomHeight"; "required": false; }; "enableSlideshowLoop": { "alias": "enableSlideshowLoop"; "required": false; }; "canFetchMore": { "alias": "canFetchMore"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; }, { "onBeforeDeleteRows": "onBeforeDeleteRows"; "onAfterAddRows": "onAfterAddRows"; "onAfterEditRow": "onAfterEditRow"; "onAfterEditImage": "onAfterEditImage"; "click": "click"; "previousSlide": "previousSlide"; "nextSlide": "nextSlide"; "fetchMore": "fetchMore"; }, never, ["ion-buttons[slot=start]", "ion-buttons[slot=end]"], false, never>;
     static ngAcceptInputType_debug: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_readOnly: unknown;
@@ -159,4 +176,6 @@ export declare class AppImageGalleryComponent<T extends Image> implements OnInit
     static ngAcceptInputType_enableMouseZoom: unknown;
     static ngAcceptInputType_enableRotate: unknown;
     static ngAcceptInputType_enableCrop: unknown;
+    static ngAcceptInputType_enableSlideshowLoop: unknown;
+    static ngAcceptInputType_canFetchMore: unknown;
 }

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

@@ -9,3 +9,7 @@ export interface ImageEditEvent<T extends Image = Image> {
     blob: Blob;
     format: ImageEditFormat;
 }
+export interface ImageGallerySlideChangeEvent<T extends Image = Image> {
+    index: number;
+    row: TableElement<T>;
+}

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

@@ -4,7 +4,7 @@ import { AlertController } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
 import { Swiper } from 'swiper/types';
 import { Image, ImageSize } from '../../image.model';
-import { ImageEditEvent, ImageEditFormat } from '../image-gallery.model';
+import { ImageEditEvent, ImageEditFormat, ImageGallerySlideChangeEvent } from '../image-gallery.model';
 import * as i0 from "@angular/core";
 interface CropRect {
     x: number;
@@ -39,6 +39,7 @@ export declare class AppImageGallerySlideshowComponent<T extends Image = Image>
     } | null;
     protected _wheelListener: ((e: WheelEvent) => void) | null;
     protected _wheelEl: HTMLElement | null;
+    protected readonly _defaultCropInset = 0.15;
     protected _cropToolActive: boolean;
     protected _cropRect: CropRect;
     protected _cropOverlayRect: {
@@ -52,6 +53,7 @@ export declare class AppImageGallerySlideshowComponent<T extends Image = Image>
         startRect: CropRect;
     } | null;
     protected readonly _cropHandles: CropHandle[];
+    protected _pendingSlideDirection: 'prev' | 'next' | null;
     rows: TableElement<T>[] | ReadonlyArray<TableElement<T>>;
     selectedIndex: number;
     mobile: boolean;
@@ -63,10 +65,14 @@ export declare class AppImageGallerySlideshowComponent<T extends Image = Image>
     maxZoomRatio: number;
     enableRotate: boolean;
     enableCrop: boolean;
-    editOutputFormat: ImageEditFormat;
-    editOutputQuality: number;
+    editionFormat: ImageEditFormat;
+    editionQuality: number;
     imageSizeQueryParam: string;
     modalImageSize: ImageSize | string;
+    /** Whether reaching the last (resp. first) slide should wrap around to the first (resp. last) one. Default true. */
+    enableLoop: boolean;
+    /** Whether more rows may exist beyond the ones currently loaded (e.g. a further page, not yet fetched). When true, reaching the last slide asks the parent (via `fetchMore`) instead of looping/stopping. */
+    canFetchMore: boolean;
     /** 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>;
@@ -74,13 +80,39 @@ export declare class AppImageGallerySlideshowComponent<T extends Image = Image>
     closeRequested: EventEmitter<void>;
     afterEditImage: EventEmitter<ImageEditEvent<T>>;
     afterEditRow: EventEmitter<TableElement<T>>;
+    /** Emitted whenever the active slide moves backward (previous image), whether triggered by the side button, a swipe, or looping past the first slide. */
+    previousSlide: EventEmitter<ImageGallerySlideChangeEvent<T>>;
+    /** Emitted whenever the active slide moves forward (next image), whether triggered by the side button, a swipe, or looping past the last slide. */
+    nextSlide: EventEmitter<ImageGallerySlideChangeEvent<T>>;
+    /**
+     * Emitted when reaching the last slide while `canFetchMore` is true: the parent is expected to fetch
+     * the next page (however it does so) and resolve with whether new rows were actually added.
+     */
+    fetchMore: EventEmitter<import("../../../events").PromiseEvent<boolean, void>>;
     swiperRef: ElementRef;
     showTooltip: boolean;
     protected get hasPendingEdit(): boolean;
+    /** No "fetch previous page" concept exists: reaching the first slide can only loop, or stop. */
+    protected get isPrevDisabled(): boolean;
+    protected get isNextDisabled(): boolean;
     constructor(alterCtrl: AlertController, translate: TranslateService, cd: ChangeDetectorRef);
     ngOnDestroy(): void;
     protected getSwiper(swiperElement?: any): Swiper;
+    /**
+     * Waits (a few animation frames) until Swiper's own slides array reflects at least `minCount` items.
+     * Needed after `fetchMore`: the new `<swiper-slide>` elements come from the `rows` input re-rendering,
+     * which may not have reached the DOM by the time the parent's returned promise resolves.
+     */
+    protected _waitForSlideCount(swiper: Swiper, minCount: number, retriesLeft?: number): Promise<boolean>;
     protected onSlideChange(swiperElement: any): void;
+    /**
+     * Emits `previousSlide`/`nextSlide` from the actual index change, covering side buttons as well as touch
+     * swipes. When `slidePrev()`/`slideNext()` triggered the change, their explicit intent is used (since with
+     * exactly 2 slides, a "step" and a manual "wrap" produce the very same index change and can't be told apart
+     * from the indexes alone). Otherwise (a plain touch swipe) Swiper never wraps on its own (no `loop` mode
+     * configured here), so a simple index comparison is unambiguous.
+     */
+    protected _emitSlideChange(previousIndex: number, activeIndex: number): void;
     protected onSwiperInit(swiperElement: any): void;
     /**
      * Swiper's own touch/mouse-drag-to-swipe gesture is captured very early (before our crop overlay's
@@ -98,6 +130,7 @@ export declare class AppImageGallerySlideshowComponent<T extends Image = Image>
     };
     protected discardEdit(swiperElement: any): void;
     protected resetCrop(_swiperElement: any): void;
+    protected _createDefaultCropRect(): CropRect;
     protected toggleCropTool(swiperElement: any): void;
     protected validateEdit(swiperElement: any): Promise<void>;
     protected _resetEditState(swiperElement: any): void;
@@ -137,7 +170,7 @@ export declare class AppImageGallerySlideshowComponent<T extends Image = Image>
     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; }; "enableMouseZoom": { "alias": "enableMouseZoom"; "required": false; }; "wheelZoomStep": { "alias": "wheelZoomStep"; "required": false; }; "maxZoomRatio": { "alias": "maxZoomRatio"; "required": false; }; "enableRotate": { "alias": "enableRotate"; "required": false; }; "enableCrop": { "alias": "enableCrop"; "required": false; }; "editOutputFormat": { "alias": "editOutputFormat"; "required": false; }; "editOutputQuality": { "alias": "editOutputQuality"; "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 ɵ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; }; "enableMouseZoom": { "alias": "enableMouseZoom"; "required": false; }; "wheelZoomStep": { "alias": "wheelZoomStep"; "required": false; }; "maxZoomRatio": { "alias": "maxZoomRatio"; "required": false; }; "enableRotate": { "alias": "enableRotate"; "required": false; }; "enableCrop": { "alias": "enableCrop"; "required": false; }; "editionFormat": { "alias": "editionFormat"; "required": false; }; "editionQuality": { "alias": "editionQuality"; "required": false; }; "imageSizeQueryParam": { "alias": "imageSizeQueryParam"; "required": false; }; "modalImageSize": { "alias": "modalImageSize"; "required": false; }; "enableLoop": { "alias": "enableLoop"; "required": false; }; "canFetchMore": { "alias": "canFetchMore"; "required": false; }; }, { "deleteRequested": "deleteRequested"; "closeRequested": "closeRequested"; "afterEditImage": "afterEditImage"; "afterEditRow": "afterEditRow"; "previousSlide": "previousSlide"; "nextSlide": "nextSlide"; "fetchMore": "fetchMore"; }, never, never, false, never>;
     static ngAcceptInputType_mobile: unknown;
     static ngAcceptInputType_readOnly: unknown;
     static ngAcceptInputType_disabled: unknown;
@@ -145,5 +178,7 @@ export declare class AppImageGallerySlideshowComponent<T extends Image = Image>
     static ngAcceptInputType_enableMouseZoom: unknown;
     static ngAcceptInputType_enableRotate: unknown;
     static ngAcceptInputType_enableCrop: unknown;
+    static ngAcceptInputType_enableLoop: unknown;
+    static ngAcceptInputType_canFetchMore: unknown;
 }
 export {};

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

@@ -666,6 +666,7 @@
       "BTN_CROP_ACTIVATE": "Crop",
       "BTN_CROP_DEACTIVATE": "Hide crop",
       "BTN_CROP_RESET": "Reset crop",
+      "BTN_CANCEL_EDIT": "Cancel changes",
       "BTN_ENABLE_MODAL_ZOOM": "Open in a modal?",
       "ERROR_EDIT_IMAGE": "Unable to save the edited image",
       "TITLE": "Title"

package/src/assets/i18n/en.json

@@ -666,6 +666,7 @@
       "BTN_CROP_ACTIVATE": "Crop",
       "BTN_CROP_DEACTIVATE": "Hide crop",
       "BTN_CROP_RESET": "Reset crop",
+      "BTN_CANCEL_EDIT": "Cancel changes",
       "BTN_ENABLE_MODAL_ZOOM": "Open in a modal?",
       "ERROR_EDIT_IMAGE": "Unable to save the edited image",
       "TITLE": "Title"

package/src/assets/i18n/fr.json

@@ -668,6 +668,7 @@
       "BTN_CROP_ACTIVATE": "Recadrer",
       "BTN_CROP_DEACTIVATE": "Masquer le recadrage",
       "BTN_CROP_RESET": "Réinitialiser le recadrage",
+      "BTN_CANCEL_EDIT": "Annuler les modifications",
       "BTN_ENABLE_MODAL_ZOOM": "Ouvrir dans une modale ?",
       "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.16",
+  "version": "18.25.17",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{