@sumaris-net/ngx-components 2.4.81 → 2.4.82-rc2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Output, Injectable, Pipe, ChangeDetectorRef, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Optional, Input, ViewChild, NgModule, HostBinding, HostListener, ElementRef, ViewChildren, ANIMATION_MODULE_TYPE } from '@angular/core';
+import { InjectionToken, EventEmitter, Directive, Output, Injectable, Pipe, ChangeDetectorRef, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Optional, Input, ViewChild, NgModule, HostBinding, HostListener, ElementRef, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, ANIMATION_MODULE_TYPE } from '@angular/core';
 import * as i3 from '@angular/common';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -56,11 +56,11 @@ import * as i6 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
 import * as i1$3 from '@angular/forms';
 import { Validators, NG_VALUE_ACCESSOR, AbstractControl, UntypedFormGroup, UntypedFormArray, UntypedFormControl, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
-import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, of, from, noop as noop$9, Observable, forkJoin, defer, interval, EMPTY } from 'rxjs';
+import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, of, from, noop as noop$9, Observable, forkJoin, defer, fromEventPattern, interval, EMPTY } from 'rxjs';
 import { filter, map, takeUntil, first, switchMap, tap, debounceTime, startWith, distinctUntilChanged, mergeMap, catchError, throttleTime, skip, bufferWhen, mapTo, take } from 'rxjs/operators';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import * as i1 from '@ionic/angular';
-import { IonicModule, Platform, ToastController, IonicSafeString, createAnimation, IonicRouteStrategy, NavController, ModalController, AlertController, IonContent, IonRouterOutlet, IonItem, IonModal, IonInfiniteScroll } from '@ionic/angular';
+import { IonicModule, IonicSlides, Platform, ToastController, IonicSafeString, createAnimation, IonicRouteStrategy, NavController, ModalController, AlertController, IonContent, IonRouterOutlet, IonItem, IonModal, IonInfiniteScroll } from '@ionic/angular';
 import { Capacitor } from '@capacitor/core';
 import { Keyboard } from '@capacitor/keyboard';
 import * as i1$2 from '@ngx-translate/core';
@@ -8567,6 +8567,7 @@ class MatSwipeField {
         this.showSlides = false;
         this.$items = new BehaviorSubject(undefined);
         this.$loaded = new BehaviorSubject(false);
+        this.swiperModules = [IonicSlides];
         this.logPrefix = '[mat-swipe-field]';
         this.debug = false;
         this.required = false;
@@ -8618,6 +8619,7 @@ class MatSwipeField {
         return this.formControl.enabled;
     }
     ngOnInit() {
+        this._swiper = this.swiperRef.nativeElement.swiper;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
         if (!this.formControl)
             throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-swipe-field>.');
@@ -8718,14 +8720,15 @@ class MatSwipeField {
         this._onTouchedCallback = fn;
     }
     setDisabledState(isDisabled) {
-        this.slides.lockSwipes(isDisabled).then(() => this.updateButtons());
+        this.lockSwipes(isDisabled);
+        this.updateButtons();
         this.cd.markForCheck();
     }
     previous() {
-        this.slides.slidePrev();
+        this._swiper.slidePrev();
     }
     next() {
-        this.slides.slideNext();
+        this._swiper.slideNext();
     }
     reachStart(reached) {
         this.previousDisabled = reached;
@@ -8733,29 +8736,35 @@ class MatSwipeField {
     reachEnd(reached) {
         this.nextDisabled = reached;
     }
-    slidesLoaded() {
+    swiperLoaded() {
+        console.log('TODO swiper init');
+        this._swiper = this.swiperRef.nativeElement.swiper;
         this.$loaded.next(true);
     }
     slideChanged() {
-        this.slides.getActiveIndex()
-            .then(activeIndex => {
-            if (this._writing)
-                return;
-            this._writing = true;
-            const value = (this.$items.getValue() || [])[activeIndex] || undefined;
-            if (this.debug)
-                console.debug(`${this.logPrefix} slide changed ActiveIndex:${activeIndex}, new value:${value}`);
-            this.formControl.patchValue(value, { emitEvent: false });
-            this._writing = false;
-            this.checkIfTouched();
-            this._onChangeCallback(value);
-        });
+        const activeIndex = this._swiper.activeIndex;
+        if (this._writing || isNil(activeIndex))
+            return;
+        this._writing = true;
+        const value = (this.$items.getValue() || [])[activeIndex] || undefined;
+        if (this.debug)
+            console.debug(`${this.logPrefix} slide changed ActiveIndex:${activeIndex}, new value:${value}`);
+        this.formControl.patchValue(value, { emitEvent: false });
+        this._writing = false;
+        this.checkIfTouched();
+        this._onChangeCallback(value);
     }
     /* -- protected method -- */
+    lockSwipes(lock) {
+        this._swiper.allowSlideNext = !lock;
+        this._swiper.allowSlidePrev = !lock;
+        this._swiper.allowTouchMove = !lock;
+        this._swiper.update();
+    }
     loadItems(items) {
         this.$loaded.next(false);
         this.$items.next(items);
-        this.ready().then(() => this.slides.update());
+        this.ready().then(() => this._swiper.update());
     }
     checkIfTouched() {
         if (this.formControl.touched) {
@@ -8779,35 +8788,36 @@ class MatSwipeField {
         }
     }
     slideTo(index) {
-        this.slides.slideTo(index, 0, false).then(() => this.slides.update().then(() => this.updateButtons()));
+        this._swiper.slideTo(index, 0, false);
+        this._swiper.update();
+        this.updateButtons();
     }
-    async updateButtons() {
-        const activeIndex = await this.slides.getActiveIndex();
+    updateButtons() {
+        const activeIndex = this._swiper.activeIndex;
         if (this.debug)
             console.debug(`${this.logPrefix} update buttons ActiveIndex:${activeIndex}`);
         this.previousDisabled = activeIndex === 0 || this.disabled;
         this.nextDisabled = activeIndex === this.itemCount - 1 || this.disabled;
     }
     // not used ...
-    async getSlides() {
+    async getSwiper() {
         await this.ready();
-        return this.slides;
+        return this._swiper;
     }
     async ready() {
-        // Wait pmfms load, and controls load
+        // Wait loaded
         if (this.$loaded.getValue() === false) {
             if (this.debug)
                 console.debug(`${this.logPrefix} waiting slides to be ready...`);
-            await firstNotNilPromise(this.$loaded
-                .pipe(filter((loaded) => loaded === true)));
+            await firstTruePromise(this.$loaded);
         }
     }
 }
 MatSwipeField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatSwipeField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatSwipeField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MatSwipeField, selector: "mat-swipe-field", inputs: { logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", debug: "debug", required: "required", mobile: "mobile", clearable: "clearable", equals: "equals", displayWith: "displayWith", displayAttributes: "displayAttributes", appAutofocus: "appAutofocus", classList: ["class", "classList"], tabindex: "tabindex", items: "items" }, outputs: { onClick: "click", blurred: "blur", focused: "focus" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "slides", first: true, predicate: ["slides"], descendants: true, static: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }], ngImport: i0, template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n                [appearance]=\"appearance\"\n                [class]=\"classList\"\n                [class.mat-form-field-disabled]=\"disabled\">\n  <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n    {{placeholder}}\n  </mat-label>\n  <input matInput #fakeInput type=\"text\"\n         [formControl]=\"formControl\"\n         [readonly]=\"true\"\n         (focus)=\"_onFocusFakeInput($event)\"\n         [required]=\"required\"\n         [class.cdk-visually-hidden]=\"showSlides\"\n         [tabindex]=\"tabindex\">\n\n  <div class=\"slides-container\" [class.hidden]=\"!showSlides\">\n    <ion-slides #slides\n                [options]=\"slidesOptions\"\n                (ionSlidesDidLoad)=\"slidesLoaded()\"\n                (ionSlideReachStart)=\"reachStart(true)\"\n                (ionSlideReachEnd)=\"reachEnd(true)\"\n                (ionSlideNextEnd)=\"reachStart(false)\"\n                (ionSlidePrevEnd)=\"reachEnd(false)\"\n                (ionSlideDidChange)=\"slideChanged()\"\n    >\n      <ion-slide *ngFor=\"let item of $items | async\">\n        <ion-label>{{ displayWith(item) }}</ion-label>\n      </ion-slide>\n\n    </ion-slides>\n  </div>\n\n  <button #prevButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-prev\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"previousDisabled\"\n          (click)=\"previous()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <button #nextButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-next\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"nextDisabled\"\n          (click)=\"next()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n", styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-prev,.button-next{position:absolute;top:calc(50% - 20px);z-index:10}.button-prev{left:0;right:auto}.button-next{left:auto;right:0}\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: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonSlide, selector: "ion-slide" }, { kind: "component", type: i1.IonSlides, selector: "ion-slides", inputs: ["mode", "options", "pager", "scrollbar"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MatSwipeField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MatSwipeField, selector: "mat-swipe-field", inputs: { logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", debug: "debug", required: "required", mobile: "mobile", clearable: "clearable", equals: "equals", displayWith: "displayWith", displayAttributes: "displayAttributes", appAutofocus: "appAutofocus", classList: ["class", "classList"], tabindex: "tabindex", items: "items" }, outputs: { onClick: "click", blurred: "blur", focused: "focus" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "fakeInput", first: true, predicate: ["fakeInput"], descendants: true }, { propertyName: "swiperRef", first: true, predicate: ["swiper"], descendants: true, static: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }], ngImport: i0, template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n                [appearance]=\"appearance\"\n                [class]=\"classList\"\n                [class.mat-form-field-disabled]=\"disabled\">\n  <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n    {{placeholder}}\n  </mat-label>\n  <input matInput #fakeInput type=\"text\"\n         [formControl]=\"formControl\"\n         [readonly]=\"true\"\n         (focus)=\"_onFocusFakeInput($event)\"\n         [required]=\"required\"\n         [class.cdk-visually-hidden]=\"showSlides\"\n         [tabindex]=\"tabindex\">\n\n  <div class=\"slides-container\" [class.hidden]=\"!showSlides\" >\n    <swiper-container #swiper\n                      [modules]=\"swiperModules\"\n                      [speed]=\"100\" [slidesPerView]=\"1\"\n                      (init)=\"swiperLoaded()\"\n                      (reachbeginning)=\"reachStart(true)\"\n                      (reachend)=\"reachEnd(true)\"\n                      (slidenexttransitionend)=\"reachStart(false)\"\n                      (slideprevtransitionend)=\"reachEnd(false)\"\n                      (slidechange)=\"slideChanged()\">\n      <swiper-slide *ngFor=\"let item of $items | async\">\n        <ion-label>{{ displayWith(item) }}</ion-label>\n      </swiper-slide>\n\n    </swiper-container>\n  </div>\n\n  <button #prevButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-prev\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"previousDisabled\"\n          (click)=\"previous()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <button #nextButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-next\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"nextDisabled\"\n          (click)=\"next()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n", styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container{padding-inline-start:40px;padding-inline-end:40px}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-prev,.button-next{position:absolute;top:calc(50% - 20px);z-index:10}.button-prev{left:0;right:auto}.button-next{left:auto;right:0}\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: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatSwipeField, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-swipe-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n                [appearance]=\"appearance\"\n                [class]=\"classList\"\n                [class.mat-form-field-disabled]=\"disabled\">\n  <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n    {{placeholder}}\n  </mat-label>\n  <input matInput #fakeInput type=\"text\"\n         [formControl]=\"formControl\"\n         [readonly]=\"true\"\n         (focus)=\"_onFocusFakeInput($event)\"\n         [required]=\"required\"\n         [class.cdk-visually-hidden]=\"showSlides\"\n         [tabindex]=\"tabindex\">\n\n  <div class=\"slides-container\" [class.hidden]=\"!showSlides\">\n    <ion-slides #slides\n                [options]=\"slidesOptions\"\n                (ionSlidesDidLoad)=\"slidesLoaded()\"\n                (ionSlideReachStart)=\"reachStart(true)\"\n                (ionSlideReachEnd)=\"reachEnd(true)\"\n                (ionSlideNextEnd)=\"reachStart(false)\"\n                (ionSlidePrevEnd)=\"reachEnd(false)\"\n                (ionSlideDidChange)=\"slideChanged()\"\n    >\n      <ion-slide *ngFor=\"let item of $items | async\">\n        <ion-label>{{ displayWith(item) }}</ion-label>\n      </ion-slide>\n\n    </ion-slides>\n  </div>\n\n  <button #prevButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-prev\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"previousDisabled\"\n          (click)=\"previous()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <button #nextButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-next\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"nextDisabled\"\n          (click)=\"next()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n", styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-prev,.button-next{position:absolute;top:calc(50% - 20px);z-index:10}.button-prev{left:0;right:auto}.button-next{left:auto;right:0}\n"] }]
+            args: [{ selector: 'mat-swipe-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n                [appearance]=\"appearance\"\n                [class]=\"classList\"\n                [class.mat-form-field-disabled]=\"disabled\">\n  <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n    {{placeholder}}\n  </mat-label>\n  <input matInput #fakeInput type=\"text\"\n         [formControl]=\"formControl\"\n         [readonly]=\"true\"\n         (focus)=\"_onFocusFakeInput($event)\"\n         [required]=\"required\"\n         [class.cdk-visually-hidden]=\"showSlides\"\n         [tabindex]=\"tabindex\">\n\n  <div class=\"slides-container\" [class.hidden]=\"!showSlides\" >\n    <swiper-container #swiper\n                      [modules]=\"swiperModules\"\n                      [speed]=\"100\" [slidesPerView]=\"1\"\n                      (init)=\"swiperLoaded()\"\n                      (reachbeginning)=\"reachStart(true)\"\n                      (reachend)=\"reachEnd(true)\"\n                      (slidenexttransitionend)=\"reachStart(false)\"\n                      (slideprevtransitionend)=\"reachEnd(false)\"\n                      (slidechange)=\"slideChanged()\">\n      <swiper-slide *ngFor=\"let item of $items | async\">\n        <ion-label>{{ displayWith(item) }}</ion-label>\n      </swiper-slide>\n\n    </swiper-container>\n  </div>\n\n  <button #prevButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-prev\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"previousDisabled\"\n          (click)=\"previous()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <button #nextButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-next\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"nextDisabled\"\n          (click)=\"next()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n\n</mat-form-field>\n", styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container{padding-inline-start:40px;padding-inline-end:40px}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-prev,.button-next{position:absolute;top:calc(50% - 20px);z-index:10}.button-prev{left:0;right:auto}.button-next{left:auto;right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { logPrefix: [{
@@ -8857,9 +8867,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], fakeInput: [{
                 type: ViewChild,
                 args: ['fakeInput']
-            }], slides: [{
+            }], swiperRef: [{
                 type: ViewChild,
-                args: ['slides', { static: true }]
+                args: ['swiper', { static: true }]
             }], prevButton: [{
                 type: ViewChild,
                 args: ['prevButton']
@@ -8888,6 +8898,7 @@ SharedMatSwipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SharedMatSwipeModule, decorators: [{
             type: NgModule,
             args: [{
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     imports: [
                         CommonModule,
                         IonicModule,
@@ -9638,124 +9649,124 @@ class BadgeDirective extends MatBadge {
     constructor(_ngZone, el, _ariaDescriber, _renderer, _animationMode) {
         super(_ngZone, el, _ariaDescriber, _renderer, _animationMode);
         this.el = el;
-        this._subscription = null;
-        this._$update = new Subject();
         this.content = 0x00A0; // Will be invisible
     }
-    set appColor(value) {
-        if (this._appColor !== value) {
-            this._appColor = value;
-            this.color = value;
-            this.updateView();
-        }
-    }
-    get appColor() {
-        return this._appColor;
-    }
-    set fill(value) {
-        if (this._fill !== value) {
-            this._fill = value;
-            this.updateView();
-        }
-    }
-    get fill() {
-        return this._fill;
+    get isOverlapHost() { return this.overlap; }
+    get isAboveHost() { return this.isAbove(); }
+    get isBelowHost() { return !this.isAbove(); }
+    get isBeforeHost() { return !this.isAfter(); }
+    get isAfterHost() { return this.isAfter(); }
+    get isSmallHost() { return this.size === 'small'; }
+    get isMediumHost() { return this.size === 'medium'; }
+    get isLargeHost() { return this.size === 'large'; }
+    get isHiddenHost() { return this.hidden || !this.content; }
+    get isDisabledHost() { return this.disabled; }
+    ngOnInit() {
+        super.ngOnInit();
     }
-    set matIcon(icon) {
-        if (this._matIcon !== icon) {
-            this._matIcon = icon;
-            this.updateView();
-        }
+    ngAfterViewInit() {
+        this.updateView();
     }
-    set ionIcon(icon) {
-        if (this._ionIcon !== icon) {
-            this._ionIcon = icon;
+    ngOnChanges(changes) {
+        if (changes.appBadgeColor || changes.appBadgeFill || changes.appBadgeMatIcon || changes.appBadgeIcon || changes.appBadgeHidden || changes.appBadgeOverlap || changes.appBadgePosition) {
             this.updateView();
         }
     }
-    set hidden(hidden) {
-        if (super.hidden !== hidden) {
-            super.hidden = hidden;
-            this.updateView(true);
-        }
-    }
-    get hidden() {
-        return super.hidden;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        // Default color
-        this._appColor = this._appColor || 'primary';
-        if (this._appColor === 'warn')
-            this._appColor = 'warning';
-        this.updateView(true);
-        this._subscription = this._$update
-            .pipe(debounceTime(100))
-            .subscribe(() => this.updateView(true));
-    }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this._subscription?.unsubscribe();
     }
-    updateView(immediate) {
-        // Async by default
-        if (!immediate) {
-            this._$update.next();
-            return;
-        }
+    updateView() {
         const badge = this.getBadgeElement();
         if (!badge)
             return;
-        let fontSize;
+        // Fix color
+        if (!this.appBadgeColor)
+            this.appBadgeColor = 'primary';
+        if (this.appBadgeColor === 'warn')
+            this.appBadgeColor = 'warning';
+        let size;
         switch (this.size) {
             case 'large':
-                fontSize = '24px';
+                size = 24;
                 break;
             case 'medium':
-                fontSize = '22px';
+                size = 22;
                 break;
             case 'small':
-                fontSize = '16px';
+                size = 16;
                 break;
         }
-        let hidden = this.hidden;
+        let hidden = this.appBadgeHidden;
         let html = '';
-        if (this._matIcon) {
-            html = `<i class="material-icons" style="font-size: ${fontSize};">${this._matIcon}</i>`;
+        if (this.appBadgeMatIcon) {
+            html = `<i class="material-icons" style="font-size: ${size}px;">${this.appBadgeMatIcon}</i>`;
         }
-        else if (this._ionIcon) {
-            html = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this._ionIcon}"></ion-icon>`;
+        else if (this.appBadgeIcon) {
+            html = `<ion-icon style="font-size: ${size}px; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
         }
         else {
             hidden = true;
         }
-        if (this._html !== html) {
+        if (!hidden && this._html !== html) {
             this._html = html;
             badge.innerHTML = html;
         }
         // Update style
         // fill: 'clear'
-        if (this._fill === 'clear') {
-            badge.style.color = `var(--ion-color-${this._appColor})`;
+        if (this.appBadgeFill === 'clear') {
+            badge.style.color = `var(--ion-color-${this.appBadgeColor})`;
             badge.style.background = 'transparent';
         }
         // fill: 'solid' (default value)
         else {
-            badge.style.background = `var(--ion-color-${this._appColor})`;
-            badge.style.color = `var(--ion-color-${this._appColor}-contrast)`;
+            badge.style.background = `var(--ion-color-${this.appBadgeColor})`;
+            badge.style.color = `var(--ion-color-${this.appBadgeColor}-contrast)`;
         }
         if (hidden)
             badge.style.display = 'none';
-        else if (badge.style.display !== 'inline-block')
-            badge.style.display = 'inline-block';
-        if (badge.style.alignItems !== 'center')
-            badge.style.alignItems = 'center';
-        if (badge.style.justifyContent !== 'center')
-            badge.style.justifyContent = 'center';
+        else {
+            if (badge.style.display !== 'inline-block')
+                badge.style.display = 'inline-block';
+            if (badge.style.position !== 'absolute')
+                badge.style.position = 'absolute';
+            /*
+            // WOARKROUND to force position of the badge, when inside a <mat-button> (e.g. on a <mat-label>)
+            const overlap = this.overlap;
+      
+            // Right/left position
+            if (this.isAfter() ) {
+              const parentWidth = badge.parentElement.getBoundingClientRect().width;
+              if (parentWidth > 0) {
+                const left = `${parentWidth - (overlap ? size / 2 : 0)}px`;
+                if (badge.style.left !== left) badge.style.left = left;
+                if (badge.style.right !== '') badge.style.right = '';
+              }
+              else {
+                const right = `${-1 * (overlap ? size / 2 : size)}px`;
+                if (badge.style.right !== right) badge.style.right = right;
+                if (badge.style.left !== '') badge.style.left = '';
+              }
+            }
+      
+            // Top/bottom position
+            if (this.isAbove()) {
+              const parentHeight = badge.parentElement.getBoundingClientRect().height;
+              if (parentHeight > 0) {
+                const bottom = `${parentHeight - (overlap ? (size / 2) : size)}px`;
+                if (badge.style.bottom !== bottom) badge.style.bottom = bottom;
+                if (badge.style.top !== '') badge.style.top = '';
+              }
+              else {
+                const top = `${-1 * (overlap ? (size / 2) : size)}px`;
+                if (badge.style.top !== top) badge.style.top = top;
+                if (badge.style.bottom !== '') badge.style.bottom = '';
+              }
+            }*/
+        }
     }
 }
 BadgeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$4.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { disabled: ["matBadgeDisabled", "disabled"], color: ["appBadgeColor", "color"], size: ["appBadgeSize", "size"], fill: ["appBadgeFill", "fill"], overlap: ["appBadgeOverlap", "overlap"], hidden: ["appBadgeHidden", "hidden"], appColor: ["appBadgeColor", "appColor"], matIcon: ["appBadgeMatIcon", "matIcon"], ionIcon: ["appBadgeIcon", "ionIcon"] }, host: { properties: { "class.mat-badge-overlap": "overlap", "class.mat-badge-above": "isAbove()", "class.mat-badge-below": "!isAbove()", "class.mat-badge-before": "!isAfter()", "class.mat-badge-after": "isAfter()", "class.mat-badge-small": "size === \"small\"", "class.mat-badge-medium": "size === \"medium\"", "class.mat-badge-large": "size === \"large\"", "class.mat-badge-hidden": "hidden || !content", "class.mat-badge-disabled": "disabled" }, classAttribute: "mat-badge" }, usesInheritance: true, ngImport: i0 });
+BadgeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { disabled: ["matBadgeDisabled", "disabled"], color: ["appBadgeColor", "color"], size: ["appBadgeSize", "size"], fill: ["appBadgeFill", "fill"], hidden: ["appBadgeHidden", "hidden"], overlap: ["appBadgeOverlap", "overlap"], position: ["appBadgePosition", "position"], appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeDirective, decorators: [{
             type: Directive,
             args: [{
@@ -9765,43 +9776,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         'color: appBadgeColor',
                         'size: appBadgeSize',
                         'fill: appBadgeFill',
+                        'hidden: appBadgeHidden',
                         'overlap: appBadgeOverlap',
-                        'hidden: appBadgeHidden'
-                    ],
-                    host: {
-                        'class': 'mat-badge',
-                        '[class.mat-badge-overlap]': 'overlap',
-                        '[class.mat-badge-above]': 'isAbove()',
-                        '[class.mat-badge-below]': '!isAbove()',
-                        '[class.mat-badge-before]': '!isAfter()',
-                        '[class.mat-badge-after]': 'isAfter()',
-                        '[class.mat-badge-small]': 'size === "small"',
-                        '[class.mat-badge-medium]': 'size === "medium"',
-                        '[class.mat-badge-large]': 'size === "large"',
-                        '[class.mat-badge-hidden]': 'hidden || !content',
-                        '[class.mat-badge-disabled]': 'disabled',
-                    }
+                        'position: appBadgePosition'
+                    ]
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1$4.AriaDescriber }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [ANIMATION_MODULE_TYPE]
-                }] }]; }, propDecorators: { appColor: [{
-                type: Input,
-                args: ['appBadgeColor']
-            }], fill: [{
-                type: Input,
-                args: ['appBadgeFill']
-            }], matIcon: [{
-                type: Input,
-                args: ['appBadgeMatIcon']
-            }], ionIcon: [{
-                type: Input,
-                args: ['appBadgeIcon']
-            }], hidden: [{
-                type: Input,
-                args: ['appBadgeHidden']
+                }] }]; }, propDecorators: { true: [{
+                type: HostBinding,
+                args: ['class.mat-badge']
+            }], isOverlapHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-overlap']
+            }], isAboveHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-above']
+            }], isBelowHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-below']
+            }], isBeforeHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-before']
+            }], isAfterHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-after']
+            }], isSmallHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-small']
+            }], isMediumHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-medium']
+            }], isLargeHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-large']
+            }], isHiddenHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-hidden']
+            }], isDisabledHost: [{
+                type: HostBinding,
+                args: ['class.mat-badge-disabled']
+            }], appBadgeColor: [{
+                type: Input
+            }], appBadgeFill: [{
+                type: Input
+            }], appBadgeMatIcon: [{
+                type: Input
+            }], appBadgeIcon: [{
+                type: Input
+            }], appBadgeHidden: [{
+                type: Input
+            }], appBadgeOverlap: [{
+                type: Input
+            }], appBadgePosition: [{
+                type: Input
             }] } });
 
 class SharedBadgeModule {
@@ -20327,16 +20358,9 @@ class AppImageGalleryComponent {
         this._subscription = new Subscription();
         this._presentingElement = null;
         this._titleAutofocus = false;
+        this.swiperModules = [IonicSlides];
         this.zoomActive = false;
         this.zoomScale = 1;
-        this.sliderOpts = {
-            allowSlidePrev: false,
-            allowSlideNext: false,
-            zoom: false
-        };
-        this.modalSliderOpts = {
-            zoom: true
-        };
         this.debug = null;
         this.disabled = false;
         this.readOnly = false;
@@ -20371,6 +20395,9 @@ class AppImageGalleryComponent {
     get rowCount() {
         return this._data?.length || 0;
     }
+    get activeIndex() {
+        return this.getSwiper()?.activeIndex || 0;
+    }
     ngOnInit() {
         this.mobile = toBoolean(this.mobile, isMobile(window));
         this.mode = this.mobile ? 'list' : 'mosaic';
@@ -20509,24 +20536,31 @@ class AppImageGalleryComponent {
         await this.zoomModal.present();
         await this.zoomModal.onDidDismiss();
     }
-    async initModalSlides(slides) {
+    getSwiper(swiperElement) {
+        this._swiper = (swiperElement || this.swiperRef?.nativeElement)?.swiper || this._swiper;
+        return this._swiper;
+    }
+    async initModalSlides(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        console.log('TODO _selectedRowIndex=' + this._selectedRowIndex);
         if (this._selectedRowIndex > 0) {
-            await slides.slideTo(this._selectedRowIndex, 0);
+            await swiper.slideTo(this._selectedRowIndex, 0);
         }
         this._slidesSubscription?.unsubscribe();
-        const swiper = (await slides.getSwiper());
-        this._slidesSubscription = slides.ionSlideWillChange.subscribe(() => {
+        this._slidesSubscription = fromEventPattern((handler) => swiper.on('slideChangeTransitionStart', handler))
+            .subscribe((arg) => {
+            console.log('TODO received event slideChangeTransitionStart', arg);
             this.activeSlideIndex = swiper.activeIndex;
             this.markForCheck();
         });
     }
-    async zoom(slides, zoomIn) {
-        const slider = await slides.getSwiper();
-        const zoom = slider.zoom;
+    async zoom(swiperElement, zoomIn) {
+        const swiper = this.getSwiper(swiperElement);
+        const zoom = swiper.zoom;
         zoomIn ? zoom.in() : zoom.out();
     }
-    async deleteFromModal(event, slides) {
-        const swiper = await slides.getSwiper();
+    async deleteFromModal(event, swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
         const currentRow = this.rows.find((row, index) => index === swiper.activeIndex);
         if (!currentRow)
             return false; // Row not found
@@ -20537,27 +20571,31 @@ class AppImageGalleryComponent {
         else {
             // Reset the zoom
             swiper.zoom.out();
+            swiper.update();
+            this.markForCheck();
         }
         return deleted;
     }
-    async slidePrev(slides) {
-        const activeIndex = await slides.getActiveIndex();
+    async slidePrev(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeIndex = swiper.activeIndex;
         if (activeIndex === 0) {
             // Loop to last
-            await slides.slideTo(this.rows.length - 1, 0 /*no transition, to avoid a "revert" effect*/);
+            await swiper.slideTo(this.rows.length - 1, 0 /*no transition, to avoid a "revert" effect*/);
         }
         else {
-            await slides.slidePrev();
+            await swiper.slidePrev();
         }
     }
-    async slideNext(slides) {
-        const activeIndex = await slides.getActiveIndex();
+    async slideNext(swiperElement) {
+        const swiper = this.getSwiper(swiperElement);
+        const activeIndex = swiper.activeIndex;
         if (activeIndex === this.rows.length - 1) {
             // Loop to first
-            await slides.slideTo(0, 0 /*no transition, to avoid a "revert" effect*/);
+            await swiper.slideTo(0, 0 /*no transition, to avoid a "revert" effect*/);
         }
         else {
-            await slides.slideNext();
+            await swiper.slideNext();
         }
     }
     async canDeleteRows(rows, opts) {
@@ -20589,10 +20627,10 @@ class AppImageGalleryComponent {
     }
 }
 AppImageGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AppImageGalleryComponent, deps: [{ token: ImageService }, { token: i1.Platform }, { token: i1.AlertController }, { token: i1.PopoverController }, { token: i1$2.TranslateService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AppImageGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: "debug", disabled: "disabled", readOnly: "readOnly", mobile: "mobile", mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: "showToolbar", showFabButton: "showFabButton", showTitle: "showTitle", showAddCardButton: "showAddCardButton", addButtonColor: "addButtonColor", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows" }, viewQueries: [{ propertyName: "zoomModal", first: true, predicate: ["zoomModal"], descendants: true }, { propertyName: "titlePopover", first: true, predicate: ["titlePopover"], descendants: true }], ngImport: i0, template: "\n\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <!-- Add -->\n  <button mat-icon-button\n          *ngIf=\"!readOnly && !mobile && enabled\"\n          [title]=\"'COMMON.BTN_ADD'|translate\"\n          (click)=\"add()\">\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\"\n                 [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div class=\"gallery-container {{this.mode}}\">\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col *ngFor=\"let row of rows; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        <ion-card #card\n                  class=\"image-card\"\n                  [class.zoom-hover]=\"!mobile\"\n                  [color]=\"cardColor\"\n                  *ngVar=\"row|propertyGet: 'currentData'; let image\"\n                  (click)=\"clickRow(row, index)\"\n                  tappable\n                  @fadeInAnimation>\n          <figure class=\"card-thumbnail\">\n            <img [src]=\"image.url||image.dataUrl\"/>\n          </figure>\n\n          <!-- toolbar for title (when not hover) -->\n          <ion-toolbar color=\"transparent\" class=\"title\">\n            <ion-label class=\"card-title\">{{image.title}}</ion-label>\n          </ion-toolbar>\n\n          <!-- action toolbar (desktop only) shown when hover image -->\n          <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n\n            <!-- edit title button -->\n            <button mat-button *ngIf=\"showTitle\" slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"showCardToolbar(cardToolbar)\">\n              <mat-icon>edit</mat-icon>\n              <mat-label>\n                <span *ngIf=\"row.currentData.title|isNotNilOrBlank; else editLabel\" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n                <ng-template #editLabel>\n                  <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                </ng-template>\n              </mat-label>\n            </button>\n\n            <div class=\"flex-spacer\"></div>\n\n            <!-- delete button -->\n            <button mat-icon-button slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"'COMMON.BTN_DELETE'|translate\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </ion-toolbar>\n        </ion-card>\n      </ion-col>\n\n      <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n        <ion-card class=\"image-card-button\" color=\"light\"\n                  (click)=\"add($event)\"\n                  [disabled]=\"disabled\"\n                  tappable>\n          <ion-card-content>\n            <div class=\"icon-container\">\n              <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n              <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n            </div>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n</div>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" 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\"\n           [class.modal-fullscreen]=\"mobile\"\n           [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding ion-no-margin\" >\n      <!-- Counter  -->\n      <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n        <ion-label color=\"light\">\n          {{activeSlideIndex + 1}} / {{count}}\n        </ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSlides, true)\" color=\"light\">\n          <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSlides, false)\" color=\"light\">\n          <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n\n      <!-- navigation side buttons next/back -->\n      <ng-container *ngIf=\"!mobile && (rows|isArrayLength:{greaterThan: 1})\">\n        <div class=\"side-buttons prev\"\n             (click)=\"slidePrev(modalSlides)\">\n          <ion-icon name=\"chevron-back\"></ion-icon>\n        </div>\n        <div class=\"side-buttons next\"\n             (click)=\"slideNext(modalSlides)\">\n          <ion-icon name=\"chevron-forward\"></ion-icon>\n        </div>\n      </ng-container>\n\n      <!-- image slides -->\n      <ion-slides #modalSlides [options]=\"modalSliderOpts\" >\n        <ion-slide *ngFor=\"let row of rows; last as last\">\n          <div class=\"swiper-zoom-container\" *ngIf=\"row|propertyGet: 'currentData'; let image\"\n               (ngInit)=\"last && initModalSlides(modalSlides)\">\n            <img [src]=\"image.url||image.dataUrl\">\n          </div>\n        </ion-slide>\n      </ion-slides>\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 *ngIf=\"!readOnly\"\n                        (click)=\"deleteFromModal($event, modalSlides)\"\n                        [disabled]=\"disabled\"\n                        fill=\"clear\" color=\"danger\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{'COMMON.BTN_DELETE'|translate}}\n            </ion-button>\n          </ion-col>\n          <ion-col size=\"4\">\n          </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\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col>\n\n          </ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{height:calc(100% - 23px);background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%}.image-card .card-thumbnail>img{min-height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale);max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: transparent !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-inline, 0px) * 2 - 3px);transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:black;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal ion-slides{height:100%;background:black}\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: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i1.IonSlide, selector: "ion-slide" }, { kind: "component", type: i1.IonSlides, selector: "ion-slides", inputs: ["mode", "options", "pager", "scrollbar"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover", inputs: ["alignment", "animated", "arrow", "keepContentsMounted", "backdropDismiss", "cssClass", "dismissOnSelect", "enterAnimation", "event", "isOpen", "keyboardClose", "leaveAnimation", "mode", "showBackdrop", "translucent", "trigger", "triggerAction", "reference", "size", "side"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: NgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AppImageGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AppImageGalleryComponent, selector: "app-image-gallery", inputs: { cardColor: "cardColor", debug: "debug", disabled: "disabled", readOnly: "readOnly", mobile: "mobile", mode: "mode", confirmBeforeDelete: "confirmBeforeDelete", showToolbar: "showToolbar", showFabButton: "showFabButton", showTitle: "showTitle", showAddCardButton: "showAddCardButton", addButtonColor: "addButtonColor", dataSource: "dataSource" }, outputs: { onBeforeDeleteRows: "onBeforeDeleteRows", onAfterAddRows: "onAfterAddRows" }, 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: "\n\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <!-- Add -->\n  <button mat-icon-button\n          *ngIf=\"!readOnly && !mobile && enabled\"\n          [title]=\"'COMMON.BTN_ADD'|translate\"\n          (click)=\"add()\">\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\"\n                 [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div class=\"gallery-container {{this.mode}}\">\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col *ngFor=\"let row of rows; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        <ion-card #card\n                  class=\"image-card\"\n                  [class.zoom-hover]=\"!mobile\"\n                  [color]=\"cardColor\"\n                  *ngVar=\"row|propertyGet: 'currentData'; let image\"\n                  (click)=\"clickRow(row, index)\"\n                  tappable\n                  @fadeInAnimation>\n          <figure class=\"card-thumbnail\">\n            <img [src]=\"image.url||image.dataUrl\"/>\n          </figure>\n\n          <!-- toolbar for title (when not hover) -->\n          <ion-toolbar color=\"transparent\" class=\"title\">\n            <ion-label class=\"card-title\">{{image.title}}</ion-label>\n          </ion-toolbar>\n\n          <!-- action toolbar (desktop only) shown when hover image -->\n          <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n\n            <!-- edit title button -->\n            <button mat-button *ngIf=\"showTitle\" slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"showCardToolbar(cardToolbar)\">\n              <mat-icon>edit</mat-icon>\n              <mat-label>\n                <span *ngIf=\"row.currentData.title|isNotNilOrBlank; else editLabel\" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n                <ng-template #editLabel>\n                  <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                </ng-template>\n              </mat-label>\n            </button>\n\n            <div class=\"flex-spacer\"></div>\n\n            <!-- delete button -->\n            <button mat-icon-button slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"'COMMON.BTN_DELETE'|translate\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </ion-toolbar>\n        </ion-card>\n      </ion-col>\n\n      <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n        <ion-card class=\"image-card-button\" color=\"light\"\n                  (click)=\"add($event)\"\n                  [disabled]=\"disabled\"\n                  tappable>\n          <ion-card-content>\n            <div class=\"icon-container\">\n              <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n              <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n            </div>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n</div>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" 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\"\n           [class.modal-fullscreen]=\"mobile\"\n           [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding ion-no-margin\" >\n      <!-- Counter  -->\n      <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n        <ion-label color=\"light\">\n          {{activeSlideIndex + 1}} / {{count}}\n        </ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n          <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n          <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n\n      <!-- navigation side buttons next/back -->\n      <ng-container *ngIf=\"!mobile && (rows|isArrayLength:{greaterThan: 1})\">\n        <div class=\"side-buttons prev\"\n             (click)=\"slidePrev(modalSwiper)\">\n          <ion-icon name=\"chevron-back\"></ion-icon>\n        </div>\n        <div class=\"side-buttons next\"\n             (click)=\"slideNext(modalSwiper)\">\n          <ion-icon name=\"chevron-forward\"></ion-icon>\n        </div>\n      </ng-container>\n\n      <!-- image slides -->\n      <swiper-container #modalSwiper [modules]=\"swiperModules\" [zoom]=\"true\">\n        <swiper-slide *ngFor=\"let row of rows; last as last\">\n          <div class=\"swiper-zoom-container\" *ngIf=\"row|propertyGet: 'currentData'; let image\"\n               (ngInit)=\"last && initModalSlides(modalSwiper)\">\n            <img [src]=\"image.url||image.dataUrl\">\n          </div>\n        </swiper-slide>\n      </swiper-container>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar color=\"light\">\n        <ion-row>\n          <ion-col size=\"4\" class=\"ion-text-start\">\n            <ion-button *ngIf=\"!readOnly\"\n                        (click)=\"deleteFromModal($event, modalSwiper)\"\n                        [disabled]=\"disabled\"\n                        fill=\"clear\" color=\"danger\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{'COMMON.BTN_DELETE'|translate}}\n            </ion-button>\n          </ion-col>\n          <ion-col size=\"4\">\n          </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\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col>\n\n          </ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{height:calc(100% - 23px);background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%}.image-card .card-thumbnail>img{min-height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale);max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: transparent !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-inline, 0px) * 2 - 3px);transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:black;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal ion-slides{height:100%;background:black}\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: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "translucent", "trigger"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover", inputs: ["alignment", "animated", "arrow", "keepContentsMounted", "backdropDismiss", "cssClass", "dismissOnSelect", "enterAnimation", "event", "isOpen", "keyboardClose", "leaveAnimation", "mode", "showBackdrop", "translucent", "trigger", "triggerAction", "reference", "size", "side"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: NgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AppImageGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <!-- Add -->\n  <button mat-icon-button\n          *ngIf=\"!readOnly && !mobile && enabled\"\n          [title]=\"'COMMON.BTN_ADD'|translate\"\n          (click)=\"add()\">\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\"\n                 [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div class=\"gallery-container {{this.mode}}\">\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col *ngFor=\"let row of rows; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        <ion-card #card\n                  class=\"image-card\"\n                  [class.zoom-hover]=\"!mobile\"\n                  [color]=\"cardColor\"\n                  *ngVar=\"row|propertyGet: 'currentData'; let image\"\n                  (click)=\"clickRow(row, index)\"\n                  tappable\n                  @fadeInAnimation>\n          <figure class=\"card-thumbnail\">\n            <img [src]=\"image.url||image.dataUrl\"/>\n          </figure>\n\n          <!-- toolbar for title (when not hover) -->\n          <ion-toolbar color=\"transparent\" class=\"title\">\n            <ion-label class=\"card-title\">{{image.title}}</ion-label>\n          </ion-toolbar>\n\n          <!-- action toolbar (desktop only) shown when hover image -->\n          <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n\n            <!-- edit title button -->\n            <button mat-button *ngIf=\"showTitle\" slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"showCardToolbar(cardToolbar)\">\n              <mat-icon>edit</mat-icon>\n              <mat-label>\n                <span *ngIf=\"row.currentData.title|isNotNilOrBlank; else editLabel\" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n                <ng-template #editLabel>\n                  <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                </ng-template>\n              </mat-label>\n            </button>\n\n            <div class=\"flex-spacer\"></div>\n\n            <!-- delete button -->\n            <button mat-icon-button slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"'COMMON.BTN_DELETE'|translate\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </ion-toolbar>\n        </ion-card>\n      </ion-col>\n\n      <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n        <ion-card class=\"image-card-button\" color=\"light\"\n                  (click)=\"add($event)\"\n                  [disabled]=\"disabled\"\n                  tappable>\n          <ion-card-content>\n            <div class=\"icon-container\">\n              <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n              <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n            </div>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n</div>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" 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\"\n           [class.modal-fullscreen]=\"mobile\"\n           [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding ion-no-margin\" >\n      <!-- Counter  -->\n      <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n        <ion-label color=\"light\">\n          {{activeSlideIndex + 1}} / {{count}}\n        </ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSlides, true)\" color=\"light\">\n          <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSlides, false)\" color=\"light\">\n          <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n\n      <!-- navigation side buttons next/back -->\n      <ng-container *ngIf=\"!mobile && (rows|isArrayLength:{greaterThan: 1})\">\n        <div class=\"side-buttons prev\"\n             (click)=\"slidePrev(modalSlides)\">\n          <ion-icon name=\"chevron-back\"></ion-icon>\n        </div>\n        <div class=\"side-buttons next\"\n             (click)=\"slideNext(modalSlides)\">\n          <ion-icon name=\"chevron-forward\"></ion-icon>\n        </div>\n      </ng-container>\n\n      <!-- image slides -->\n      <ion-slides #modalSlides [options]=\"modalSliderOpts\" >\n        <ion-slide *ngFor=\"let row of rows; last as last\">\n          <div class=\"swiper-zoom-container\" *ngIf=\"row|propertyGet: 'currentData'; let image\"\n               (ngInit)=\"last && initModalSlides(modalSlides)\">\n            <img [src]=\"image.url||image.dataUrl\">\n          </div>\n        </ion-slide>\n      </ion-slides>\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 *ngIf=\"!readOnly\"\n                        (click)=\"deleteFromModal($event, modalSlides)\"\n                        [disabled]=\"disabled\"\n                        fill=\"clear\" color=\"danger\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{'COMMON.BTN_DELETE'|translate}}\n            </ion-button>\n          </ion-col>\n          <ion-col size=\"4\">\n          </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\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col>\n\n          </ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{height:calc(100% - 23px);background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%}.image-card .card-thumbnail>img{min-height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale);max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: transparent !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-inline, 0px) * 2 - 3px);transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:black;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal ion-slides{height:100%;background:black}\n"] }]
+            args: [{ selector: 'app-image-gallery', animations: [fadeInAnimation, fadeInOutAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<ion-toolbar color=\"light\" *ngIf=\"showToolbar\">\n  <!-- Add -->\n  <button mat-icon-button\n          *ngIf=\"!readOnly && !mobile && enabled\"\n          [title]=\"'COMMON.BTN_ADD'|translate\"\n          (click)=\"add()\">\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <ion-buttons slot=\"end\">\n    <!-- Toggle view mode -->\n    <ion-segment (ionChange)=\"toggleViewMode($event)\" color=\"accent\"\n                 [value]=\"_colSize\">\n      <ion-segment-button [value]=\"4\">\n        <mat-icon>view_module</mat-icon>\n      </ion-segment-button>\n      <ion-segment-button [value]=\"12\">\n        <mat-icon>view_list</mat-icon>\n      </ion-segment-button>\n    </ion-segment>\n  </ion-buttons>\n</ion-toolbar>\n\n<div class=\"gallery-container {{this.mode}}\">\n  <div *ngIf=\"mobile && zoomActive\" class=\"backdrop\" [style.opacity]=\"zoomScale\"></div>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row>\n      <ion-col *ngFor=\"let row of rows; index as index; trackBy: trackByFn\" [size]=\"_colSize\">\n        <ion-card #card\n                  class=\"image-card\"\n                  [class.zoom-hover]=\"!mobile\"\n                  [color]=\"cardColor\"\n                  *ngVar=\"row|propertyGet: 'currentData'; let image\"\n                  (click)=\"clickRow(row, index)\"\n                  tappable\n                  @fadeInAnimation>\n          <figure class=\"card-thumbnail\">\n            <img [src]=\"image.url||image.dataUrl\"/>\n          </figure>\n\n          <!-- toolbar for title (when not hover) -->\n          <ion-toolbar color=\"transparent\" class=\"title\">\n            <ion-label class=\"card-title\">{{image.title}}</ion-label>\n          </ion-toolbar>\n\n          <!-- action toolbar (desktop only) shown when hover image -->\n          <ion-toolbar #cardToolbar *ngIf=\"!mobile && !readOnly\" color=\"light\" class=\"buttons\">\n\n            <!-- edit title button -->\n            <button mat-button *ngIf=\"showTitle\" slot=\"start\"\n                    [disabled]=\"disabled\"\n                    (click)=\"editTitle($event, row, cardToolbar)\"\n                    (focusin)=\"showCardToolbar(cardToolbar)\">\n              <mat-icon>edit</mat-icon>\n              <mat-label>\n                <span *ngIf=\"row.currentData.title|isNotNilOrBlank; else editLabel\" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>\n                <ng-template #editLabel>\n                  <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>\n                </ng-template>\n              </mat-label>\n            </button>\n\n            <div class=\"flex-spacer\"></div>\n\n            <!-- delete button -->\n            <button mat-icon-button slot=\"end\"\n                    class=\"ion-float-end\"\n                    [title]=\"'COMMON.BTN_DELETE'|translate\"\n                    [disabled]=\"disabled\"\n                    (click)=\"delete($event, row)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </ion-toolbar>\n        </ion-card>\n      </ion-col>\n\n      <ion-col *ngIf=\"showAddCardButton && !readOnly\" [size]=\"_colSize\" @fadeInAnimation>\n        <ion-card class=\"image-card-button\" color=\"light\"\n                  (click)=\"add($event)\"\n                  [disabled]=\"disabled\"\n                  tappable>\n          <ion-card-content>\n            <div class=\"icon-container\">\n              <ion-icon name=\"camera\" [color]=\"addButtonColor\"></ion-icon>\n              <ion-icon name=\"add\" [color]=\"addButtonColor\" class=\"icon-secondary\"></ion-icon>\n            </div>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n</div>\n\n<!-- FAB button: add -->\n<ion-fab slot=\"fixed\" vertical=\"bottom\" 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\"\n           [class.modal-fullscreen]=\"mobile\"\n           [class.modal-large]=\"!mobile\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding ion-no-margin\" >\n      <!-- Counter  -->\n      <div class=\"top-left\" *ngVar=\"rows?.length as count\">\n        <ion-label color=\"light\">\n          {{activeSlideIndex + 1}} / {{count}}\n        </ion-label>\n      </div>\n\n      <!-- zoom button -->\n      <div class=\"top-right\">\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, true)\" color=\"light\">\n          <ion-icon slot=\"icon-only\" name=\"add\"></ion-icon>\n        </ion-button>\n        <ion-button *ngIf=\"!mobile\" (click)=\"zoom(modalSwiper, false)\" color=\"light\">\n          <ion-icon name=\"remove\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n\n      <!-- navigation side buttons next/back -->\n      <ng-container *ngIf=\"!mobile && (rows|isArrayLength:{greaterThan: 1})\">\n        <div class=\"side-buttons prev\"\n             (click)=\"slidePrev(modalSwiper)\">\n          <ion-icon name=\"chevron-back\"></ion-icon>\n        </div>\n        <div class=\"side-buttons next\"\n             (click)=\"slideNext(modalSwiper)\">\n          <ion-icon name=\"chevron-forward\"></ion-icon>\n        </div>\n      </ng-container>\n\n      <!-- image slides -->\n      <swiper-container #modalSwiper [modules]=\"swiperModules\" [zoom]=\"true\">\n        <swiper-slide *ngFor=\"let row of rows; last as last\">\n          <div class=\"swiper-zoom-container\" *ngIf=\"row|propertyGet: 'currentData'; let image\"\n               (ngInit)=\"last && initModalSlides(modalSwiper)\">\n            <img [src]=\"image.url||image.dataUrl\">\n          </div>\n        </swiper-slide>\n      </swiper-container>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar color=\"light\">\n        <ion-row>\n          <ion-col size=\"4\" class=\"ion-text-start\">\n            <ion-button *ngIf=\"!readOnly\"\n                        (click)=\"deleteFromModal($event, modalSwiper)\"\n                        [disabled]=\"disabled\"\n                        fill=\"clear\" color=\"danger\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              {{'COMMON.BTN_DELETE'|translate}}\n            </ion-button>\n          </ion-col>\n          <ion-col size=\"4\">\n          </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\n        </mat-form-field>\n      </form>\n    </ion-content>\n\n\n    <ion-footer>\n      <ion-toolbar>\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col>\n\n          </ion-col>\n\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"titlePopover.dismiss(null, 'CANCEL')\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button\n              [fill]=\"disabled ? 'clear' : 'solid'\"\n              (click)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              (keyup.enter)=\"titlePopover.dismiss(_titleForm.controls.title.value)\"\n              color=\"tertiary\"\n              [disabled]=\"disabled\"\n              [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate\">\n              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-popover>\n", styles: [":host{--image-margin-inline: 10px}mat-toolbar,.mat-toolbar-single-row{padding:0;height:42px}ion-card{margin-left:unset;margin-right:unset;margin-inline:var(--image-margin-inline, 10px)}.image-slide{overflow:visible}.image-card{height:calc(100% - 23px);background-color:var(--ion-color-base);z-index:9;--img-scale: 1}.image-card .card-thumbnail{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100%;height:100%}.image-card .card-thumbnail>img{min-height:100%;transition:scale .2s ease-in-out;scale:var(--img-scale);max-height:var(--img-max-height)}.image-card.zoom-hover:hover{--img-scale: 1.2}.image-card ion-toolbar{--top-offset: calc(-1 * var(--ion-toolbar-height));position:absolute}.image-card ion-toolbar.title{--padding-start: 16px;--padding-end: 16px;--ion-color-base: transparent !important;position:absolute;top:calc(100% + var(--top-offset));transition:opacity .2s ease-in-out}.image-card ion-toolbar.title ion-label{color:#fff}.image-card ion-toolbar.buttons{--padding-start: 4px;--padding-end: 4px;--ion-color-base: var(--ion-color-light) !important;position:absolute;top:100%;transition:transform .2s ease-in-out}.image-card:hover ion-toolbar.buttons,.image-card ion-toolbar.buttons.focused{transform:translateY(var(--top-offset))}.image-card-button{height:calc(100% - var(--image-margin-inline, 0px) * 2 - 3px);transition:.2s ease-in-out;max-width:250px}.image-card-button ion-card-content{height:100%}.image-card-button .icon-container{height:auto;position:relative;top:calc(50% - 75px);display:flex;align-items:center;justify-content:center}.image-card-button ion-icon:first-of-type{font-size:150px;height:150px;position:relative;top:0}.image-card-button ion-icon.icon-secondary{font-size:50px;position:absolute;top:0;left:max(min(50% + 25px,100% - 50px),0px)}.image-card-button ion-button{float:right}.image-card-button:hover{--ion-color-base: var(--ion-color-shade) !important}.image-card-button:hover ion-icon{--ion-color-base: var(--ion-color-shade) !important}.backdrop{height:100vh;width:100vw;background:black;position:absolute;z-index:10}.zoom-modal{-webkit-user-select:none;user-select:none}.zoom-modal .top-left{z-index:14;position:absolute;display:inline-grid;left:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .top-right{z-index:14;position:absolute;display:inline-grid;right:var(--ion-padding-start, 8px);top:var(--ion-padding-start, 8px)}.zoom-modal .side-buttons{--side-buttons-width: 120px;--side-buttons-margin: calc(var(--side-buttons-width) / 3);z-index:13;position:absolute;top:0;bottom:0;width:var(--side-buttons-width)}.zoom-modal .side-buttons ion-icon{top:50%;color:#fff;font-size:2.5rem;position:absolute;opacity:0;transition-duration:.15s;transition-timing-function:ease-in}.zoom-modal .side-buttons:hover{cursor:pointer}.zoom-modal .side-buttons:hover ion-icon{opacity:1}.zoom-modal .side-buttons.prev{left:0}.zoom-modal .side-buttons.prev ion-icon{left:var(--side-buttons-margin)}.zoom-modal .side-buttons.next{right:0}.zoom-modal .side-buttons.next ion-icon{right:var(--side-buttons-margin)}.zoom-modal ion-slides{height:100%;background:black}\n"] }]
         }], ctorParameters: function () { return [{ type: ImageService }, { type: i1.Platform }, { type: i1.AlertController }, { type: i1.PopoverController }, { type: i1$2.TranslateService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Optional
                 }, {
@@ -20630,6 +20668,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], titlePopover: [{
                 type: ViewChild,
                 args: ['titlePopover']
+            }], swiperRef: [{
+                type: ViewChild,
+                args: ['modalSwiper']
             }], onBeforeDeleteRows: [{
                 type: Output
             }], onAfterAddRows: [{
@@ -20661,6 +20702,7 @@ ImageGalleryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImageGalleryModule, decorators: [{
             type: NgModule,
             args: [{
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     imports: [
                         CommonModule,
                         IonicModule,
@@ -20965,7 +21007,7 @@ class StorageExplorerComponent {
     }
 }
 StorageExplorerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: StorageExplorerComponent, deps: [{ token: i1.Platform }, { token: i1.ToastController }, { token: i1.AlertController }, { token: i1$2.TranslateService }, { token: i1$1.MomentDateAdapter }, { token: i0.ChangeDetectorRef }, { token: APP_STORAGE }, { token: ENVIRONMENT }, { token: APP_DEBUG_DATA_SERVICE, optional: true }, { token: APP_STORAGE_EXPLORER_PROTECTED_KEYS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-StorageExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: StorageExplorerComponent, selector: "app-storage-explorer", inputs: { mobile: "mobile", showSendButton: "showSendButton" }, viewQueries: [{ propertyName: "sendDataModal", first: true, predicate: ["sendDataModal"], descendants: true }, { propertyName: "viewDataModal", first: true, predicate: ["viewDataModal"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\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-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { 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: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StorageExplorerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: StorageExplorerComponent, selector: "app-storage-explorer", inputs: { mobile: "mobile", showSendButton: "showSendButton" }, viewQueries: [{ propertyName: "sendDataModal", first: true, predicate: ["sendDataModal"], descendants: true }, { propertyName: "viewDataModal", first: true, predicate: ["viewDataModal"], descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\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-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "translucent", "trigger"] }, { 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: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$2.RxFor, selector: "[rxFor][rxForOf]", inputs: ["rxForOf", "rxForTemplate", "rxForStrategy", "rxForParent", "rxForPatchZone", "rxForTrackBy", "rxForRenderCallback"] }, { 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: StorageExplorerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-storage-explorer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-title>Storage Explorer</ion-title>\n\n    <ion-buttons slot=\"end\">\n      <!-- Refresh -->\n      <button mat-icon-button\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-no-padding\">\n\n\n  <ion-grid class=\"ion-padding list-istorage\">\n    <ion-row>\n      <ion-col size=\"12\" size-lg=\"6\" class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.LABEL</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\">\n        <ion-label translate>REFERENTIAL.TYPE</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell ion-text-start\">\n        <ion-label>Nb</ion-label>\n      </ion-col>\n      <ion-col class=\"mat-header-cell\" size=\"auto\" >\n      </ion-col>\n    </ion-row>\n\n\n    <ion-row class=\"mat-row\" *rxFor=\"let item of $items; trackBy: trackByFn; odd as odd;\"\n             [class.odd]=\"odd\" >\n      <ion-col size=\"12\" size-lg=\"6\">\n        <ion-label class=\"ion-text-wrap mat-cell\"><b>{{ item.key }}</b></ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.type }}</ion-label>\n      </ion-col>\n      <ion-col class=\" mat-cell\">\n        <ion-label>{{ item.total }}</ion-label>\n      </ion-col>\n      <ion-col size=\"auto mat-cell\">\n        <ion-buttons>\n\n          <ion-button color=\"primary\" (click)=\"viewDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_PREVIEW'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_PREVIEW'|translate\">remove_red_eye</mat-icon>\n          </ion-button>\n          <ion-button *ngIf=\"showSendButton\"\n                      color=\"primary\"\n                      (click)=\"sendDataClick($event, item.key)\"\n                      [title]=\"'COMMON.BTN_SEND'|translate\">\n            <mat-icon slot=\"icon-only\" [attr.aria-label]=\"'COMMON.BTN_SEND'|translate\">send</mat-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n  <ng-container *ngIf=\"$loading|async; else noResult\">\n    <ion-item>\n      <ion-skeleton-text animated></ion-skeleton-text>\n    </ion-item>\n  </ng-container>\n\n  <ng-template #noResult>\n    <ion-item *ngIf=\"$items|async|isEmptyArray\">\n      <ion-text color=\"danger\"\n                class=\"text-italic\"\n                [innerHTML]=\"'COMMON.NO_RESULT' | translate\">\n      </ion-text>\n    </ion-item>\n  </ng-template>\n\n</ion-content>\n\n\n<ion-modal #sendDataModal>\n  <ng-template>\n    <ion-content class=\"ion-padding\">\n      <ion-item lines=\"none\" translate>CONFIRM.SEND_DEBUG_DATA</ion-item>\n    </ion-content>\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"sendDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" (click)=\"sendDataModal.dismiss(null, 'send')\" color=\"tertiary\">\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-modal>\n\n<ion-modal #viewDataModal class=\"modal-large view-modal\">\n  <ng-template>\n    <ion-content class=\"ion-no-padding\" scroll-y=\"true\">\n      <!-- display logs-->\n      <ng-container *ngIf=\"logs; else otherKey\">\n        <ion-grid>\n          <ion-row *ngFor=\"let log of logs\"\n                   [style.color]=\"levelToColor(log.level)\">\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.date|dateFormat: {time: true} }}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{levelToString(log.level)}}\n            </ion-col>\n            <ion-col size=\"2\" class=\"ion-text-start\">\n              {{log.loggerName}}\n            </ion-col>\n            <ion-col size=\"12\" size-lg=\"6\" class=\"ion-text-wrap\">\n              {{ log.message }}\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </ng-container>\n      <ng-template #otherKey>\n        <div class=\"ion-padding\">\n          <pre>{{data}}</pre>\n        </div>\n      </ng-template>\n    </ion-content>\n\n    <ion-footer>\n      <ion-toolbar>\n\n        <ion-row class=\"ion-no-padding\" nowrap>\n          <ion-col></ion-col>\n\n          <!-- buttons -->\n          <ion-col size=\"auto\">\n\n            <ion-button fill=\"clear\" color=\"danger\"\n                        (click)=\"clear(key)\">\n              <mat-icon slot=\"start\">delete</mat-icon>\n              <ion-label translate>COMMON.BTN_CLEAR</ion-label>\n            </ion-button>\n            <ion-button fill=\"clear\"\n                        (click)=\"copyToClipboard(key)\">\n              <mat-icon slot=\"start\">content_copy</mat-icon>\n              <ion-label translate>COMMON.BTN_COPY</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"clear\"\n                        *ngIf=\"!mobile\"\n                        (click)=\"downloadAsJson(key)\">\n              <mat-icon slot=\"start\">download</mat-icon>\n              <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n            </ion-button>\n\n            <ion-button fill=\"solid\" color=\"tertiary\" (click)=\"viewDataModal.dismiss()\">\n              <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-toolbar>\n    </ion-footer>\n  </ng-template>\n</ion-modal>\n", styles: ["ion-grid.list-istorage{--ion-grid-column-padding: 5px}ion-grid.list-istorage ion-row{align-items:center}ion-grid.list-istorage ion-row.mat-header-row{height:40px}ion-grid.list-istorage ion-row.mat-header-row ion-col{vertical-align:center}ion-grid.list-istorage ion-row.computed ion-col ion-label,ion-grid.list-istorage ion-row ion-label.computed{color:var(--ion-color-primary-tint)!important;font-style:italic!important}ion-grid.list-istorage ion-row.odd{background-color:var(--ion-color-light)}ion-grid.list-istorage ion-row ion-col{padding:var(--ion-grid-column-padding)}ion-grid.list-istorage ion-row ion-col ion-label{vertical-align:center}.view-modal pre{overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}\n"] }]
@@ -25068,7 +25110,7 @@ class TableSelectColumnsComponent {
     }
 }
 TableSelectColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableSelectColumnsComponent, deps: [{ token: i1.NavParams }, { token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-TableSelectColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableSelectColumnsComponent, selector: "table-select-columns", inputs: { columns: "columns", canHideColumns: "canHideColumns" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"cancel()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{'COMMON.DISPLAYED_COLUMNS'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n\n<ion-content>\n  <ion-list>\n    <!-- See doc: https://beta.ionicframework.com/docs/api/reorder/ -->\n\n    <ion-reorder-group disabled=\"false\" (ionItemReorder)=\"onRenderItems($event)\">\n      <ion-item *ngFor=\"let column of columns\">\n        <ion-label>{{column.label|translate}}</ion-label>\n        <ion-toggle slot=\"end\"\n                    *ngIf=\"column.canHide\"\n                    [checked]=\"column.visible\" (ionChange)=\"column.visible=!column.visible\"></ion-toggle>\n        <ion-reorder slot=\"end\"></ion-reorder>\n      </ion-item>\n    </ion-reorder-group>\n  </ion-list>\n</ion-content>\n\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button fill=\"solid\" (click)=\"close()\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_APPLY</ion-label>\n        </ion-button>\n\n      </ion-col>\n    </ion-row>\n\n  </ion-toolbar>\n</ion-footer>\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: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonReorder, selector: "ion-reorder" }, { kind: "component", type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "mode", "name", "value"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+TableSelectColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableSelectColumnsComponent, selector: "table-select-columns", inputs: { columns: "columns", canHideColumns: "canHideColumns" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"cancel()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{'COMMON.DISPLAYED_COLUMNS'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n\n<ion-content>\n  <ion-list>\n    <!-- See doc: https://beta.ionicframework.com/docs/api/reorder/ -->\n\n    <ion-reorder-group disabled=\"false\" (ionItemReorder)=\"onRenderItems($event)\">\n      <ion-item *ngFor=\"let column of columns\">\n        <ion-label>{{column.label|translate}}</ion-label>\n        <ion-toggle slot=\"end\"\n                    *ngIf=\"column.canHide\"\n                    [checked]=\"column.visible\" (ionChange)=\"column.visible=!column.visible\"></ion-toggle>\n        <ion-reorder slot=\"end\"></ion-reorder>\n      </ion-item>\n    </ion-reorder-group>\n  </ion-list>\n</ion-content>\n\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button fill=\"solid\" (click)=\"close()\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_APPLY</ion-label>\n        </ion-button>\n\n      </ion-col>\n    </ion-row>\n\n  </ion-toolbar>\n</ion-footer>\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: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonReorder, selector: "ion-reorder" }, { kind: "component", type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableSelectColumnsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-select-columns', template: "<ion-header>\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"cancel()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n\n    <ion-title>\n      {{'COMMON.DISPLAYED_COLUMNS'|translate}}\n    </ion-title>\n\n    <ion-buttons slot=\"end\">\n      <ion-button (click)=\"close()\"\n                  visible-xs visible-sm visible-mobile>\n        <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n\n<ion-content>\n  <ion-list>\n    <!-- See doc: https://beta.ionicframework.com/docs/api/reorder/ -->\n\n    <ion-reorder-group disabled=\"false\" (ionItemReorder)=\"onRenderItems($event)\">\n      <ion-item *ngFor=\"let column of columns\">\n        <ion-label>{{column.label|translate}}</ion-label>\n        <ion-toggle slot=\"end\"\n                    *ngIf=\"column.canHide\"\n                    [checked]=\"column.visible\" (ionChange)=\"column.visible=!column.visible\"></ion-toggle>\n        <ion-reorder slot=\"end\"></ion-reorder>\n      </ion-item>\n    </ion-reorder-group>\n  </ion-list>\n</ion-content>\n\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <ion-toolbar>\n    <ion-row>\n      <ion-col></ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button fill=\"solid\" (click)=\"close()\" color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_APPLY</ion-label>\n        </ion-button>\n\n      </ion-col>\n    </ion-row>\n\n  </ion-toolbar>\n</ion-footer>\n" }]
@@ -34226,7 +34268,7 @@ class AutocompleteTestPage {
     }
 }
 AutocompleteTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Entity far in the list (not in first page)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: normal !important;\">value: {{stringify(form.controls.farEntity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"farEntity\" #farEntityField\n                                      [config]=\"autocompleteFields.get('entity-far')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-far]'\"\n                                      [debug]=\"true\"\n                                      [required]=\"true\"\n                                      [clearable]=\"true\"\n                                      placeholder=\"Far entity (in the list)\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [suggestLengthThreshold]=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      [required]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      [mobile]=\"true\"\n                                      [multiple]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  In modal\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n              <ion-modal>\n                <ng-template>\n                  <ion-header>\n                    <ion-toolbar>\n                      <ion-title>\n                        Modal with embed auto complete field\n                      </ion-title>\n                      <ion-buttons slot=\"end\">\n                        <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                      </ion-buttons>\n                    </ion-toolbar>\n                  </ion-header>\n                  <ion-content class=\"ion-padding\">\n                    <div class=\"form-container\">\n                      <ion-card>\n                      <ion-card-content>\n                        <mat-autocomplete-field formControlName=\"entity\"\n                                                floatLabel=\"never\"\n                                                [tabindex]=\"10000\"\n                                                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                                [mobile]=\"true\"\n                                                [equals]=\"equals\"\n                                                [logPrefix]=\"'[combo-mobile-modal]'\"\n                                                [required]=\"true\"\n                                                placeholder=\"Suggest field\"\n                        ></mat-autocomplete-field>\n                      </ion-card-content>\n                      </ion-card>\n\n                      <ion-card>\n                        <ion-card-content>\n                          <mat-autocomplete-field formControlName=\"entity\"\n                                                  floatLabel=\"never\"\n                                                  [tabindex]=\"10000\"\n                                                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                                  [mobile]=\"true\"\n                                                  [equals]=\"equals\"\n                                                  [suggestLengthThreshold]=\"3\"\n                                                  [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                                                  [required]=\"true\"\n                                                  placeholder=\"Suggest field\"\n                          ></mat-autocomplete-field>\n                        </ion-card-content>\n                      </ion-card>\n                    </div>\n                  </ion-content>\n                </ng-template>\n              </ion-modal>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n                                      [debug]=\"true\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [suggestLengthThreshold]=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      [mobile]=\"false\"\n                                      [multiple]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { 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: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i15.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "directive", type: i15.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }] });
+AutocompleteTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Entity far in the list (not in first page)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: normal !important;\">value: {{stringify(form.controls.farEntity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"farEntity\" #farEntityField\n                                      [config]=\"autocompleteFields.get('entity-far')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-far]'\"\n                                      [debug]=\"true\"\n                                      [required]=\"true\"\n                                      [clearable]=\"true\"\n                                      placeholder=\"Far entity (in the list)\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [suggestLengthThreshold]=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      [required]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      [mobile]=\"true\"\n                                      [multiple]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  In modal\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n              <ion-modal>\n                <ng-template>\n                  <ion-header>\n                    <ion-toolbar>\n                      <ion-title>\n                        Modal with embed auto complete field\n                      </ion-title>\n                      <ion-buttons slot=\"end\">\n                        <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                      </ion-buttons>\n                    </ion-toolbar>\n                  </ion-header>\n                  <ion-content class=\"ion-padding\">\n                    <div class=\"form-container\">\n                      <ion-card>\n                      <ion-card-content>\n                        <mat-autocomplete-field formControlName=\"entity\"\n                                                floatLabel=\"never\"\n                                                [tabindex]=\"10000\"\n                                                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                                [mobile]=\"true\"\n                                                [equals]=\"equals\"\n                                                [logPrefix]=\"'[combo-mobile-modal]'\"\n                                                [required]=\"true\"\n                                                placeholder=\"Suggest field\"\n                        ></mat-autocomplete-field>\n                      </ion-card-content>\n                      </ion-card>\n\n                      <ion-card>\n                        <ion-card-content>\n                          <mat-autocomplete-field formControlName=\"entity\"\n                                                  floatLabel=\"never\"\n                                                  [tabindex]=\"10000\"\n                                                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                                  [mobile]=\"true\"\n                                                  [equals]=\"equals\"\n                                                  [suggestLengthThreshold]=\"3\"\n                                                  [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                                                  [required]=\"true\"\n                                                  placeholder=\"Suggest field\"\n                          ></mat-autocomplete-field>\n                        </ion-card-content>\n                      </ion-card>\n                    </div>\n                  </ion-content>\n                </ng-template>\n              </ion-modal>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n                                      [debug]=\"true\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [suggestLengthThreshold]=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      [mobile]=\"false\"\n                                      [multiple]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "translucent", "trigger"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { 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: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i15.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "directive", type: i15.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AutocompleteTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-autocomplete-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Entity far in the list (not in first page)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: normal !important;\">value: {{stringify(form.controls.farEntity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"farEntity\" #farEntityField\n                                      [config]=\"autocompleteFields.get('entity-far')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-far]'\"\n                                      [debug]=\"true\"\n                                      [required]=\"true\"\n                                      [clearable]=\"true\"\n                                      placeholder=\"Far entity (in the list)\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [suggestLengthThreshold]=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      [required]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      [mobile]=\"true\"\n                                      [multiple]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  In modal\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n              <ion-modal>\n                <ng-template>\n                  <ion-header>\n                    <ion-toolbar>\n                      <ion-title>\n                        Modal with embed auto complete field\n                      </ion-title>\n                      <ion-buttons slot=\"end\">\n                        <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n                      </ion-buttons>\n                    </ion-toolbar>\n                  </ion-header>\n                  <ion-content class=\"ion-padding\">\n                    <div class=\"form-container\">\n                      <ion-card>\n                      <ion-card-content>\n                        <mat-autocomplete-field formControlName=\"entity\"\n                                                floatLabel=\"never\"\n                                                [tabindex]=\"10000\"\n                                                [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                                [mobile]=\"true\"\n                                                [equals]=\"equals\"\n                                                [logPrefix]=\"'[combo-mobile-modal]'\"\n                                                [required]=\"true\"\n                                                placeholder=\"Suggest field\"\n                        ></mat-autocomplete-field>\n                      </ion-card-content>\n                      </ion-card>\n\n                      <ion-card>\n                        <ion-card-content>\n                          <mat-autocomplete-field formControlName=\"entity\"\n                                                  floatLabel=\"never\"\n                                                  [tabindex]=\"10000\"\n                                                  [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                                  [mobile]=\"true\"\n                                                  [equals]=\"equals\"\n                                                  [suggestLengthThreshold]=\"3\"\n                                                  [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n                                                  [required]=\"true\"\n                                                  placeholder=\"Suggest field\"\n                          ></mat-autocomplete-field>\n                        </ion-card-content>\n                      </ion-card>\n                    </div>\n                  </ion-content>\n                </ng-template>\n              </ion-modal>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n                                      [debug]=\"true\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [suggestLengthThreshold]=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      [mobile]=\"false\"\n                                      [multiple]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n" }]
@@ -34601,20 +34643,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; } });
 
 class MatBadgeTestPage {
-    constructor() {
+    constructor(cd) {
+        this.cd = cd;
+        this.userText = 'A custom string';
+        this.matBadgeContent = '!';
         this.$icon = new BehaviorSubject('alert');
         this.$size = new BehaviorSubject('small');
         this.$fill = new BehaviorSubject('solid');
         this.$color = new BehaviorSubject('danger');
         this.$hidden = new BehaviorSubject(false);
+        this.$overlap = new BehaviorSubject(false);
+    }
+    onInputChanged(event) {
+        this.userText = event.target.value;
+        this.cd.markForCheck();
+    }
+    onMatBadgeContentChanged(event) {
+        this.matBadgeContent = event.target.value;
+        this.cd.markForCheck();
     }
 }
-MatBadgeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatBadgeTestPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge\n            appBadgeMatIcon=\"check\"\n            appBadgeSize=\"small\"\n            appBadgeColor=\"accent\"\n            appBadgeOverlap=\"false\">Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text appBadge appBadgeMatIcon=\"check\"\n              appBadgeSize=\"medium\"\n              [appBadgeColor]=\"'tertiary'|matColor\"\n              appBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n          appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n            appBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark\"\n               [appBadgeColor]=\"'success'|matColor\"\n               appBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark-circle\"\n               [appBadgeColor]=\"'tertiary'|matColor\"\n               appBadgeFill=\"clear\"\n               appBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n  <ion-row class=\"ion-no-padding\">\n    <ion-col>\n      <p>Example:\n        <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                  appBadge\n                  [appBadgeIcon]=\"$icon|async\"\n                  [appBadgeColor]=\"$color|async|matColor\"\n                  [appBadgeHidden]=\"$hidden|async\"\n                  [appBadgeFill]=\"$fill|async\"\n                  [appBadgeSize]=\"$size|async\"\n                  appBadgeOverlap=\"false\">\n          <ion-icon slot=\"icon-only\"\n                    [color]=\"'secondary'\"\n                    name=\"navigate\"\n          ></ion-icon>\n        </mat-icon>\n      </p>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeColor\"\n                    [value]=\"$color.value\"\n                    (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"ionBadgeIcon\"\n                    [value]=\"$icon.value\"\n                    (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeSize\"\n                    [value]=\"$size.value\"\n                    (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"matBadgeFill\"\n                    [value]=\"$fill.value\"\n                    (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeHidden\"\n                    [value]=\"$hidden.value\"\n                    (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>\n      <p>Example, using a matBadge :\n        <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                  [matBadge]=\"'!'\"\n                  [matBadgeColor]=\"$color|async|matColor\"\n                  [matBadgeHidden]=\"$hidden|async\"\n                  [matBadgeSize]=\"$size|async\"\n                  [matBadgeOverlap]=\"false\">\n          <ion-icon slot=\"icon-only\"\n                    [color]=\"'secondary'\"\n                    name=\"navigate\"\n          ></ion-icon>\n        </mat-icon>\n      </p>\n    </ion-col>\n  </ion-row>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["matBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeOverlap", "appBadgeHidden", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }] });
+MatBadgeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MatBadgeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge\n            appBadgeMatIcon=\"check\"\n            appBadgeSize=\"small\"\n            appBadgeColor=\"accent\"\n            appBadgeOverlap=\"false\">Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text appBadge appBadgeMatIcon=\"check\"\n              appBadgeSize=\"medium\"\n              [appBadgeColor]=\"'tertiary'|matColor\"\n              appBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n          appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n            appBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark\"\n               [appBadgeColor]=\"'success'|matColor\"\n               appBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark-circle\"\n               [appBadgeColor]=\"'tertiary'|matColor\"\n               appBadgeFill=\"clear\"\n               appBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label appBadge\n                        appBadgeIcon=\"checkmark-circle\"\n                        [appBadgeColor]=\"'tertiary'|matColor\"\n                        appBadgeFill=\"clear\"\n                        appBadgeOverlap=\"false\">{{userText}}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                appBadge\n                [appBadgeIcon]=\"$icon|async\"\n                [appBadgeColor]=\"$color|async|matColor\"\n                [appBadgeHidden]=\"$hidden|async\"\n                [appBadgeFill]=\"$fill|async\"\n                [appBadgeSize]=\"$size|async\"\n                appBadgeOverlap=\"true\"\n                appBadgePosition=\"above before\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeColor\"\n                    [value]=\"$color.value\"\n                    (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeIcon\"\n                    [value]=\"$icon.value\"\n                    (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeSize\"\n                    [value]=\"$size.value\"\n                    (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeFill\"\n                    [value]=\"$fill.value\"\n                    (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeHidden\"\n                    [value]=\"$hidden.value\"\n                    (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              appBadgeOverlap=\"true\"\n              appBadgePosition=\"below after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              class=\"ion-no-padding\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                [matBadge]=\"'!'\"\n                [matBadgeColor]=\"$color|async|matColor\"\n                [matBadgeHidden]=\"$hidden|async\"\n                [matBadgeSize]=\"$size|async\"\n                matBadgeOverlap=\"true\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"after\">\n            {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["matBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MatBadgeTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-badge-test', template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge\n            appBadgeMatIcon=\"check\"\n            appBadgeSize=\"small\"\n            appBadgeColor=\"accent\"\n            appBadgeOverlap=\"false\">Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text appBadge appBadgeMatIcon=\"check\"\n              appBadgeSize=\"medium\"\n              [appBadgeColor]=\"'tertiary'|matColor\"\n              appBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n          appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n            appBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark\"\n               [appBadgeColor]=\"'success'|matColor\"\n               appBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark-circle\"\n               [appBadgeColor]=\"'tertiary'|matColor\"\n               appBadgeFill=\"clear\"\n               appBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n  <ion-row class=\"ion-no-padding\">\n    <ion-col>\n      <p>Example:\n        <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                  appBadge\n                  [appBadgeIcon]=\"$icon|async\"\n                  [appBadgeColor]=\"$color|async|matColor\"\n                  [appBadgeHidden]=\"$hidden|async\"\n                  [appBadgeFill]=\"$fill|async\"\n                  [appBadgeSize]=\"$size|async\"\n                  appBadgeOverlap=\"false\">\n          <ion-icon slot=\"icon-only\"\n                    [color]=\"'secondary'\"\n                    name=\"navigate\"\n          ></ion-icon>\n        </mat-icon>\n      </p>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeColor\"\n                    [value]=\"$color.value\"\n                    (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"ionBadgeIcon\"\n                    [value]=\"$icon.value\"\n                    (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeSize\"\n                    [value]=\"$size.value\"\n                    (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"matBadgeFill\"\n                    [value]=\"$fill.value\"\n                    (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeHidden\"\n                    [value]=\"$hidden.value\"\n                    (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>\n      <p>Example, using a matBadge :\n        <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                  [matBadge]=\"'!'\"\n                  [matBadgeColor]=\"$color|async|matColor\"\n                  [matBadgeHidden]=\"$hidden|async\"\n                  [matBadgeSize]=\"$size|async\"\n                  [matBadgeOverlap]=\"false\">\n          <ion-icon slot=\"icon-only\"\n                    [color]=\"'secondary'\"\n                    name=\"navigate\"\n          ></ion-icon>\n        </mat-icon>\n      </p>\n    </ion-col>\n  </ion-row>\n\n</ion-content>\n" }]
-        }] });
+            args: [{ selector: 'mat-badge-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge\n            appBadgeMatIcon=\"check\"\n            appBadgeSize=\"small\"\n            appBadgeColor=\"accent\"\n            appBadgeOverlap=\"false\">Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text appBadge appBadgeMatIcon=\"check\"\n              appBadgeSize=\"medium\"\n              [appBadgeColor]=\"'tertiary'|matColor\"\n              appBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\"\n          appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success'|matColor\"\n            appBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark\"\n               [appBadgeColor]=\"'success'|matColor\"\n               appBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label appBadge\n               appBadgeIcon=\"checkmark-circle\"\n               [appBadgeColor]=\"'tertiary'|matColor\"\n               appBadgeFill=\"clear\"\n               appBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label appBadge\n                        appBadgeIcon=\"checkmark-circle\"\n                        [appBadgeColor]=\"'tertiary'|matColor\"\n                        appBadgeFill=\"clear\"\n                        appBadgeOverlap=\"false\">{{userText}}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                appBadge\n                [appBadgeIcon]=\"$icon|async\"\n                [appBadgeColor]=\"$color|async|matColor\"\n                [appBadgeHidden]=\"$hidden|async\"\n                [appBadgeFill]=\"$fill|async\"\n                [appBadgeSize]=\"$size|async\"\n                appBadgeOverlap=\"true\"\n                appBadgePosition=\"above before\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeColor\"\n                    [value]=\"$color.value\"\n                    (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeIcon\"\n                    [value]=\"$icon.value\"\n                    (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeSize\"\n                    [value]=\"$size.value\"\n                    (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeFill\"\n                    [value]=\"$fill.value\"\n                    (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-select placeholder=\"appBadgeHidden\"\n                    [value]=\"$hidden.value\"\n                    (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              appBadgeOverlap=\"true\"\n              appBadgePosition=\"below after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              class=\"ion-no-padding\"\n              [appBadgeIcon]=\"$icon|async\"\n              [appBadgeColor]=\"$color|async|matColor\"\n              [appBadgeHidden]=\"$hidden|async\"\n              [appBadgeFill]=\"$fill|async\"\n              [appBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon [style.color]=\"'var(--ion-color-secondary)'\"\n                [matBadge]=\"'!'\"\n                [matBadgeColor]=\"$color|async|matColor\"\n                [matBadgeHidden]=\"$hidden|async\"\n                [matBadgeSize]=\"$size|async\"\n                matBadgeOverlap=\"true\">\n        <ion-icon slot=\"icon-only\"\n                  [color]=\"'secondary'\"\n                  name=\"navigate\"\n        ></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button mat-raised-button color=\"primary\" [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"above after\">\n        {{userText}}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\">\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button mat-button color=\"primary\"\n              [matBadge]=\"matBadgeContent\"\n              [matBadgeColor]=\"$color|async|matColor\"\n              [matBadgeHidden]=\"$hidden|async\"\n              [matBadgeSize]=\"$size|async\"\n              matBadgeOverlap=\"true\"\n              matBadgePosition=\"after\">\n            {{userText}}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class NumpadTestPage {
     constructor(formBuilder) {
@@ -35104,10 +35158,10 @@ class ToastTestingPage {
     }
 }
 ToastTestingPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToastTestingPage, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ToastTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ToastTestingPage, selector: "toast-testing", ngImport: i0, template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"showToast()\" color=\"dark\">\n    default\n  </ion-button>\n\n  <ion-button (click)=\"showInfo()\" color=\"secondary\">\n    info\n  </ion-button>\n\n  <ion-button (click)=\"showWarning()\" color=\"accent\">\n    warning\n  </ion-button>\n\n  <ion-button (click)=\"showError()\" color=\"danger\">\n    error\n  </ion-button>\n\n  <br/>\n\n\n  <ion-list>\n\n\n    <ion-item>\n      <ion-checkbox slot=\"start\" [value]=\"defaultOptions.showCloseButton\"  (ionChange)=\"toggleCloseButton()\"></ion-checkbox>\n      <ion-label>Close button ?</ion-label>\n    </ion-item>\n  </ion-list>\n\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.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: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }] });
+ToastTestingPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ToastTestingPage, selector: "toast-testing", ngImport: i0, template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"showToast()\" color=\"dark\">\n    default\n  </ion-button>\n\n  <ion-button (click)=\"showInfo()\" color=\"secondary\">\n    info\n  </ion-button>\n\n  <ion-button (click)=\"showWarning()\" color=\"accent\">\n    warning\n  </ion-button>\n\n  <ion-button (click)=\"showError()\" color=\"danger\">\n    error\n  </ion-button>\n\n  <ion-button (click)=\"showInfo({message: 'This is <b>HTML</b> text'})\" color=\"danger\">\n    message with HTML\n  </ion-button>\n  <br/>\n\n\n  <ion-list>\n\n\n    <ion-item>\n      <ion-checkbox slot=\"start\" [value]=\"defaultOptions.showCloseButton\"  (ionChange)=\"toggleCloseButton()\"></ion-checkbox>\n      <ion-label>Close button ?</ion-label>\n    </ion-item>\n  </ion-list>\n\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.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: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToastTestingPage, decorators: [{
             type: Component,
-            args: [{ selector: 'toast-testing', template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"showToast()\" color=\"dark\">\n    default\n  </ion-button>\n\n  <ion-button (click)=\"showInfo()\" color=\"secondary\">\n    info\n  </ion-button>\n\n  <ion-button (click)=\"showWarning()\" color=\"accent\">\n    warning\n  </ion-button>\n\n  <ion-button (click)=\"showError()\" color=\"danger\">\n    error\n  </ion-button>\n\n  <br/>\n\n\n  <ion-list>\n\n\n    <ion-item>\n      <ion-checkbox slot=\"start\" [value]=\"defaultOptions.showCloseButton\"  (ionChange)=\"toggleCloseButton()\"></ion-checkbox>\n      <ion-label>Close button ?</ion-label>\n    </ion-item>\n  </ion-list>\n\n\n</ion-content>\n" }]
+            args: [{ selector: 'toast-testing', template: "<ion-toolbar color=\"primary\">\n  <ion-title>Toasts</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <p>Toast examples:</p>\n\n  <ion-button (click)=\"showToast()\" color=\"dark\">\n    default\n  </ion-button>\n\n  <ion-button (click)=\"showInfo()\" color=\"secondary\">\n    info\n  </ion-button>\n\n  <ion-button (click)=\"showWarning()\" color=\"accent\">\n    warning\n  </ion-button>\n\n  <ion-button (click)=\"showError()\" color=\"danger\">\n    error\n  </ion-button>\n\n  <ion-button (click)=\"showInfo({message: 'This is <b>HTML</b> text'})\" color=\"danger\">\n    message with HTML\n  </ion-button>\n  <br/>\n\n\n  <ion-list>\n\n\n    <ion-item>\n      <ion-checkbox slot=\"start\" [value]=\"defaultOptions.showCloseButton\"  (ionChange)=\"toggleCloseButton()\"></ion-checkbox>\n      <ion-label>Close button ?</ion-label>\n    </ion-item>\n  </ion-list>\n\n\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 const routes$6 = [