@sumaris-net/ngx-components 18.23.58 → 18.23.59

package/esm2022/src/app/shared/directives/resizable/resizable.module.mjs

@@ -3,11 +3,11 @@ import { ResizableComponent } from './resizable.component';
 import { ResizableDirective } from './resizable.directive';
 import * as i0 from "@angular/core";
 export class ResizableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ResizableModule, declarations: [ResizableComponent, ResizableDirective], exports: [ResizableComponent, ResizableDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResizableModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ResizableModule, declarations: [ResizableComponent, ResizableDirective], exports: [ResizableComponent, ResizableDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResizableModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResizableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResizableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ResizableComponent, ResizableDirective],

package/esm2022/src/app/shared/directives/throttled-click.directive.mjs

@@ -23,10 +23,10 @@ export class ThrottledClickDirective {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThrottledClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.14", type: ThrottledClickDirective, selector: "[appPreventDoubleClick],[throttledClick]", inputs: { throttleTime: ["throttleTime", "throttleTime", numberAttribute] }, outputs: { throttledClick: "throttledClick" }, host: { listeners: { "click": "clickEvent($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThrottledClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: ThrottledClickDirective, selector: "[appPreventDoubleClick],[throttledClick]", inputs: { throttleTime: ["throttleTime", "throttleTime", numberAttribute] }, outputs: { throttledClick: "throttledClick" }, host: { listeners: { "click": "clickEvent($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThrottledClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThrottledClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appPreventDoubleClick],[throttledClick]',

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

@@ -102,10 +102,10 @@ export class FileService {
         }
         this._started = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileService, deps: [{ token: i1.Platform }, { token: i2.HttpClient }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileService, deps: [{ token: i1.Platform }, { token: i2.HttpClient }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/src/app/shared/form/field.component.mjs

@@ -303,8 +303,8 @@ export class AppFormField {
             }, timeout || 0);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppFormField, deps: [{ token: i1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AppFormField, selector: "app-form-field", inputs: { definition: "definition", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", compact: ["compact", "compact", booleanAttribute], required: ["required", "required", booleanAttribute], hideRequiredMarker: ["hideRequiredMarker", "hideRequiredMarker", booleanAttribute], floatLabel: "floatLabel", label: "label", appearance: "appearance", subscriptSizing: "subscriptSizing", tabindex: ["tabindex", "tabindex", numberAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], chipColor: "chipColor", classList: ["class", "classList"], debug: ["debug", "debug", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth" }, outputs: { onKeyupEnter: "keyup.enter" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFormField, deps: [{ token: i1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppFormField, selector: "app-form-field", inputs: { definition: "definition", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", compact: ["compact", "compact", booleanAttribute], required: ["required", "required", booleanAttribute], hideRequiredMarker: ["hideRequiredMarker", "hideRequiredMarker", booleanAttribute], floatLabel: "floatLabel", label: "label", appearance: "appearance", subscriptSizing: "subscriptSizing", tabindex: ["tabindex", "tabindex", numberAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], chipColor: "chipColor", classList: ["class", "classList"], debug: ["debug", "debug", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth" }, outputs: { onKeyupEnter: "keyup.enter" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AppFormField),
@@ -312,7 +312,7 @@ export class AppFormField {
             },
         ], viewQueries: [{ propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }, { propertyName: "autocompleteField", first: true, predicate: ["autocompleteField"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- integer -->\n  <mat-form-field\n    *ngSwitchCase=\"'integer'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      autocomplete=\"off\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      pattern=\"-?[0-9]*\"\n      step=\"1\"\n      [appAutofocus]=\"autofocus\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, false)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field\n    *ngSwitchCase=\"'double'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n      matInput\n      #matInput\n      type=\"number\"\n      decimal=\"true\"\n      autocomplete=\"off\"\n      [min]=\"definition.minValue\"\n      [max]=\"definition.maxValue\"\n      [appAutofocus]=\"autofocus\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [step]=\"numberInputStep\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors['min'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{\n        (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')\n          | translate: { maxDecimals: definition.maximumNumberDecimals }\n      }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field\n    *ngSwitchCase=\"'boolean'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [compact]=\"compact\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field\n    *ngSwitchCase=\"'date'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field\n    *ngSwitchCase=\"'dateTime'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field\n    *ngSwitchCase=\"'enum'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n    [class.mat-form-field-disabled]=\"readonly\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    @if (readonly) {\n      <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n      <ion-text>{{ formControl.value }}</ion-text>\n    } @else {\n      <mat-select\n        [formControl]=\"formControl\"\n        [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      >\n        <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n      </mat-select>\n    }\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- multi enum -->\n  <mat-chips-field\n    *ngSwitchCase=\"'enums'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [clearable]=\"clearable\"\n    [items]=\"_values\"\n    [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n    [config]=\"definition.autocomplete\"\n    [showAllOnFocus]=\"true\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [chipColor]=\"chipColor | matColor\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-chips-field>\n\n  <!-- color -->\n  <mat-form-field\n    *ngSwitchCase=\"'color'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input\n      matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [style.color]=\"getColorContrast(formControl.value)\"\n      [style.background]=\"formControl.value\"\n      [colorPicker]=\"formControl.value\"\n      (colorPickerChange)=\"writeValue($event)\"\n      [cpSaveClickOutside]=\"true\"\n      cpPosition=\"top\"\n      cpOutputFormat=\"hex\"\n      [cpOKButton]=\"false\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field\n    *ngSwitchCase=\"'string'\"\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [class]=\"classList\"\n  >\n    @if (placeholder && floatLabel !== 'never') {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' ? placeholder : null\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContentFromEvent($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n      (keypress)=\"filterAlphanumericalInput($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field\n    *ngSwitchCase=\"'entity'\"\n    #autocompleteField\n    [class]=\"classList\"\n    [autofocus]=\"autofocus\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [clearable]=\"clearable\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n    (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field\n    *ngSwitchCase=\"'entities'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n    [required]=\"required\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabindex\"\n    [panelClass]=\"panelClass\"\n    [panelWidth]=\"panelWidth\"\n  >\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">\n      Unknown type {{ type }} for option {{ definition.key }}. Please report this error.\n    </mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n    <ng-content select=\"mat-error\"></ng-content>\n  </div>\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { 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: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: i13.MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: i14.MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "class", "style", "hourMinWidth", "hourMaxWidth", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "component", type: i15.MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: i16.MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "showChips", "appearance", "subscriptSizing", "class", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i17.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i18.IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: i19.FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: i20.MatColorPipe, name: "matColor" }, { kind: "pipe", type: i21.AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppFormField, decorators: [{
             type: Component,
             args: [{ selector: 'app-form-field', providers: [
                         {

package/esm2022/src/app/shared/form/loading-spinner.mjs

@@ -6,15 +6,15 @@ export class AppLoadingSpinner {
     loading = false;
     color = 'secondary';
     name;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppLoadingSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppLoadingSpinner, selector: "app-loading-spinner", inputs: { loading: "loading", color: "color", name: "name" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppLoadingSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppLoadingSpinner, selector: "app-loading-spinner", inputs: { loading: "loading", color: "color", name: "name" }, ngImport: i0, template: `
     <ion-spinner *ngIf="loading; else content" [color]="color" [name]="name"></ion-spinner>
     <ng-template #content>
       <ng-content></ng-content>
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppLoadingSpinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppLoadingSpinner, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-loading-spinner',

package/esm2022/src/app/shared/gesture/gesture-config.mjs

@@ -36,10 +36,10 @@ export class AppGestureConfig extends HammerGestureConfig {
         }
         return mc;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppGestureConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppGestureConfig, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppGestureConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppGestureConfig, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppGestureConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppGestureConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

package/esm2022/src/app/shared/guard/component-dirty.guard.mjs

@@ -59,10 +59,10 @@ export class ComponentDirtyGuard {
         // Cancel deactivate
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentDirtyGuard, deps: [{ token: i1.TranslateService }, { token: i2.AlertController }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentDirtyGuard });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentDirtyGuard, deps: [{ token: i1.TranslateService }, { token: i2.AlertController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentDirtyGuard });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentDirtyGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentDirtyGuard, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i2.AlertController }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LWRpcnR5Lmd1YXJkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9zaGFyZWQvZ3VhcmQvY29tcG9uZW50LWRpcnR5Lmd1YXJkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFJM0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUVuQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7QUFHN0MsTUFBTSxPQUFPLG1CQUFtQjtJQUlsQjtJQUNBO0lBSkosS0FBSyxHQUFHLEtBQUssQ0FBQztJQUV0QixZQUNZLFNBQTJCLEVBQzNCLFNBQTBCO1FBRDFCLGNBQVMsR0FBVCxTQUFTLENBQWtCO1FBQzNCLGNBQVMsR0FBVCxTQUFTLENBQWlCO0lBQ25DLENBQUM7SUFFSixLQUFLLENBQUMsYUFBYSxDQUNqQixTQUFtQixFQUNuQixZQUFvQyxFQUNwQyxZQUFpQyxFQUNqQyxTQUE4QjtRQUU5QixNQUFNLEtBQUssR0FBRyxTQUFTLEVBQUUsS0FBSyxDQUFDO1FBQy9CLE1BQU0sS0FBSyxHQUFHLFNBQVMsRUFBRSxLQUFLLENBQUM7UUFDL0IsSUFBSSxHQUFHLEdBQUc7WUFDUixTQUFTLEVBQUUsQ0FBQyxLQUFLO1lBQ2pCLElBQUksRUFBRSxLQUFLO1NBQ1osQ0FBQztRQUVGLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ2YsT0FBTyxDQUFDLEtBQUssQ0FBQyxnREFBZ0QsS0FBSyxZQUFZLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDMUYsQ0FBQztRQUVELElBQUksS0FBSyxFQUFFLENBQUM7WUFDVixtQkFBbUI7WUFDbkIsR0FBRyxHQUFHLE1BQU0sTUFBTSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDcEYsQ0FBQztRQUVELElBQUksSUFBSSxDQUFDLEtBQUs7WUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDLDBCQUEwQixHQUFHLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQztRQUV6RSxJQUFJLEdBQUcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNsQixJQUFJLEdBQUcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztnQkFDYixJQUFJLElBQUksQ0FBQyxLQUFLO29CQUFFLE9BQU8sQ0FBQyxLQUFLLENBQUMsdUJBQXVCLENBQUMsQ0FBQztnQkFDdkQsTUFBTSxLQUFLLEdBQUcsTUFBTSxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7Z0JBQ3JDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztvQkFDWCxJQUFJLElBQUksQ0FBQyxLQUFLO3dCQUFFLE9BQU8sQ0FBQyxLQUFLLENBQUMsOENBQThDLENBQUMsQ0FBQztvQkFDOUUsT0FBTyxLQUFLLENBQUM7Z0JBQ2YsQ0FBQztZQUNILENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLElBQUksQ0FBQyxLQUFLO29CQUFFLE9BQU8sQ0FBQyxLQUFLLENBQUMsMkJBQTJCLENBQUMsQ0FBQztnQkFDM0QsSUFBSSxLQUFLO29CQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNoQyxDQUFDO1lBRUQsT0FBTztZQUNQLElBQUksT0FBTyxTQUFTLENBQUMsVUFBVSxLQUFLLFVBQVUsRUFBRSxDQUFDO2dCQUMvQyxNQUFNLFVBQVUsR0FBRyxRQUFRLENBQUMscUJBQXFCLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2dCQUNwRSxNQUFNLGVBQWUsR0FBRyxTQUFTLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQztnQkFDeEYsSUFBSSxJQUFJLENBQUMsS0FBSztvQkFBRSxPQUFPLENBQUMsS0FBSyxDQUFDLHlEQUF5RCxlQUFlLEVBQUUsQ0FBQyxDQUFDO2dCQUMxRyxTQUFTLENBQUMsVUFBVSxDQUFDLGVBQWUsQ0FBQyxDQUFDO1lBQ3hDLENBQUM7WUFFRCxxQkFBcUI7WUFDckIsT0FBTyxJQUFJLENBQUM7UUFDZCxDQUFDO1FBRUQsb0JBQW9CO1FBQ3BCLE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQzt3R0EzRFUsbUJBQW1COzRHQUFuQixtQkFBbUI7OzRGQUFuQixtQkFBbUI7a0JBRC9CLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBY3RpdmF0ZWRSb3V0ZVNuYXBzaG90LCBDYW5EZWFjdGl2YXRlLCBSb3V0ZXJTdGF0ZVNuYXBzaG90LCBVcmxUcmVlIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IFRyYW5zbGF0ZVNlcnZpY2UgfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7IEFsZXJ0Q29udHJvbGxlciB9IGZyb20gJ0Bpb25pYy9hbmd1bGFyJztcbmltcG9ydCB7IEFsZXJ0cyB9IGZyb20gJy4uL2FsZXJ0cyc7XG5pbXBvcnQgeyBDYW5MZWF2ZSB9IGZyb20gJy4uLy4uL2NvcmUvZm9ybS9mb3JtLnV0aWxzJztcbmltcG9ydCB7IFVybFV0aWxzIH0gZnJvbSAnLi4vZmlsZS91cmwudXRpbHMnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgQ29tcG9uZW50RGlydHlHdWFyZCBpbXBsZW1lbnRzIENhbkRlYWN0aXZhdGU8Q2FuTGVhdmU+IHtcbiAgcHJpdmF0ZSBkZWJ1ZyA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByb3RlY3RlZCB0cmFuc2xhdGU6IFRyYW5zbGF0ZVNlcnZpY2UsXG4gICAgcHJvdGVjdGVkIGFsZXJ0Q3RybDogQWxlcnRDb250cm9sbGVyXG4gICkge31cblxuICBhc3luYyBjYW5EZWFjdGl2YXRlKFxuICAgIGNvbXBvbmVudDogQ2FuTGVhdmUsXG4gICAgY3VycmVudFJvdXRlOiBBY3RpdmF0ZWRSb3V0ZVNuYXBzaG90LFxuICAgIGN1cnJlbnRTdGF0ZTogUm91dGVyU3RhdGVTbmFwc2hvdCxcbiAgICBuZXh0U3RhdGU6IFJvdXRlclN0YXRlU25hcHNob3RcbiAgKTogUHJvbWlzZTxib29sZWFuIHwgVXJsVHJlZT4ge1xuICAgIGNvbnN0IGRpcnR5ID0gY29tcG9uZW50Py5kaXJ0eTtcbiAgICBjb25zdCB2YWxpZCA9IGNvbXBvbmVudD8udmFsaWQ7XG4gICAgbGV0IGNhbiA9IHtcbiAgICAgIGNvbmZpcm1lZDogIWRpcnR5LFxuICAgICAgc2F2ZTogZmFsc2UsXG4gICAgfTtcblxuICAgIGlmICh0aGlzLmRlYnVnKSB7XG4gICAgICBjb25zb2xlLmRlYnVnKGBbZGlydHktZ3VhcmRdIGNhbkRlYWN0aXZhdGUgY29tcG9uZW50IGRpcnR5OiAke2RpcnR5fSwgdmFsaWQ6ICR7dmFsaWR9YCk7XG4gICAgfVxuXG4gICAgaWYgKGRpcnR5KSB7XG4gICAgICAvLyBBc2sgY29uZmlybWF0aW9uXG4gICAgICBjYW4gPSBhd2FpdCBBbGVydHMuYXNrU2F2ZUJlZm9yZUFjdGlvbih0aGlzLmFsZXJ0Q3RybCwgdGhpcy50cmFuc2xhdGUsIHsgdmFsaWQgfSk7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuZGVidWcpIGNvbnNvbGUuZGVidWcoYFtkaXJ0eS1ndWFyZF0gY29uZmlybTogJHtjYW4uY29uZmlybWVkfWApO1xuXG4gICAgaWYgKGNhbi5jb25maXJtZWQpIHtcbiAgICAgIGlmIChjYW4uc2F2ZSkge1xuICAgICAgICBpZiAodGhpcy5kZWJ1ZykgY29uc29sZS5kZWJ1ZyhgW2RpcnR5LWd1YXJkXSBkbyBzYXZlYCk7XG4gICAgICAgIGNvbnN0IHNhdmVkID0gYXdhaXQgY29tcG9uZW50LnNhdmUoKTtcbiAgICAgICAgaWYgKCFzYXZlZCkge1xuICAgICAgICAgIGlmICh0aGlzLmRlYnVnKSBjb25zb2xlLmRlYnVnKGBbZGlydHktZ3VhcmRdIHNhdmUgZmFpbGVkLCBjYW5jZWwgZGVhY3RpdmF0ZWApO1xuICAgICAgICAgIHJldHVybiBmYWxzZTtcbiAgICAgICAgfVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgaWYgKHRoaXMuZGVidWcpIGNvbnNvbGUuZGVidWcoYFtkaXJ0eS1ndWFyZF0gZG8gY2FuY2VsKClgKTtcbiAgICAgICAgaWYgKGRpcnR5KSBjb21wb25lbnQuY2FuY2VsKCk7XG4gICAgICB9XG5cbiAgICAgIC8vIEVtaXRcbiAgICAgIGlmICh0eXBlb2YgY29tcG9uZW50LmRlYWN0aXZhdGUgPT09ICdmdW5jdGlvbicpIHtcbiAgICAgICAgY29uc3QgY3VycmVudFVybCA9IFVybFV0aWxzLnN0cmlwRnJhZ21lbnRBbmRRdWVyeShjdXJyZW50U3RhdGUudXJsKTtcbiAgICAgICAgY29uc3QgbmF2aWdhdGVGb3J3YXJkID0gbmV4dFN0YXRlLnVybC5zdGFydHNXaXRoKFVybFV0aWxzLmFkZFRyYWlsaW5nU2xhc2goY3VycmVudFVybCkpO1xuICAgICAgICBpZiAodGhpcy5kZWJ1ZykgY29uc29sZS5kZWJ1ZyhgW2RpcnR5LWd1YXJkXSBjYWxsaW5nIGRlYWN0aXZhdGUoKSAtIG5hdmlnYXRlRm9yd2FyZDogJHtuYXZpZ2F0ZUZvcndhcmR9YCk7XG4gICAgICAgIGNvbXBvbmVudC5kZWFjdGl2YXRlKG5hdmlnYXRlRm9yd2FyZCk7XG4gICAgICB9XG5cbiAgICAgIC8vIEFsbG93IGRlYWN0aXZhdGlvblxuICAgICAgcmV0dXJuIHRydWU7XG4gICAgfVxuXG4gICAgLy8gQ2FuY2VsIGRlYWN0aXZhdGVcbiAgICByZXR1cm4gZmFsc2U7XG4gIH1cbn1cbiJdfQ==

package/esm2022/src/app/shared/hotkeys/dialog/hotkeys-dialog.component.mjs

@@ -10,10 +10,10 @@ export class HotkeysDialogComponent {
         this.data = data;
         this.hotkeys = Array.from(this.data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HotkeysDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HotkeysDialogComponent, selector: "ng-component", ngImport: i0, template: "<table class=\"ion-padding\">\n  <tbody>\n    <tr *ngFor=\"let keys of hotkeys\">\n      <td>{{ keys[1] | translate }}</td>\n\n      <td class=\"text-right\">\n        <kbd>{{ keys[0] }}</kbd>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host table{border-collapse:collapse;width:100%;color:#212529}:host th{font-weight:500;text-align:left;vertical-align:bottom;padding:.75rem;border-top:1px solid #dee2e6;border-bottom:2px solid #dee2e6}:host td{vertical-align:top;border-top:1px solid #dee2e6;padding:.75rem}:host kbd{margin-right:6px;background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px #c6cbd1;color:#444d56;display:inline-block;font-size:12px;line-height:10px;padding:3px 5px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HotkeysDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HotkeysDialogComponent, selector: "ng-component", ngImport: i0, template: "<table class=\"ion-padding\">\n  <tbody>\n    <tr *ngFor=\"let keys of hotkeys\">\n      <td>{{ keys[1] | translate }}</td>\n\n      <td class=\"text-right\">\n        <kbd>{{ keys[0] }}</kbd>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host table{border-collapse:collapse;width:100%;color:#212529}:host th{font-weight:500;text-align:left;vertical-align:bottom;padding:.75rem;border-top:1px solid #dee2e6;border-bottom:2px solid #dee2e6}:host td{vertical-align:top;border-top:1px solid #dee2e6;padding:.75rem}:host kbd{margin-right:6px;background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px #c6cbd1;color:#444d56;display:inline-block;font-size:12px;line-height:10px;padding:3px 5px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HotkeysDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HotkeysDialogComponent, decorators: [{
             type: Component,
             args: [{ template: "<table class=\"ion-padding\">\n  <tbody>\n    <tr *ngFor=\"let keys of hotkeys\">\n      <td>{{ keys[1] | translate }}</td>\n\n      <td class=\"text-right\">\n        <kbd>{{ keys[0] }}</kbd>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host table{border-collapse:collapse;width:100%;color:#212529}:host th{font-weight:500;text-align:left;vertical-align:bottom;padding:.75rem;border-top:1px solid #dee2e6;border-bottom:2px solid #dee2e6}:host td{vertical-align:top;border-top:1px solid #dee2e6;padding:.75rem}:host kbd{margin-right:6px;background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px #c6cbd1;color:#444d56;display:inline-block;font-size:12px;line-height:10px;padding:3px 5px;vertical-align:middle}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{

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

@@ -130,10 +130,10 @@ export class Hotkeys {
     closeHelpModal() {
         this._dialogRef?.close(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Hotkeys, deps: [{ token: i1.Platform }, { token: i2.EventManager }, { token: i3.MatDialog }, { token: i1.ModalController }, { token: i1.PopoverController }, { token: APP_HOTKEYS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Hotkeys, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Hotkeys, deps: [{ token: i1.Platform }, { token: i2.EventManager }, { token: i3.MatDialog }, { token: i1.ModalController }, { token: i1.PopoverController }, { token: APP_HOTKEYS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Hotkeys, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Hotkeys, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: SharedHotkeysModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedHotkeysModule, declarations: [HotkeysDialogComponent], imports: [CommonModule, MatCommonModule, MatDialogModule, i1.TranslateModule], exports: [HotkeysDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedHotkeysModule, providers: [Hotkeys], imports: [CommonModule, MatCommonModule, MatDialogModule, TranslateModule.forChild()] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedHotkeysModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SharedHotkeysModule, declarations: [HotkeysDialogComponent], imports: [CommonModule, MatCommonModule, MatDialogModule, i1.TranslateModule], exports: [HotkeysDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedHotkeysModule, providers: [Hotkeys], imports: [CommonModule, MatCommonModule, MatDialogModule, TranslateModule.forChild()] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedHotkeysModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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

@@ -369,10 +369,10 @@ export class AppImageGalleryComponent {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "pipe", type: i14.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i15.ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: i16.IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: i17.AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "17.0.0", version: "18.2.13", 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { kind: "pipe", type: i14.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i15.ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: i16.IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: i17.AppendQueryParamsPipePipe, name: "appendQueryParams" }, { kind: "pipe", type: i3.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
         }], 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/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: "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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: ImageGalleryModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: ImageGalleryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageGalleryModule, decorators: [{
             type: NgModule,
             args: [{
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],

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

@@ -83,10 +83,10 @@ export class ImageAttachmentService extends StartableService {
     asFilter(filter) {
         return ImageAttachmentFilter.fromObject(filter);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageAttachmentService, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageAttachmentService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageAttachmentService, deps: [{ token: i1.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageAttachmentService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageAttachmentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageAttachmentService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.Platform }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2FsbGVyeS5zZXJ2aWNlLnRlc3RpbmcuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL3NoYXJlZC9pbWFnZS9nYWxsZXJ5L3Rlc3RpbmcvZ2FsbGVyeS5zZXJ2aWNlLnRlc3RpbmcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHM0MsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxlQUFlLEVBQWMsTUFBTSxNQUFNLENBQUM7QUFDbkQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFHN0UsT0FBTyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNoRixPQUFPLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ25GLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxtREFBbUQsQ0FBQztBQUVoRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sOENBQThDLENBQUM7OztBQUU1RSxXQUFXO0FBRUosSUFBTSxlQUFlLEdBQXJCLE1BQU0sZUFBZ0IsU0FBUSxNQUF1QjtJQUMxRCxNQUFNLENBQUMsVUFBVSxDQUErQztJQUVoRSxPQUFPLEdBQVcsSUFBSSxDQUFDO0lBQ3ZCLEdBQUcsR0FBVyxJQUFJLENBQUM7SUFDbkIsS0FBSyxHQUFXLElBQUksQ0FBQztJQUVyQixVQUFVLENBQUMsTUFBVyxFQUFFLElBQVU7UUFDaEMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDL0IsSUFBSSxDQUFDLEdBQUcsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQztRQUM5QixJQUFJLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUM7SUFDNUIsQ0FBQztDQUNGLENBQUE7QUFiWSxlQUFlO0lBRDNCLFdBQVcsQ0FBQyxFQUFFLFFBQVEsRUFBRSxtQkFBbUIsRUFBRSxDQUFDO0dBQ2xDLGVBQWUsQ0FhM0I7O0FBRUQsV0FBVztBQUVKLElBQU0scUJBQXFCLEdBQTNCLE1BQU0scUJBQXNCLFNBQVEsWUFBb0Q7SUFDN0YsTUFBTSxDQUFDLFVBQVUsQ0FBcUQ7Q0FDdkUsQ0FBQTtBQUZZLHFCQUFxQjtJQURqQyxXQUFXLENBQUMsRUFBRSxRQUFRLEVBQUUseUJBQXlCLEVBQUUsQ0FBQztHQUN4QyxxQkFBcUIsQ0FFakM7O0FBR0QsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGdCQUFnQjtJQVdwQztJQVZ0QixPQUFPLEdBQUcsSUFBSSxlQUFlLENBQTZCO1FBQ3hELGVBQWUsQ0FBQyxVQUFVLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLEdBQUcsRUFBRSxrREFBa0QsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLENBQUM7UUFDL0csZUFBZSxDQUFDLFVBQVUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsR0FBRyxFQUFFLGtEQUFrRCxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsQ0FBQztRQUMvRyxlQUFlLENBQUMsVUFBVSxDQUFDLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxHQUFHLEVBQUUsa0RBQWtELEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxDQUFDO1FBQy9HLGVBQWUsQ0FBQyxVQUFVLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLEdBQUcsRUFBRSxrREFBa0QsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLENBQUM7UUFDL0csZUFBZSxDQUFDLFVBQVUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsR0FBRyxFQUFFLGtEQUFrRCxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsQ0FBQztRQUMvRyxlQUFlLENBQUMsVUFBVSxDQUFDLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxHQUFHLEVBQUUsa0RBQWtELEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxDQUFDO1FBQy9HLGVBQWUsQ0FBQyxVQUFVLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLEdBQUcsRUFBRSxrREFBa0QsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLENBQUM7S0FDaEgsQ0FBQyxDQUFDO0lBRUgsWUFBc0IsUUFBa0I7UUFDdEMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBREksYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUV0QyxPQUFPLENBQUMsS0FBSyxDQUFDLDBDQUEwQyxDQUFDLENBQUM7SUFDNUQsQ0FBQztJQUVTLFNBQVM7UUFDakIsT0FBTyxPQUFPLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxRQUFRLENBQ04sTUFBYyxFQUNkLElBQVksRUFDWixNQUFlLEVBQ2YsYUFBNkIsRUFDN0IsTUFBOEIsRUFDOUIsSUFBb0Q7UUFFcEQsT0FBTyxDQUFDLEtBQUssQ0FBQyw4Q0FBOEMsQ0FBQyxDQUFDO1FBQzlELE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQ3RCLEdBQUcsQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFFO1lBQ2IsSUFBSSxJQUFJLEdBQUcsQ0FBQyxNQUFNLElBQUksRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLGVBQWUsQ0FBQyxVQUFVLENBQUMsQ0FBQztZQUUxRCxJQUFJLEdBQUcsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsTUFBTSxFQUFFLGFBQWEsQ0FBQyxDQUFDO1lBRXJELE9BQU8sQ0FBQyxLQUFLLENBQUMsb0NBQW9DLElBQUksQ0FBQyxNQUFNLFlBQVksQ0FBQyxDQUFDO1lBRTNFLE9BQU8sRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUN0QyxDQUFDLENBQUMsQ0FDSCxDQUFDO0lBQ0osQ0FBQztJQUVELEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBMkI7UUFDdkMsT0FBTyxDQUFDLEtBQUssQ0FBQyw0Q0FBNEMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUM7UUFDdkYsSUFBSSxDQUFDLFFBQVE7WUFBRSxPQUFPLEVBQUUsQ0FBQztRQUV6QixNQUFNLGNBQWMsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQztRQUMxQyxJQUFJLFNBQVMsR0FBRyxjQUFjLENBQUMsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxJQUFJLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ3pGLFFBQVE7YUFDTCxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7YUFDaEMsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDaEIsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLFNBQVMsQ0FBQztRQUN4QixDQUFDLENBQUMsQ0FBQztRQUNMLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLHlCQUF5QixDQUFDLENBQUMsR0FBRyxjQUFjLEVBQUUsR0FBRyxRQUFRLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBQ3ZGLENBQUM7SUFFRCxLQUFLLENBQUMsU0FBUyxDQUFDLFFBQTJCO1FBQ3pDLE1BQU0sVUFBVSxHQUFHLENBQUMsUUFBUSxJQUFJLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUM1RSxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUN4RixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQsUUFBUSxDQUFDLE1BQVc7UUFDbEIsT0FBTyxxQkFBcUIsQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDbEQsQ0FBQzt3R0FoRVUsc0JBQXNCOzRHQUF0QixzQkFBc0I7OzRGQUF0QixzQkFBc0I7a0JBRGxDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFNvcnREaXJlY3Rpb24gfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zb3J0JztcbmltcG9ydCB7IG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgU3RhcnRhYmxlU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2VzL3N0YXJ0YWJsZS1zZXJ2aWNlLmNsYXNzJztcbmltcG9ydCB7IEVudGl0aWVzU2VydmljZVdhdGNoT3B0aW9ucywgSUVudGl0aWVzU2VydmljZSwgTG9hZFJlc3VsdCB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2VzL2VudGl0eS1zZXJ2aWNlLmNsYXNzJztcbmltcG9ydCB7IFBsYXRmb3JtIH0gZnJvbSAnQGlvbmljL2FuZ3VsYXInO1xuaW1wb3J0IHsgaXNOaWwsIGlzTm90TmlsLCByZW1vdmVEdXBsaWNhdGVzRnJvbUFycmF5IH0gZnJvbSAnLi4vLi4vLi4vZnVuY3Rpb25zJztcbmltcG9ydCB7IEVudGl0eSwgRW50aXR5VXRpbHMgfSBmcm9tICcuLi8uLi8uLi8uLi9jb3JlL3NlcnZpY2VzL21vZGVsL2VudGl0eS5tb2RlbCc7XG5pbXBvcnQgeyBFbnRpdHlDbGFzcyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvcmUvc2VydmljZXMvbW9kZWwvZW50aXR5LmRlY29yYXRvcnMnO1xuaW1wb3J0IHsgSW1hZ2UgfSBmcm9tICcuLi8uLi9pbWFnZS5tb2RlbCc7XG5pbXBvcnQgeyBFbnRpdHlGaWx0ZXIgfSBmcm9tICcuLi8uLi8uLi8uLi9jb3JlL3NlcnZpY2VzL21vZGVsL2ZpbHRlci5tb2RlbCc7XG5cbi8vIEBkeW5hbWljXG5ARW50aXR5Q2xhc3MoeyB0eXBlbmFtZTogJ0ltYWdlQXR0YWNobWVudFZPJyB9KVxuZXhwb3J0IGNsYXNzIEltYWdlQXR0YWNobWVudCBleHRlbmRzIEVudGl0eTxJbWFnZUF0dGFjaG1lbnQ+IGltcGxlbWVudHMgSW1hZ2Uge1xuICBzdGF0aWMgZnJvbU9iamVjdDogKHNvdXJjZTogYW55LCBvcHRzPzogYW55KSA9PiBJbWFnZUF0dGFjaG1lbnQ7XG5cbiAgZGF0YVVybDogc3RyaW5nID0gbnVsbDtcbiAgdXJsOiBzdHJpbmcgPSBudWxsO1xuICB0aXRsZTogc3RyaW5nID0gbnVsbDtcblxuICBmcm9tT2JqZWN0KHNvdXJjZTogYW55LCBvcHRzPzogYW55KSB7XG4gICAgc3VwZXIuZnJvbU9iamVjdChzb3VyY2UsIG9wdHMpO1xuICAgIHRoaXMudXJsID0gc291cmNlLnVybDtcbiAgICB0aGlzLmRhdGFVcmwgPSBzb3VyY2UuZGF0YVVybDtcbiAgICB0aGlzLnRpdGxlID0gc291cmNlLnRpdGxlO1xuICB9XG59XG5cbi8vIEBkeW5hbWljXG5ARW50aXR5Q2xhc3MoeyB0eXBlbmFtZTogJ0ltYWdlQXR0YWNobWVudEZpbHRlclZPJyB9KVxuZXhwb3J0IGNsYXNzIEltYWdlQXR0YWNobWVudEZpbHRlciBleHRlbmRzIEVudGl0eUZpbHRlcjxJbWFnZUF0dGFjaG1lbnRGaWx0ZXIsIEltYWdlQXR0YWNobWVudD4ge1xuICBzdGF0aWMgZnJvbU9iamVjdDogKHNvdXJjZTogYW55LCBvcHRzPzogYW55KSA9PiBJbWFnZUF0dGFjaG1lbnRGaWx0ZXI7XG59XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBJbWFnZUF0dGFjaG1lbnRTZXJ2aWNlIGV4dGVuZHMgU3RhcnRhYmxlU2VydmljZSBpbXBsZW1lbnRzIElFbnRpdGllc1NlcnZpY2U8SW1hZ2VBdHRhY2htZW50LCBJbWFnZUF0dGFjaG1lbnRGaWx0ZXI+IHtcbiAgJGltYWdlcyA9IG5ldyBCZWhhdmlvclN1YmplY3Q8UGFydGlhbDxJbWFnZUF0dGFjaG1lbnQ+W10+KFtcbiAgICBJbWFnZUF0dGFjaG1lbnQuZnJvbU9iamVjdCh7IGlkOiAwLCB1cmw6ICdodHRwczovL3Rlc3Quc3VtYXJpcy5uZXQvYXNzZXRzL2ltZy9iZy9yYXktMS5qcGcnLCB0aXRsZTogJ3JheSAjMScgfSksXG4gICAgSW1hZ2VBdHRhY2htZW50LmZyb21PYmplY3QoeyBpZDogMSwgdXJsOiAnaHR0cHM6Ly90ZXN0LnN1bWFyaXMubmV0L2Fzc2V0cy9pbWcvYmcvcmF5LTIuanBnJywgdGl0bGU6ICdyYXkgIzInIH0pLFxuICAgIEltYWdlQXR0YWNobWVudC5mcm9tT2JqZWN0KHsgaWQ6IDIsIHVybDogJ2h0dHBzOi8vdGVzdC5zdW1hcmlzLm5ldC9hc3NldHMvaW1nL2JnL3JheS0yLmpwZycsIHRpdGxlOiAncmF5ICMzJyB9KSxcbiAgICBJbWFnZUF0dGFjaG1lbnQuZnJvbU9iamVjdCh7IGlkOiAzLCB1cmw6ICdodHRwczovL3Rlc3Quc3VtYXJpcy5uZXQvYXNzZXRzL2ltZy9iZy9yYXktMi5qcGcnLCB0aXRsZTogJ3JheSAjNCcgfSksXG4gICAgSW1hZ2VBdHRhY2htZW50LmZyb21PYmplY3QoeyBpZDogNCwgdXJsOiAnaHR0cHM6Ly90ZXN0LnN1bWFyaXMubmV0L2Fzc2V0cy9pbWcvYmcvcmF5LTIuanBnJywgdGl0bGU6ICdyYXkgIzUnIH0pLFxuICAgIEltYWdlQXR0YWNobWVudC5mcm9tT2JqZWN0KHsgaWQ6IDUsIHVybDogJ2h0dHBzOi8vdGVzdC5zdW1hcmlzLm5ldC9hc3NldHMvaW1nL2JnL3JheS0yLmpwZycsIHRpdGxlOiAncmF5ICM2JyB9KSxcbiAgICBJbWFnZUF0dGFjaG1lbnQuZnJvbU9iamVjdCh7IGlkOiA2LCB1cmw6ICdodHRwczovL3Rlc3Quc3VtYXJpcy5uZXQvYXNzZXRzL2ltZy9iZy9yYXktMi5qcGcnLCB0aXRsZTogJ3JheSAjNycgfSksXG4gIF0pO1xuXG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBwbGF0Zm9ybTogUGxhdGZvcm0pIHtcbiAgICBzdXBlcihwbGF0Zm9ybSk7XG4gICAgY29uc29sZS5kZWJ1ZygnW2dhbGxlcnktdGVzdGluZy1zZXJ2aWNlXSBDcmVhdGUgc2VydmljZScpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG5nT25TdGFydCgpOiBQcm9taXNlPGFueT4ge1xuICAgIHJldHVybiBQcm9taXNlLnJlc29sdmUodW5kZWZpbmVkKTtcbiAgfVxuXG4gIHdhdGNoQWxsKFxuICAgIG9mZnNldDogbnVtYmVyLFxuICAgIHNpemU6IG51bWJlcixcbiAgICBzb3J0Qnk/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: "18.2.14", ngImport: i0, type: GalleryTestPage, deps: [{ token: i1.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.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", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "imageSizes", "imageSizeQueryParam", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "click"] }, { kind: "component", type: i4.DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GalleryTestPage, deps: [{ token: i1.ImageAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", "showAddToolbarButton", "showAddTextButton", "showAddCardButton", "showCardToolbar", "addButtonColor", "addButtonText", "cardTemplate", "imageSizes", "imageSizeQueryParam", "dataSource"], outputs: ["onBeforeDeleteRows", "onAfterAddRows", "onAfterEditRow", "click"] }, { kind: "component", type: i4.DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GalleryTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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 }] });