@sumaris-net/ngx-components 2.0.0-rc3 → 2.0.0-rc5

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

@@ -56,8 +56,8 @@ 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$2 from '@angular/forms';
 import { Validators, NG_VALUE_ACCESSOR, AbstractControl, UntypedFormGroup, UntypedFormArray, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, from, of, noop as noop$9, Observable, forkJoin, defer, interval, combineLatest, EMPTY } from 'rxjs';
-import { filter, takeUntil, map, first, switchMap, tap, debounceTime, startWith, distinctUntilChanged, mergeMap, catchError, throttleTime, skip, bufferWhen, take } from 'rxjs/operators';
+import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, from, of, noop as noop$9, Observable, forkJoin, defer, interval, EMPTY } from 'rxjs';
+import { filter, map, takeUntil, first, switchMap, tap, debounceTime, startWith, distinctUntilChanged, mergeMap, catchError, throttleTime, skip, bufferWhen, take } from 'rxjs/operators';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import * as i2 from '@ionic/angular';
 import { IonicModule, Platform, ToastController, IonicSafeString, createAnimation, IonicRouteStrategy, ModalController, AlertController, IonContent, IonItem, IonInfiniteScroll } from '@ionic/angular';
@@ -824,32 +824,40 @@ function filterTrue(obs) {
 function filterFalse(obs, opts) {
     return obs.pipe(filter((v) => v === false));
 }
-function decorateForFirst(obs, opts) {
+function decorateWithTakeUntil(obs, opts) {
     // Set take until notifier
-    const takeUntil$ = opts?.stop || (opts?.timeout && timer(opts.timeout));
-    if (takeUntil$) {
-        // When stop, throw an error (useful when used with a toPromise())
-        if (opts.stopError) {
-            return merge(obs.pipe(takeUntil(takeUntil$)), takeUntil$
-                .pipe(map(() => {
-                throw new Error(opts.timeout ? `Timeout ${opts.timeout}ms` : `Stop`);
-            })));
+    let takeUntil$ = opts?.stop || (opts?.timeout && timer(opts.timeout));
+    if (!takeUntil$)
+        return obs; // Skip
+    // When stop, throw an error (useful when used with a toPromise())
+    if (opts.stopError) {
+        let error;
+        if (opts.stopError === true) {
+            error = new Error(opts.timeout ? `Timeout ${opts.timeout}ms` : `stop`);
+        }
+        else if (typeof opts.stopError === 'string') {
+            error = new Error(opts.stopError);
+        }
+        else {
+            error = opts.stopError;
         }
-        // Add a takeUntil
-        return obs.pipe(takeUntil(takeUntil$));
+        takeUntil$ = takeUntil$.pipe(map(() => {
+            throw error;
+        }));
     }
-    return obs;
+    return obs
+        .pipe(takeUntil(takeUntil$));
 }
 function firstNotNil(obs, opts) {
-    return decorateForFirst(obs, opts).pipe(first(isNotNil));
+    return decorateWithTakeUntil(obs.pipe(first(isNotNil)), opts);
 }
 function firstTrue(obs, opts) {
-    return decorateForFirst(obs, opts).pipe(first((v) => v === true), map(_ => { }) // Convert to void
-    );
+    return decorateWithTakeUntil(obs.pipe(first((v) => v === true), map(_ => { }) // Convert to void
+    ), opts);
 }
 function firstFalse(obs, opts) {
-    return decorateForFirst(obs, opts).pipe(first((v) => v === false), map(_ => { }) // Convert to void
-    );
+    return decorateWithTakeUntil(obs.pipe(first((v) => v === false), map(_ => { }) // Convert to void
+    ), opts);
 }
 function firstTruePromise(obs, opts) {
     return firstTrue(obs, { stopError: true, ...opts }).toPromise();
@@ -896,9 +904,8 @@ function waitForTrue(observable, opts) {
     opts = { stopError: true, ...opts };
     // dueTime (without timeout)
     if (opts && opts.dueTime > 0) {
-        return timer(opts.dueTime)
-            .pipe(switchMap(() => firstTrue(observable, opts)))
-            .toPromise();
+        observable = timer(opts.dueTime)
+            .pipe(switchMap(() => observable));
     }
     return firstTrue(observable, opts).toPromise();
 }
@@ -913,7 +920,7 @@ function createPromiseEventEmitter() {
 }
 function createPromiseEvent(eventType, promise, initArg) {
     const detail = {
-        ...(initArg && initArg.detail || {}),
+        ...(initArg?.detail || {}),
         ...promise
     };
     return new CustomEvent(eventType, { detail });
@@ -2265,8 +2272,7 @@ class MatAutocompleteField {
             ? timer(0)
             : this.autocomplete.opened.pipe(debounceTime(200));
         const scrollEnd$ = opened$
-            .pipe(map((_) => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)
-            .pipe(takeUntil(this.autocomplete.closed))));
+            .pipe(map((_) => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)), takeUntil(this.autocomplete.closed));
         // Trigger fetch more, end end scroll reached
         this._openedSubscription = scrollEnd$
             .subscribe(() => this._fetchMore$.emit());
@@ -2286,8 +2292,7 @@ class MatAutocompleteField {
             ? timer(0)
             : this.matSelect._openedStream.pipe(debounceTime(200));
         const scrollEnd$ = opened$
-            .pipe(map((_) => this.getMatSelectPanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)
-            .pipe(takeUntil(this.matSelect._closedStream))));
+            .pipe(map((_) => this.getMatSelectPanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)), takeUntil(this.matSelect._closedStream));
         // Trigger fetch more, end end scroll reached
         this._openedSubscription = scrollEnd$
             .pipe(filter(_ => this._moreItemsCount > 0))
@@ -4551,7 +4556,7 @@ AppFormUtils.waitIdle = waitIdle;
 AppFormUtils.updateValueAndValidity = updateValueAndValidity;
 AppFormUtils.getFormErrors = getFormErrors;
 // ArrayForm
-AppFormUtils.addValueInArray = pushValueInArray;
+AppFormUtils.pushValueInArray = pushValueInArray;
 AppFormUtils.removeValueInArray = removeValueInArray;
 AppFormUtils.resizeArray = resizeArray;
 AppFormUtils.clearValueInArray = clearValueInArray;
@@ -8863,8 +8868,7 @@ class MatChipsField {
             ? timer(0)
             : this.autocomplete.opened.pipe(debounceTime(200));
         const scrollEnd$ = opened$
-            .pipe(map((_) => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)
-            .pipe(takeUntil(this.autocomplete.closed))));
+            .pipe(map((_) => this.getAutocompletePanel()), filter(isNotNil), switchMap((panel) => fromScrollEndEvent(panel, threshold)), takeUntil(this.autocomplete.closed));
         // Trigger fetch more, end end scroll reached
         this._openedSubscription = scrollEnd$
             .subscribe(() => this._fetchMore$.emit());
@@ -12926,7 +12930,7 @@ let Peer = Peer_1 = class Peer extends Entity {
     }
     static parseUrl(peerUrl) {
         const url = new URL(peerUrl);
-        return this.fromObject({
+        return Peer_1.fromObject({
             dns: url.hostname,
             port: isNilOrBlank(url.port) ? undefined : url.port,
             useSsl: url.protocol && (url.protocol.startsWith('https') || url.protocol.startsWith('wss')),
@@ -12944,7 +12948,7 @@ let Peer = Peer_1 = class Peer extends Entity {
                 return path.substring(1);
             return path;
         }).filter(isNotNilOrBlank);
-        return [noTrailingSlash(this.fromObject(peer).url)].concat(...paths).join('/');
+        return [noTrailingSlash(Peer_1.fromObject(peer).url)].concat(...paths).join('/');
     }
     asObject(options) {
         return super.asObject(options);
@@ -14528,6 +14532,8 @@ class BaseReferential extends Entity {
         target.creationDate = toDateISOString(this.creationDate);
         if (opts && opts.keepTypename === false)
             delete target.entityName;
+        if (opts && opts.keepIcon === false)
+            delete target.icon;
         return target;
     }
     fromObject(source, opts) {
@@ -14542,6 +14548,7 @@ class BaseReferential extends Entity {
         this.parentId = source.parentId;
         this.creationDate = fromDateISOString(source.creationDate);
         this.entityName = source.entityName;
+        this.icon = source.icon;
     }
     equals(other) {
         return super.equals(other) && this.entityName === other.entityName;
@@ -14580,7 +14587,8 @@ const MINIFY_ENTITY_FOR_LOCAL_STORAGE = Object.freeze({
     minify: true,
     keepTypename: true,
     keepEntityName: true,
-    keepLocalId: true
+    keepLocalId: true,
+    keepIcon: true
 });
 /**
  * Used to send an entity to a pod
@@ -14589,7 +14597,8 @@ const MINIFY_ENTITY_FOR_POD = Object.freeze({
     minify: true,
     keepTypename: false,
     keepEntityName: false,
-    keepLocalId: false
+    keepLocalId: false,
+    keepIcon: false
 });
 // @dynamic
 let ReferentialRef = ReferentialRef_1 = class ReferentialRef extends Entity {
@@ -14607,6 +14616,8 @@ let ReferentialRef = ReferentialRef_1 = class ReferentialRef extends Entity {
         const target = super.asObject(opts);
         if (opts && opts.keepEntityName === false)
             delete target.entityName;
+        if (opts && opts.keepIcon === false)
+            delete target.icon;
         return target;
     }
     fromObject(source, opts) {
@@ -14617,6 +14628,7 @@ let ReferentialRef = ReferentialRef_1 = class ReferentialRef extends Entity {
         this.description = source.description;
         this.statusId = source.statusId;
         this.levelId = source.levelId;
+        this.icon = source.icon;
     }
 };
 ReferentialRef = ReferentialRef_1 = __decorate([
@@ -19403,8 +19415,6 @@ class InMemoryEntitiesService extends StartableObservableService {
     async ngOnStop() {
         if (this.debug)
             console.debug('[memory-data-service] Stopping...');
-        this.dataSubject.complete();
-        this.dataSubject.unsubscribe();
         this._hiddenData = null;
         this.markAsSaved();
         this.markAsPristine();
@@ -19530,10 +19540,10 @@ class InMemoryEntitiesService extends StartableObservableService {
         offset = offset >= 0 ? offset : 0;
         size = size >= 0 ? size : -1;
         return this.dataSubject
-            .pipe(takeUntil(this.stopSubject), 
+            .pipe(
         // Warn if waiting value to be set
-        tap((data) => this.debug && !data && console.debug('[memory-data-service] Waiting value to be set...')), filter(isNotNil), mergeMap(_ => this.loadAll(offset, size, sortBy, sortDirection, filterData, options)), filter(isNotNil) // Skip no result (e.g. when stopped)
-        );
+        tap((data) => this.debug && !data && console.debug('[memory-data-service] Waiting value to be set...')), filter(isNotNil), mergeMap(_ => this.loadAll(offset, size, sortBy, sortDirection, filterData, options)), filter(isNotNil), // Skip no result (e.g. when stopped)
+        takeUntil(this.stopSubject));
     }
     async saveAll(data, options) {
         if (!this.dataSubject.value)
@@ -19600,6 +19610,14 @@ class InMemoryEntitiesService extends StartableObservableService {
      * Count data stored by the service (without hidden data).
      * @param opts
      */
+    // get visibleCount(): number {
+    //   return (this.dataSubject.value?.length || 0);
+    // }
+    /**
+     * Count data stored by the service (without hidden data).
+     * @param opts
+     * @deprecated TODO Please rename this getter into visibleCount (and create count = hiddenCount + visibleCount)
+     */
     get count() {
         return (this.dataSubject.value?.length || 0);
     }
@@ -19908,14 +19926,13 @@ Color.transparent = function () {
 // @dynamic
 class ColorScale {
     constructor(colorArray, options) {
-        this.colorArray = colorArray;
         options = options || {};
         // reserved last colors for value > max
         const nbIntervalBeforeUpper = !options.upperMax ? colorArray.length : (colorArray.length - 1);
         this._min = options.min || 0;
         this._max = options.max || nbIntervalBeforeUpper;
         this._rangeSize = Math.round((this._max - this._min) / nbIntervalBeforeUpper);
-        this._legendItems = this.computeLegend();
+        this._legendItems = this.computeLegendItems(colorArray);
     }
     static default() {
         return ColorScale.custom(25);
@@ -19939,15 +19956,21 @@ class ColorScale {
         };
     }
     getValueColor(value) {
-        const index = Math.floor(value * (this.colorArray.length - 1) / this._max);
-        return this.colorArray[index];
+        return this.getLegendForValue(value).color;
+    }
+    getLegendForValue(value) {
+        const index = Math.floor(value * (this._legendItems.length - 1) / this._max);
+        return this._legendItems[index];
+    }
+    getLegendAtIndex(index) {
+        return this._legendItems[index];
     }
-    computeLegend() {
-        return this.colorArray.map((color, index) => {
+    computeLegendItems(colorArray) {
+        return colorArray.map((color, index) => {
             const start = index * this._rangeSize;
             const end = start + this._rangeSize;
             return {
-                color,
+                color: new Color(color),
                 label: (end < this._max) ? `${start.toLocaleString()} - ${end.toLocaleString()}` : ` >= ${start}`
             };
         });
@@ -19956,12 +19979,10 @@ class ColorScale {
 ColorScale.custom = (count, options) => {
     options = options || {};
     return new ColorScale(linearColorGradientWithIntermediate(count, {
-        opacity: options.opacity,
         startColor: options.startColor || undefined,
         mainColor: options.mainColor || undefined,
         mainColorIndex: isNotNil(options.mainColorIndex) ? options.mainColorIndex : undefined,
-        endColor: options.endColor || undefined,
-        format: options.format
+        endColor: options.endColor || undefined
     }), options);
 };
 // Fill colorsMap
@@ -19969,28 +19990,6 @@ Object.getOwnPropertyNames(rgbArrayMap)
     .forEach((key) => {
     colorsMap[key] = new Color(rgbArrayMap[key], 1, key);
 });
-// Internal function
-function state2side(state) {
-    switch (state) {
-        case 0:
-            return 0;
-        case 1:
-            return -1;
-        case 2:
-            return 0;
-        case 3:
-            return 1;
-    }
-}
-const SCALE_OPTIONS_DEFAULT = {
-    startColor: rgbArrayMap.red,
-    startStates: [0, 2, 3],
-    startStepsFn: (defaultStateSize) => [
-        Math.round((rgbArrayMap.red[0] - 50) / defaultStateSize),
-        Math.round((255 - rgbArrayMap.red[1]) / defaultStateSize),
-        Math.round((255 - rgbArrayMap.red[2]) / defaultStateSize)
-    ]
-};
 /**
  * Internal function, that create a colors scale, using iteration
  *
@@ -20003,34 +20002,26 @@ const SCALE_OPTIONS_DEFAULT = {
 function linearColorGradientWithIntermediate(count, options) {
     options = options || {};
     // From [0,1]
-    options.opacity = (options.opacity > 0 && options.opacity < 1) ? options.opacity : 1;
     options.startColor = options.startColor || [255, 255, 190]; // default start = creme
     options.mainColorIndex = options.mainColorIndex && options.mainColorIndex < count - 1 ? options.mainColorIndex : count - 1;
     options.endColor = options.endColor || [255, 0, 0]; // default main = red
-    options.format = options.format || 'rgb';
     if (!options.mainColor) {
         return linearColorGradient(count, {
-            opacity: options.opacity,
             startColor: options.startColor,
-            endColor: options.endColor,
-            format: options.format
+            endColor: options.endColor
         });
     }
     else {
         // Step 1: startColor -> mainColor
         const result = linearColorGradient(options.mainColorIndex + 1, {
-            opacity: options.opacity,
             startColor: options.startColor,
-            endColor: options.mainColor,
-            format: options.format
+            endColor: options.mainColor
         });
         // Step 2: mainColor -> endColor
         if (options.mainColorIndex < count - 1) {
             return result.concat(linearColorGradient(count - options.mainColorIndex, {
-                opacity: options.opacity,
                 startColor: options.mainColor,
-                endColor: options.endColor,
-                format: options.format
+                endColor: options.endColor
             }));
         }
         else {
@@ -20041,10 +20032,8 @@ function linearColorGradientWithIntermediate(count, options) {
 function linearColorGradient(count, options) {
     options = options || {};
     // From [0,1]
-    options.opacity = (options.opacity > 0 && options.opacity < 1) ? options.opacity : 1;
     options.startColor = options.startColor || [255, 255, 255]; // default start = white
     options.endColor = options.endColor || [255, 0, 0]; // default end = red
-    options.format = options.format || 'rgb';
     const result = [];
     const color = options.startColor.slice(); // copy the start color
     const delta = [
@@ -20061,23 +20050,6 @@ function linearColorGradient(count, options) {
     // Force last color = end color
     result.push(options.endColor.slice());
     // Output as array
-    if (options.format === 'array') {
-        return result;
-    }
-    // Output as rgb(r,g,b) string
-    if (options.format === 'rgb') {
-        if (options.opacity >= 1) {
-            return result.map(color => 'rgb(' + color.join(',') + ')');
-        }
-        else {
-            return result.map(color => 'rgba(' + color.concat(options.opacity).join(',') + ')');
-        }
-    }
-    // Output as hex
-    // TODO
-    // return result.map(color => {
-    //   return "rgb(" + color.join(',') + ")";
-    // });
     return result;
 }
 
@@ -20542,6 +20514,9 @@ class AppForm {
                 this.markForCheck();
         }
     }
+    get destroyed() {
+        return this.destroySubject?.closed !== false;
+    }
     set form(value) {
         this.setForm(value);
     }
@@ -23329,7 +23304,7 @@ class AppIconComponent {
         this.icon = value.icon;
         this.matIcon = value.matIcon;
         this.matSvgIcon = value.matSvgIcon;
-        this.color = value.color;
+        this.color = value.color || this.color; // Keep existing, if not defined in the reference
     }
     ;
 }
@@ -24646,6 +24621,7 @@ class AppTable {
         this.defaultPageSize = DEFAULT_PAGE_SIZE;
         this.defaultPageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS;
         this.onRefresh = new EventEmitter();
+        this.onOpenIdAndRow = new EventEmitter();
         this.onOpenRow = new EventEmitter();
         this.onNewRow = new EventEmitter();
         this.onStartEditingRow = new EventEmitter();
@@ -24788,7 +24764,7 @@ class AppTable {
         if (this.dirty || (this.editedRow && this.editedRow.id !== this.previouslyEditedRowId)) {
             // Cancel the current editing row only if editing and if it was not previously saved
             if (this.editedRow?.editing) {
-                this.editedRow.cancelOrDelete();
+                this.dataSource.cancelOrDelete(this.editedRow);
                 // Mark row as pristine
                 this.checkIfRowPristine(this.editedRow, { emitEvent: false });
             }
@@ -24890,6 +24866,9 @@ class AppTable {
     get paginator() {
         return this._paginator || this.childPaginator;
     }
+    get destroyed() {
+        return this.destroySubject?.closed !== false;
+    }
     ngOnInit() {
         if (this._initialized)
             return; // Init only once
@@ -24924,17 +24903,11 @@ class AppTable {
         // Propagate row dirty state to table
         this.registerSubscription(this.onStartEditingRow
             .pipe(filter(row => row?.validator && true), mergeMap(row => row.validator.valueChanges
-            .pipe(takeUntil(
-        // Stop if next another row, or destroying
-        combineLatest([
-            this.onStartEditingRow,
-            this.destroySubject
-        ])
+            .pipe(filter(row => row.dirty), first(), 
         // DEBUG
-        //.pipe(
-        //  tap(() => console.debug('TODO stopping previous row listener'))
-        //)
-        ), map(() => row.dirty), filter(dirty => dirty === true), first())))
+        //tap(() => console.debug("Propagate row's dirty to table..."))
+        // Stop if next another row, or destroying
+        takeUntil(this.onStartEditingRow), takeUntil(this.destroySubject))))
             .subscribe(() => this.markAsDirty()));
         // Call datasource refresh, on each refresh events
         this.registerSubscription(this.onRefresh
@@ -25063,34 +25036,38 @@ class AppTable {
             this.applyFilter(filter, opts);
         }
     }
-    async confirmAndAdd(event, row) {
-        const confirmed = await this.confirmEditCreate(event, row);
-        if (!confirmed)
+    confirmAndAdd(event, row) {
+        if (row && !this.confirmEditCreate(event, row)) {
             return false;
+        }
         // Add row
         return this.addRow(event);
     }
-    async confirmAndBackward(event, row) {
+    confirmAndBackward(event, row) {
         // Deleting edited row, if empty and not dirty
         const previousRow = this.editedRow;
-        if (previousRow && (previousRow.id === -1) && previousRow.validator?.invalid && !(previousRow.dirty)) {
-            const deleted = this.deleteNew(event, previousRow);
-            if (!deleted)
-                return false;
+        if (previousRow && (previousRow.id === -1) && previousRow.validator?.invalid && !(previousRow.validator?.dirty)) {
+            this.deleteNewRow(event, previousRow);
             // Wait deletion is done, then edit previous row (by id, because of reloading)
-            await this.waitIdle();
+            this.waitIdle()
+                .then(() => this.editRowById(event, row.id, { focusColumn: this.lastUserColumn }));
+            return true;
         }
         // Edit previous row
-        return this.startEditRow(event, row, { focusColumn: this.lastUserColumn });
+        this.editRow(event, row, { focusColumn: this.lastUserColumn });
+        return true;
     }
-    async confirmAndForward(event, row) {
+    confirmAndForward(event, row) {
         row = row || this.editedRow;
-        const confirmed = await this.confirmEditCreate(event, row);
-        // Cannot confirm previous row: skip
-        if (!confirmed)
+        if (!this.confirmEditCreate(event, row)) {
+            // If pending: Wait end of validation, then loop
+            if (row.validator?.pending) {
+                return AppFormUtils.waitWhilePending(row.validator).then(() => this.confirmAndForward(event, row));
+            }
             return false;
+        }
         // Edit next row
-        this.startEditRowById(null, row.id + 1, { focusColumn: this.firstUserColumn });
+        this.editRowById(event, row.id + 1, { focusColumn: this.firstUserColumn });
         return true;
     }
     /**
@@ -25099,15 +25076,15 @@ class AppTable {
      * @param event
      * @param row
      */
-    async confirmEditCreate(event, row) {
+    confirmEditCreate(event, row) {
         row = row || this.editedRow;
         if (!row || !row.editing)
             return true; // no row to confirm
         // Stop event
-        event?.preventDefault();
         event?.stopPropagation();
         // Confirmation edition or creation
-        const confirmed = await row.confirmEditCreate();
+        // TODO: add await ?
+        const confirmed = row.confirmEditCreate();
         if (confirmed) {
             // If edit finished, forget edited row
             if (row === this.editedRow) {
@@ -25123,8 +25100,13 @@ class AppTable {
             this.onConfirmEditCreateRow.next(row);
             return true; // Continue
         }
-        // Not conformed + validator
-        else if (row.validator) {
+        if (row.validator) {
+            // If pending: Wait end of validation, then loop
+            // TODO: remove when using async isValid() function
+            if (row.validator.pending) {
+                AppFormUtils.waitWhilePending(row.validator).then(() => this.confirmEditCreate(event, row));
+                return false;
+            }
             // NOT confirmed = row has error
             if (this.debug) {
                 console.warn('[table] Cannot confirm row, because invalid');
@@ -25141,18 +25123,18 @@ class AppTable {
         // Not confirmed
         return false;
     }
-    async cancelOrDelete(event, row, opts) {
+    cancelOrDelete(event, row, opts) {
         // Delete new row
         if (row.id === -1) {
-            return this.deleteNew(event, row);
+            this.deleteNewRow(event, row);
         }
-        // Delete existing (but not editing) row
+        // Delete existing (bu not editing) row
         else if (!row.editing) {
-            return this.deleteExisting(event, row, opts);
+            this.deleteExistingRow(event, row, opts);
         }
         // Cancel existing (and editing) row
         else {
-            return this.cancelExisting(event, row, opts);
+            this.cancelExistingRow(event, row, opts);
         }
     }
     async addRow(event, insertAt, opts) {
@@ -25166,11 +25148,11 @@ class AppTable {
             return false;
         }
         // Try to finish edited row first
-        const confirmed = await this.confirmEditCreate();
-        if (!confirmed)
+        if (!this.confirmEditCreate()) {
             return false;
-        // Create a new row
-        const row = await this.createNewRow(insertAt, opts);
+        }
+        // Add new row
+        const row = await this.addRowToTable(insertAt, opts);
         return !!row;
     }
     async save(opts) {
@@ -25211,27 +25193,28 @@ class AppTable {
             }
         }
     }
-    async cancel(event, opts) {
+    cancel(event, opts) {
         // Check confirmation
         if ((!opts || opts.interactive !== false) && this.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observers.length > 0)) {
             event?.stopPropagation();
-            const canCancel = await this.canCancelRows();
-            if (!canCancel)
-                return false;
+            this.canCancelRows().then(confirm => {
+                // If confirmed, loop
+                if (confirm)
+                    this.cancel(null, { interactive: false });
+            });
+            return;
         }
         this.onRefresh.emit();
-        return true;
     }
     async duplicateRow(event, row, opts) {
         event?.stopPropagation();
         row = row || this.singleSelectedRow;
-        if (!row)
-            return false; // No row, or too many row
-        // Confirm the source row
-        const confirmed = await this.confirmEditCreate(event, row);
-        if (!confirmed)
+        if (!row || !this.confirmEditCreate(event, row)) {
             return false;
+        }
         const newRow = await this.addRowToTable(row.id + 1);
+        if (!newRow)
+            throw new Error('Cannot add new row to table');
         const json = { ...row.currentData, id: null };
         // Reset some properties (e.g. rankOrder, etc)
         if (opts && opts.skipProperties) {
@@ -25295,8 +25278,9 @@ class AppTable {
      *    And to force deletion even if table is busy
      */
     async deleteRows(event, rows, opts) {
-        if (this.readOnly)
+        if (this.readOnly) {
             throw { code: ErrorCodes.TABLE_READ_ONLY, message: 'ERROR.TABLE_READ_ONLY' };
+        }
         if (event?.defaultPrevented)
             return 0; // SKip
         event?.preventDefault();
@@ -25332,7 +25316,7 @@ class AppTable {
                 if (row.id === -1 || (!row.editing && row.invalid /*do not use !valid because if row is disabled, it will be always !valid */)) {
                     if (this.debug)
                         console.debug(`[table] Delete row #${row.id}`);
-                    row.delete(); // TODO: add await ?
+                    row.delete();
                     this.visibleRowCount--;
                     this.totalRowCount--;
                     deletedRows.push(row);
@@ -25342,7 +25326,7 @@ class AppTable {
                 }
                 // Cancel the row (and mark as pristine), when not valid but in edition
                 else if (row.editing && !row.valid) {
-                    row.cancel(); // TODO: add await ?
+                    row.cancel();
                     // Mark row as pristine (if possible)
                     this.checkIfRowPristine(row, { emitEvent: false, onlySelf: true /*avoid propagation to table*/ });
                     return true; // Keep the row. the row will be deleted after the save
@@ -25354,8 +25338,10 @@ class AppTable {
             if (deletedRows.length || tempRows.length) {
                 // Save data (e.g. when using memory service)
                 const saved = await this.saveBeforeAction('delete');
-                if (!saved)
-                    return 0; // Stop if save cancelled or save failed
+                if (!saved) {
+                    // Stop if save cancelled or save failed
+                    return;
+                }
             }
         }
         try {
@@ -25369,7 +25355,7 @@ class AppTable {
             // DO not update manually, because watchALl().subscribe() will update this count
             //this.totalRowCount -= deleteCount;
             //this.visibleRowCount -= deleteCount;
-            this.selection.deselect(...rows);
+            this.selection.clear();
             this.editedRow = undefined;
             this.markAsDirty({ emitEvent: false /*markForCheck() is called just after*/ });
             this.markForCheck();
@@ -25404,12 +25390,13 @@ class AppTable {
             return false;
         return this.clickRow(null, row);
     }
-    async clickRow(event, row) {
-        // Wait while loading
+    clickRow(event, row) {
         if (this.loading) {
+            // Wait while loading, and loop
             if (this.debug)
                 console.debug("[table] Waiting before apply clickRow() (datasource is busy)...");
-            await this.waitIdle();
+            this.waitIdle().then(() => this.clickRow(event, row));
+            return false;
         }
         // DEBUG
         //console.debug("[table] Detect click on row");
@@ -25417,27 +25404,24 @@ class AppTable {
             return true; // Already in edition
         if (event?.defaultPrevented)
             return false; // Cancelled by event
-        // Start editing row
-        if (this.inlineEdition) {
-            return this.editRow(event, row, { focusColumn: undefined /*force to use the click target*/ });
-        }
-        // Open the detail page
-        else {
+        // Open the detail page (if not inline editing)
+        if (!this.inlineEdition) {
             if (event) {
                 event.stopPropagation();
                 event.preventDefault();
             }
             this.markAsLoading();
-            try {
-                return this.openRowDetail(row);
-            }
-            finally {
-                this.markAsLoaded();
-            }
+            this.selection.clear();
+            this.openRow(row.currentData.id, row)
+                .then(() => this.markAsLoaded())
+                .catch(() => this.markAsLoaded());
+            return true;
         }
+        // Start editing row
+        return this.editRow(event, row, { focusColumn: undefined /*force to use the click target*/ });
     }
-    async moveRow(id, direction) {
-        return this.dataSource.move(id, direction);
+    moveRow(id, direction) {
+        this.dataSource.move(id, direction);
     }
     ready(opts) {
         return waitForTrue(this.readySubject, opts);
@@ -25494,7 +25478,7 @@ class AppTable {
             canHide: this.getRequiredColumns().indexOf(name) === -1
         }));
     }
-    async escapeEditingRow(event, row) {
+    escapeEditingRow(event, row) {
         row = row || this.editedRow;
         if (!row || !row.editing)
             return;
@@ -25507,21 +25491,29 @@ class AppTable {
         }
         // If new row (no id)
         if (row.id === -1) {
-            const valid = await row.isValid();
-            // Row is invalid: delete the row
-            if (!valid) {
-                return this.deleteNew(event, row);
+            if (row.validator) {
+                // If pending: Wait end of validation, then loop
+                if (row.validator.pending) {
+                    AppFormUtils.waitWhilePending(row.validator).then(() => this.escapeEditingRow(event, row));
+                    return;
+                }
+                // Row is invalid: delete the row
+                if (row.validator.invalid) {
+                    this.deleteNewRow(event, row);
+                    return;
+                }
             }
         }
         // If the row exists (has an id)
         else {
             // need to call cancel function (if confirmation will be call before before)
             if (this.confirmBeforeCancel) {
-                return this.cancelExisting(event, row, { keepEditing: false });
+                this.cancelExistingRow(event, row, { keepEditing: false });
+                return;
             }
         }
         // By default, try to confirm the row
-        return this.confirmEditCreate(event, row);
+        this.confirmEditCreate(event, row);
     }
     translateControlPath(path) {
         // Can be override by subclasses, to resolve all field name
@@ -25530,21 +25522,19 @@ class AppTable {
         return this.translate?.instant(i18nColumnKey) || i18nColumnKey;
     }
     /* -- protected method -- */
-    async startEditRow(event, row, opts) {
+    editRow(event, row, opts) {
         if (!this._enabled)
             return false;
         if (this.editedRow === row)
             return true; // Already the edited row
         if (event?.defaultPrevented)
             return false;
-        const confirmed = await this.confirmEditCreate();
-        if (!confirmed)
+        if (!this.confirmEditCreate()) {
             return false;
+        }
         if (!row.editing && !this.loading) {
             this.focusColumn = opts && opts.focusColumn || this.focusColumn;
-            const started = await row.startEdit();
-            if (!started)
-                return false;
+            this._dataSource.startEdit(row);
         }
         this.editedRow = row;
         this.onStartEditingRow.emit(row);
@@ -25612,7 +25602,7 @@ class AppTable {
     }
     async canCancelRows(rows, opts) {
         // Get dirty rows
-        rows = rows || this.dataSource.getRows().filter(row => row.dirty);
+        rows = rows || this.dataSource.getRows().filter(row => row.validator?.dirty);
         if (isEmptyArray(rows))
             return true; // No dirty: OK
         // Check using emitter
@@ -25694,26 +25684,31 @@ class AppTable {
      * @param row
      * @protected
      */
-    async openRowDetail(row) {
-        if (!this.allowRowDetail)
-            return false;
-        if (this.debug && this.dirty) {
-            console.warn('[table] Opening row details, but table has unsaved changes!');
-        }
-        if (this.onOpenRow.observers.length > 0) {
-            this.onOpenRow.emit(row);
-            return true;
-        }
-        // No ID defined: unable to open details
-        const id = row.currentData.id;
-        if (isNil(id)) {
-            console.warn('[table] Opening row details, but data has no id!');
-            return false;
+    async openRow(id, row) {
+        if (this.allowRowDetail) {
+            if (this.debug && this.dirty) {
+                console.warn('[table] Opening row details, but table has unsaved changes!');
+            }
+            if (this.onOpenIdAndRow.observers.length) {
+                console.warn('[table] Detected deprecated use of (onOpenIdAndRow). Please use (onOpenRow) instead');
+                this.onOpenIdAndRow.emit({ id, row });
+                return true;
+            }
+            if (this.onOpenRow.observers.length) {
+                this.onOpenRow.emit(row);
+                return true;
+            }
+            // No ID defined: unable to open details
+            if (isNil(id)) {
+                console.warn('[table] Opening row details, but data has no id!');
+                return false;
+            }
+            return this.router.navigate(['.', id.toString()], {
+                relativeTo: this.route,
+                queryParams: {}
+            });
         }
-        return this.router.navigate(['.', id.toString()], {
-            relativeTo: this.route,
-            queryParams: {}
-        });
+        return false;
     }
     async openNewRowDetail(event) {
         if (!this.allowRowDetail)
@@ -25801,8 +25796,13 @@ class AppTable {
         //if (this.debug) console.debug("[table] id = " + id);
         return id;
     }
-    async createNewRow(insertAt, opts) {
-        const row = await this._dataSource.createNew(insertAt, opts && { editing: opts.editing });
+    async addRowToTable(insertAt, opts) {
+        // Try to finish edited row first
+        if (!this.confirmEditCreate()) {
+            console.warn('[table] Cannot add new row, because the previous edited row cannot be confirmed');
+            return undefined;
+        }
+        const row = await this._dataSource.createNew(insertAt, { editing: opts?.editing });
         if (!row)
             return undefined;
         if (row.editing) {
@@ -25926,24 +25926,6 @@ class AppTable {
             row.validator?.markAsDirty(opts);
         this.markAsDirty(opts);
     }
-    /**
-     * @deprecated Use startEditRow instead
-     */
-    editRow(event, row, opts) {
-        return this.startEditRow(event, row, opts);
-    }
-    /**
-     * @deprecated use openRowDetail() instead)
-     */
-    async openRow(id, row) {
-        return this.openRowDetail(row);
-    }
-    /**
-     * @deprecated use createNewRow() instead
-     */
-    async addRowToTable(insertAt, opts) {
-        return this.createNewRow(insertAt, opts);
-    }
     /* -- private method -- */
     async listenSortAndPaginationEvents() {
         if (!this.table) {
@@ -25981,17 +25963,15 @@ class AppTable {
                 .subscribe(() => this.paginator.pageIndex = 0));
         }
     }
-    async startEditRowById(event, id, opts) {
+    async editRowById(event, id, opts) {
         if (id < 0)
-            return false; // Invalid row id
+            return;
         if (id >= this.visibleRowCount) {
-            return this.addRow(event, undefined, { ...opts, editing: true });
+            this.addRow(event, undefined, { ...opts, editing: true });
         }
         else {
-            const row = this.dataSource.getRow(id);
-            if (!row)
-                return false;
-            return this.startEditRow(event, row, opts);
+            const row = await this.dataSource.getRow(id);
+            this.editRow(event, row, opts);
         }
     }
     setLoading(value, opts) {
@@ -26002,57 +25982,53 @@ class AppTable {
             }
         }
     }
-    async deleteNew(event, row) {
-        // Make sure row will be cancelled, and NOT deleted
+    deleteNewRow(event, row) {
         if (row.id !== -1)
             throw new Error('Row must have id = -1');
-        event?.preventDefault();
         event?.stopPropagation();
-        const deleted = await this._dataSource.cancelOrDelete(row);
-        if (!deleted)
-            return false;
         this.selection.clear();
         this.editedRow = undefined; // unselect row
+        this._dataSource.cancelOrDelete(row);
         this.onCancelOrDeleteRow.next(row);
         this.resetError();
         this.totalRowCount--;
         this.visibleRowCount--;
-        return true;
     }
-    async deleteExisting(event, row, opts) {
+    deleteExistingRow(event, row, opts) {
         // Make sure row will be cancelled, and NOT deleted
         if (row.id === -1)
             throw new Error('Row must have an id');
+        if (event?.defaultPrevented)
+            return 0; // SKip
         event?.preventDefault();
-        event?.stopPropagation();
-        return this.deleteRow(null, row, opts);
+        this.deleteRow(null, row, opts);
     }
-    async cancelExisting(event, row, opts) {
+    cancelExistingRow(event, row, opts) {
         // Make sure row will be cancelled, and NOT deleted
         if (row.id === -1 || !row.editing)
             throw new Error('Row cannot be canceling, but only deleting');
         const confirmed = (!opts || opts.interactive !== false);
         // Ask user confirmation, if cancel
         if (!confirmed && row.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observers.length > 0)) {
-            event?.preventDefault();
-            event?.stopPropagation();
-            const canCancel = await this.canCancelRows([row], opts);
-            if (!canCancel)
-                return false;
+            event.stopPropagation();
+            this.canCancelRows([row], opts)
+                .then(confirm => {
+                // If confirmed, loop
+                if (confirm)
+                    this.cancelExistingRow(event, row, { interactive: false });
+            });
+            return;
         }
         const keepEditing = row.editing && (!opts || opts.keepEditing !== false);
         this.editedRow = undefined; // unselect row
-        const cancelled = await row.cancel(); // TODO check this
-        if (!cancelled)
-            return false;
+        this._dataSource.cancelOrDelete(row);
         this.onCancelOrDeleteRow.next(row);
         // Mark row as pristine
-        await this.checkIfRowPristine(row);
+        this.checkIfRowPristine(row);
         // Restore editing state
         if (keepEditing) {
             this.editRow(undefined, row);
         }
-        return true;
     }
     async checkIfRowPristine(row, opts) {
         // Mark row as pristine
@@ -26153,7 +26129,7 @@ class AppTable {
     }
 }
 AppTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AppTable, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-AppTable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: AppTable, inputs: { settingsId: "settingsId", debug: "debug", i18nColumnPrefix: "i18nColumnPrefix", i18nColumnSuffix: "i18nColumnSuffix", autoLoad: "autoLoad", readOnly: "readOnly", inlineEdition: "inlineEdition", focusFirstColumn: "focusFirstColumn", confirmBeforeDelete: "confirmBeforeDelete", confirmBeforeCancel: "confirmBeforeCancel", undoableDeletion: "undoableDeletion", saveBeforeDelete: "saveBeforeDelete", keepEditedRowOnSave: "keepEditedRowOnSave", saveBeforeSort: "saveBeforeSort", saveBeforeFilter: "saveBeforeFilter", propagateRowError: "propagateRowError", defaultSortBy: "defaultSortBy", defaultSortDirection: "defaultSortDirection", defaultPageSize: "defaultPageSize", defaultPageSizeOptions: "defaultPageSizeOptions", focusColumn: "focusColumn", dataSource: "dataSource", filter: "filter", disabled: "disabled", paginator: "paginator" }, outputs: { onRefresh: "onRefresh", onOpenRow: "onOpenRow", onNewRow: "onNewRow", onStartEditingRow: "onStartEditingRow", onConfirmEditCreateRow: "onConfirmEditCreateRow", onCancelOrDeleteRow: "onCancelOrDeleteRow", onBeforeDeleteRows: "onBeforeDeleteRows", onBeforeCancelRows: "onBeforeCancelRows", onBeforeSave: "onBeforeSave", onAfterDeletedRows: "onAfterDeletedRows", onSort: "onSort", onDirty: "onDirty", onError: "onError" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "childPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0 });
+AppTable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: AppTable, inputs: { settingsId: "settingsId", debug: "debug", i18nColumnPrefix: "i18nColumnPrefix", i18nColumnSuffix: "i18nColumnSuffix", autoLoad: "autoLoad", readOnly: "readOnly", inlineEdition: "inlineEdition", focusFirstColumn: "focusFirstColumn", confirmBeforeDelete: "confirmBeforeDelete", confirmBeforeCancel: "confirmBeforeCancel", undoableDeletion: "undoableDeletion", saveBeforeDelete: "saveBeforeDelete", keepEditedRowOnSave: "keepEditedRowOnSave", saveBeforeSort: "saveBeforeSort", saveBeforeFilter: "saveBeforeFilter", propagateRowError: "propagateRowError", defaultSortBy: "defaultSortBy", defaultSortDirection: "defaultSortDirection", defaultPageSize: "defaultPageSize", defaultPageSizeOptions: "defaultPageSizeOptions", focusColumn: "focusColumn", dataSource: "dataSource", filter: "filter", disabled: "disabled", paginator: "paginator" }, outputs: { onRefresh: "onRefresh", onOpenIdAndRow: "onOpenIdAndRow", onOpenRow: "onOpenRow", onNewRow: "onNewRow", onStartEditingRow: "onStartEditingRow", onConfirmEditCreateRow: "onConfirmEditCreateRow", onCancelOrDeleteRow: "onCancelOrDeleteRow", onBeforeDeleteRows: "onBeforeDeleteRows", onBeforeCancelRows: "onBeforeCancelRows", onBeforeSave: "onBeforeSave", onAfterDeletedRows: "onAfterDeletedRows", onSort: "onSort", onDirty: "onDirty", onError: "onError" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "childPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AppTable, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined }, { type: EntitiesTableDataSource }, { type: undefined }]; }, propDecorators: { settingsId: [{
@@ -26204,6 +26180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 type: Input
             }], onRefresh: [{
                 type: Output
+            }], onOpenIdAndRow: [{
+                type: Output
             }], onOpenRow: [{
                 type: Output
             }], onNewRow: [{
@@ -26299,6 +26277,9 @@ class AppEditor {
     get saving() {
         return this.savingSubject.value || this.editors?.some(e => e.saving);
     }
+    get destroyed() {
+        return this.destroySubject?.closed !== false;
+    }
     get tables() {
         return this._children && this._children.filter(c => c instanceof AppTable);
     }
@@ -27557,11 +27538,23 @@ class AppEntityEditorModal extends AppTabEditor {
         // FOR DEV ONLY ----
         //this.debug = !environment.production;
     }
-    set isNewData(value) {
-        this._isNewData = value;
+    set isNew(value) {
+        this._isNew = value;
+    }
+    get isNew() {
+        return isNotNil(this._isNew) ? this._isNew : isNil(this.data?.id);
     }
+    /**
+     * @deprecated use isNew instead
+     */
     get isNewData() {
-        return isNotNil(this._isNewData) ? this._isNewData : isNil(this.data?.id);
+        return this.isNew;
+    }
+    /**
+     * @deprecated use isNew instead
+     */
+    set isNewData(value) {
+        this.isNew = value;
     }
     set disabled(value) {
         this._enabled = !value;
@@ -27893,7 +27886,7 @@ class AppEntityEditorModal extends AppTabEditor {
     }
 }
 AppEntityEditorModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AppEntityEditorModal, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-AppEntityEditorModal.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: AppEntityEditorModal, inputs: { data: "data", mobile: "mobile", usageMode: "usageMode", onAfterModalInit: "onAfterModalInit", onDelete: "onDelete", i18nSuffix: "i18nSuffix", isNewData: "isNewData", disabled: "disabled" }, usesInheritance: true, ngImport: i0 });
+AppEntityEditorModal.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: AppEntityEditorModal, inputs: { data: "data", mobile: "mobile", usageMode: "usageMode", onAfterModalInit: "onAfterModalInit", onDelete: "onDelete", i18nSuffix: "i18nSuffix", isNew: "isNew", isNewData: "isNewData", disabled: "disabled" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AppEntityEditorModal, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined }, { type: undefined, decorators: [{
@@ -27910,6 +27903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 type: Input
             }], i18nSuffix: [{
                 type: Input
+            }], isNew: [{
+                type: Input
             }], isNewData: [{
                 type: Input
             }], disabled: [{
@@ -30606,6 +30601,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
             args: [{ selector: 'app-data-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>Date field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"auto\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-field formControlName=\"empty\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"empty\"\n                                   placeholder=\"Date\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\n                              [required]=\"true\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"enable\"\n                                   placeholder=\"Date\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"disable\"\n                                   placeholder=\"Date\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- TimeZone  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  TimeZone\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>timezone=\"{{timezone}}\" value=\"{{stringify(form.controls.timezone.value)}}\"</pre></small>\n                  <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #mobileReadonlyField formControlName=\"readonly\"\n                              placeholder=\"Date\"\n                              [readonly]=\"true\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <hr/>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"empty\"\n                               placeholder=\"Date\"\n                               [mobile]=\"false\"\n                               [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\n                              [required]=\"true\"\n                              [mobile]=\"false\"\n                              [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"enable\"\n                                   placeholder=\"Date\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"disable\"\n                                   placeholder=\"Date\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- TimeZone  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  TimeZone\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>timezone=\"{{timezone}}\" value={{stringify(form.controls.timezone.value)}}</pre></small>\n                  <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"false\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #desktopReadonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n    </ion-grid>\n\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }]; } });
 
+class ObservableTestPage {
+    constructor() {
+        this._stopSubject = new Subject();
+        this.$value = new Subject();
+        this.runningTaskCount = 0;
+        this.taskId = 0;
+        this.options = {
+            stop: this._stopSubject
+        };
+    }
+    ngOnDestroy() {
+        this._stopSubject.next();
+    }
+    setOptions(opts) {
+        this.options = {
+            ...this.options,
+            ...opts
+        };
+        this.log('Options changes to: ', { ...this.options, stop: this.options?.stop ? '$stop' : 'null' });
+    }
+    setOptionsError(errorMessage) {
+        this.setOptions({ stopError: new Error(errorMessage) });
+    }
+    async firstNotNilPromise(opts) {
+        const logPrefix = `[firstNotNilPromise() #${++this.taskId}] `;
+        await this.execute(firstNotNilPromise, opts, logPrefix);
+    }
+    async waitForTrue(opts) {
+        const logPrefix = `[waitForTrue() #${++this.taskId}] `;
+        await this.execute(waitForTrue, opts, logPrefix);
+    }
+    async execute(fn, opts, logPrefix) {
+        opts = {
+            ...this.options,
+            stop: this._stopSubject,
+            ...opts
+        };
+        logPrefix = logPrefix || `[#${++this.taskId}] `;
+        const value$ = this.$value.pipe(tap(value => this.log(logPrefix + `Received value: ${value}`)));
+        try {
+            this.runningTaskCount++;
+            this.log(logPrefix + 'Waiting...');
+            // Execute the async function
+            const result = await fn(value$, opts);
+            // Dump result
+            if (isNotNil(result))
+                this.log(logPrefix + '[OK] with result:', result);
+            else
+                this.log(logPrefix + '[OK]');
+        }
+        catch (err) {
+            const errorMsg = logPrefix + 'Error: ' + (err?.message || '');
+            console.error(errorMsg, err);
+            this.log(errorMsg
+                + (err?.originalStack ? `<pre>${err.originalStack}</pre>` : ''));
+        }
+        finally {
+            this.runningTaskCount--;
+        }
+    }
+    emit(value) {
+        this.$value.next(value);
+    }
+    stop() {
+        this._stopSubject.next();
+    }
+    log(message, ...args) {
+        let fullMessage = `${toDateISOString(moment$7())} - ${message}`;
+        if (args?.length) {
+            fullMessage += ' - <small>' + args.map(JSON.stringify).join(', ') + '</small>';
+        }
+        this.appendLog(fullMessage);
+    }
+    appendLog(message) {
+        this.resultDiv.nativeElement.innerHTML += message + '<br/>';
+    }
+}
+ObservableTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ObservableTestPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ObservableTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ObservableTestPage, selector: "app-observable-test", viewQueries: [{ propertyName: "resultDiv", first: true, predicate: ["result"], descendants: true }], 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>Observables test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-card>\n    <ion-card-header>\n      <ion-card-title>waitFor, waitForTrue, waitForFalse</ion-card-title>\n    </ion-card-header>\n    <ion-card-content>\n      <div style=\"display: inline-block\">\n        <p>Set options: </p>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: false})\">stopError: false</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: true})\">stopError: true</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: 'my error'})\">stopError: 'my error'</ion-button>\n\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: 2000})\">timeout: 2000</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: null})\">timeout: null</ion-button>\n        <br/>\n        <p>Call await function: </p>\n        <ion-button (click)=\"waitForTrue()\">waitForTrue</ion-button>\n        <ion-button (click)=\"firstNotNilPromise()\">firstNotNilPromise</ion-button>\n        <br/>\n        <p>Send event to source: </p>\n        <ion-button (click)=\"emit(true)\">Emit 'true'</ion-button>\n        <ion-button (click)=\"emit(false)\">Emit 'false'</ion-button>\n        <br/>\n        <p>Stop: </p>\n        <ion-button color=\"danger\" (click)=\"stop()\">Stop</ion-button>\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <ion-card>\n    <ion-toolbar>\n      <ion-title>Running job count: {{runningTaskCount}}</ion-title>\n      <ion-button fill=\"outline\" slot=\"end\" (click)=\"result.innerHTML=''\">Clear log</ion-button>\n    </ion-toolbar>\n    <ion-card-content>\n      <div #result style=\"color: var(--ion-color-medium)\">\n      </div>\n    </ion-card-content>\n  </ion-card>\n</ion-content>\n", styles: ["ion-button{text-transform:none!important}\n"], dependencies: [{ kind: "component", type: i2.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ObservableTestPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-observable-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>Observables test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <ion-card>\n    <ion-card-header>\n      <ion-card-title>waitFor, waitForTrue, waitForFalse</ion-card-title>\n    </ion-card-header>\n    <ion-card-content>\n      <div style=\"display: inline-block\">\n        <p>Set options: </p>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: false})\">stopError: false</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: true})\">stopError: true</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({stopError: 'my error'})\">stopError: 'my error'</ion-button>\n\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: 2000})\">timeout: 2000</ion-button>\n        <ion-button color=\"medium\" fill=\"outline\" (click)=\"setOptions({timeout: null})\">timeout: null</ion-button>\n        <br/>\n        <p>Call await function: </p>\n        <ion-button (click)=\"waitForTrue()\">waitForTrue</ion-button>\n        <ion-button (click)=\"firstNotNilPromise()\">firstNotNilPromise</ion-button>\n        <br/>\n        <p>Send event to source: </p>\n        <ion-button (click)=\"emit(true)\">Emit 'true'</ion-button>\n        <ion-button (click)=\"emit(false)\">Emit 'false'</ion-button>\n        <br/>\n        <p>Stop: </p>\n        <ion-button color=\"danger\" (click)=\"stop()\">Stop</ion-button>\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <ion-card>\n    <ion-toolbar>\n      <ion-title>Running job count: {{runningTaskCount}}</ion-title>\n      <ion-button fill=\"outline\" slot=\"end\" (click)=\"result.innerHTML=''\">Clear log</ion-button>\n    </ion-toolbar>\n    <ion-card-content>\n      <div #result style=\"color: var(--ion-color-medium)\">\n      </div>\n    </ion-card-content>\n  </ion-card>\n</ion-content>\n", styles: ["ion-button{text-transform:none!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { resultDiv: [{
+                type: ViewChild,
+                args: ['result']
+            }] } });
+
 const SHARED_MATERIAL_TESTING_PAGES = [
     { label: 'Shared Material components', divider: true },
     { label: 'Date/Time field', page: '/testing/shared/datetime' },
@@ -30616,7 +30698,9 @@ const SHARED_MATERIAL_TESTING_PAGES = [
     { label: 'Swipe component', page: '/testing/shared/swipe' },
     { label: 'Chips component', page: '/testing/shared/chips' },
     { label: 'Shared directives', divider: true },
-    { label: 'Badge icon directive', page: '/testing/shared/badge-icon' }
+    { label: 'Badge directive', page: '/testing/shared/badge' },
+    { label: 'Shared utils', divider: true },
+    { label: 'Observable', page: '/testing/shared/observable' }
 ];
 const routes$7 = [
     {
@@ -30624,6 +30708,11 @@ const routes$7 = [
         pathMatch: 'full',
         component: SharedTestsPage
     },
+    {
+        path: 'observable',
+        pathMatch: 'full',
+        component: ObservableTestPage
+    },
     {
         path: 'autocomplete',
         pathMatch: 'full',
@@ -30675,7 +30764,8 @@ MaterialTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         NumpadTestPage,
         SwipeTestPage,
         ChipsTestPage,
-        MatBadgeTestPage], imports: [CommonModule,
+        MatBadgeTestPage,
+        ObservableTestPage], imports: [CommonModule,
         IonicModule,
         ReactiveFormsModule,
         SharedMaterialModule, i1$1.TranslateModule, i1$5.RouterModule, SharedPipesModule], exports: [SharedMaterialModule,
@@ -30686,7 +30776,8 @@ MaterialTestingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         LatLongTestPage,
         NumpadTestPage,
         SwipeTestPage,
-        ChipsTestPage] });
+        ChipsTestPage,
+        ObservableTestPage] });
 MaterialTestingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: MaterialTestingModule, imports: [CommonModule,
         IonicModule,
         ReactiveFormsModule,
@@ -30715,7 +30806,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                         NumpadTestPage,
                         SwipeTestPage,
                         ChipsTestPage,
-                        MatBadgeTestPage
+                        MatBadgeTestPage,
+                        ObservableTestPage
                     ],
                     exports: [
                         SharedMaterialModule,
@@ -30726,7 +30818,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                         LatLongTestPage,
                         NumpadTestPage,
                         SwipeTestPage,
-                        ChipsTestPage
+                        ChipsTestPage,
+                        ObservableTestPage
                     ]
                 }]
         }] });