@sumaris-net/ngx-components 2.7.3-rc8 → 2.7.3

package/esm2022/src/app/shared/hotkeys/hotkeys.service.mjs

@@ -72,10 +72,10 @@ export class Hotkeys {
             data: this._hotkeys,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Hotkeys, deps: [{ token: i1.EventManager }, { token: i2.MatDialog }, { token: i3.ModalController }, { token: i3.PopoverController }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Hotkeys, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: Hotkeys, deps: [{ token: i1.EventManager }, { token: i2.MatDialog }, { token: i3.ModalController }, { token: i3.PopoverController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: Hotkeys, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: Hotkeys, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: Hotkeys, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/src/app/shared/hotkeys/shared-hotkeys.module.mjs

@@ -8,11 +8,11 @@ import { MatDialogModule } from '@angular/material/dialog';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedHotkeysModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedHotkeysModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: SharedHotkeysModule, declarations: [HotkeysDialogComponent], imports: [CommonModule, MatCommonModule, MatDialogModule, i1.TranslateModule], exports: [HotkeysDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedHotkeysModule, providers: [Hotkeys], imports: [CommonModule, MatCommonModule, MatDialogModule, TranslateModule.forChild()] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedHotkeysModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SharedHotkeysModule, declarations: [HotkeysDialogComponent], imports: [CommonModule, MatCommonModule, MatDialogModule, i1.TranslateModule], exports: [HotkeysDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedHotkeysModule, providers: [Hotkeys], imports: [CommonModule, MatCommonModule, MatDialogModule, TranslateModule.forChild()] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SharedHotkeysModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SharedHotkeysModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatCommonModule, MatDialogModule, TranslateModule.forChild()],

package/esm2022/src/app/shared/image/gallery/image-gallery.component.mjs

@@ -333,10 +333,10 @@ export class AppImageGalleryComponent {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: i1.ImageService }, { token: i2.Platform }, { token: i2.AlertController }, { token: i3.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: "debug", disabled: "disabled", readOnly: "readOnly", mobile: "mobile", mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: "showToolbar", showFabButton: "showFabButton", showTitle: "showTitle", showAddCardButton: "showAddCardButton", addButtonColor: "addButtonColor", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow" }, 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  <!-- Add -->\n  <button\n    mat-icon-button\n    *ngIf=\"!readOnly && !mobile && enabled\"\n    [title]=\"'COMMON.BTN_ADD' | translate\"\n    (click)=\"add()\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\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 {{ 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        <ion-card\n          #card\n          class=\"image-card\"\n          [class.zoom-hover]=\"!mobile\"\n          [color]=\"cardColor\"\n          *ngVar=\"row | propertyGet: 'currentData'; let image\"\n          (click)=\"clickRow(row, index)\"\n          tappable\n          @fadeInAnimation\n        >\n          <figure class=\"card-thumbnail\">\n            <ion-img [src]=\"image.url || image.dataUrl\" />\n          </figure>\n\n          <!-- toolbar for title (when not hover) -->\n          <ion-toolbar color=\"transparent\" class=\"title\" *ngIf=\"image.title\">\n            <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n          </ion-toolbar>\n\n          <!-- action toolbar (desktop only) shown when hover image -->\n          <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n            <!-- edit title button -->\n            <button\n              mat-button\n              *ngIf=\"showTitle\"\n              slot=\"start\"\n              [disabled]=\"disabled\"\n              (click)=\"editTitle($event, row, cardToolbar)\"\n              (focusin)=\"showCardToolbar(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            <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]=\"'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        </ion-card>\n      </ion-col>\n\n      <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n        <ion-card class=\"image-card-button\" color=\"light\" (click)=\"add($event)\" [disabled]=\"disabled\" tappable>\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      </ion-col>\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      <!-- Counter  -->\n      <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n        <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n          <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n          <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\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 #modalSwiper [modules]=\"swiperModules\" [zoom]=\"true\">\n        <swiper-slide *ngFor=\"let row of rows; last as last\">\n          <div\n            class=\"swiper-zoom-container\"\n            *ngIf=\"row | propertyGet: 'currentData'; let image\"\n            (ngInit)=\"last && initModalSlides(modalSwiper)\"\n          >\n            <ion-img [src]=\"image.url || image.dataUrl\" />\n          </div>\n        </swiper-slide>\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]=\"'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}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{height:calc(100% - 23px);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%}.image-card .card-thumbnail>ion-img{min-height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale);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-inline, 0px) * 2 - 3px);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 ion-slides{height:100%;background:#000}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2.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.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i10.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i11.NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i13.NgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i14.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i15.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i16.ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: i17.IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: i1.ImageService }, { token: i2.Platform }, { token: i2.AlertController }, { token: i3.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: "debug", disabled: "disabled", readOnly: "readOnly", mobile: "mobile", mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: "showToolbar", showFabButton: "showFabButton", showTitle: "showTitle", showAddCardButton: "showAddCardButton", addButtonColor: "addButtonColor", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows", onAfterEditRow: "onAfterEditRow" }, 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  <!-- Add -->\n  <button\n    mat-icon-button\n    *ngIf=\"!readOnly && !mobile && enabled\"\n    [title]=\"'COMMON.BTN_ADD' | translate\"\n    (click)=\"add()\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\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 {{ 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        <ion-card\n          #card\n          class=\"image-card\"\n          [class.zoom-hover]=\"!mobile\"\n          [color]=\"cardColor\"\n          *ngVar=\"row | propertyGet: 'currentData'; let image\"\n          (click)=\"clickRow(row, index)\"\n          tappable\n          @fadeInAnimation\n        >\n          <figure class=\"card-thumbnail\">\n            <ion-img [src]=\"image.url || image.dataUrl\" />\n          </figure>\n\n          <!-- toolbar for title (when not hover) -->\n          <ion-toolbar color=\"transparent\" class=\"title\" *ngIf=\"image.title\">\n            <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n          </ion-toolbar>\n\n          <!-- action toolbar (desktop only) shown when hover image -->\n          <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n            <!-- edit title button -->\n            <button\n              mat-button\n              *ngIf=\"showTitle\"\n              slot=\"start\"\n              [disabled]=\"disabled\"\n              (click)=\"editTitle($event, row, cardToolbar)\"\n              (focusin)=\"showCardToolbar(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            <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]=\"'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        </ion-card>\n      </ion-col>\n\n      <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n        <ion-card class=\"image-card-button\" color=\"light\" (click)=\"add($event)\" [disabled]=\"disabled\" tappable>\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      </ion-col>\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      <!-- Counter  -->\n      <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n        <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n          <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n          <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\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 #modalSwiper [modules]=\"swiperModules\" [zoom]=\"true\">\n        <swiper-slide *ngFor=\"let row of rows; last as last\">\n          <div\n            class=\"swiper-zoom-container\"\n            *ngIf=\"row | propertyGet: 'currentData'; let image\"\n            (ngInit)=\"last && initModalSlides(modalSwiper)\"\n          >\n            <ion-img [src]=\"image.url || image.dataUrl\" />\n          </div>\n        </swiper-slide>\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]=\"'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}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{height:calc(100% - 23px);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%}.image-card .card-thumbnail>ion-img{min-height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale);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-inline, 0px) * 2 - 3px);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 ion-slides{height:100%;background:#000}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2.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.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i2.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i10.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i11.NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i13.NgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i14.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i15.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i16.ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: i17.IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", 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  <!-- Add -->\n  <button\n    mat-icon-button\n    *ngIf=\"!readOnly && !mobile && enabled\"\n    [title]=\"'COMMON.BTN_ADD' | translate\"\n    (click)=\"add()\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\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 {{ 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        <ion-card\n          #card\n          class=\"image-card\"\n          [class.zoom-hover]=\"!mobile\"\n          [color]=\"cardColor\"\n          *ngVar=\"row | propertyGet: 'currentData'; let image\"\n          (click)=\"clickRow(row, index)\"\n          tappable\n          @fadeInAnimation\n        >\n          <figure class=\"card-thumbnail\">\n            <ion-img [src]=\"image.url || image.dataUrl\" />\n          </figure>\n\n          <!-- toolbar for title (when not hover) -->\n          <ion-toolbar color=\"transparent\" class=\"title\" *ngIf=\"image.title\">\n            <ion-label class=\"card-title\">{{ image.title }}</ion-label>\n          </ion-toolbar>\n\n          <!-- action toolbar (desktop only) shown when hover image -->\n          <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n            <!-- edit title button -->\n            <button\n              mat-button\n              *ngIf=\"showTitle\"\n              slot=\"start\"\n              [disabled]=\"disabled\"\n              (click)=\"editTitle($event, row, cardToolbar)\"\n              (focusin)=\"showCardToolbar(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            <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]=\"'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        </ion-card>\n      </ion-col>\n\n      <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n        <ion-card class=\"image-card-button\" color=\"light\" (click)=\"add($event)\" [disabled]=\"disabled\" tappable>\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      </ion-col>\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      <!-- Counter  -->\n      <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n        <ion-label color=\"light\">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n          <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n          <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\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 #modalSwiper [modules]=\"swiperModules\" [zoom]=\"true\">\n        <swiper-slide *ngFor=\"let row of rows; last as last\">\n          <div\n            class=\"swiper-zoom-container\"\n            *ngIf=\"row | propertyGet: 'currentData'; let image\"\n            (ngInit)=\"last && initModalSlides(modalSwiper)\"\n          >\n            <ion-img [src]=\"image.url || image.dataUrl\" />\n          </div>\n        </swiper-slide>\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]=\"'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}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{height:calc(100% - 23px);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%}.image-card .card-thumbnail>ion-img{min-height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale);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-inline, 0px) * 2 - 3px);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 ion-slides{height:100%;background:#000}\n"] }]
         }], ctorParameters: () => [{ type: i1.ImageService }, { type: i2.Platform }, { type: i2.AlertController }, { type: i3.TranslateService }, { type: i0.ChangeDetectorRef }, { type: i18.Environment, decorators: [{

package/esm2022/src/app/shared/image/gallery/image-gallery.module.mjs

@@ -11,8 +11,8 @@ import { RxStateModule } from '../../rx-state.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class ImageGalleryModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: ImageGalleryModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: ImageGalleryModule, declarations: [
             // Components
             AppImageGalleryComponent], imports: [CommonModule,
             IonicModule,
@@ -23,7 +23,7 @@ export class ImageGalleryModule {
             TranslateModule,
             // Components
             AppImageGalleryComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageGalleryModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageGalleryModule, imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedMaterialModule,
@@ -33,7 +33,7 @@ export class ImageGalleryModule {
             RxStateModule, IonicModule,
             TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageGalleryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageGalleryModule, decorators: [{
             type: NgModule,
             args: [{
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],

package/esm2022/src/app/shared/image/gallery/testing/gallery.service.testing.mjs

@@ -78,10 +78,10 @@ export class ImageAttachmentService extends StartableService {
     asFilter(filter) {
         return ImageAttachmentFilter.fromObject(filter);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageAttachmentService, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageAttachmentService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageAttachmentService, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageAttachmentService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageAttachmentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageAttachmentService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.Platform }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2FsbGVyeS5zZXJ2aWNlLnRlc3RpbmcuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9pbWFnZS9nYWxsZXJ5L3Rlc3RpbmcvZ2FsbGVyeS5zZXJ2aWNlLnRlc3RpbmcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHM0MsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxlQUFlLEVBQWMsTUFBTSxNQUFNLENBQUM7QUFDbkQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFHN0UsT0FBTyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNoRixPQUFPLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ25GLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxtREFBbUQsQ0FBQztBQUVoRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sOENBQThDLENBQUM7OztBQUU1RSxXQUFXO0FBRUosSUFBTSxlQUFlLEdBQXJCLE1BQU0sZUFBZ0IsU0FBUSxNQUF1QjtJQUMxRCxNQUFNLENBQUMsVUFBVSxDQUErQztJQUVoRSxPQUFPLEdBQVcsSUFBSSxDQUFDO0lBQ3ZCLEdBQUcsR0FBVyxJQUFJLENBQUM7SUFDbkIsS0FBSyxHQUFXLElBQUksQ0FBQztJQUVyQixVQUFVLENBQUMsTUFBVyxFQUFFLElBQVU7UUFDaEMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDL0IsSUFBSSxDQUFDLEdBQUcsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQztRQUM5QixJQUFJLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUM7SUFDNUIsQ0FBQztDQUNGLENBQUE7QUFiWSxlQUFlO0lBRDNCLFdBQVcsQ0FBQyxFQUFFLFFBQVEsRUFBRSxtQkFBbUIsRUFBRSxDQUFDO0dBQ2xDLGVBQWUsQ0FhM0I7O0FBRUQsV0FBVztBQUVKLElBQU0scUJBQXFCLEdBQTNCLE1BQU0scUJBQXNCLFNBQVEsWUFBb0Q7SUFDN0YsTUFBTSxDQUFDLFVBQVUsQ0FBcUQ7Q0FDdkUsQ0FBQTtBQUZZLHFCQUFxQjtJQURqQyxXQUFXLENBQUMsRUFBRSxRQUFRLEVBQUUseUJBQXlCLEVBQUUsQ0FBQztHQUN4QyxxQkFBcUIsQ0FFakM7O0FBR0QsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGdCQUFnQjtJQU1wQztJQUx0QixPQUFPLEdBQUcsSUFBSSxlQUFlLENBQTZCO1FBQ3hELGVBQWUsQ0FBQyxVQUFVLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLEdBQUcsRUFBRSxrREFBa0QsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLENBQUM7UUFDL0csZUFBZSxDQUFDLFVBQVUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsR0FBRyxFQUFFLGtEQUFrRCxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsQ0FBQztLQUNoSCxDQUFDLENBQUM7SUFFSCxZQUFzQixRQUFrQjtRQUN0QyxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUM7UUFESSxhQUFRLEdBQVIsUUFBUSxDQUFVO1FBRXRDLE9BQU8sQ0FBQyxLQUFLLENBQUMsMENBQTBDLENBQUMsQ0FBQztJQUM1RCxDQUFDO0lBRVMsU0FBUztRQUNqQixPQUFPLE9BQU8sQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELFFBQVEsQ0FDTixNQUFjLEVBQ2QsSUFBWSxFQUNaLE1BQWUsRUFDZixhQUE2QixFQUM3QixNQUE4QixFQUM5QixJQUFvRDtRQUVwRCxPQUFPLENBQUMsS0FBSyxDQUFDLDhDQUE4QyxDQUFDLENBQUM7UUFDOUQsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FDdEIsR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDYixJQUFJLElBQUksR0FBRyxDQUFDLE1BQU0sSUFBSSxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsZUFBZSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBRTFELElBQUksR0FBRyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxNQUFNLEVBQUUsYUFBYSxDQUFDLENBQUM7WUFFckQsT0FBTyxDQUFDLEtBQUssQ0FBQyxvQ0FBb0MsSUFBSSxDQUFDLE1BQU0sWUFBWSxDQUFDLENBQUM7WUFFM0UsT0FBTyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ3RDLENBQUMsQ0FBQyxDQUNILENBQUM7SUFDSixDQUFDO0lBRUQsS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUEyQjtRQUN2QyxPQUFPLENBQUMsS0FBSyxDQUFDLDRDQUE0QyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQztRQUN2RixJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU8sRUFBRSxDQUFDO1FBRXpCLE1BQU0sY0FBYyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDO1FBQzFDLElBQUksU0FBUyxHQUFHLGNBQWMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxHQUFHLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDekYsUUFBUTthQUNMLE1BQU0sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQzthQUNoQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtZQUNoQixJQUFJLENBQUMsRUFBRSxHQUFHLEVBQUUsU0FBUyxDQUFDO1FBQ3hCLENBQUMsQ0FBQyxDQUFDO1FBQ0wsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMseUJBQXlCLENBQUMsQ0FBQyxHQUFHLGNBQWMsRUFBRSxHQUFHLFFBQVEsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDdkYsQ0FBQztJQUVELEtBQUssQ0FBQyxTQUFTLENBQUMsUUFBMkI7UUFDekMsTUFBTSxVQUFVLEdBQUcsQ0FBQyxRQUFRLElBQUksRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzVFLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ3hGLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxRQUFRLENBQUMsTUFBVztRQUNsQixPQUFPLHFCQUFxQixDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNsRCxDQUFDO3VHQTNEVSxzQkFBc0I7MkdBQXRCLHNCQUFzQjs7MkZBQXRCLHNCQUFzQjtrQkFEbEMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgU29ydERpcmVjdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NvcnQnO1xuaW1wb3J0IHsgbWFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0LCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBTdGFydGFibGVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vc2VydmljZXMvc3RhcnRhYmxlLXNlcnZpY2UuY2xhc3MnO1xuaW1wb3J0IHsgRW50aXRpZXNTZXJ2aWNlV2F0Y2hPcHRpb25zLCBJRW50aXRpZXNTZXJ2aWNlLCBMb2FkUmVzdWx0IH0gZnJvbSAnLi4vLi4vLi4vc2VydmljZXMvZW50aXR5LXNlcnZpY2UuY2xhc3MnO1xuaW1wb3J0IHsgUGxhdGZvcm0gfSBmcm9tICdAaW9uaWMvYW5ndWxhcic7XG5pbXBvcnQgeyBpc05pbCwgaXNOb3ROaWwsIHJlbW92ZUR1cGxpY2F0ZXNGcm9tQXJyYXkgfSBmcm9tICcuLi8uLi8uLi9mdW5jdGlvbnMnO1xuaW1wb3J0IHsgRW50aXR5LCBFbnRpdHlVdGlscyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvcmUvc2VydmljZXMvbW9kZWwvZW50aXR5Lm1vZGVsJztcbmltcG9ydCB7IEVudGl0eUNsYXNzIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29yZS9zZXJ2aWNlcy9tb2RlbC9lbnRpdHkuZGVjb3JhdG9ycyc7XG5pbXBvcnQgeyBJbWFnZSB9IGZyb20gJy4uLy4uL2ltYWdlLm1vZGVsJztcbmltcG9ydCB7IEVudGl0eUZpbHRlciB9IGZyb20gJy4uLy4uLy4uLy4uL2NvcmUvc2VydmljZXMvbW9kZWwvZmlsdGVyLm1vZGVsJztcblxuLy8gQGR5bmFtaWNcbkBFbnRpdHlDbGFzcyh7IHR5cGVuYW1lOiAnSW1hZ2VBdHRhY2htZW50Vk8nIH0pXG5leHBvcnQgY2xhc3MgSW1hZ2VBdHRhY2htZW50IGV4dGVuZHMgRW50aXR5PEltYWdlQXR0YWNobWVudD4gaW1wbGVtZW50cyBJbWFnZSB7XG4gIHN0YXRpYyBmcm9tT2JqZWN0OiAoc291cmNlOiBhbnksIG9wdHM/OiBhbnkpID0+IEltYWdlQXR0YWNobWVudDtcblxuICBkYXRhVXJsOiBzdHJpbmcgPSBudWxsO1xuICB1cmw6IHN0cmluZyA9IG51bGw7XG4gIHRpdGxlOiBzdHJpbmcgPSBudWxsO1xuXG4gIGZyb21PYmplY3Qoc291cmNlOiBhbnksIG9wdHM/OiBhbnkpIHtcbiAgICBzdXBlci5mcm9tT2JqZWN0KHNvdXJjZSwgb3B0cyk7XG4gICAgdGhpcy51cmwgPSBzb3VyY2UudXJsO1xuICAgIHRoaXMuZGF0YVVybCA9IHNvdXJjZS5kYXRhVXJsO1xuICAgIHRoaXMudGl0bGUgPSBzb3VyY2UudGl0bGU7XG4gIH1cbn1cblxuLy8gQGR5bmFtaWNcbkBFbnRpdHlDbGFzcyh7IHR5cGVuYW1lOiAnSW1hZ2VBdHRhY2htZW50RmlsdGVyVk8nIH0pXG5leHBvcnQgY2xhc3MgSW1hZ2VBdHRhY2htZW50RmlsdGVyIGV4dGVuZHMgRW50aXR5RmlsdGVyPEltYWdlQXR0YWNobWVudEZpbHRlciwgSW1hZ2VBdHRhY2htZW50PiB7XG4gIHN0YXRpYyBmcm9tT2JqZWN0OiAoc291cmNlOiBhbnksIG9wdHM/OiBhbnkpID0+IEltYWdlQXR0YWNobWVudEZpbHRlcjtcbn1cblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIEltYWdlQXR0YWNobWVudFNlcnZpY2UgZXh0ZW5kcyBTdGFydGFibGVTZXJ2aWNlIGltcGxlbWVudHMgSUVudGl0aWVzU2VydmljZTxJbWFnZUF0dGFjaG1lbnQsIEltYWdlQXR0YWNobWVudEZpbHRlcj4ge1xuICAkaW1hZ2VzID0gbmV3IEJlaGF2aW9yU3ViamVjdDxQYXJ0aWFsPEltYWdlQXR0YWNobWVudD5bXT4oW1xuICAgIEltYWdlQXR0YWNobWVudC5mcm9tT2JqZWN0KHsgaWQ6IDAsIHVybDogJ2h0dHBzOi8vdGVzdC5zdW1hcmlzLm5ldC9hc3NldHMvaW1nL2JnL3JheS0xLmpwZycsIHRpdGxlOiAncmF5ICMxJyB9KSxcbiAgICBJbWFnZUF0dGFjaG1lbnQuZnJvbU9iamVjdCh7IGlkOiAxLCB1cmw6ICdodHRwczovL3Rlc3Quc3VtYXJpcy5uZXQvYXNzZXRzL2ltZy9iZy9yYXktMi5qcGcnLCB0aXRsZTogJ3JheSAjMicgfSksXG4gIF0pO1xuXG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBwbGF0Zm9ybTogUGxhdGZvcm0pIHtcbiAgICBzdXBlcihwbGF0Zm9ybSk7XG4gICAgY29uc29sZS5kZWJ1ZygnW2dhbGxlcnktdGVzdGluZy1zZXJ2aWNlXSBDcmVhdGUgc2VydmljZScpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG5nT25TdGFydCgpOiBQcm9taXNlPGFueT4ge1xuICAgIHJldHVybiBQcm9taXNlLnJlc29sdmUodW5kZWZpbmVkKTtcbiAgfVxuXG4gIHdhdGNoQWxsKFxuICAgIG9mZnNldDogbnVtYmVyLFxuICAgIHNpemU6IG51bWJlcixcbiAgICBzb3J0Qnk/OiBzdHJpbmcsXG4gICAgc29ydERpcmVjdGlvbj86IFNvcnREaXJlY3Rpb24sXG4gICAgZmlsdGVyPzogSW1hZ2VBdHRhY2htZW50RmlsdGVyLFxuICAgIG9wdHM/OiBFbnRpdGllc1NlcnZpY2VXYXRjaE9wdGlvbnMgJiB7IHF1ZXJ5PzogYW55IH1cbiAgKTogT2JzZXJ2YWJsZTxMb2FkUmVzdWx0PEltYWdlQXR0YWNobWVudD4+IHtcbiAgICBjb25zb2xlLmRlYnVnKCdbZ2FsbGVyeS10ZXN0aW5nLXNlcnZpY2VdIFdhdGNoaW5nIGltYWdlcy4uLicpO1xuICAgIHJldHVybiB0aGlzLiRpbWFnZXMucGlwZShcbiAgICAgIG1hcCgoaW1hZ2VzKSA9PiB7XG4gICAgICAgIGxldCBkYXRhID0gKGltYWdlcyB8fCBbXSkubWFwKEltYWdlQXR0YWNobWVudC5mcm9tT2JqZWN0KTtcblxuICAgICAgICBkYXRhID0gRW50aXR5VXRpbHMuc29ydChkYXRhLCBzb3J0QnksIHNvcnREaXJlY3Rpb24pO1xuXG4gICAgICAgIGNvbnNvbGUuZGVidWcoYFtnYWxsZXJ5LXRlc3Rpbmctc2VydmljZV0gTG9hZGVkICR7ZGF0YS5sZW5ndGh9IGltYWdlcy4uLmApO1xuXG4gICAgICAgIHJldHVybiB7IGRhdGEsIHRvdGFsOiBkYXRhLmxlbmd0aCB9O1xuICAgICAgfSlcbiAgICApO1xuICB9XG5cbiAgYXN5bmMgc2F2ZUFsbChlbnRpdGllczogSW1hZ2VBdHRhY2htZW50W10pOiBQcm9taXNlPGFueVtdPiB7XG4gICAgY29uc29sZS5kZWJ1ZygnW2dhbGxlcnktc2VydmljZS10ZXN0aW5nXSBTYXZpbmcgaW1hZ2VzLi4uJyArIEpTT04uc3RyaW5naWZ5KGVudGl0aWVzKSk7XG4gICAgaWYgKCFlbnRpdGllcykgcmV0dXJuIFtdO1xuXG4gICAgY29uc3QgZXhpc3RpbmdJbWFnZXMgPSB0aGlzLiRpbWFnZXMudmFsdWU7XG4gICAgbGV0IGN1cnJlbnRJZCA9IGV4aXN0aW5nSW1hZ2VzLnJlZHVjZSgocmVzLCBpbWFnZSkgPT4gTWF0aC5tYXgocmVzLCAraW1hZ2U/LmlkIHx8IDApLCAwKTtcbiAgICBlbnRpdGllc1xuICAgICAgLmZpbHRlcigoaXRlbSkgPT4gaXNOaWwoaXRlbS5pZCkpXG4gICAgICAuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgICAgICBpdGVtLmlkID0gKytjdXJyZW50SWQ7XG4gICAgICB9KTtcbiAgICB0aGlzLiRpbWFnZXMubmV4dChyZW1vdmVEdXBsaWNhdGVzRnJvbUFycmF5KFsuLi5leGlzdGluZ0ltYWdlcywgLi4uZW50aXRpZXNdLCAnaWQnKSk7XG4gIH1cblxuICBhc3luYyBkZWxldGVBbGwoZW50aXRpZXM6IEltYWdlQXR0YWNobWVudFtdKTogUHJvbWlzZTxhbnk+IHtcbiAgICBjb25zdCBkZWxldGVkSWRzID0gKGVudGl0aWVzIHx8IFtdKS5tYXAoKGl0ZW0pID0+IGl0ZW0uaWQpLmZpbHRlcihpc05vdE5pbCk7XG4gICAgY29uc3QgZmlsdGVyZWREYXRhID0gdGhpcy4kaW1hZ2VzLnZhbHVlLmZpbHRlcigoaXRlbSkgPT4gIWRlbGV0ZWRJZHMuaW5jbHVkZXMoaXRlbS5pZCkpO1xuICAgIHRoaXMuJGltYWdlcy5uZXh0KGZpbHRlcmVkRGF0YSk7XG4gIH1cblxuICBhc0ZpbHRlcihmaWx0ZXI6IGFueSkge1xuICAgIHJldHVybiBJbWFnZUF0dGFjaG1lbnRGaWx0ZXIuZnJvbU9iamVjdChmaWx0ZXIpO1xuICB9XG59XG4iXX0=

package/esm2022/src/app/shared/image/gallery/testing/gallery.testing.mjs

@@ -27,10 +27,10 @@ export class GalleryTestPage {
     save() {
         this.dataSource.save();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: GalleryTestPage, deps: [{ token: i1.ImageAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i3.AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddCardButton", "addButtonColor", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow"] }, { kind: "component", type: i4.DebugComponent, selector: "app-debug", inputs: ["title", "enable", "expanded"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GalleryTestPage, deps: [{ token: i1.ImageAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.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.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i3.AppImageGalleryComponent, selector: "app-image-gallery", inputs: ["cardColor", "debug", "disabled", "readOnly", "mobile", "mode", "confirmBeforeDelete", "showToolbar", "showFabButton", "showTitle", "showAddCardButton", "addButtonColor", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow"] }, { kind: "component", type: i4.DebugComponent, selector: "app-debug", inputs: ["title", "enable", "expanded"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: GalleryTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", 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: i1.ImageAttachmentService }] });

package/esm2022/src/app/shared/image/gallery/testing/gallery.testing.module.mjs

@@ -17,15 +17,15 @@ const routes = [
     },
 ];
 export class ImageGalleryTestingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageGalleryTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: ImageGalleryTestingModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageGalleryTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: ImageGalleryTestingModule, declarations: [
             // Components
             GalleryTestPage], imports: [CommonModule,
             IonicModule,
             ImageGalleryModule, i1.TranslateModule, i2.RouterModule, i1.TranslateModule, SharedDebugModule], exports: [RouterModule,
             // Components
             GalleryTestPage] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageGalleryTestingModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageGalleryTestingModule, imports: [CommonModule,
             IonicModule,
             ImageGalleryModule,
             TranslateModule.forChild(),
@@ -33,7 +33,7 @@ export class ImageGalleryTestingModule {
             TranslateModule.forChild(),
             SharedDebugModule, RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageGalleryTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageGalleryTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/image/image.module.mjs

@@ -3,15 +3,15 @@ import { CommonModule } from '@angular/common';
 import { ImageGalleryModule } from './gallery/image-gallery.module';
 import * as i0 from "@angular/core";
 export class ImageModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: ImageModule, imports: [CommonModule, ImageGalleryModule], exports: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: ImageModule, imports: [CommonModule, ImageGalleryModule], exports: [
             // Sub module
             ImageGalleryModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageModule, imports: [CommonModule, ImageGalleryModule, 
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageModule, imports: [CommonModule, ImageGalleryModule, 
             // Sub module
             ImageGalleryModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ImageGalleryModule],

package/esm2022/src/app/shared/image/image.service.mjs

@@ -91,10 +91,10 @@ export class ImageService extends StartableService {
             .map((file) => file.response.body) // Get response body = data as base64
             .map((dataUrl) => ({ dataUrl }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageService, deps: [{ token: i1.PlatformService }, { token: i2.LocalSettingsService }, { token: i3.TranslateService }, { token: i4.PopoverController }, { token: i4.ActionSheetController }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageService, deps: [{ token: i1.PlatformService }, { token: i2.LocalSettingsService }, { token: i3.TranslateService }, { token: i4.PopoverController }, { token: i4.ActionSheetController }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ImageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i2.LocalSettingsService }, { type: i3.TranslateService }, { type: i4.PopoverController }, { type: i4.ActionSheetController }, { type: i5.Environment, decorators: [{

package/esm2022/src/app/shared/logging/logging-service.class.mjs

@@ -110,10 +110,10 @@ export class LoggingService extends StartableService {
             this._saving = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LoggingService, deps: [{ token: APP_STORAGE }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LoggingService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LoggingService, deps: [{ token: APP_STORAGE }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LoggingService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LoggingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LoggingService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,

package/esm2022/src/app/shared/logging/logging-service.module.mjs

@@ -5,14 +5,14 @@ import { TranslateModule } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class LoggingServiceModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LoggingServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: LoggingServiceModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LoggingServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: LoggingServiceModule, imports: [CommonModule,
             IonicModule, i1.TranslateModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LoggingServiceModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LoggingServiceModule, imports: [CommonModule,
             IonicModule,
             TranslateModule.forChild()] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LoggingServiceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LoggingServiceModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [