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

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

@@ -57,8 +57,8 @@ import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUT
 import { __awaiter, __decorate, __param } from 'tslib';
 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 === null || opts === void 0 ? void 0 : opts.stop) || ((opts === null || opts === void 0 ? void 0 : 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 === null || opts === void 0 ? void 0 : opts.stop) || ((opts === null || opts === void 0 ? void 0 : 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, Object.assign({ stopError: true }, opts)).toPromise();
@@ -898,9 +906,8 @@ function waitForTrue(observable, opts) {
     opts = Object.assign({ 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();
 }
@@ -914,7 +921,7 @@ function createPromiseEventEmitter() {
     return new EventEmitter(true);
 }
 function createPromiseEvent(eventType, promise, initArg) {
-    const detail = Object.assign(Object.assign({}, (initArg && initArg.detail || {})), promise);
+    const detail = Object.assign(Object.assign({}, ((initArg === null || initArg === void 0 ? void 0 : initArg.detail) || {})), promise);
     return new CustomEvent(eventType, { detail });
 }
 function emitPromiseEvent(emitter, eventType, initArg) {
@@ -2268,8 +2275,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());
@@ -2289,8 +2295,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))
@@ -4537,7 +4542,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;
@@ -8866,8 +8871,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());
@@ -13047,7 +13051,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')),
@@ -13065,7 +13069,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);
@@ -14711,6 +14715,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) {
@@ -14725,6 +14731,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;
@@ -14763,7 +14770,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
@@ -14772,7 +14780,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 {
@@ -14790,6 +14799,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) {
@@ -14800,6 +14811,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([
@@ -19698,8 +19710,6 @@ class InMemoryEntitiesService extends StartableObservableService {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.debug)
                 console.debug('[memory-data-service] Stopping...');
-            this.dataSubject.complete();
-            this.dataSubject.unsubscribe();
             this._hiddenData = null;
             this.markAsSaved();
             this.markAsPristine();
@@ -19829,10 +19839,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));
     }
     saveAll(data, options) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -19903,6 +19913,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() {
         var _a;
         return (((_a = this.dataSubject.value) === null || _a === void 0 ? void 0 : _a.length) || 0);
@@ -20212,14 +20230,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);
@@ -20243,15 +20260,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];
     }
-    computeLegend() {
-        return this.colorArray.map((color, index) => {
+    getLegendAtIndex(index) {
+        return this._legendItems[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}`
             };
         });
@@ -20260,12 +20283,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
@@ -20273,28 +20294,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
  *
@@ -20307,34 +20306,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 {
@@ -20345,10 +20336,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 = [
@@ -20365,23 +20354,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;
 }
 
@@ -20857,6 +20829,10 @@ class AppForm {
                 this.markForCheck();
         }
     }
+    get destroyed() {
+        var _a;
+        return ((_a = this.destroySubject) === null || _a === void 0 ? void 0 : _a.closed) !== false;
+    }
     set form(value) {
         this.setForm(value);
     }
@@ -23759,7 +23735,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
     }
     ;
 }
@@ -25114,6 +25090,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();
@@ -25260,7 +25237,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 ((_a = this.editedRow) === null || _a === void 0 ? void 0 : _a.editing) {
-                this.editedRow.cancelOrDelete();
+                this.dataSource.cancelOrDelete(this.editedRow);
                 // Mark row as pristine
                 this.checkIfRowPristine(this.editedRow, { emitEvent: false });
             }
@@ -25364,6 +25341,10 @@ class AppTable {
     get paginator() {
         return this._paginator || this.childPaginator;
     }
+    get destroyed() {
+        var _a;
+        return ((_a = this.destroySubject) === null || _a === void 0 ? void 0 : _a.closed) !== false;
+    }
     ngOnInit() {
         var _a;
         if (this._initialized)
@@ -25399,17 +25380,11 @@ class AppTable {
         // Propagate row dirty state to table
         this.registerSubscription(this.onStartEditingRow
             .pipe(filter(row => (row === null || row === void 0 ? void 0 : 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
@@ -25541,41 +25516,40 @@ class AppTable {
         }
     }
     confirmAndAdd(event, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const confirmed = yield this.confirmEditCreate(event, row);
-            if (!confirmed)
-                return false;
-            // Add row
-            return this.addRow(event);
-        });
+        if (row && !this.confirmEditCreate(event, row)) {
+            return false;
+        }
+        // Add row
+        return this.addRow(event);
     }
     confirmAndBackward(event, row) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            // Deleting edited row, if empty and not dirty
-            const previousRow = this.editedRow;
-            if (previousRow && (previousRow.id === -1) && ((_a = previousRow.validator) === null || _a === void 0 ? void 0 : _a.invalid) && !(previousRow.dirty)) {
-                const deleted = this.deleteNew(event, previousRow);
-                if (!deleted)
-                    return false;
-                // Wait deletion is done, then edit previous row (by id, because of reloading)
-                yield this.waitIdle();
-            }
-            // Edit previous row
-            return this.startEditRow(event, row, { focusColumn: this.lastUserColumn });
-        });
+        var _a, _b;
+        // Deleting edited row, if empty and not dirty
+        const previousRow = this.editedRow;
+        if (previousRow && (previousRow.id === -1) && ((_a = previousRow.validator) === null || _a === void 0 ? void 0 : _a.invalid) && !((_b = previousRow.validator) === null || _b === void 0 ? void 0 : _b.dirty)) {
+            this.deleteNewRow(event, previousRow);
+            // Wait deletion is done, then edit previous row (by id, because of reloading)
+            this.waitIdle()
+                .then(() => this.editRowById(event, row.id, { focusColumn: this.lastUserColumn }));
+            return true;
+        }
+        // Edit previous row
+        this.editRow(event, row, { focusColumn: this.lastUserColumn });
+        return true;
     }
     confirmAndForward(event, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            row = row || this.editedRow;
-            const confirmed = yield this.confirmEditCreate(event, row);
-            // Cannot confirm previous row: skip
-            if (!confirmed)
-                return false;
-            // Edit next row
-            this.startEditRowById(null, row.id + 1, { focusColumn: this.firstUserColumn });
-            return true;
-        });
+        var _a;
+        row = row || this.editedRow;
+        if (!this.confirmEditCreate(event, row)) {
+            // If pending: Wait end of validation, then loop
+            if ((_a = row.validator) === null || _a === void 0 ? void 0 : _a.pending) {
+                return AppFormUtils.waitWhilePending(row.validator).then(() => this.confirmAndForward(event, row));
+            }
+            return false;
+        }
+        // Edit next row
+        this.editRowById(event, row.id + 1, { focusColumn: this.firstUserColumn });
+        return true;
     }
     /**
      * Confirm the creation of the given row, or if not specified the currently edited row
@@ -25584,64 +25558,65 @@ class AppTable {
      * @param row
      */
     confirmEditCreate(event, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            row = row || this.editedRow;
-            if (!row || !row.editing)
-                return true; // no row to confirm
-            // Stop event
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-            event === null || event === void 0 ? void 0 : event.stopPropagation();
-            // Confirmation edition or creation
-            const confirmed = yield row.confirmEditCreate();
-            if (confirmed) {
-                // If edit finished, forget edited row
-                if (row === this.editedRow) {
-                    this.editedRow = undefined;
-                }
-                // Mark table as dirty (if row is dirty)
-                if (row.dirty) {
-                    this.markAsDirty({ emitEvent: false /* because of resetError() */ });
-                }
-                // Clear error
-                this.resetError();
-                // Emit the confirm event
-                this.onConfirmEditCreateRow.next(row);
-                return true; // Continue
+        row = row || this.editedRow;
+        if (!row || !row.editing)
+            return true; // no row to confirm
+        // Stop event
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        // Confirmation edition or creation
+        // TODO: add await ?
+        const confirmed = row.confirmEditCreate();
+        if (confirmed) {
+            // If edit finished, forget edited row
+            if (row === this.editedRow) {
+                this.editedRow = undefined;
             }
-            // Not conformed + validator
-            else if (row.validator) {
-                // NOT confirmed = row has error
-                if (this.debug) {
-                    console.warn('[table] Cannot confirm row, because invalid');
-                    AppFormUtils.logFormErrors(row.validator, '[table] ');
-                }
-                // fix: mark all controls as touched to show errors
-                row.validator.markAllAsTouched();
-                // Compute row error, and propagate to table's error
-                if (this.propagateRowError) {
-                    const error = this.getRowError(row);
-                    this.setError(error);
-                }
+            // Mark table as dirty (if row is dirty)
+            if (row.dirty) {
+                this.markAsDirty({ emitEvent: false /* because of resetError() */ });
             }
-            // Not confirmed
-            return false;
-        });
-    }
-    cancelOrDelete(event, row, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Delete new row
-            if (row.id === -1) {
-                return this.deleteNew(event, row);
+            // Clear error
+            this.resetError();
+            // Emit the confirm event
+            this.onConfirmEditCreateRow.next(row);
+            return true; // Continue
+        }
+        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;
             }
-            // Delete existing (but not editing) row
-            else if (!row.editing) {
-                return this.deleteExisting(event, row, opts);
+            // NOT confirmed = row has error
+            if (this.debug) {
+                console.warn('[table] Cannot confirm row, because invalid');
+                AppFormUtils.logFormErrors(row.validator, '[table] ');
             }
-            // Cancel existing (and editing) row
-            else {
-                return this.cancelExisting(event, row, opts);
+            // fix: mark all controls as touched to show errors
+            row.validator.markAllAsTouched();
+            // Compute row error, and propagate to table's error
+            if (this.propagateRowError) {
+                const error = this.getRowError(row);
+                this.setError(error);
             }
-        });
+        }
+        // Not confirmed
+        return false;
+    }
+    cancelOrDelete(event, row, opts) {
+        // Delete new row
+        if (row.id === -1) {
+            this.deleteNewRow(event, row);
+        }
+        // Delete existing (bu not editing) row
+        else if (!row.editing) {
+            this.deleteExistingRow(event, row, opts);
+        }
+        // Cancel existing (and editing) row
+        else {
+            this.cancelExistingRow(event, row, opts);
+        }
     }
     addRow(event, insertAt, opts) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -25655,11 +25630,11 @@ class AppTable {
                 return false;
             }
             // Try to finish edited row first
-            const confirmed = yield this.confirmEditCreate();
-            if (!confirmed)
+            if (!this.confirmEditCreate()) {
                 return false;
-            // Create a new row
-            const row = yield this.createNewRow(insertAt, opts);
+            }
+            // Add new row
+            const row = yield this.addRowToTable(insertAt, opts);
             return !!row;
         });
     }
@@ -25702,30 +25677,29 @@ class AppTable {
         });
     }
     cancel(event, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Check confirmation
-            if ((!opts || opts.interactive !== false) && this.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observers.length > 0)) {
-                event === null || event === void 0 ? void 0 : event.stopPropagation();
-                const canCancel = yield this.canCancelRows();
-                if (!canCancel)
-                    return false;
-            }
-            this.onRefresh.emit();
-            return true;
-        });
+        // Check confirmation
+        if ((!opts || opts.interactive !== false) && this.dirty && (this.confirmBeforeCancel || this.onBeforeCancelRows.observers.length > 0)) {
+            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            this.canCancelRows().then(confirm => {
+                // If confirmed, loop
+                if (confirm)
+                    this.cancel(null, { interactive: false });
+            });
+            return;
+        }
+        this.onRefresh.emit();
     }
     duplicateRow(event, row, opts) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             event === null || event === void 0 ? void 0 : event.stopPropagation();
             row = row || this.singleSelectedRow;
-            if (!row)
-                return false; // No row, or too many row
-            // Confirm the source row
-            const confirmed = yield this.confirmEditCreate(event, row);
-            if (!confirmed)
+            if (!row || !this.confirmEditCreate(event, row)) {
                 return false;
+            }
             const newRow = yield this.addRowToTable(row.id + 1);
+            if (!newRow)
+                throw new Error('Cannot add new row to table');
             const json = Object.assign(Object.assign({}, row.currentData), { id: null });
             // Reset some properties (e.g. rankOrder, etc)
             if (opts && opts.skipProperties) {
@@ -25796,8 +25770,9 @@ class AppTable {
     deleteRows(event, rows, opts) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.readOnly)
+            if (this.readOnly) {
                 throw { code: ErrorCodes.TABLE_READ_ONLY, message: 'ERROR.TABLE_READ_ONLY' };
+            }
             if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                 return 0; // SKip
             event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -25833,7 +25808,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);
@@ -25843,7 +25818,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
@@ -25855,8 +25830,10 @@ class AppTable {
                 if (deletedRows.length || tempRows.length) {
                     // Save data (e.g. when using memory service)
                     const saved = yield 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 {
@@ -25870,7 +25847,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();
@@ -25911,43 +25888,37 @@ class AppTable {
         });
     }
     clickRow(event, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Wait while loading
-            if (this.loading) {
-                if (this.debug)
-                    console.debug("[table] Waiting before apply clickRow() (datasource is busy)...");
-                yield this.waitIdle();
-            }
-            // DEBUG
-            //console.debug("[table] Detect click on row");
-            if (row.id === -1 || row.editing)
-                return true; // Already in edition
-            if (event === null || event === void 0 ? void 0 : 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 {
-                if (event) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                }
-                this.markAsLoading();
-                try {
-                    return this.openRowDetail(row);
-                }
-                finally {
-                    this.markAsLoaded();
-                }
+        if (this.loading) {
+            // Wait while loading, and loop
+            if (this.debug)
+                console.debug("[table] Waiting before apply clickRow() (datasource is busy)...");
+            this.waitIdle().then(() => this.clickRow(event, row));
+            return false;
+        }
+        // DEBUG
+        //console.debug("[table] Detect click on row");
+        if (row.id === -1 || row.editing)
+            return true; // Already in edition
+        if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
+            return false; // Cancelled by event
+        // Open the detail page (if not inline editing)
+        if (!this.inlineEdition) {
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
             }
-        });
+            this.markAsLoading();
+            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*/ });
     }
     moveRow(id, direction) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.dataSource.move(id, direction);
-        });
+        this.dataSource.move(id, direction);
     }
     ready(opts) {
         return waitForTrue(this.readySubject, opts);
@@ -26007,35 +25978,41 @@ class AppTable {
         }));
     }
     escapeEditingRow(event, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            row = row || this.editedRow;
-            if (!row || !row.editing)
-                return;
-            // DEBUG
-            //console.debug('[app-table] Cancel the row (keydown.escape)');
-            if (event) {
-                // Avoid to cancel the editor
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            // If new row (no id)
-            if (row.id === -1) {
-                const valid = yield row.isValid();
+        row = row || this.editedRow;
+        if (!row || !row.editing)
+            return;
+        // DEBUG
+        //console.debug('[app-table] Cancel the row (keydown.escape)');
+        if (event) {
+            // Avoid to cancel the editor
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        // If new row (no id)
+        if (row.id === -1) {
+            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 (!valid) {
-                    return this.deleteNew(event, 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 });
-                }
+        }
+        // If the row exists (has an id)
+        else {
+            // need to call cancel function (if confirmation will be call before before)
+            if (this.confirmBeforeCancel) {
+                this.cancelExistingRow(event, row, { keepEditing: false });
+                return;
             }
-            // By default, try to confirm the row
-            return this.confirmEditCreate(event, row);
-        });
+        }
+        // By default, try to confirm the row
+        this.confirmEditCreate(event, row);
     }
     translateControlPath(path) {
         var _a;
@@ -26045,27 +26022,23 @@ class AppTable {
         return ((_a = this.translate) === null || _a === void 0 ? void 0 : _a.instant(i18nColumnKey)) || i18nColumnKey;
     }
     /* -- protected method -- */
-    startEditRow(event, row, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._enabled)
-                return false;
-            if (this.editedRow === row)
-                return true; // Already the edited row
-            if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
-                return false;
-            const confirmed = yield this.confirmEditCreate();
-            if (!confirmed)
-                return false;
-            if (!row.editing && !this.loading) {
-                this.focusColumn = opts && opts.focusColumn || this.focusColumn;
-                const started = yield row.startEdit();
-                if (!started)
-                    return false;
-            }
-            this.editedRow = row;
-            this.onStartEditingRow.emit(row);
-            return true;
-        });
+    editRow(event, row, opts) {
+        if (!this._enabled)
+            return false;
+        if (this.editedRow === row)
+            return true; // Already the edited row
+        if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
+            return false;
+        if (!this.confirmEditCreate()) {
+            return false;
+        }
+        if (!row.editing && !this.loading) {
+            this.focusColumn = opts && opts.focusColumn || this.focusColumn;
+            this._dataSource.startEdit(row);
+        }
+        this.editedRow = row;
+        this.onStartEditingRow.emit(row);
+        return true;
     }
     /**
      * Try to select row, by row.id, or by data. WIll use EntityUtils.equals()
@@ -26135,7 +26108,7 @@ class AppTable {
     canCancelRows(rows, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             // Get dirty rows
-            rows = rows || this.dataSource.getRows().filter(row => row.dirty);
+            rows = rows || this.dataSource.getRows().filter(row => { var _a; return (_a = row.validator) === null || _a === void 0 ? void 0 : _a.dirty; });
             if (isEmptyArray(rows))
                 return true; // No dirty: OK
             // Check using emitter
@@ -26220,27 +26193,32 @@ class AppTable {
      * @param row
      * @protected
      */
-    openRowDetail(row) {
+    openRow(id, row) {
         return __awaiter(this, void 0, void 0, function* () {
-            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;
+            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;
         });
     }
     openNewRowDetail(event) {
@@ -26332,9 +26310,14 @@ class AppTable {
         //if (this.debug) console.debug("[table] id = " + id);
         return id;
     }
-    createNewRow(insertAt, opts) {
+    addRowToTable(insertAt, opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            const row = yield this._dataSource.createNew(insertAt, opts && { editing: opts.editing });
+            // 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 = yield this._dataSource.createNew(insertAt, { editing: opts === null || opts === void 0 ? void 0 : opts.editing });
             if (!row)
                 return undefined;
             if (row.editing) {
@@ -26465,28 +26448,6 @@ class AppTable {
             (_a = row.validator) === null || _a === void 0 ? void 0 : _a.markAsDirty(opts);
         this.markAsDirty(opts);
     }
-    /**
-     * @deprecated Use startEditRow instead
-     */
-    editRow(event, row, opts) {
-        return this.startEditRow(event, row, opts);
-    }
-    /**
-     * @deprecated use openRowDetail() instead)
-     */
-    openRow(id, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.openRowDetail(row);
-        });
-    }
-    /**
-     * @deprecated use createNewRow() instead
-     */
-    addRowToTable(insertAt, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.createNewRow(insertAt, opts);
-        });
-    }
     /* -- private method -- */
     listenSortAndPaginationEvents() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -26526,18 +26487,16 @@ class AppTable {
             }
         });
     }
-    startEditRowById(event, id, opts) {
+    editRowById(event, id, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             if (id < 0)
-                return false; // Invalid row id
+                return;
             if (id >= this.visibleRowCount) {
-                return this.addRow(event, undefined, Object.assign(Object.assign({}, opts), { editing: true }));
+                this.addRow(event, undefined, Object.assign(Object.assign({}, opts), { editing: true }));
             }
             else {
-                const row = this.dataSource.getRow(id);
-                if (!row)
-                    return false;
-                return this.startEditRow(event, row, opts);
+                const row = yield this.dataSource.getRow(id);
+                this.editRow(event, row, opts);
             }
         });
     }
@@ -26549,63 +26508,53 @@ class AppTable {
             }
         }
     }
-    deleteNew(event, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Make sure row will be cancelled, and NOT deleted
-            if (row.id !== -1)
-                throw new Error('Row must have id = -1');
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-            event === null || event === void 0 ? void 0 : event.stopPropagation();
-            const deleted = yield this._dataSource.cancelOrDelete(row);
-            if (!deleted)
-                return false;
-            this.selection.clear();
-            this.editedRow = undefined; // unselect row
-            this.onCancelOrDeleteRow.next(row);
-            this.resetError();
-            this.totalRowCount--;
-            this.visibleRowCount--;
-            return true;
-        });
-    }
-    deleteExisting(event, row, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Make sure row will be cancelled, and NOT deleted
-            if (row.id === -1)
-                throw new Error('Row must have an id');
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-            event === null || event === void 0 ? void 0 : event.stopPropagation();
-            return this.deleteRow(null, row, opts);
-        });
-    }
-    cancelExisting(event, row, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // 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 === null || event === void 0 ? void 0 : event.preventDefault();
-                event === null || event === void 0 ? void 0 : event.stopPropagation();
-                const canCancel = yield this.canCancelRows([row], opts);
-                if (!canCancel)
-                    return false;
-            }
-            const keepEditing = row.editing && (!opts || opts.keepEditing !== false);
-            this.editedRow = undefined; // unselect row
-            const cancelled = yield row.cancel(); // TODO check this
-            if (!cancelled)
-                return false;
-            this.onCancelOrDeleteRow.next(row);
-            // Mark row as pristine
-            yield this.checkIfRowPristine(row);
-            // Restore editing state
-            if (keepEditing) {
-                this.editRow(undefined, row);
-            }
-            return true;
-        });
+    deleteNewRow(event, row) {
+        if (row.id !== -1)
+            throw new Error('Row must have id = -1');
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        this.selection.clear();
+        this.editedRow = undefined; // unselect row
+        this._dataSource.cancelOrDelete(row);
+        this.onCancelOrDeleteRow.next(row);
+        this.resetError();
+        this.totalRowCount--;
+        this.visibleRowCount--;
+    }
+    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 === null || event === void 0 ? void 0 : event.defaultPrevented)
+            return 0; // SKip
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.deleteRow(null, 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.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
+        this._dataSource.cancelOrDelete(row);
+        this.onCancelOrDeleteRow.next(row);
+        // Mark row as pristine
+        this.checkIfRowPristine(row);
+        // Restore editing state
+        if (keepEditing) {
+            this.editRow(undefined, row);
+        }
     }
     checkIfRowPristine(row, opts) {
         var _a, _b;
@@ -26711,7 +26660,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: [{
@@ -26762,6 +26711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 type: Input
             }], onRefresh: [{
                 type: Output
+            }], onOpenIdAndRow: [{
+                type: Output
             }], onOpenRow: [{
                 type: Output
             }], onNewRow: [{
@@ -26858,6 +26809,10 @@ class AppEditor {
         var _a;
         return this.savingSubject.value || ((_a = this.editors) === null || _a === void 0 ? void 0 : _a.some(e => e.saving));
     }
+    get destroyed() {
+        var _a;
+        return ((_a = this.destroySubject) === null || _a === void 0 ? void 0 : _a.closed) !== false;
+    }
     get tables() {
         return this._children && this._children.filter(c => c instanceof AppTable);
     }
@@ -28173,12 +28128,24 @@ class AppEntityEditorModal extends AppTabEditor {
         // FOR DEV ONLY ----
         //this.debug = !environment.production;
     }
-    set isNewData(value) {
-        this._isNewData = value;
+    set isNew(value) {
+        this._isNew = value;
     }
-    get isNewData() {
+    get isNew() {
         var _a;
-        return isNotNil(this._isNewData) ? this._isNewData : isNil((_a = this.data) === null || _a === void 0 ? void 0 : _a.id);
+        return isNotNil(this._isNew) ? this._isNew : isNil((_a = this.data) === null || _a === void 0 ? void 0 : _a.id);
+    }
+    /**
+     * @deprecated use isNew instead
+     */
+    get isNewData() {
+        return this.isNew;
+    }
+    /**
+     * @deprecated use isNew instead
+     */
+    set isNewData(value) {
+        this.isNew = value;
     }
     set disabled(value) {
         this._enabled = !value;
@@ -28532,7 +28499,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 () {
@@ -28551,6 +28518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 type: Input
             }], i18nSuffix: [{
                 type: Input
+            }], isNew: [{
+                type: Input
             }], isNewData: [{
                 type: Input
             }], disabled: [{
@@ -31328,6 +31297,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) {
+        var _a;
+        this.options = Object.assign(Object.assign({}, this.options), opts);
+        this.log('Options changes to: ', Object.assign(Object.assign({}, this.options), { stop: ((_a = this.options) === null || _a === void 0 ? void 0 : _a.stop) ? '$stop' : 'null' }));
+    }
+    setOptionsError(errorMessage) {
+        this.setOptions({ stopError: new Error(errorMessage) });
+    }
+    firstNotNilPromise(opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const logPrefix = `[firstNotNilPromise() #${++this.taskId}] `;
+            yield this.execute(firstNotNilPromise, opts, logPrefix);
+        });
+    }
+    waitForTrue(opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const logPrefix = `[waitForTrue() #${++this.taskId}] `;
+            yield this.execute(waitForTrue, opts, logPrefix);
+        });
+    }
+    execute(fn, opts, logPrefix) {
+        return __awaiter(this, void 0, void 0, function* () {
+            opts = Object.assign(Object.assign(Object.assign({}, 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 = yield 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 === null || err === void 0 ? void 0 : err.message) || '');
+                console.error(errorMsg, err);
+                this.log(errorMsg
+                    + ((err === null || err === void 0 ? void 0 : 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 === null || args === void 0 ? void 0 : 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' },
@@ -31338,7 +31394,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 = [
     {
@@ -31346,6 +31404,11 @@ const routes$7 = [
         pathMatch: 'full',
         component: SharedTestsPage
     },
+    {
+        path: 'observable',
+        pathMatch: 'full',
+        component: ObservableTestPage
+    },
     {
         path: 'autocomplete',
         pathMatch: 'full',
@@ -31397,7 +31460,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,
@@ -31408,7 +31472,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,
@@ -31437,7 +31502,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                         NumpadTestPage,
                         SwipeTestPage,
                         ChipsTestPage,
-                        MatBadgeTestPage
+                        MatBadgeTestPage,
+                        ObservableTestPage
                     ],
                     exports: [
                         SharedMaterialModule,
@@ -31448,7 +31514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                         LatLongTestPage,
                         NumpadTestPage,
                         SwipeTestPage,
-                        ChipsTestPage
+                        ChipsTestPage,
+                        ObservableTestPage
                     ]
                 }]
         }] });