@sumaris-net/ngx-components 18.25.5 → 18.25.7

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -28334,6 +28334,676 @@ ProgressInterceptor = __decorate([
     __param(0, Inject(APP_PROGRESS_BAR_SERVICE))
 ], ProgressInterceptor);
 
+/**
+ * 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.
+ */
+class AppImageGallerySlideshowComponent {
+    alterCtrl;
+    translate;
+    cd;
+    activeSlideIndex = 0;
+    swiperModules = [IonicSlides];
+    _swiper;
+    // Mouse wheel zoom & rotation state
+    _zoomState = { scale: 1, tx: 0, ty: 0 };
+    _rotation = 0; // degrees: 0, 90, 180, 270
+    _dragState = null;
+    _wheelListener = null;
+    _wheelEl = null;
+    // Crop & rotate state. Rotation is always available; the crop grid/handles only show once the
+    // crop tool has been explicitly activated (fab button). Validate/cancel show up once something changed.
+    _cropToolActive = false;
+    _cropRect = { x: 0, y: 0, width: 1, height: 1 };
+    _cropOverlayRect = null;
+    _cropDragState = null;
+    _cropHandles = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+    rows = [];
+    selectedIndex = 0;
+    mobile = false;
+    readOnly = false;
+    disabled = false;
+    debug = false;
+    mouseZoomEnabled = false;
+    wheelZoomStep = 0.3;
+    maxZoomRatio = 3;
+    rotationEnabled = true;
+    cropEnabled = true;
+    imageExportFormat = 'png';
+    imageExportQuality = 0.92;
+    imageSizeQueryParam = 'size';
+    modalImageSize;
+    /** Requests deletion of the given row. The caller (gallery) owns the confirmation/deletion logic and resolves the promise with whether it actually happened. */
+    deleteRequested = createPromiseEventEmitter();
+    closeRequested = new EventEmitter();
+    afterEditImage = new EventEmitter();
+    afterEditRow = new EventEmitter();
+    swiperRef;
+    showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
+    get hasPendingEdit() {
+        const r = this._cropRect;
+        return this._rotation !== 0 || r.x !== 0 || r.y !== 0 || r.width !== 1 || r.height !== 1;
+    }
+    constructor(alterCtrl, translate, cd) {
+        this.alterCtrl = alterCtrl;
+        this.translate = translate;
+        this.cd = cd;
+    }
+    ngOnDestroy() {
+        this._cleanupWheelZoom();
+    }
+    getSwiper(swiperElement) {
+        this._swiper = (swiperElement || this.swiperRef?.nativeElement)?.swiper || this._swiper;
+        return this._swiper;
+    }
+    onSlideChange(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        this.activeSlideIndex = swiper.activeIndex;
+        this._resetZoom(swiperElement);
+        this._updateSwiperTouchMove(swiperElement);
+        this.markForCheck();
+    }
+    onSwiperInit(swiperElement) {
+        this._resetZoom();
+        if (this.selectedIndex > 0) {
+            if (this.debug)
+                console.debug(`[image-gallery-slideshow] Initializing slideshow, selectedIndex=${this.selectedIndex}`);
+            // Use a setTimeout otherwise the swiper cannot slide
+            setTimeout(() => {
+                const swiper = this.getSwiper(swiperElement);
+                swiper.slideTo(this.selectedIndex, 0);
+            });
+        }
+        this._setupWheelZoom(swiperElement);
+        this._updateSwiperTouchMove(swiperElement);
+        setTimeout(() => {
+            this._updateEditImageSize(swiperElement);
+            this._updateCropOverlayPosition(swiperElement);
+        });
+    }
+    /**
+     * 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.
+     */
+    _updateSwiperTouchMove(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        if (!swiper)
+            return;
+        swiper.allowTouchMove = !this._cropToolActive;
+    }
+    async zoom(swiperElement, zoomIn) {
+        if (this.debug)
+            console.debug('[image-gallery-slideshow] zoom ' + (zoomIn ? 'in' : 'out'), swiperElement);
+        if (this.mouseZoomEnabled) {
+            const delta = zoomIn ? this.wheelZoomStep : -this.wheelZoomStep;
+            const newScale = Math.max(1, Math.min(this._zoomState.scale + delta, this.maxZoomRatio));
+            if (newScale === this._zoomState.scale)
+                return;
+            if (newScale === 1) {
+                this._zoomState = { scale: 1, tx: 0, ty: 0 };
+            }
+            else {
+                this._zoomState.scale = newScale;
+                this._clampTranslations(swiperElement);
+            }
+            this._applyZoom(swiperElement);
+        }
+        else {
+            const swiper = this.getSwiper(swiperElement);
+            if (zoomIn)
+                swiper.zoom.in();
+            else
+                swiper.zoom.out();
+        }
+    }
+    async requestDelete(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const currentRow = this.rows.find((row, index) => index === swiper.activeIndex);
+        if (!currentRow)
+            return false; // Row not found
+        let deleted = false;
+        try {
+            deleted = await emitPromiseEvent(this.deleteRequested, 'delete', { detail: { row: currentRow } });
+        }
+        catch (err) {
+            if (err === 'CANCELLED')
+                return false; // User cancel
+            throw err;
+        }
+        if (deleted) {
+            if (!this.rows?.length) {
+                this.closeRequested.emit();
+            }
+            else {
+                this._resetZoom(swiperElement);
+                swiper.update();
+                this.markForCheck();
+            }
+        }
+        return deleted;
+    }
+    async slidePrev(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeIndex = swiper.activeIndex;
+        if (activeIndex === 0) {
+            // Loop to last
+            await swiper.slideTo(this.rows.length - 1, 0 /*no transition, to avoid a "revert" effect*/);
+        }
+        else {
+            await swiper.slidePrev();
+        }
+    }
+    async slideNext(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeIndex = swiper.activeIndex;
+        if (activeIndex === this.rows.length - 1) {
+            // Loop to first
+            await swiper.slideTo(0, 0 /*no transition, to avoid a "revert" effect*/);
+        }
+        else {
+            await swiper.slideNext();
+        }
+    }
+    getImageSizeQueryParams() {
+        if (!this.imageSizeQueryParam || isNilOrBlank(this.modalImageSize))
+            return undefined;
+        return {
+            [this.imageSizeQueryParam]: this.modalImageSize,
+        };
+    }
+    // --- Crop & rotate tools: always available (no "enter edit mode" step) ---
+    // Validate/Cancel only appear once the user actually changed something (see `hasPendingEdit`).
+    discardEdit(swiperElement) {
+        this._resetEditState(swiperElement);
+    }
+    resetCrop(_swiperElement) {
+        this._cropRect = { x: 0, y: 0, width: 1, height: 1 };
+        this.markForCheck();
+    }
+    toggleCropTool(swiperElement) {
+        if (!this.cropEnabled || this.readOnly)
+            return;
+        this._cropToolActive = !this._cropToolActive;
+        // Discard any pending crop selection when hiding the tool
+        if (!this._cropToolActive) {
+            this._cropRect = { x: 0, y: 0, width: 1, height: 1 };
+            this._cropDragState = null;
+        }
+        this._updateSwiperTouchMove(swiperElement);
+        this.markForCheck();
+        if (this._cropToolActive) {
+            // Wait for the crop overlay to be rendered, then compute its position
+            setTimeout(() => this._updateCropOverlayPosition(swiperElement));
+        }
+    }
+    async validateEdit(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const currentRow = this.rows.find((row, index) => index === swiper.activeIndex);
+        if (!currentRow)
+            return;
+        const image = currentRow.currentData;
+        const format = this.imageExportFormat;
+        const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';
+        const quality = format === 'jpeg' ? this.imageExportQuality : undefined;
+        try {
+            const canvas = await this._renderEditedImage(image, this._rotation, this._cropRect);
+            const dataUrl = canvas.toDataURL(mimeType, quality);
+            const blob = await new Promise((resolve, reject) => {
+                canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('canvas.toBlob() failed'))), mimeType, quality);
+            });
+            // Update the row, so the slideshow and thumbnail reflect the change immediately
+            image.dataUrl = dataUrl;
+            image.url = null;
+            this.afterEditImage.emit({ row: currentRow, image, dataUrl, blob, format });
+            this.afterEditRow.emit(currentRow);
+            this._resetEditState(swiperElement);
+        }
+        catch (err) {
+            console.error('[image-gallery-slideshow] Failed to export the edited image', err);
+            await Alerts.showError('IMAGE.GALLERY.ERROR_EDIT_IMAGE', this.alterCtrl, this.translate);
+        }
+    }
+    _resetEditState(swiperElement) {
+        this._rotation = 0;
+        this._cropRect = { x: 0, y: 0, width: 1, height: 1 };
+        this._cropDragState = null;
+        this._cropToolActive = false;
+        this._applyZoom(swiperElement);
+        this._updateEditImageSize(swiperElement);
+        this._updateSwiperTouchMove(swiperElement);
+        this.markForCheck();
+    }
+    onWindowResize() {
+        const swiperElement = this.swiperRef?.nativeElement;
+        if (!swiperElement)
+            return;
+        this._updateEditImageSize(swiperElement);
+        this._updateCropOverlayPosition(swiperElement);
+    }
+    rotate(swiperElement, direction) {
+        if (!this.rotationEnabled)
+            return;
+        const delta = direction === 'right' ? 90 : -90;
+        this._rotation = (((this._rotation + delta) % 360) + 360) % 360;
+        this._applyZoom(swiperElement);
+        this._updateEditImageSize(swiperElement);
+        this._updateCropOverlayPosition(swiperElement);
+    }
+    /**
+     * 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).
+     */
+    _updateEditImageSize(swiperElement, retriesLeft = 60) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        if (!activeSlide)
+            return;
+        const containerEl = activeSlide.querySelector('.swiper-zoom-container');
+        const imgEl = activeSlide.querySelector('.swiper-zoom-target, .swiper-zoom-container > img');
+        if (!containerEl || !imgEl)
+            return;
+        if (!this.cropEnabled && !this.rotationEnabled) {
+            imgEl.style.width = '';
+            imgEl.style.height = '';
+            return;
+        }
+        const containerRect = containerEl.getBoundingClientRect();
+        const naturalSize = this._getImageNaturalSize(imgEl);
+        // The container/image may not be laid out or loaded yet: skip and retry on the next frame
+        if (!containerRect.width || !containerRect.height || !naturalSize) {
+            if (retriesLeft > 0) {
+                requestAnimationFrame(() => this._updateEditImageSize(swiperElement, retriesLeft - 1));
+            }
+            return;
+        }
+        // Compute the exact box (preserving the image's aspect ratio) that fits the available space,
+        // swapping width/height when rotated 90°/270° so the rotated visual box never overflows.
+        const swapped = this._rotation % 180 !== 0;
+        const availWidth = swapped ? containerRect.height : containerRect.width;
+        const availHeight = swapped ? containerRect.width : containerRect.height;
+        const ratio = Math.min(availWidth / naturalSize.width, availHeight / naturalSize.height);
+        imgEl.style.width = `${naturalSize.width * ratio}px`;
+        imgEl.style.height = `${naturalSize.height * ratio}px`;
+    }
+    _getImageNaturalSize(imgEl) {
+        const inner = (imgEl.tagName === 'ION-IMG' ? imgEl.shadowRoot?.querySelector('img') : imgEl);
+        if (!inner?.naturalWidth || !inner?.naturalHeight)
+            return null;
+        return { width: inner.naturalWidth, height: inner.naturalHeight };
+    }
+    // --- Crop overlay: drag to move/resize the crop rectangle ---
+    onCropPointerDown(event, swiperElement, handle) {
+        event.preventDefault();
+        event.stopPropagation();
+        const pt = this._getEventPoint(event);
+        this._cropOverlayRect = this._cropOverlayRect ?? this._updateCropOverlayPosition(swiperElement);
+        this._cropDragState = {
+            handle,
+            startX: pt.x,
+            startY: pt.y,
+            startRect: { ...this._cropRect },
+        };
+        // Also disable programmatic slide navigation while dragging (allowTouchMove is already
+        // permanently off whenever crop is enabled, see `_updateSwiperTouchMove`)
+        const swiper = this.getSwiper(swiperElement);
+        if (swiper) {
+            swiper.allowSlideNext = false;
+            swiper.allowSlidePrev = false;
+        }
+    }
+    onCropPointerMove(event, _swiperElement) {
+        if (!this._cropDragState)
+            return;
+        event.preventDefault();
+        const rect = this._cropOverlayRect;
+        if (!rect?.width || !rect?.height)
+            return;
+        const pt = this._getEventPoint(event);
+        const dx = (pt.x - this._cropDragState.startX) / rect.width;
+        const dy = (pt.y - this._cropDragState.startY) / rect.height;
+        this._cropRect = this._computeCropRect(this._cropDragState.handle, this._cropDragState.startRect, dx, dy);
+        this.markForCheck();
+    }
+    onCropPointerUp(_event, swiperElement) {
+        if (!this._cropDragState)
+            return;
+        this._cropDragState = null;
+        const swiper = swiperElement ? this.getSwiper(swiperElement) : null;
+        if (swiper) {
+            swiper.allowSlideNext = true;
+            swiper.allowSlidePrev = true;
+        }
+        if (swiperElement)
+            this._updateSwiperTouchMove(swiperElement);
+    }
+    _computeCropRect(handle, start, dx, dy) {
+        const MIN_SIZE = 0.08;
+        const clamp01 = (v) => Math.max(0, Math.min(1, v));
+        if (handle === 'move') {
+            let x = clamp01(start.x + dx);
+            let y = clamp01(start.y + dy);
+            x = Math.min(x, 1 - start.width);
+            y = Math.min(y, 1 - start.height);
+            return { x, y, width: start.width, height: start.height };
+        }
+        let left = start.x;
+        let top = start.y;
+        let right = start.x + start.width;
+        let bottom = start.y + start.height;
+        if (handle.includes('w'))
+            left = clamp01(start.x + dx);
+        if (handle.includes('e'))
+            right = clamp01(start.x + start.width + dx);
+        if (handle.includes('n'))
+            top = clamp01(start.y + dy);
+        if (handle.includes('s'))
+            bottom = clamp01(start.y + start.height + dy);
+        if (right - left < MIN_SIZE) {
+            if (handle.includes('w'))
+                left = right - MIN_SIZE;
+            else
+                right = left + MIN_SIZE;
+        }
+        if (bottom - top < MIN_SIZE) {
+            if (handle.includes('n'))
+                top = bottom - MIN_SIZE;
+            else
+                bottom = top + MIN_SIZE;
+        }
+        left = clamp01(left);
+        right = clamp01(right);
+        top = clamp01(top);
+        bottom = clamp01(bottom);
+        return { x: left, y: top, width: right - left, height: bottom - top };
+    }
+    _getEventPoint(event) {
+        if ('touches' in event && event.touches.length) {
+            return { x: event.touches[0].clientX, y: event.touches[0].clientY };
+        }
+        if ('changedTouches' in event && event.changedTouches.length) {
+            return { x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY };
+        }
+        const mouseEvent = event;
+        return { x: mouseEvent.clientX, y: mouseEvent.clientY };
+    }
+    _updateCropOverlayPosition(swiperElement, retriesLeft = 60) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        if (!activeSlide)
+            return null;
+        const containerEl = activeSlide.querySelector('.swiper-zoom-container');
+        const imgEl = activeSlide.querySelector('.swiper-zoom-target, .swiper-zoom-container > img');
+        const overlayEl = activeSlide.querySelector('.crop-overlay');
+        if (!containerEl || !imgEl || !overlayEl)
+            return null;
+        const containerRect = containerEl.getBoundingClientRect();
+        const imgRect = imgEl.getBoundingClientRect();
+        // The image may not be laid out yet: keep any previous (non-zero) value and retry on the next frame
+        if (!imgRect.width || !imgRect.height) {
+            if (retriesLeft > 0) {
+                requestAnimationFrame(() => this._updateCropOverlayPosition(swiperElement, retriesLeft - 1));
+            }
+            return this._cropOverlayRect;
+        }
+        overlayEl.style.left = `${imgRect.left - containerRect.left}px`;
+        overlayEl.style.top = `${imgRect.top - containerRect.top}px`;
+        overlayEl.style.width = `${imgRect.width}px`;
+        overlayEl.style.height = `${imgRect.height}px`;
+        this._cropOverlayRect = { width: imgRect.width, height: imgRect.height };
+        return this._cropOverlayRect;
+    }
+    // --- Canvas rendering, used to export the cropped/rotated image ---
+    async _renderEditedImage(image, rotation, cropRect) {
+        const src = image.dataUrl || image.url;
+        const img = await this._loadImageElement(src);
+        const sw = img.naturalWidth;
+        const sh = img.naturalHeight;
+        const swapped = rotation % 180 !== 0;
+        const rw = swapped ? sh : sw;
+        const rh = swapped ? sw : sh;
+        // 1) Draw the full (uncropped) image, rotated
+        const rotCanvas = document.createElement('canvas');
+        rotCanvas.width = rw;
+        rotCanvas.height = rh;
+        const rctx = rotCanvas.getContext('2d');
+        rctx.translate(rw / 2, rh / 2);
+        rctx.rotate((rotation * Math.PI) / 180);
+        rctx.drawImage(img, -sw / 2, -sh / 2);
+        // 2) Crop the rotated image
+        const cropX = Math.round(cropRect.x * rw);
+        const cropY = Math.round(cropRect.y * rh);
+        const cropW = Math.max(1, Math.round(cropRect.width * rw));
+        const cropH = Math.max(1, Math.round(cropRect.height * rh));
+        const outCanvas = document.createElement('canvas');
+        outCanvas.width = cropW;
+        outCanvas.height = cropH;
+        outCanvas.getContext('2d').drawImage(rotCanvas, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
+        return outCanvas;
+    }
+    _loadImageElement(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            if (!src.startsWith('data:'))
+                img.crossOrigin = 'anonymous';
+            img.onload = () => resolve(img);
+            img.onerror = () => reject(new Error(`[image-gallery-slideshow] Cannot load image: ${src}`));
+            img.src = src;
+        });
+    }
+    // --- Mouse-wheel zoom & mouse-drag pan ---
+    onPointerDown(event, swiperElement) {
+        if (!this.mouseZoomEnabled || this._zoomState.scale <= 1)
+            return;
+        // Don't intercept clicks on buttons/controls
+        if (event.target.closest('ion-fab-button, ion-button, button'))
+            return;
+        event.preventDefault();
+        this._dragState = {
+            startX: event.clientX,
+            startY: event.clientY,
+            startTx: this._zoomState.tx,
+            startTy: this._zoomState.ty,
+        };
+        const wrapEl = this._getActiveZoomWrapEl(swiperElement);
+        if (wrapEl)
+            wrapEl.style.cursor = 'grabbing';
+        // Disable Swiper slide-change while dragging
+        const swiper = this.getSwiper(swiperElement);
+        if (swiper) {
+            swiper.allowSlideNext = false;
+            swiper.allowSlidePrev = false;
+        }
+    }
+    onPointerMove(event, swiperElement) {
+        if (this._cropDragState) {
+            this.onCropPointerMove(event, swiperElement);
+            return;
+        }
+        if (!this._dragState)
+            return;
+        event.preventDefault();
+        this._zoomState.tx = this._dragState.startTx + event.clientX - this._dragState.startX;
+        this._zoomState.ty = this._dragState.startTy + event.clientY - this._dragState.startY;
+        this._clampTranslations(swiperElement);
+        this._applyZoom(swiperElement);
+    }
+    onPointerUp(event, swiperElement) {
+        if (this._cropDragState) {
+            this.onCropPointerUp(event, swiperElement);
+            return;
+        }
+        if (!this._dragState)
+            return;
+        this._dragState = null;
+        const wrapEl = this._getActiveZoomWrapEl(swiperElement);
+        if (wrapEl)
+            wrapEl.style.cursor = this._zoomState.scale > 1 ? 'grab' : '';
+        // Re-enable Swiper navigation
+        const swiper = swiperElement ? this.getSwiper(swiperElement) : null;
+        if (swiper) {
+            swiper.allowSlideNext = true;
+            swiper.allowSlidePrev = true;
+        }
+    }
+    _resetZoom(swiperElement) {
+        this._zoomState = { scale: 1, tx: 0, ty: 0 };
+        this._dragState = null;
+        this._rotation = 0;
+        this._cropRect = { x: 0, y: 0, width: 1, height: 1 };
+        this._cropDragState = null;
+        this._cropToolActive = false;
+        if (swiperElement) {
+            this._applyZoom(swiperElement);
+            this._updateEditImageSize(swiperElement);
+        }
+    }
+    _setupWheelZoom(swiperElement) {
+        this._cleanupWheelZoom();
+        if (!this.mouseZoomEnabled)
+            return;
+        const el = swiperElement?.nativeElement ?? swiperElement;
+        if (!el)
+            return;
+        this._wheelListener = (event) => {
+            event.preventDefault();
+            const step = this.wheelZoomStep;
+            const oldScale = this._zoomState.scale;
+            const newScale = Math.max(1, Math.min(oldScale + (event.deltaY < 0 ? step : -step), this.maxZoomRatio));
+            if (newScale === oldScale)
+                return;
+            if (newScale === 1) {
+                this._zoomState = { scale: 1, tx: 0, ty: 0 };
+            }
+            else {
+                // Zoom towards cursor position
+                const swiper = this.getSwiper(el);
+                const activeSlide = swiper?.slides?.[swiper.activeIndex];
+                if (activeSlide) {
+                    const rect = activeSlide.getBoundingClientRect();
+                    const cx = event.clientX - rect.left - rect.width / 2;
+                    const cy = event.clientY - rect.top - rect.height / 2;
+                    this._zoomState.tx = cx - ((cx - this._zoomState.tx) * newScale) / oldScale;
+                    this._zoomState.ty = cy - ((cy - this._zoomState.ty) * newScale) / oldScale;
+                }
+                this._zoomState.scale = newScale;
+                this._clampTranslations(el);
+            }
+            this._applyZoom(el);
+        };
+        el.addEventListener('wheel', this._wheelListener, { passive: false });
+        this._wheelEl = el;
+    }
+    _cleanupWheelZoom() {
+        if (this._wheelEl && this._wheelListener) {
+            this._wheelEl.removeEventListener('wheel', this._wheelListener);
+        }
+        this._wheelEl = null;
+        this._wheelListener = null;
+    }
+    _applyZoom(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        if (!activeSlide)
+            return;
+        const wrapEl = activeSlide.querySelector('.swiper-zoom-container');
+        const imgEl = activeSlide.querySelector('.swiper-zoom-target, .swiper-zoom-container > img');
+        if (!wrapEl || !imgEl)
+            return;
+        const { scale, tx, ty } = this._zoomState;
+        wrapEl.style.transitionDuration = '0ms';
+        wrapEl.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
+        imgEl.style.transitionDuration = '0ms';
+        imgEl.style.transform = `translate3d(0, 0, 0) scale(${scale}) rotate(${this._rotation}deg)`;
+        wrapEl.style.cursor = scale > 1 ? 'grab' : '';
+    }
+    _clampTranslations(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        if (!activeSlide)
+            return;
+        const imgEl = activeSlide.querySelector('.swiper-zoom-target, .swiper-zoom-container > img');
+        if (!imgEl)
+            return;
+        const imgW = imgEl.offsetWidth || imgEl.clientWidth;
+        const imgH = imgEl.offsetHeight || imgEl.clientHeight;
+        if (!imgW || !imgH)
+            return;
+        const { scale } = this._zoomState;
+        const maxTx = Math.max(0, (imgW * scale - activeSlide.offsetWidth) / 2);
+        const maxTy = Math.max(0, (imgH * scale - activeSlide.offsetHeight) / 2);
+        this._zoomState.tx = Math.max(-maxTx, Math.min(maxTx, this._zoomState.tx));
+        this._zoomState.ty = Math.max(-maxTy, Math.min(maxTy, this._zoomState.ty));
+    }
+    _getActiveZoomWrapEl(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeSlide = swiper?.slides?.[swiper.activeIndex];
+        return activeSlide?.querySelector('.swiper-zoom-container') ?? null;
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGallerySlideshowComponent, deps: [{ token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: { rows: "rows", selectedIndex: "selectedIndex", mobile: ["mobile", "mobile", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], debug: ["debug", "debug", booleanAttribute], mouseZoomEnabled: ["mouseZoomEnabled", "mouseZoomEnabled", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", rotationEnabled: ["rotationEnabled", "rotationEnabled", booleanAttribute], cropEnabled: ["cropEnabled", "cropEnabled", booleanAttribute], imageExportFormat: "imageExportFormat", imageExportQuality: "imageExportQuality", imageSizeQueryParam: "imageSizeQueryParam", modalImageSize: "modalImageSize" }, outputs: { deleteRequested: "deleteRequested", closeRequested: "closeRequested", afterEditImage: "afterEditImage", afterEditRow: "afterEditRow" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["slideshowSwiper"], descendants: true }], ngImport: i0, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, slideshowSwiper)\"\n  (mousemove)=\"onPointerMove($event, slideshowSwiper)\"\n  (mouseup)=\"onPointerUp($event, slideshowSwiper)\"\n  (mouseleave)=\"onPointerUp($event, slideshowSwiper)\"\n  (touchmove)=\"onCropPointerMove($event, slideshowSwiper)\"\n  (touchend)=\"onCropPointerUp($event, slideshowSwiper)\"\n  (touchcancel)=\"onCropPointerUp($event, slideshowSwiper)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(slideshowSwiper, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(slideshowSwiper, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && rotationEnabled) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(slideshowSwiper, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(slideshowSwiper, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && cropEnabled) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(slideshowSwiper)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(slideshowSwiper)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back -->\n  <ng-container *ngIf=\"!mobile && (rows | isArrayLength: { greaterThan: 1 })\">\n    <div class=\"side-buttons prev\" (click)=\"slidePrev(slideshowSwiper)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" (click)=\"slideNext(slideshowSwiper)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  </ng-container>\n\n  <!-- image slides -->\n  <swiper-container\n    #slideshowSwiper\n    [modules]=\"swiperModules\"\n    [zoom]=\"!mouseZoomEnabled\"\n    (swiperslidechange)=\"onSlideChange(slideshowSwiper)\"\n    (swiperinit)=\"onSwiperInit(slideshowSwiper)\"\n  >\n    @for (row of rows; track row.id; let i = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\">\n          @if (image.url) {\n            <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n          } @else {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && cropEnabled && _cropToolActive && i === activeSlideIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, slideshowSwiper, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, slideshowSwiper, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, slideshowSwiper, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, slideshowSwiper, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <ion-button\n            *ngIf=\"!readOnly\"\n            (click)=\"requestDelete(slideshowSwiper)\"\n            [disabled]=\"disabled\"\n            fill=\"clear\"\n            color=\"danger\"\n          >\n            <mat-icon slot=\"start\">delete</mat-icon>\n            {{ 'COMMON.BTN_DELETE' | translate }}\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"4\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CLOSE' | translate }}\n          </ion-button>\n          <ng-template #desktop>\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"6\" class=\"ion-text-start\">\n          <ion-button (click)=\"discardEdit(slideshowSwiper)\" color=\"medium\" fill=\"clear\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"6\" class=\"ion-text-end\">\n          <ion-button (click)=\"validateEdit(slideshowSwiper)\" color=\"tertiary\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGallerySlideshowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-image-gallery-slideshow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-content\n  class=\"ion-no-padding ion-no-margin\"\n  (mousedown)=\"onPointerDown($event, slideshowSwiper)\"\n  (mousemove)=\"onPointerMove($event, slideshowSwiper)\"\n  (mouseup)=\"onPointerUp($event, slideshowSwiper)\"\n  (mouseleave)=\"onPointerUp($event, slideshowSwiper)\"\n  (touchmove)=\"onCropPointerMove($event, slideshowSwiper)\"\n  (touchend)=\"onCropPointerUp($event, slideshowSwiper)\"\n  (touchcancel)=\"onCropPointerUp($event, slideshowSwiper)\"\n>\n  @let count = rows?.length || 0;\n  <!-- Counter  -->\n  <div class=\"top-left\">\n    <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n  </div>\n\n  <!-- zoom / rotation / crop buttons: all shown together, no \"enter edit mode\" step needed -->\n  <div class=\"top-right\">\n    @if (!mobile) {\n      <ion-fab-button size=\"small\" (click)=\"zoom(slideshowSwiper, true)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button size=\"small\" (click)=\"zoom(slideshowSwiper, false)\" color=\"light\">\n        <ion-icon name=\"search\"></ion-icon>\n        <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && rotationEnabled) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(slideshowSwiper, 'left')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_LEFT' | translate) : ''\"\n      >\n        <mat-icon>rotate_left</mat-icon>\n      </ion-fab-button>\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"rotate(slideshowSwiper, 'right')\"\n        color=\"light\"\n        [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_ROTATE_RIGHT' | translate) : ''\"\n      >\n        <mat-icon>rotate_right</mat-icon>\n      </ion-fab-button>\n    }\n    @if (!readOnly && cropEnabled) {\n      <ion-fab-button\n        size=\"small\"\n        (click)=\"toggleCropTool(slideshowSwiper)\"\n        [color]=\"_cropToolActive ? 'tertiary' : 'light'\"\n        [title]=\"\n          !showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n        [matTooltip]=\"\n          showTooltip\n            ? ((_cropToolActive ? 'IMAGE.GALLERY.BTN_CROP_DEACTIVATE' : 'IMAGE.GALLERY.BTN_CROP_ACTIVATE') | translate)\n            : ''\n        \"\n      >\n        <mat-icon>crop</mat-icon>\n      </ion-fab-button>\n      @if (_cropToolActive) {\n        <ion-fab-button\n          size=\"small\"\n          (click)=\"resetCrop(slideshowSwiper)\"\n          color=\"light\"\n          [title]=\"!showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n          [matTooltip]=\"showTooltip ? ('IMAGE.GALLERY.BTN_CROP_RESET' | translate) : ''\"\n        >\n          <mat-icon>crop_free</mat-icon>\n        </ion-fab-button>\n      }\n    }\n  </div>\n\n  <!-- navigation side buttons next/back -->\n  <ng-container *ngIf=\"!mobile && (rows | isArrayLength: { greaterThan: 1 })\">\n    <div class=\"side-buttons prev\" (click)=\"slidePrev(slideshowSwiper)\">\n      <ion-icon name=\"chevron-back\"></ion-icon>\n    </div>\n    <div class=\"side-buttons next\" (click)=\"slideNext(slideshowSwiper)\">\n      <ion-icon name=\"chevron-forward\"></ion-icon>\n    </div>\n  </ng-container>\n\n  <!-- image slides -->\n  <swiper-container\n    #slideshowSwiper\n    [modules]=\"swiperModules\"\n    [zoom]=\"!mouseZoomEnabled\"\n    (swiperslidechange)=\"onSlideChange(slideshowSwiper)\"\n    (swiperinit)=\"onSwiperInit(slideshowSwiper)\"\n  >\n    @for (row of rows; track row.id; let i = $index) {\n      <swiper-slide>\n        @let image = row | propertyGet: 'currentData';\n        <div class=\"swiper-zoom-container\">\n          @if (image.url) {\n            <ion-img class=\"swiper-zoom-target\" [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n          } @else {\n            <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n          }\n\n          <!-- crop overlay: only rendered for the active slide -->\n          @if (!readOnly && cropEnabled && _cropToolActive && i === activeSlideIndex) {\n            <div\n              class=\"crop-overlay\"\n              (mousedown)=\"onCropPointerDown($event, slideshowSwiper, 'move')\"\n              (touchstart)=\"onCropPointerDown($event, slideshowSwiper, 'move')\"\n            >\n              <!-- darkened mask around the selection: clipped to the image bounds -->\n              <div class=\"crop-mask\">\n                <div\n                  class=\"crop-mask-rect\"\n                  [style.left.%]=\"_cropRect.x * 100\"\n                  [style.top.%]=\"_cropRect.y * 100\"\n                  [style.width.%]=\"_cropRect.width * 100\"\n                  [style.height.%]=\"_cropRect.height * 100\"\n                ></div>\n              </div>\n\n              <!-- interactive selection border, grid & drag handles: never clipped, so corner/edge handles\n                   remain fully grabbable even when the selection touches the image bounds -->\n              <div\n                class=\"crop-rect\"\n                [style.left.%]=\"_cropRect.x * 100\"\n                [style.top.%]=\"_cropRect.y * 100\"\n                [style.width.%]=\"_cropRect.width * 100\"\n                [style.height.%]=\"_cropRect.height * 100\"\n              >\n                <div class=\"crop-grid\">\n                  <span class=\"line v\" style=\"left: 33.333%\"></span>\n                  <span class=\"line v\" style=\"left: 66.666%\"></span>\n                  <span class=\"line h\" style=\"top: 33.333%\"></span>\n                  <span class=\"line h\" style=\"top: 66.666%\"></span>\n                </div>\n                @for (handle of _cropHandles; track handle) {\n                  <div\n                    class=\"crop-handle {{ handle }}\"\n                    (mousedown)=\"onCropPointerDown($event, slideshowSwiper, handle)\"\n                    (touchstart)=\"onCropPointerDown($event, slideshowSwiper, handle)\"\n                  ></div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar color=\"light\">\n    @if (!hasPendingEdit) {\n      <ion-row>\n        <ion-col size=\"4\" class=\"ion-text-start\">\n          <ion-button\n            *ngIf=\"!readOnly\"\n            (click)=\"requestDelete(slideshowSwiper)\"\n            [disabled]=\"disabled\"\n            fill=\"clear\"\n            color=\"danger\"\n          >\n            <mat-icon slot=\"start\">delete</mat-icon>\n            {{ 'COMMON.BTN_DELETE' | translate }}\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"4\"></ion-col>\n        <ion-col size=\"4\" class=\"ion-text-end\">\n          <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CLOSE' | translate }}\n          </ion-button>\n          <ng-template #desktop>\n            <ion-button (click)=\"closeRequested.emit()\" color=\"tertiary\">\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    } @else {\n      <!-- A crop or rotation change is pending: ask for an explicit validation before exporting the image -->\n      <ion-row>\n        <ion-col size=\"6\" class=\"ion-text-start\">\n          <ion-button (click)=\"discardEdit(slideshowSwiper)\" color=\"medium\" fill=\"clear\">\n            <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n            {{ 'COMMON.BTN_CANCEL' | translate }}\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"6\" class=\"ion-text-end\">\n          <ion-button (click)=\"validateEdit(slideshowSwiper)\" color=\"tertiary\">\n            <ion-icon slot=\"start\" name=\"checkmark\"></ion-icon>\n            {{ 'COMMON.BTN_VALIDATE' | translate }}\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    }\n  </ion-toolbar>\n</ion-footer>\n", styles: [":host{display:flex;flex-direction:column;height:100%;-webkit-user-select:none;user-select:none}:host ion-content{flex:1 1 auto}:host .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}:host .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}:host .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}:host .side-buttons:hover{cursor:pointer}:host .side-buttons:hover ion-icon{opacity:1}:host .side-buttons.prev{left:0}:host .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}:host .side-buttons.next{right:0}:host .side-buttons.next ion-icon{right:var(--side-buttons-margin)}:host swiper-container{height:100%;background:#000}:host .swiper-zoom-container{position:relative}:host ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}:host .crop-overlay{position:absolute;z-index:15;cursor:move;touch-action:none;animation:crop-overlay-fade-in .15s ease-in}:host .crop-overlay .crop-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host .crop-overlay .crop-mask .crop-mask-rect{position:absolute;box-shadow:0 0 0 2000px #0009}:host .crop-overlay .crop-rect{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.95);cursor:move;touch-action:none}:host .crop-overlay .crop-rect .crop-grid{position:absolute;inset:0;pointer-events:none}:host .crop-overlay .crop-rect .crop-grid .line{position:absolute;background:#ffffff73}:host .crop-overlay .crop-rect .crop-grid .line.v{top:0;bottom:0;width:1px}:host .crop-overlay .crop-rect .crop-grid .line.h{left:0;right:0;height:1px}:host .crop-overlay .crop-rect .crop-handle{position:absolute;width:16px;height:16px;margin:-8px;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 1px 4px #00000080;transition:transform .12s ease;touch-action:none}:host .crop-overlay .crop-rect .crop-handle:hover{transform:scale(1.3)}:host .crop-overlay .crop-rect .crop-handle.nw{left:0;top:0;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.n{left:50%;top:0;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.ne{left:100%;top:0;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.e{left:100%;top:50%;cursor:ew-resize}:host .crop-overlay .crop-rect .crop-handle.se{left:100%;top:100%;cursor:nwse-resize}:host .crop-overlay .crop-rect .crop-handle.s{left:50%;top:100%;cursor:ns-resize}:host .crop-overlay .crop-rect .crop-handle.sw{left:0;top:100%;cursor:nesw-resize}:host .crop-overlay .crop-rect .crop-handle.w{left:0;top:50%;cursor:ew-resize}@keyframes crop-overlay-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { rows: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }], mobile: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readOnly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], debug: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], mouseZoomEnabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], wheelZoomStep: [{
+                type: Input
+            }], maxZoomRatio: [{
+                type: Input
+            }], rotationEnabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cropEnabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], imageExportFormat: [{
+                type: Input
+            }], imageExportQuality: [{
+                type: Input
+            }], imageSizeQueryParam: [{
+                type: Input
+            }], modalImageSize: [{
+                type: Input
+            }], deleteRequested: [{
+                type: Output
+            }], closeRequested: [{
+                type: Output
+            }], afterEditImage: [{
+                type: Output
+            }], afterEditRow: [{
+                type: Output
+            }], swiperRef: [{
+                type: ViewChild,
+                args: ['slideshowSwiper']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 class ImageService extends StartableService {
     platform;
     settings;
@@ -28459,10 +29129,13 @@ class AppImageGalleryComponent {
     _titleForm;
     _titleAutofocus = false;
     _slidesSubscription;
-    _swiper;
-    swiperModules = [IonicSlides];
     zoomActive = false;
     zoomScale = 1;
+    _mouseZoomEnabled = false;
+    _rotationEnabled = false;
+    _cropEnabled = false;
+    /** Whether the inline slideshow overlay is currently shown (only relevant when zoomPresentation === 'inline'). */
+    _inlineSlideshowActive = false;
     viewChange;
     cardColor;
     debug = null;
@@ -28487,6 +29160,24 @@ class AppImageGalleryComponent {
         modal: 'large',
     };
     imageSizeQueryParam = 'size';
+    /** Enable mouse-wheel zoom and mouse-drag pan in the slideshow (defaults to true on desktop). */
+    enableMouseZoom = null;
+    /** Zoom step applied on each mouse-wheel tick (default 0.3). */
+    wheelZoomStep = 0.3;
+    /** Maximum zoom ratio reachable via mouse wheel (default 3). */
+    maxZoomRatio = 3;
+    /** Enable 90° rotation buttons in the slideshow (defaults to true). */
+    enableRotation = null;
+    /** Enable the crop tool in the slideshow (defaults to true). */
+    enableCrop = null;
+    /** Image format used when emitting the edited (cropped/rotated) image. */
+    imageExportFormat = 'png';
+    /** Export quality, applied only when imageExportFormat is 'jpeg' (0 to 1). */
+    imageExportQuality = 0.92;
+    /** Where to show the slideshow: in a full-screen modal (default), or inline, as an overlay over the gallery itself (desktop only). */
+    zoomPresentation = 'inline';
+    /** Height of the inline slideshow overlay (CSS value, e.g. '60vh'). Only used when zoomPresentation is 'inline'. */
+    inlineZoomHeight = '100%';
     set dataSource(dataSource) {
         if (this._dataSource !== dataSource) {
             this._switchDataSource(dataSource);
@@ -28504,15 +29195,12 @@ class AppImageGalleryComponent {
     get rowCount() {
         return this.rows?.length || 0;
     }
-    get activeIndex() {
-        return this.getSwiper()?.activeIndex || 0;
-    }
     zoomModal;
     titlePopover;
-    swiperRef;
     onBeforeDeleteRows = createPromiseEventEmitter();
     onAfterAddRows = new EventEmitter();
     onAfterEditRow = new EventEmitter();
+    onAfterEditImage = new EventEmitter();
     click = new EventEmitter();
     showTooltip = inject(APP_SHOW_TOOLTIP, { optional: true });
     constructor(imageService, platform, alterCtrl, translate, cd, environment) {
@@ -28534,6 +29222,13 @@ class AppImageGalleryComponent {
         this.showAddCardButton = toBoolean(this.showAddCardButton, this.mobile);
         this.showFabButton = toBoolean(this.showFabButton, this.mobile && !this.showAddCardButton);
         this.showAddToolbarButton = this.showAddToolbarButton ?? (this.showToolbar && !this.readOnly);
+        this._mouseZoomEnabled = toBoolean(this.enableMouseZoom, !this.mobile);
+        this._rotationEnabled = toBoolean(this.enableRotation, true);
+        this._cropEnabled = toBoolean(this.enableCrop, true);
+        // The inline presentation is only meaningful on desktop: there is no "rest of the page" worth
+        // preserving on a small mobile screen, and the fullscreen modal already works well there.
+        if (this.mobile)
+            this.zoomPresentation = 'modal';
         // Get modal presenting element (iOS only)
         this._presentingElement = this.mobile ? document.querySelector('.ion-page') : null;
     }
@@ -28664,82 +29359,38 @@ class AppImageGalleryComponent {
         // Delegate click action
         if (this.click.observed) {
             this.click.emit(row.currentData);
+            return;
+        }
+        // By default, open the slideshow: either inline (overlay in the gallery itself), or in a full-screen modal
+        this._selectedRowIndex = index;
+        if (this.zoomPresentation === 'inline') {
+            this._inlineSlideshowActive = true;
+            this.markForCheck();
         }
-        // By default, open a zoom modal
         else {
-            this._selectedRowIndex = index;
             await this.zoomModal.present();
             await this.zoomModal.onDidDismiss();
         }
     }
-    activeSlideIndex = 0;
-    getSwiper(swiperElement) {
-        this._swiper = (swiperElement || this.swiperRef?.nativeElement)?.swiper || this._swiper;
-        return this._swiper;
-    }
-    onSlideChange(swiperElement) {
-        const swiper = this.getSwiper(swiperElement);
-        this.activeSlideIndex = swiper.activeIndex;
+    closeInlineSlideshow() {
+        this._inlineSlideshowActive = false;
         this.markForCheck();
     }
-    initModalSlides(swiperElement) {
-        if (this._selectedRowIndex > 0) {
-            if (this.debug)
-                console.debug(`[image-gallery] Initializing modal, selectedRowIndex=${this._selectedRowIndex}`);
-            // Use a setTimeout otherwise the swiper cannot slide
-            setTimeout(() => {
-                const swiper = this.getSwiper(swiperElement);
-                swiper.slideTo(this._selectedRowIndex, 0);
-            });
-        }
-    }
-    async zoom(swiperElement, zoomIn) {
-        if (this.debug)
-            console.debug('[image-gallery] zoom ' + (zoomIn ? 'in' : 'out'), swiperElement);
-        const swiper = this.getSwiper(swiperElement);
-        const zoom = swiper.zoom;
-        if (zoomIn)
-            zoom.in();
-        else
-            zoom.out();
-    }
-    async deleteFromModal(event, swiperElement) {
-        const swiper = this.getSwiper(swiperElement);
-        const currentRow = this.rows.find((row, index) => index === swiper.activeIndex);
-        if (!currentRow)
-            return false; // Row not found
-        const deleted = await this.delete(event, currentRow);
-        if (this.rows.length === 0) {
-            await this.zoomModal.dismiss();
-        }
-        else {
-            // Reset the zoom
-            swiper.zoom.out();
-            swiper.update();
-            this.markForCheck();
-        }
-        return deleted;
-    }
-    async slidePrev(swiperElement) {
-        const swiper = this.getSwiper(swiperElement);
-        const activeIndex = swiper.activeIndex;
-        if (activeIndex === 0) {
-            // Loop to last
-            await swiper.slideTo(this.rows.length - 1, 0 /*no transition, to avoid a "revert" effect*/);
-        }
-        else {
-            await swiper.slidePrev();
-        }
-    }
-    async slideNext(swiperElement) {
-        const swiper = this.getSwiper(swiperElement);
-        const activeIndex = swiper.activeIndex;
-        if (activeIndex === this.rows.length - 1) {
-            // Loop to first
-            await swiper.slideTo(0, 0 /*no transition, to avoid a "revert" effect*/);
+    /**
+     * 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.
+     */
+    async onSlideshowDeleteRequested(promiseEvent) {
+        try {
+            const deleted = await this.delete(promiseEvent, promiseEvent.detail.row);
+            promiseEvent.detail.success(deleted);
+            if (deleted && this.rows.length === 0 && this.zoomPresentation === 'inline') {
+                this.closeInlineSlideshow();
+            }
         }
-        else {
-            await swiper.slideNext();
+        catch (err) {
+            promiseEvent.detail.error(err);
         }
     }
     async canDeleteRows(rows, opts) {
@@ -28778,11 +29429,11 @@ class AppImageGalleryComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: ImageService }, { token: i2$1.Platform }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", click: "click" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }, { propertyName: "swiperRef", first: true, predicate: ["modalSwiper"], descendants: true }], ngImport: i0, template: "<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n  <!-- Add -->\n  @if (!readOnly && showAddToolbarButton && enabled) {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      (click)=\"add()\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div class=\"gallery-container ion-padding-bottom {{ this.mode }}\">\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickRow(row, index)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      <span *ngIf=\"row.currentData.title | isNotNilOrBlank; else editLabel\" translate>\n                        IMAGE.GALLERY.BTN_EDIT_TITLE\n                      </span>\n                      <ng-template #editLabel>\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      </ng-template>\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label translate>{{ addButtonText }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? addButtonText : ''\"\n              [matTooltip]=\"showTooltip ? addButtonText : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n</div>\n\n<!-- FAB button: add -->\n<ion-fab\n  slot=\"fixed\"\n  vertical=\"bottom\"\n  horizontal=\"end\"\n  *ngIf=\"showFabButton && !readOnly\"\n  [class.cdk-visually-hidden]=\"disabled\"\n  @fadeInOutAnimation\n>\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n<!-- Zoom modal -->\n<ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding ion-no-margin\">\n      @let count = rows?.length || 0;\n      <!-- Counter  -->\n      <div class=\"top-left\">\n        <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        @if (!mobile) {\n          <ion-fab-button size=\"small\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n            <ion-icon name=\"search\"></ion-icon>\n            <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n          </ion-fab-button>\n          <ion-fab-button size=\"small\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n            <ion-icon name=\"search\"></ion-icon>\n            <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n          </ion-fab-button>\n        }\n      </div>\n\n      <!-- navigation side buttons next/back -->\n      <ng-container *ngIf=\"!mobile && (rows | isArrayLength: { greaterThan: 1 })\">\n        <div class=\"side-buttons prev\" (click)=\"slidePrev(modalSwiper)\">\n          <ion-icon name=\"chevron-back\"></ion-icon>\n        </div>\n        <div class=\"side-buttons next\" (click)=\"slideNext(modalSwiper)\">\n          <ion-icon name=\"chevron-forward\"></ion-icon>\n        </div>\n      </ng-container>\n\n      <!-- image slides -->\n      <swiper-container\n        #modalSwiper\n        [modules]=\"swiperModules\"\n        [zoom]=\"true\"\n        (swiperslidechange)=\"onSlideChange(modalSwiper)\"\n        (swiperinit)=\"initModalSlides(modalSwiper)\"\n      >\n        @for (row of rows; track row.id; let last = $last) {\n          <swiper-slide>\n            @let image = row | propertyGet: 'currentData';\n            <div class=\"swiper-zoom-container\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams('modal')\" />\n              } @else {\n                <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n              }\n            </div>\n          </swiper-slide>\n        }\n      </swiper-container>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar color=\"light\">\n        <ion-row>\n          <ion-col size=\"4\" class=\"ion-text-start\">\n            <ion-button\n              *ngIf=\"!readOnly\"\n              (click)=\"deleteFromModal($event, modalSwiper)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          </ion-col>\n          <ion-col size=\"4\"></ion-col>\n          <ion-col size=\"4\" class=\"ion-text-end\">\n            <ion-button (click)=\"zoomModal.dismiss()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n            <ng-template #desktop>\n              <ion-button (click)=\"zoomModal.dismiss()\" color=\"tertiary\">\n                {{ 'COMMON.BTN_CLOSE' | translate }}\n              </ion-button>\n            </ng-template>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal swiper-container{height:100%;background:#000}.zoom-modal ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: ["debug", "debug", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showFabButton: ["showFabButton", "showFabButton", booleanAttribute], showTitle: ["showTitle", "showTitle", booleanAttribute], showAddToolbarButton: ["showAddToolbarButton", "showAddToolbarButton", booleanAttribute], showAddTextButton: ["showAddTextButton", "showAddTextButton", booleanAttribute], showAddCardButton: ["showAddCardButton", "showAddCardButton", booleanAttribute], showCardToolbar: ["showCardToolbar", "showCardToolbar", booleanAttribute], addButtonColor: "addButtonColor", addButtonText: "addButtonText", cardTemplate: "cardTemplate", imageSizes: "imageSizes", imageSizeQueryParam: "imageSizeQueryParam", enableMouseZoom: ["enableMouseZoom", "enableMouseZoom", booleanAttribute], wheelZoomStep: "wheelZoomStep", maxZoomRatio: "maxZoomRatio", enableRotation: ["enableRotation", "enableRotation", booleanAttribute], enableCrop: ["enableCrop", "enableCrop", booleanAttribute], imageExportFormat: "imageExportFormat", imageExportQuality: "imageExportQuality", zoomPresentation: "zoomPresentation", inlineZoomHeight: "inlineZoomHeight", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow", onAfterEditImage: "onAfterEditImage", click: "click" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }], ngImport: i0, template: "<ion-toolbar color=\"light\" class=\"gallery-toolbar\" *ngIf=\"showToolbar && !_inlineSlideshowActive\">\n  <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n  <!-- Add -->\n  @if (!readOnly && showAddToolbarButton && enabled) {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      (click)=\"add()\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"_inlineSlideshowActive\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"_inlineSlideshowActive\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickRow(row, index)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      <span *ngIf=\"row.currentData.title | isNotNilOrBlank; else editLabel\" translate>\n                        IMAGE.GALLERY.BTN_EDIT_TITLE\n                      </span>\n                      <ng-template #editLabel>\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      </ng-template>\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label translate>{{ addButtonText }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? addButtonText : ''\"\n              [matTooltip]=\"showTooltip ? addButtonText : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (zoomPresentation === 'inline' && _inlineSlideshowActive) {\n    <app-image-gallery-slideshow\n      class=\"inline-overlay\"\n      @fadeInOutAnimation\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [debug]=\"debug\"\n      [mouseZoomEnabled]=\"_mouseZoomEnabled\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [rotationEnabled]=\"_rotationEnabled\"\n      [cropEnabled]=\"_cropEnabled\"\n      [imageExportFormat]=\"imageExportFormat\"\n      [imageExportQuality]=\"imageExportQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeInlineSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n<ion-fab\n  slot=\"fixed\"\n  vertical=\"bottom\"\n  horizontal=\"end\"\n  *ngIf=\"showFabButton && !readOnly\"\n  [class.cdk-visually-hidden]=\"disabled\"\n  @fadeInOutAnimation\n>\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n<!-- Zoom modal -->\n@if (zoomPresentation === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [mouseZoomEnabled]=\"_mouseZoomEnabled\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [rotationEnabled]=\"_rotationEnabled\"\n        [cropEnabled]=\"_cropEnabled\"\n        [imageExportFormat]=\"imageExportFormat\"\n        [imageExportQuality]=\"imageExportQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"zoomModal.dismiss()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonModal, selector: "ion-modal" }, { kind: "component", type: i2$1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13$3.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "component", type: AppImageGallerySlideshowComponent, selector: "app-image-gallery-slideshow", inputs: ["rows", "selectedIndex", "mobile", "readOnly", "disabled", "debug", "mouseZoomEnabled", "wheelZoomStep", "maxZoomRatio", "rotationEnabled", "cropEnabled", "imageExportFormat", "imageExportQuality", "imageSizeQueryParam", "modalImageSize"], outputs: ["deleteRequested", "closeRequested", "afterEditImage", "afterEditRow"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n  <!-- Add -->\n  @if (!readOnly && showAddToolbarButton && enabled) {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      (click)=\"add()\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div class=\"gallery-container ion-padding-bottom {{ this.mode }}\">\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickRow(row, index)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      <span *ngIf=\"row.currentData.title | isNotNilOrBlank; else editLabel\" translate>\n                        IMAGE.GALLERY.BTN_EDIT_TITLE\n                      </span>\n                      <ng-template #editLabel>\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      </ng-template>\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label translate>{{ addButtonText }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? addButtonText : ''\"\n              [matTooltip]=\"showTooltip ? addButtonText : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n</div>\n\n<!-- FAB button: add -->\n<ion-fab\n  slot=\"fixed\"\n  vertical=\"bottom\"\n  horizontal=\"end\"\n  *ngIf=\"showFabButton && !readOnly\"\n  [class.cdk-visually-hidden]=\"disabled\"\n  @fadeInOutAnimation\n>\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n<!-- Zoom modal -->\n<ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding ion-no-margin\">\n      @let count = rows?.length || 0;\n      <!-- Counter  -->\n      <div class=\"top-left\">\n        <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        @if (!mobile) {\n          <ion-fab-button size=\"small\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n            <ion-icon name=\"search\"></ion-icon>\n            <ion-icon class=\"icon-secondary\" name=\"add\"></ion-icon>\n          </ion-fab-button>\n          <ion-fab-button size=\"small\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n            <ion-icon name=\"search\"></ion-icon>\n            <ion-icon class=\"icon-secondary\" name=\"remove\"></ion-icon>\n          </ion-fab-button>\n        }\n      </div>\n\n      <!-- navigation side buttons next/back -->\n      <ng-container *ngIf=\"!mobile && (rows | isArrayLength: { greaterThan: 1 })\">\n        <div class=\"side-buttons prev\" (click)=\"slidePrev(modalSwiper)\">\n          <ion-icon name=\"chevron-back\"></ion-icon>\n        </div>\n        <div class=\"side-buttons next\" (click)=\"slideNext(modalSwiper)\">\n          <ion-icon name=\"chevron-forward\"></ion-icon>\n        </div>\n      </ng-container>\n\n      <!-- image slides -->\n      <swiper-container\n        #modalSwiper\n        [modules]=\"swiperModules\"\n        [zoom]=\"true\"\n        (swiperslidechange)=\"onSlideChange(modalSwiper)\"\n        (swiperinit)=\"initModalSlides(modalSwiper)\"\n      >\n        @for (row of rows; track row.id; let last = $last) {\n          <swiper-slide>\n            @let image = row | propertyGet: 'currentData';\n            <div class=\"swiper-zoom-container\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams('modal')\" />\n              } @else {\n                <img [src]=\"image.dataUrl\" [alt]=\"image.title\" />\n              }\n            </div>\n          </swiper-slide>\n        }\n      </swiper-container>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar color=\"light\">\n        <ion-row>\n          <ion-col size=\"4\" class=\"ion-text-start\">\n            <ion-button\n              *ngIf=\"!readOnly\"\n              (click)=\"deleteFromModal($event, modalSwiper)\"\n              [disabled]=\"disabled\"\n              fill=\"clear\"\n              color=\"danger\"\n            >\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{ 'COMMON.BTN_DELETE' | translate }}\n            </ion-button>\n          </ion-col>\n          <ion-col size=\"4\"></ion-col>\n          <ion-col size=\"4\" class=\"ion-text-end\">\n            <ion-button (click)=\"zoomModal.dismiss()\" color=\"tertiary\" fill=\"clear\" *ngIf=\"mobile; else desktop\">\n              <ion-icon slot=\"start\" name=\"close\"></ion-icon>\n              {{ 'COMMON.BTN_CLOSE' | translate }}\n            </ion-button>\n            <ng-template #desktop>\n              <ion-button (click)=\"zoomModal.dismiss()\" color=\"tertiary\">\n                {{ 'COMMON.BTN_CLOSE' | translate }}\n              </ion-button>\n            </ng-template>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal swiper-container{height:100%;background:#000}.zoom-modal ion-fab-button .icon-secondary{top:11px;left:6px;height:14px}\n"] }]
+            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toolbar color=\"light\" class=\"gallery-toolbar\" *ngIf=\"showToolbar && !_inlineSlideshowActive\">\n  <ng-content select=\"ion-buttons[slot=start]\"></ng-content>\n\n  <!-- Add -->\n  @if (!readOnly && showAddToolbarButton && enabled) {\n    <button\n      mat-icon-button\n      [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n      (click)=\"add()\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  }\n\n  <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\" [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div\n  class=\"gallery-container ion-padding-bottom {{ mode }}\"\n  [class.inline-zoom-active]=\"_inlineSlideshowActive\"\n  [style.--inline-zoom-height]=\"inlineZoomHeight\"\n>\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\" [class.cdk-visually-hidden]=\"_inlineSlideshowActive\">\n    <ion-row>\n      <ion-col *rxFor=\"let row of _data$; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        @let image = row | propertyGet: 'currentData';\n        @if (cardTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate; context: { $implicit: row, mode: mode, image: image }\"\n          ></ng-container>\n        } @else {\n          <ion-card\n            #card\n            class=\"image-card\"\n            [class.zoom-hover]=\"!mobile\"\n            [color]=\"cardColor\"\n            (click)=\"clickRow(row, index)\"\n            tappable\n            @fadeInAnimation\n          >\n            <figure class=\"card-thumbnail\">\n              @if (image.url) {\n                <ion-img [src]=\"image.url | appendQueryParams: getImageSizeQueryParams()\" />\n              } @else {\n                <ion-img [src]=\"image.dataUrl\" />\n              }\n            </figure>\n\n            <!-- toolbar for title (when not hover) -->\n            @if (showTitle && image.title) {\n              <ion-toolbar color=\"transparent\" class=\"title\">\n                <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n              </ion-toolbar>\n            }\n\n            <!-- action toolbar shown when hover image -->\n            @if (!readOnly && !mobile && showCardToolbar) {\n              <ion-toolbar #cardToolbar color=\"light\" class=\"buttons\">\n                <!-- edit title button -->\n                @if (showTitle) {\n                  <button\n                    mat-button\n                    slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"focusCardToolbar(cardToolbar)\"\n                  >\n                    <mat-icon>edit</mat-icon>\n                    <mat-label>\n                      <span *ngIf=\"row.currentData.title | isNotNilOrBlank; else editLabel\" translate>\n                        IMAGE.GALLERY.BTN_EDIT_TITLE\n                      </span>\n                      <ng-template #editLabel>\n                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                      </ng-template>\n                    </mat-label>\n                  </button>\n                }\n\n                <div class=\"flex-spacer\"></div>\n\n                <!-- delete button -->\n                <button\n                  mat-icon-button\n                  slot=\"end\"\n                  class=\"ion-float-end\"\n                  [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n                  [disabled]=\"disabled\"\n                  (click)=\"delete($event, row)\"\n                >\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </ion-toolbar>\n            }\n          </ion-card>\n        }\n      </ion-col>\n\n      <!-- add button -->\n      @if ((showAddTextButton || showAddCardButton) && !readOnly) {\n        <ion-col [size]=\"_colSize\" @fadeInAnimation>\n          @if (showAddTextButton) {\n            <ion-button (click)=\"add($event)\" [disabled]=\"disabled\" [color]=\"addButtonColor\">\n              <mat-label translate>{{ addButtonText }}</mat-label>\n              <ion-icon slot=\"end\" name=\"camera\"></ion-icon>\n            </ion-button>\n          } @else if (showAddCardButton) {\n            <ion-card\n              class=\"image-card-button\"\n              color=\"light\"\n              (click)=\"add($event)\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? addButtonText : ''\"\n              [matTooltip]=\"showTooltip ? addButtonText : ''\"\n              tappable\n            >\n              <ion-card-content>\n                <div class=\"icon-container\">\n                  <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n                  <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n                </div>\n              </ion-card-content>\n            </ion-card>\n          }\n        </ion-col>\n      }\n    </ion-row>\n  </ion-grid>\n\n  <!-- Inline slideshow: shown as an overlay directly within the gallery, instead of a full-screen modal.\n       The rest of the page (outside the gallery) stays fully visible and usable, unlike the modal's backdrop. -->\n  @if (zoomPresentation === 'inline' && _inlineSlideshowActive) {\n    <app-image-gallery-slideshow\n      class=\"inline-overlay\"\n      @fadeInOutAnimation\n      [rows]=\"rows\"\n      [selectedIndex]=\"_selectedRowIndex\"\n      [mobile]=\"mobile\"\n      [readOnly]=\"readOnly\"\n      [disabled]=\"disabled\"\n      [debug]=\"debug\"\n      [mouseZoomEnabled]=\"_mouseZoomEnabled\"\n      [wheelZoomStep]=\"wheelZoomStep\"\n      [maxZoomRatio]=\"maxZoomRatio\"\n      [rotationEnabled]=\"_rotationEnabled\"\n      [cropEnabled]=\"_cropEnabled\"\n      [imageExportFormat]=\"imageExportFormat\"\n      [imageExportQuality]=\"imageExportQuality\"\n      [imageSizeQueryParam]=\"imageSizeQueryParam\"\n      [modalImageSize]=\"imageSizes?.modal\"\n      (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n      (closeRequested)=\"closeInlineSlideshow()\"\n      (afterEditImage)=\"onAfterEditImage.emit($event)\"\n      (afterEditRow)=\"onAfterEditRow.emit($event)\"\n    ></app-image-gallery-slideshow>\n  }\n</div>\n\n<!-- FAB button: add -->\n<ion-fab\n  slot=\"fixed\"\n  vertical=\"bottom\"\n  horizontal=\"end\"\n  *ngIf=\"showFabButton && !readOnly\"\n  [class.cdk-visually-hidden]=\"disabled\"\n  @fadeInOutAnimation\n>\n  <ion-fab-button color=\"tertiary\" (click)=\"add($event)\">\n    <ion-icon name=\"camera\"></ion-icon>\n    <ion-icon name=\"add\" class=\"icon-secondary\" style=\"left: 33px; top: 9px; font-size: 20px\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n\n<!-- Zoom modal -->\n@if (zoomPresentation === 'modal') {\n  <ion-modal #zoomModal class=\"stack-modal zoom-modal\" [class.modal-fullscreen]=\"mobile\" [class.modal-large]=\"!mobile\">\n    <ng-template>\n      <app-image-gallery-slideshow\n        [rows]=\"rows\"\n        [selectedIndex]=\"_selectedRowIndex\"\n        [mobile]=\"mobile\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"disabled\"\n        [debug]=\"debug\"\n        [mouseZoomEnabled]=\"_mouseZoomEnabled\"\n        [wheelZoomStep]=\"wheelZoomStep\"\n        [maxZoomRatio]=\"maxZoomRatio\"\n        [rotationEnabled]=\"_rotationEnabled\"\n        [cropEnabled]=\"_cropEnabled\"\n        [imageExportFormat]=\"imageExportFormat\"\n        [imageExportQuality]=\"imageExportQuality\"\n        [imageSizeQueryParam]=\"imageSizeQueryParam\"\n        [modalImageSize]=\"imageSizes?.modal\"\n        (deleteRequested)=\"onSlideshowDeleteRequested($event)\"\n        (closeRequested)=\"zoomModal.dismiss()\"\n        (afterEditImage)=\"onAfterEditImage.emit($event)\"\n        (afterEditRow)=\"onAfterEditRow.emit($event)\"\n      ></app-image-gallery-slideshow>\n    </ng-template>\n  </ion-modal>\n}\n\n<ion-popover #titlePopover>\n  <ng-template>\n    <ion-content class=\"ion-padding\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <form [formGroup]=\"_titleForm\">\n        <mat-form-field floatLabel=\"auto\">\n          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>\n          <input\n            matInput\n            formControlName=\"title\"\n            [readonly]=\"disabled\"\n            [appAutofocus]=\"_titleAutofocus\"\n            (keydown.control.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n          />\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"!showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate) : ''\"\n            >\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px;--image-margin-safe-area: var(--image-margin-inline, 0px) * 2 - 3px;--segment-max-width: 150px}ion-toolbar{position:sticky;top:0}ion-toolbar ion-segment{max-width:var(--segment-max-width)}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%;max-height:var(--img-max-height, calc(100% - var(--image-margin-safe-area, 0px)))}.image-card .card-thumbnail>ion-img{min-height:100%;height:100%;object-fit:cover;object-position:center;transition:scale .2s ease-in-out;scale:var(--img-scale)}.image-card .card-thumbnail>ion-img img{max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: rgba(0, 0, 0, .45) !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-safe-area, 0px));max-height:max(min(30vh,200px),var(--img-max-height, 0px));transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:#000;position:absolute;z-index:10}.gallery-container{position:relative}.gallery-container.inline-zoom-active{min-height:var(--inline-zoom-height, 60vh)}.inline-overlay{position:absolute;inset:0;z-index:20;background:#000}\n"] }]
         }], ctorParameters: () => [{ type: ImageService }, { type: i2$1.Platform }, { type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Optional
                 }, {
@@ -28837,6 +29488,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], imageSizeQueryParam: [{
                 type: Input
+            }], enableMouseZoom: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], wheelZoomStep: [{
+                type: Input
+            }], maxZoomRatio: [{
+                type: Input
+            }], enableRotation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], enableCrop: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], imageExportFormat: [{
+                type: Input
+            }], imageExportQuality: [{
+                type: Input
+            }], zoomPresentation: [{
+                type: Input
+            }], inlineZoomHeight: [{
+                type: Input
             }], dataSource: [{
                 type: Input
             }], zoomModal: [{
@@ -28845,15 +29517,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], titlePopover: [{
                 type: ViewChild,
                 args: ['titlePopover']
-            }], swiperRef: [{
-                type: ViewChild,
-                args: ['modalSwiper']
             }], onBeforeDeleteRows: [{
                 type: Output
             }], onAfterAddRows: [{
                 type: Output
             }], onAfterEditRow: [{
                 type: Output
+            }], onAfterEditImage: [{
+                type: Output
             }], click: [{
                 type: Output
             }] } });
@@ -28862,7 +29533,8 @@ class ImageGalleryModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ImageGalleryModule, declarations: [
             // Components
-            AppImageGalleryComponent], imports: [CommonModule,
+            AppImageGalleryComponent,
+            AppImageGallerySlideshowComponent], imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedMaterialModule,
@@ -28870,7 +29542,8 @@ class ImageGalleryModule {
             SharedDirectivesModule, i1$1.TranslateModule, RxStateModule], exports: [IonicModule,
             TranslateModule,
             // Components
-            AppImageGalleryComponent] });
+            AppImageGalleryComponent,
+            AppImageGallerySlideshowComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageGalleryModule, imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
@@ -28898,12 +29571,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     declarations: [
                         // Components
                         AppImageGalleryComponent,
+                        AppImageGallerySlideshowComponent,
                     ],
                     exports: [
                         IonicModule,
                         TranslateModule,
                         // Components
                         AppImageGalleryComponent,
+                        AppImageGallerySlideshowComponent,
                     ],
                 }]
         }] });
@@ -51169,16 +51844,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class GalleryTestPage {
     dataService;
+    route;
     _subscription = new Subscription();
     dataSource;
-    constructor(dataService) {
+    zoomPresentation = 'modal';
+    debug = false;
+    constructor(dataService, route) {
         this.dataService = dataService;
+        this.route = route;
         this.dataSource = new EntitiesTableDataSource(ImageAttachment, this.dataService, null, {
             saveBeforeDelete: true,
             saveOnlyDirtyRows: false,
         });
+        this.debug = this.route.snapshot.queryParamMap.get('debug') === 'true';
     }
     ngOnInit() {
+        this.zoomPresentation = this.route.snapshot.queryParamMap.get('zoomPresentation') || 'modal';
         this._subscription.add(this.dataSource.watchAll(0, 100, null, null, null).subscribe());
     }
     ngOnDestroy() {
@@ -51187,13 +51868,13 @@ class GalleryTestPage {
     save() {
         this.dataSource.save();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GalleryTestPage, deps: [{ token: ImageAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: GalleryTestPage, selector: "app-gallery-test-page", providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- DEBUG -->\n  <app-debug title=\"Galley\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n  ></app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "imageSizes", "imageSizeQueryParam", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "click"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GalleryTestPage, deps: [{ token: ImageAttachmentService }, { token: i1$7.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GalleryTestPage, selector: "app-gallery-test-page", providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [zoomPresentation]=\"zoomPresentation\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "imageSizes", "imageSizeQueryParam", "enableMouseZoom", "wheelZoomStep", "maxZoomRatio", "enableRotation", "enableCrop", "imageExportFormat", "imageExportQuality", "zoomPresentation", "inlineZoomHeight", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "onAfterEditImage", "click"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GalleryTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gallery-test-page', providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- DEBUG -->\n  <app-debug title=\"Galley\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n  ></app-image-gallery>\n</ion-content>\n" }]
-        }], ctorParameters: () => [{ type: ImageAttachmentService }] });
+            args: [{ selector: 'app-gallery-test-page', providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }], template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Image gallery</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- DEBUG -->\n  @if (debug) {\n    <app-debug title=\"Galley\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>\n        </ion-row>\n      </ion-grid>\n    </app-debug>\n  }\n\n  <app-image-gallery\n    #gallery\n    [dataSource]=\"dataSource\"\n    [zoomPresentation]=\"zoomPresentation\"\n    [inlineZoomHeight]=\"'100%'\"\n    (onAfterAddRows)=\"save()\"\n    (onAfterEditRow)=\"save()\"\n    [debug]=\"debug\"\n  ></app-image-gallery>\n</ion-content>\n" }]
+        }], ctorParameters: () => [{ type: ImageAttachmentService }, { type: i1$7.ActivatedRoute }] });
 
 const routes$8 = [
     {
@@ -53931,5 +54612,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_ACCOUNT_SERVICE, APP_ACCOUNT_SERVICE_OPTIONS, APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN, APP_CELL_SELECTION_SERVICE_TOKEN, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMarkdownContent, AppMarkdownModal, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSelectUsersModal, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextFormModule, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySlicePipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutoTooltipDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellIdentifierDirective, CellSelectionDirective, CellSelectionService, CellValueChangeListener, ChangeCaseToUnderscorePipe, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_ISO_PATTERNS, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateFromPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialAutocompleteFooterDirective, MaterialAutocompleteHeaderDirective, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NestedTableTestPage, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFilterAdditionalFields, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, ReferentialsToStringPipe, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateOutput, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, STARTUP_DATA_STORAGE_KEY, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StartupService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, UsersUtils, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, decorateWithTakeUntil, deepMergeSkipUndefined, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorLuminance, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isTouchUi, isVersionCompatible, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, providePersonService, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlRequired, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toLoadData, toLoadResult, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_ACCOUNT_SERVICE, APP_ACCOUNT_SERVICE_OPTIONS, APP_CELL_SELECTION_SERVICE_CONFIG_TOKEN, APP_CELL_SELECTION_SERVICE_TOKEN, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FEED_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_HOME_CONFIG, APP_HOME_TOOLBAR_BUTTONS, APP_HOTKEYS_CONFIG, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PERSON_SERVICE, APP_PERSON_SERVICE_OPTIONS, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_SHOW_TOOLTIP, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractNamedFilterService, AbstractPersonService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppChangePasswordModule, AppChangePasswordPage, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppImageGallerySlideshowComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMarkdownContent, AppMarkdownModal, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppPropertiesUtils, AppPropertyUtils, AppRegisterModule, AppResetPasswordModal, AppRowField, AppSelectPeerModule, AppSelectUsersModal, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextFormModule, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendQueryParamsPipePipe, ArrayDistinctPipe, ArrayFilterPipe, ArrayFindByPropertyPipe, ArrayFirstPipe, ArrayFormTestPage, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayMapPipe, ArrayPluckPipe, ArraySlicePipe, ArraySortPipe, AsAnyPipe, AsArrayPipe, AsBooleanPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoResizeDirective, AutoTitleDirective, AutoTooltipDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellIdentifierDirective, CellSelectionDirective, CellSelectionService, CellValueChangeListener, ChangeCaseToUnderscorePipe, ChangePasswordForm, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_ISO_PATTERNS, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_JOIN_ARRAY_VALUES_SEPARATOR, DEFAULT_JOIN_PROPERTIES_SEPARATOR, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateFromPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DisplayWithPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR_REGEXP_GLOBAL, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FeedDirective, FeedModule, FeedPage, FeedService, FeedsComponent, FileResponse, FileService, FileSizePipe, FilesUtils, FirstFalsePipe, FirstPipe, FirstTruePipe, FormArrayAtControlPipe, FormArrayAtGroupPipe, FormArrayHelper, FormArrayTestModule, FormButtonsBarComponent, FormButtonsBarToken, FormErrorPipe, FormErrorTranslatePipe, FormErrorTranslator, FormFieldDefinitionUtils, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetNamePipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, IsValidDatePipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonFeedUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_PATTERNS, LAT_LONG_PATTERN_MAX_DECIMALS, LAT_LONG_VALUE_MAX_DECIMALS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MASKS, MASK_RANGES, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapPipe, MapToPipe, MapValuesPipe, MarkdownDirective, MarkdownService, MarkdownTestPage, MarkdownTestingModule, MarkdownUtils, MaskitoPlaceholderPipe, MaskitoTestPage, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatLatLongFieldInput, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialAutocompleteFooterDirective, MaterialAutocompleteHeaderDirective, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NavActionsColumnComponent, NestedTableTestPage, NetworkService, NetworkUtils, NewTokenForm, NewTokenModal, NgInitDirective, NgVarDirective, NoHtmlPipe, NotEmptyArrayPipe, NumberFormatPipe, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PLUS_PLACEHOLDER_CHAR_REGEXP_GLOBAL, PRINT_ID_QUERY_PARAM, PRINT_LOADING_STORAGE_KEY_PREFIX, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFilterAdditionalFields, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, PrintService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, ReferentialsToStringPipe, RegExpUtils, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RoundPipe, RxStateComputed, RxStateModule, RxStateOutput, RxStateProperty, RxStateRegister, RxStateSelect, SCRYPT_PARAMS, SETTINGS_COMPACT_ROWS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_CONFIG_OPTIONS, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SPACE_PLACEHOLDER_CHAR_REGEXP_GLOBAL, STARTUP_DATA_STORAGE_KEY, SafeHtmlPipe, SafeStylePipe, SelectPeerModal, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMarkdownModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, SplitArrayInChunksPipe, StartableService, StartupService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, StrReplacePipe, SubMenuTabDirective, SwipeTestPage, TABLE_SETTINGS_ENUM, TOOLBAR_HEADER_ID, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingModule, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ThrottledClickDirective, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, TruncHtmlPipe, TruncTextPipe, TruncateHtmlPipe, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UrlUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, UsersUtils, ValueFormatPipe, VersionUtils, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, assignSkipUndefined, base64ArrayBuffer, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, collectByPropertyPath, compareValues, compareValuesDesc, compareVersionNumbers, composeComparators, computeDecimalDegrees, computeDecimalPart, copyEntity2Form, createAppStartupInitializer, createPromiseEvent, createPromiseEventEmitter, decorateWithTakeUntil, deepMergeSkipUndefined, departmentToString, departmentsToString, disableAndClearControl, disableAndClearControls, disableControl, disableControls, emitPromiseEvent, enableControl, enableControls, enableRxStateProdMode, entityToString, equals, equalsOrNil, escapeRegExp, expansionAnimation, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatLong, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorLuminance, getColorShade, getColorTint, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getInputRangeFromCaretIndex, getInputSelectionRangesFromMask, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, getRandomImageWithCredit, getUserAgent, hexToRgb, hexToRgbArray, initArrayControlsFromValues, interpolateString, intersectArrays, isAndroid, isBlankString, isCapacitor, isChrome, isControlHasInput, isEdge, isEmptyArray, isEntityService, isFirefox, isFocusableElement, isIOS, isInputElement, isInstanceOf, isInt, isIpad, isLightColor, isMacOS, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilObject, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isOnFieldMode, isPrint, isProgressEvent, isPromise, isResponseEvent, isSafari, isSameVersion, isStartableService, isTouchUi, isVersionCompatible, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoAutoSelectByMaskPattern, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mergeObjectsWithoutUndefined, mixHex, moveInputCaretToSeparator, newArray, noHtml, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, nullIfUndefined, numberOrNilAttribute, numberToString, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, provideAccountService, providePersonService, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputContentFromEvent, selectInputRange, setCalculatedValue, setControlEnabled, setControlRequired, setControlsEnabled, setFormErrors, setPropertyByPath, setTabIndex, sleep, slideDownAnimation, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitArrayInChunks, splitById, splitByProperty, splitDegreesToDDArray, splitDegreesToDDMMArray, splitDegreesToDDMMSSArray, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toLoadData, toLoadResult, toNotNil, toNumber, trimEmptyToNull, truncateHtml, uncapitalizeFirstLetter, undefinedIfNull, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map