@sumaris-net/ngx-components 2.6.21 → 2.6.22

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Directive, Injectable, EventEmitter, Output, Pipe, ChangeDetectorRef, forwardRef, Component, ChangeDetectionStrategy, Inject, Optional, Input, ViewChild, NgModule, HostBinding, HostListener, ElementRef, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, ANIMATION_MODULE_TYPE, ViewEncapsulation, APP_INITIALIZER } from '@angular/core';
-import { firstValueFrom, shareReplay, tap, of, timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, from, noop as noop$9, Observable, forkJoin, defer, fromEventPattern, interval, combineLatest, mergeMap as mergeMap$1, EMPTY } from 'rxjs';
+import { firstValueFrom, shareReplay, tap, of, timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, from, noop as noop$9, Observable, forkJoin, defer, timeout, fromEventPattern, interval, combineLatest, mergeMap as mergeMap$1, EMPTY } from 'rxjs';
 import { catchError, filter, map, takeUntil, first, switchMap, tap as tap$1, debounceTime, startWith, distinctUntilChanged, mergeMap, throttleTime, skip, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
 import * as i2 from '@angular/common/http';
 import { HttpEventType, HttpClient, HttpHeaders, HttpResponse, HttpClientModule } from '@angular/common/http';
@@ -15155,14 +15155,12 @@ class HttpUtils {
         opts = opts || { responseType: 'text' };
         // Force no cache
         if (opts.nocache === true) {
-            opts.headers = (opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers));
-            opts.headers
-                .append('Cache-Control', 'no-cache')
-                .append('Pragma', 'no-cache');
+            opts.headers = opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers);
+            opts.headers.append('Cache-Control', 'no-cache').append('Pragma', 'no-cache');
         }
         // Use web http client
         try {
-            return (await http.get(uri, { ...opts, responseType: 'text' }).toPromise());
+            return await firstValueFrom(http.get(uri, { ...opts, responseType: 'text' }));
         }
         catch (err) {
             if (err && err.message) {
@@ -15179,14 +15177,19 @@ class HttpUtils {
         opts = opts || {};
         // Force no cache
         if (opts.nocache === true) {
-            opts.headers = (opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers));
-            opts.headers
-                .append('Cache-Control', 'no-cache')
-                .append('Pragma', 'no-cache');
+            opts.headers = opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers);
+            opts.headers.append('Cache-Control', 'no-cache').append('Pragma', 'no-cache');
         }
         // Use web http client
         try {
-            return (await http.get(uri, { ...opts, responseType: 'json' }).toPromise());
+            let result;
+            if (opts.timeout) {
+                result = http.get(uri, { ...opts, responseType: 'json' }).pipe(timeout(opts?.timeout));
+            }
+            else {
+                result = http.get(uri, { ...opts, responseType: 'json' });
+            }
+            return await firstValueFrom(result);
         }
         catch (err) {
             if (err && err.message) {
@@ -15646,20 +15649,19 @@ const NetworkRefreshTimerPeriod = {
     DESKTOP: 1000 * 60 * 5 /* every 5 min */,
 };
 const PEER_URL_REGEXP = /^(http|https):\/\/[^ "?#@]+$/;
+const NETWORK_DEFAULT_CONNECTION_TIMEOUT = 10000; // 10s - /!\ should be high (e.g. for poor connection)
 /* -- DEV only (to debug refresh timer)
-const NetworkRefreshTimerPeriod = {
-    MOBILE:  1000,
-    DESKTOP: 1000
-}*/
+NetworkRefreshTimerPeriod.MOBILE =  1000;
+NetworkRefreshTimerPeriod.DESKTOP =  1000; */
 class NetworkService extends StartableObservableService {
-    constructor(platform, modalCtrl, storage, settings, cache, http, _document, environment, loggingService, network, translate, toastController) {
+    constructor(_document, platform, modalCtrl, storage, settings, cache, http, environment, loggingService, network, translate, toastController) {
         super(platform);
+        this._document = _document;
         this.modalCtrl = modalCtrl;
         this.storage = storage;
         this.settings = settings;
         this.cache = cache;
         this.http = http;
-        this._document = _document;
         this.environment = environment;
         this.loggingService = loggingService;
         this.translate = translate;
@@ -15669,6 +15671,7 @@ class NetworkService extends StartableObservableService {
         this.onResetNetworkCache = new EventEmitter(true);
         this._listeners = {};
         this._mobile = this.settings.mobile;
+        this._connectionTimeout = environment.connectionTimeout || NETWORK_DEFAULT_CONNECTION_TIMEOUT;
         this._logger = this.loggingService?.getLogger('network');
         if (this._mobile) {
             this._timerRefreshPeriod = NetworkRefreshTimerPeriod.MOBILE;
@@ -15694,9 +15697,9 @@ class NetworkService extends StartableObservableService {
     }
     get connectionType() {
         // If force offline: return 'none'
-        return this._forceOffline && 'none'
+        return this._forceOffline ? 'none'
             // Else, return device connection type (or unknown)
-            || (this.started && this._deviceConnectionType || 'unknown');
+            : (this.started && this._deviceConnectionType || 'unknown');
     }
     get peer() {
         return this.dataSubject.value?.clone();
@@ -15704,6 +15707,9 @@ class NetworkService extends StartableObservableService {
     set peer(peer) {
         this.restart(peer);
     }
+    get connectionTimeout() {
+        return this._connectionTimeout;
+    }
     /**
      * Register to network event
      *
@@ -15836,7 +15842,7 @@ class NetworkService extends StartableObservableService {
      * @param peer
      * @param opts
      */
-    async checkPeerAlive(peer, opts) {
+    async checkPeerAlive(peer) {
         peer = peer || this.peer;
         if (!peer) {
             const settings = await this.settings.ready();
@@ -15844,13 +15850,15 @@ class NetworkService extends StartableObservableService {
                 return undefined; // No peer define. Skip
             peer = Peer.parseUrl(settings.peerUrl);
         }
-        return this.getNodeInfo(peer);
+        return this.getNodeInfo(peer, { nocache: true, timeout: this._connectionTimeout });
     }
     async checkPeerCompatible(peerInfo, opts) {
+        if (!peerInfo)
+            return false; // Peer cannot be reached
         if (!this.environment.peerMinVersion)
             return true; // Skip compatibility check
         // Check the min pod version, defined by the app
-        const isCompatible = peerInfo && peerInfo.softwareVersion && VersionUtils.isCompatible(this.environment.peerMinVersion, peerInfo.softwareVersion);
+        const isCompatible = peerInfo.softwareVersion && VersionUtils.isCompatible(this.environment.peerMinVersion, peerInfo.softwareVersion);
         // Display toast, if not compatible
         if (!isCompatible && (!opts || opts.showToast !== false)) {
             await this.showToast({
@@ -15864,17 +15872,17 @@ class NetworkService extends StartableObservableService {
         }
         return isCompatible;
     }
-    async getNodeInfo(peer) {
+    async getNodeInfo(peer, opts) {
         const path = this.computePeerPath(peer, '/api/node/info');
-        this._logger?.debug('checkPeerAlive', `Getting '${path}' ...`);
+        this._logger?.debug('getNodeInfo', `Getting '${path}' ...`);
         try {
-            const data = await this.get(path);
-            this._logger?.debug('checkPeerAlive', `Response of '${path}':\n${JSON.stringify(data)}`);
+            const data = await this.get(path, opts);
+            this._logger?.debug('getNodeInfo', `Response of '${path}':\n${JSON.stringify(data)}`);
             return data;
         }
         catch (err) {
             console.debug(`[network] Error while getting '${path}': ${err && err.message || err}`, err);
-            this._logger?.error('checkPeerAlive', `Error while getting '${path}': ${err?.message || ''}`);
+            this._logger?.error('getNodeInfo', `Error while getting '${path}': ${err?.message || ''}`);
             return undefined;
         }
     }
@@ -15992,13 +16000,30 @@ class NetworkService extends StartableObservableService {
         console.info('[network] Starting network...');
         // Restoring local settings
         peer = peer || (await this.restoreLocally());
-        // Make sure to hide the splashscreen, before open the modal
-        if (!peer)
+        if (!peer) {
+            // Make sure to hide the splashscreen, before open the modal
             await SplashScreen.hide();
-        // No peer in settings: ask user to choose
-        while (!peer) {
-            console.debug('[network] No peer defined. Asking user to choose a peer.');
-            peer = await this.showSelectPeerModal({ allowSelectDownPeer: false });
+            // No peer in settings: ask user to choose
+            while (!peer) {
+                console.debug('[network] No peer defined. Asking user to choose a peer.');
+                peer = await this.showSelectPeerModal({ allowSelectDownPeer: false });
+            }
+        }
+        else if (this.online) {
+            // Check if alive. If not, force offline mode
+            const alive = await this.checkPeerAlive(peer);
+            if (!alive) {
+                // Peer not alive, but should be at the same URL, retrying each 1s
+                if (this.environment.sameUrlPeer) {
+                    const retryMs = this._connectionTimeout > 0 ? this._connectionTimeout : 1000;
+                    await firstValueFrom(timer(retryMs, retryMs)
+                        .pipe(takeUntil(this.stopSubject), tap$1(() => console.warn(`[network-service] Waiting peer be be alive, at {${peer.url}} ...`)), mergeMap(() => this.checkPeerAlive(peer)), filter(alive => !!alive), first()));
+                }
+                else {
+                    // Continue, in offline mode
+                    this.setForceOffline(true);
+                }
+            }
         }
         console.info(`[network] Starting service [OK] {peer: '${peer.url}', online: ${this.online}}`);
         return peer;
@@ -16036,19 +16061,14 @@ class NetworkService extends StartableObservableService {
         if (this.environment.defaultPeer) {
             return Peer.fromObject(this.environment.defaultPeer);
         }
-        // Else, if App is hosted, try the web site as a peer
-        const location = this._document && this._document.location;
-        if (location && location.protocol && location.protocol.startsWith('http')) {
+        // Else, if App is hosted, try the website as a peer
+        const location = this._document?.location;
+        if (location?.protocol?.startsWith('http')) {
             const hostname = this._document.location.host;
             const detectedPeer = Peer.parseUrl(`${this._document.location.protocol}${hostname}${this.environment.baseUrl}`);
-            if (await this.checkPeerAlive(detectedPeer)) {
+            if (this.environment.sameUrlPeer || await this.checkPeerAlive(detectedPeer)) {
                 return detectedPeer;
             }
-            // Peer not alive, but should be at the same URL, retrying each 1s
-            if (this.environment.sameUrlPeer) {
-                return await timer(1000, 1000)
-                    .pipe(takeUntil(this.stopSubject), tap$1(() => console.warn(`[network-service] Waiting peer be be alive, at {${detectedPeer.url}} ...`)), mergeMap(() => this.checkPeerAlive(detectedPeer)), filter(alive => !!alive), map(() => detectedPeer), first()).toPromise();
-            }
         }
         return undefined;
     }
@@ -16080,7 +16100,7 @@ class NetworkService extends StartableObservableService {
         // Checkin if peer alive
         tap$1(() => console.debug('[network] Checking connection to pod...')), mergeMap(() => this.checkPeerAlive(this.peer)), 
         // Filter to keep only changes
-        filter(info => !!info !== !!lastInfo), tap$1(info => lastInfo = info), 
+        filter(info => !equals(info, lastInfo)), tap$1(info => lastInfo = info), 
         // Check compatibility
         mergeMap((info) => this.checkPeerCompatible(info, { showToast: true })))
             .subscribe(alive => {
@@ -16182,15 +16202,15 @@ class NetworkService extends StartableObservableService {
         }
     }
 }
-NetworkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NetworkService, deps: [{ token: i2$1.Platform }, { token: i2$1.ModalController }, { token: i2$3.Storage }, { token: LocalSettingsService }, { token: i4$1.CacheService }, { token: i2.HttpClient }, { token: DOCUMENT }, { token: ENVIRONMENT }, { token: APP_LOGGING_SERVICE, optional: true }, { token: i6$4.Network, optional: true }, { token: i1$1.TranslateService, optional: true }, { token: i2$1.ToastController, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+NetworkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NetworkService, deps: [{ token: DOCUMENT }, { token: i2$1.Platform }, { token: i2$1.ModalController }, { token: i2$3.Storage }, { token: LocalSettingsService }, { token: i4$1.CacheService }, { token: i2.HttpClient }, { token: ENVIRONMENT }, { token: APP_LOGGING_SERVICE, optional: true }, { token: i6$4.Network, optional: true }, { token: i1$1.TranslateService, optional: true }, { token: i2$1.ToastController, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 NetworkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NetworkService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NetworkService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i2$1.Platform }, { type: i2$1.ModalController }, { type: i2$3.Storage }, { type: LocalSettingsService }, { type: i4$1.CacheService }, { type: i2.HttpClient }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: Environment, decorators: [{
+                }] }, { type: i2$1.Platform }, { type: i2$1.ModalController }, { type: i2$3.Storage }, { type: LocalSettingsService }, { type: i4$1.CacheService }, { type: i2.HttpClient }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
                 }] }, { type: undefined, decorators: [{
@@ -16609,6 +16629,10 @@ let UserToken = UserToken_1 = class UserToken extends Entity {
         this.lastUsedDate = null;
         this.creationDate = null;
     }
+    static equals(t1, t2) {
+        return (isNotNil(t1.id) && t1.id === t2?.id)
+            || (t1 && (t1.pubkey && t1.pubkey === t2?.pubkey) && (t1.name === t2?.name));
+    }
     asObject(opts) {
         const target = super.asObject(opts);
         target.expirationDate = toDateISOString(this.expirationDate);
@@ -17013,14 +17037,13 @@ const loggerLink = unwrapESModule(loggerLinkImported);
 const APP_GRAPHQL_TYPE_POLICIES = new InjectionToken('graphqlTypePolicies');
 const APP_GRAPHQL_FRAGMENTS = new InjectionToken('graphqlFragments');
 class GraphqlService extends StartableService {
-    constructor(platform, apollo, httpLink, network, storage, cryptoService, environment, typePolicies, fragments) {
+    constructor(platform, apollo, httpLink, network, storage, environment, typePolicies, fragments) {
         super(platform); // Wait platform
         this.platform = platform;
         this.apollo = apollo;
         this.httpLink = httpLink;
         this.network = network;
         this.storage = storage;
-        this.cryptoService = cryptoService;
         this.environment = environment;
         this.typePolicies = typePolicies;
         this.fragments = fragments;
@@ -17144,14 +17167,14 @@ class GraphqlService extends StartableService {
                 return res.data;
             }
         }
-        const res = await this.apollo.mutate({
+        const res = await firstValueFrom(this.apollo.mutate({
             mutation: opts.mutation,
             variables: opts.variables,
             context: opts.context,
             optimisticResponse: opts.optimisticResponse,
             update: opts.update
         })
-            .pipe(catchError(error => this.onApolloError(error, opts.error)), first()).toPromise();
+            .pipe(catchError(error => this.onApolloError(error, opts.error)), first()));
         if (Array.isArray(res.errors)) {
             throw res.errors[0];
         }
@@ -17647,7 +17670,7 @@ class GraphqlService extends StartableService {
             || (err.graphQLErrors && err.graphQLErrors[0])
             || err;
         console.error('[graphql] ' + (error && error.message || error), error.stack || '');
-        if (error && error.code === ErrorCodes.UNKNOWN_NETWORK_ERROR && err.networkError && err.networkError.message) {
+        if (error?.code === ErrorCodes.UNKNOWN_NETWORK_ERROR && err.networkError?.message) {
             console.error('[graphql] original error: ' + err.networkError.message);
             this.onNetworkError.next(error);
         }
@@ -17733,14 +17756,14 @@ class GraphqlService extends StartableService {
         return undefined;
     }
 }
-GraphqlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GraphqlService, deps: [{ token: i2$1.Platform }, { token: i2$6.Apollo }, { token: i3$1.HttpLink }, { token: NetworkService }, { token: StorageService }, { token: CryptoService }, { token: ENVIRONMENT }, { token: APP_GRAPHQL_TYPE_POLICIES, optional: true }, { token: APP_GRAPHQL_FRAGMENTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+GraphqlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GraphqlService, deps: [{ token: i2$1.Platform }, { token: i2$6.Apollo }, { token: i3$1.HttpLink }, { token: NetworkService }, { token: StorageService }, { token: ENVIRONMENT }, { token: APP_GRAPHQL_TYPE_POLICIES, optional: true }, { token: APP_GRAPHQL_FRAGMENTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 GraphqlService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GraphqlService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GraphqlService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.Platform }, { type: i2$6.Apollo }, { type: i3$1.HttpLink }, { type: NetworkService }, { type: StorageService }, { type: CryptoService }, { type: Environment, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$1.Platform }, { type: i2$6.Apollo }, { type: i3$1.HttpLink }, { type: NetworkService }, { type: StorageService }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
                 }] }, { type: undefined, decorators: [{
@@ -18091,7 +18114,6 @@ const Fragments = {
     token: gql `fragment UserTokenFragment on UserTokenVO {
     id
     pubkey
-    token
     name
     flags
     expirationDate
@@ -19522,13 +19544,15 @@ class ConfigService extends BaseGraphqlService {
     async loadOrRestoreLocally() {
         let data;
         let wasJustLoaded = false;
-        try {
-            data = await this.loadDefault({ fetchPolicy: 'network-only' });
-            wasJustLoaded = true;
-        }
-        catch (err) {
-            // Log, then continue
-            console.error(err && err.message || err, err);
+        if (this.network.online) {
+            try {
+                data = await this.loadDefault({ fetchPolicy: 'network-only' });
+                wasJustLoaded = true;
+            }
+            catch (err) {
+                // Log, then continue
+                console.error(err && err.message || err, err);
+            }
         }
         // Save it into local storage, for next startup
         if (data) {
@@ -19819,6 +19843,7 @@ class PlatformService extends StartableService {
             )
                 .subscribe(type => this.configureCache(type !== 'none')));
             console.info(`[platform] Starting platform [OK] {mobile: ${this._mobile}, capacitor: ${this._capacitor}, web: ${this.isWeb()}, downloader: ${this.canDownload}} in ${Date.now() - now}ms`);
+            // Pass auth token
             this.registerSubscription(this.configService.config
                 .subscribe(config => {
                 if (!config)
@@ -23053,7 +23078,7 @@ class InMemoryEntitiesService extends StartableObservableService {
             return undefined;
         });
         this._startByReadyFunction = false; // Need setValue() to be called, to start the service
-        this._sortByReplacement = {
+        this.sortByReplacement = {
             ...options.sortByReplacement
         };
     }
@@ -23158,9 +23183,9 @@ class InMemoryEntitiesService extends StartableObservableService {
                 else {
                     excludedDataByPagination = (size > 0 && ((offset + size) < data.length))
                         // Slice using limit to size
-                        ? data.slice(0, offset - 1).concat(data.slice(offset + size))
+                        ? data.slice(0, offset).concat(data.slice(offset + size))
                         // Slice without limit
-                        : data.slice(0, offset - 1);
+                        : data.slice(0, offset);
                     data = (size > 0 && ((offset + size) < data.length))
                         // Slice using limit to size
                         ? data.slice(offset, offset + size)
@@ -23258,7 +23283,7 @@ class InMemoryEntitiesService extends StartableObservableService {
         // Make sure to fill sortBy BEFORE checking in the replacement map
         sortBy = sortBy || 'id';
         // Replace sortBy, using the replacement map
-        sortBy = this._sortByReplacement[sortBy] || sortBy;
+        sortBy = this.sortByReplacement[sortBy] || sortBy;
         // Execute the sort
         return EntityUtils.sort(data, sortBy, sortDirection);
     }
@@ -23266,7 +23291,7 @@ class InMemoryEntitiesService extends StartableObservableService {
         return EntityFilterUtils.fromObject(source, this.filterType);
     }
     addSortByReplacement(source, target) {
-        this._sortByReplacement[source] = target;
+        this.sortByReplacement[source] = target;
     }
     equals(d1, d2) {
         if (this._equalsFn)
@@ -31467,12 +31492,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class NewTokenModal extends AppEntityEditorModal {
-    constructor(injector, translate, validator, accountService) {
+    constructor(injector, validator, accountService) {
         super(injector, UserToken, { tabCount: 1 });
         this.injector = injector;
-        this.translate = translate;
         this.validator = validator;
         this.accountService = accountService;
+        this.translate = injector.get(TranslateService);
+        this.toastController = injector.get(ToastController);
         this.tokenForm = validator.getFormGroup();
         this.tokenAppForm = new AppForm(this.injector, this.tokenForm);
     }
@@ -31535,7 +31561,9 @@ class NewTokenModal extends AppEntityEditorModal {
     async copy(event) {
         event?.stopPropagation();
         await Clipboard.write({ string: this.form.value.token });
-        this.copiedLabel = 'ACCOUNT.TOKENS.CREATE.COPIED';
+        await Toasts.show(this.toastController, this.translate, {
+            type: 'info', message: 'ACCOUNT.TOKENS.CREATE.COPIED'
+        });
     }
     getFlags(scopes) {
         let flags = 0;
@@ -31545,29 +31573,31 @@ class NewTokenModal extends AppEntityEditorModal {
         return flags;
     }
 }
-NewTokenModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NewTokenModal, deps: [{ token: i0.Injector }, { token: i1$1.TranslateService }, { token: UserTokenValidatorService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component });
-NewTokenModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NewTokenModal, selector: "app-new-token-modal", inputs: { tokenScopes: "tokenScopes", existingNames: "existingNames" }, usesInheritance: true, ngImport: i0, template: "<app-modal-toolbar modalName=\"NewTokenModal\"\n                   [title]=\"$title | async\"\n                   [color]=\"'secondary'\"\n                   [showSpinner]=\"loading\"\n                   [canValidate]=\"!loading && valid\"\n                   (cancel)=\"close($event)\"\n                   (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" lines=\"none\" class=\"ion-padding\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <h6 class=\"ion-padding\">{{ 'ACCOUNT.TOKENS.CREATE.DESCRIPTION' | translate }}</h6>\n\n  <form class=\"form-container ion-no-padding\" [formGroup]=\"tokenForm\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-form-field>\n            <input matInput\n                   [appAutofocus]=\"true\"\n                   [autofocusDelay]=\"500\"\n                   [placeholder]=\"'ACCOUNT.TOKENS.CREATE.NAME'|translate\"\n                   formControlName=\"name\"\n                   autocomplete=\"off\"\n                   required\n                   [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n            >\n            <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.dirty\" translate>ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS</mat-error>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <mat-chips-field\n            formControlName=\"scopes\"\n            appearance=\"legacy\"\n            chipColor=\"primary\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n            [config]=\"tokenConfig\"\n            [mobile]=\"mobile\"\n            [debug]=\"false\"\n            [required]=\"true\"\n            [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n          ></mat-chips-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <mat-date-field\n            formControlName=\"expirationDate\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n            [mobile]=\"mobile\"\n            [required]=\"true\"\n            [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n          ></mat-date-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-button\n            *ngIf=\"tokenForm | formGetValue: 'token' | isNilOrBlank; else showToken\"\n            [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate\"\n            (click)=\"generate($event)\"\n            [disabled]=\"tokenForm.invalid\"\n          >\n            {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate}}\n          </ion-button>\n          <ng-template #showToken>\n            <h6>{{ 'ACCOUNT.TOKENS.CREATE.COPY_HELP' | translate }}</h6>\n            <ion-text style=\"display: block; background-color: lightgray\">{{ tokenForm | formGetValue: 'token' }}</ion-text>\n            <button\n              mat-icon-button\n              [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate\"\n              (click)=\"copy($event)\"\n            >\n              <mat-icon>content_copy</mat-icon>\n            </button>\n            <ion-text>{{ copiedLabel | translate }}</ion-text>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <ng-content></ng-content>\n      </ion-col>\n\n      <ion-col size=\"auto\">\n\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button [fill]=\"invalid ? 'clear' : 'solid'\"\n                    [disabled]=\"disabled || loading || invalid\"\n                    (click)=\"saveAndClose($event)\"\n                    (keyup.enter)=\"saveAndClose($event)\"\n                    color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ModalToolbarComponent, selector: "app-modal-toolbar", inputs: ["modalName", "title", "color", "showSpinner", "canValidate", "validateIcon"], outputs: ["cancel", "validate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }] });
+NewTokenModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NewTokenModal, deps: [{ token: i0.Injector }, { token: UserTokenValidatorService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component });
+NewTokenModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NewTokenModal, selector: "app-new-token-modal", inputs: { tokenScopes: "tokenScopes", existingNames: "existingNames" }, usesInheritance: true, ngImport: i0, template: "<app-modal-toolbar modalName=\"NewTokenModal\"\n                   [title]=\"$title | async\"\n                   [color]=\"'secondary'\"\n                   [showSpinner]=\"loading\"\n                   [canValidate]=\"!loading && valid\"\n                   (cancel)=\"close($event)\"\n                   (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <p><b translate>ACCOUNT.TOKENS.CREATE.DESCRIPTION</b></p>\n\n  <form class=\"form-container\" [formGroup]=\"tokenForm\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          <mat-form-field>\n            <input matInput\n                   [appAutofocus]=\"true\"\n                   [autofocusDelay]=\"500\"\n                   [placeholder]=\"'ACCOUNT.TOKENS.CREATE.NAME'|translate\"\n                   formControlName=\"name\"\n                   autocomplete=\"off\"\n                   required\n                   [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n            >\n            <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS</mat-error>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <mat-chips-field\n            formControlName=\"scopes\"\n            appearance=\"legacy\"\n            chipColor=\"primary\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n            [config]=\"tokenConfig\"\n            [mobile]=\"mobile\"\n            [debug]=\"false\"\n            [required]=\"true\"\n            [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n          >\n            <mat-error *ngIf=\"form.controls.name.hasError('notEmptyArray') && form.controls.name.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-chips-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <mat-date-field\n            formControlName=\"expirationDate\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n            [mobile]=\"mobile\"\n            [required]=\"true\"\n            [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n          ></mat-date-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-button\n            *ngIf=\"tokenForm | formGetValue: 'token' | isNilOrBlank; else showToken\"\n            [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate\"\n            (click)=\"generate($event)\"\n            [disabled]=\"tokenForm.invalid\"\n          >\n            {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate}}\n          </ion-button>\n          <ng-template #showToken>\n            <p><b translate>ACCOUNT.TOKENS.CREATE.COPY_HELP</b></p>\n            <mat-form-field>\n              <textarea matInput formControlName=\"token\" readonly style=\"height: auto; background-color: lightgray;\" rows=\"4\"></textarea>\n              <button matSuffix\n                mat-icon-button\n                [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate\"\n                (click)=\"copy($event)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </mat-form-field>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <ng-content></ng-content>\n      </ion-col>\n\n      <ion-col size=\"auto\">\n\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button [fill]=\"invalid ? 'clear' : 'solid'\"\n                    [disabled]=\"disabled || loading || invalid\"\n                    (click)=\"saveAndClose($event)\"\n                    (keyup.enter)=\"saveAndClose($event)\"\n                    color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ModalToolbarComponent, selector: "app-modal-toolbar", inputs: ["modalName", "title", "color", "showSpinner", "canValidate", "validateIcon"], outputs: ["cancel", "validate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NewTokenModal, decorators: [{
             type: Component,
-            args: [{ selector: 'app-new-token-modal', template: "<app-modal-toolbar modalName=\"NewTokenModal\"\n                   [title]=\"$title | async\"\n                   [color]=\"'secondary'\"\n                   [showSpinner]=\"loading\"\n                   [canValidate]=\"!loading && valid\"\n                   (cancel)=\"close($event)\"\n                   (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" lines=\"none\" class=\"ion-padding\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <h6 class=\"ion-padding\">{{ 'ACCOUNT.TOKENS.CREATE.DESCRIPTION' | translate }}</h6>\n\n  <form class=\"form-container ion-no-padding\" [formGroup]=\"tokenForm\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-form-field>\n            <input matInput\n                   [appAutofocus]=\"true\"\n                   [autofocusDelay]=\"500\"\n                   [placeholder]=\"'ACCOUNT.TOKENS.CREATE.NAME'|translate\"\n                   formControlName=\"name\"\n                   autocomplete=\"off\"\n                   required\n                   [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n            >\n            <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.dirty\" translate>ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS</mat-error>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <mat-chips-field\n            formControlName=\"scopes\"\n            appearance=\"legacy\"\n            chipColor=\"primary\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n            [config]=\"tokenConfig\"\n            [mobile]=\"mobile\"\n            [debug]=\"false\"\n            [required]=\"true\"\n            [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n          ></mat-chips-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <mat-date-field\n            formControlName=\"expirationDate\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n            [mobile]=\"mobile\"\n            [required]=\"true\"\n            [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n          ></mat-date-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-button\n            *ngIf=\"tokenForm | formGetValue: 'token' | isNilOrBlank; else showToken\"\n            [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate\"\n            (click)=\"generate($event)\"\n            [disabled]=\"tokenForm.invalid\"\n          >\n            {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate}}\n          </ion-button>\n          <ng-template #showToken>\n            <h6>{{ 'ACCOUNT.TOKENS.CREATE.COPY_HELP' | translate }}</h6>\n            <ion-text style=\"display: block; background-color: lightgray\">{{ tokenForm | formGetValue: 'token' }}</ion-text>\n            <button\n              mat-icon-button\n              [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate\"\n              (click)=\"copy($event)\"\n            >\n              <mat-icon>content_copy</mat-icon>\n            </button>\n            <ion-text>{{ copiedLabel | translate }}</ion-text>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <ng-content></ng-content>\n      </ion-col>\n\n      <ion-col size=\"auto\">\n\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button [fill]=\"invalid ? 'clear' : 'solid'\"\n                    [disabled]=\"disabled || loading || invalid\"\n                    (click)=\"saveAndClose($event)\"\n                    (keyup.enter)=\"saveAndClose($event)\"\n                    color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n\n</ion-footer>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$1.TranslateService }, { type: UserTokenValidatorService }, { type: AccountService }]; }, propDecorators: { tokenScopes: [{
+            args: [{ selector: 'app-new-token-modal', template: "<app-modal-toolbar modalName=\"NewTokenModal\"\n                   [title]=\"$title | async\"\n                   [color]=\"'secondary'\"\n                   [showSpinner]=\"loading\"\n                   [canValidate]=\"!loading && valid\"\n                   (cancel)=\"close($event)\"\n                   (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <p><b translate>ACCOUNT.TOKENS.CREATE.DESCRIPTION</b></p>\n\n  <form class=\"form-container\" [formGroup]=\"tokenForm\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          <mat-form-field>\n            <input matInput\n                   [appAutofocus]=\"true\"\n                   [autofocusDelay]=\"500\"\n                   [placeholder]=\"'ACCOUNT.TOKENS.CREATE.NAME'|translate\"\n                   formControlName=\"name\"\n                   autocomplete=\"off\"\n                   required\n                   [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n            >\n            <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS</mat-error>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <mat-chips-field\n            formControlName=\"scopes\"\n            appearance=\"legacy\"\n            chipColor=\"primary\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n            [config]=\"tokenConfig\"\n            [mobile]=\"mobile\"\n            [debug]=\"false\"\n            [required]=\"true\"\n            [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n          >\n            <mat-error *ngIf=\"form.controls.name.hasError('notEmptyArray') && form.controls.name.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-chips-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <mat-date-field\n            formControlName=\"expirationDate\"\n            [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n            [mobile]=\"mobile\"\n            [required]=\"true\"\n            [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n          ></mat-date-field>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-button\n            *ngIf=\"tokenForm | formGetValue: 'token' | isNilOrBlank; else showToken\"\n            [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate\"\n            (click)=\"generate($event)\"\n            [disabled]=\"tokenForm.invalid\"\n          >\n            {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate}}\n          </ion-button>\n          <ng-template #showToken>\n            <p><b translate>ACCOUNT.TOKENS.CREATE.COPY_HELP</b></p>\n            <mat-form-field>\n              <textarea matInput formControlName=\"token\" readonly style=\"height: auto; background-color: lightgray;\" rows=\"4\"></textarea>\n              <button matSuffix\n                mat-icon-button\n                [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate\"\n                (click)=\"copy($event)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </mat-form-field>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <ng-content></ng-content>\n      </ion-col>\n\n      <ion-col size=\"auto\">\n\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n\n        <ion-button [fill]=\"invalid ? 'clear' : 'solid'\"\n                    [disabled]=\"disabled || loading || invalid\"\n                    (click)=\"saveAndClose($event)\"\n                    (keyup.enter)=\"saveAndClose($event)\"\n                    color=\"tertiary\">\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n\n</ion-footer>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: UserTokenValidatorService }, { type: AccountService }]; }, propDecorators: { tokenScopes: [{
                 type: Input
             }], existingNames: [{
                 type: Input
             }] } });
 
 class UserTokenTable extends AppInMemoryTable {
-    constructor(injector, formBuilder, validatorService, environment, tokenScopes) {
-        super(injector, [...RESERVED_START_COLUMNS, 'name', /*'flags',*/ 'scopes', 'lastUsedDate', 'expirationDate', 'creationDate', 'updateDate', ...RESERVED_END_COLUMNS], UserToken, new InMemoryEntitiesService(UserToken, undefined, {
-            filterFnFactory: () => () => true
+    constructor(injector, formBuilder, validatorService, cd, environment, tokenScopes) {
+        super(injector, [...RESERVED_START_COLUMNS, 'name', 'scopes', 'lastUsedDate', 'expirationDate', 'creationDate', ...RESERVED_END_COLUMNS], UserToken, new InMemoryEntitiesService(UserToken, undefined, {
+            filterFnFactory: () => () => true,
+            equals: UserToken.equals,
         }), validatorService);
         this.injector = injector;
         this.formBuilder = formBuilder;
         this.validatorService = validatorService;
+        this.cd = cd;
         this.tokenScopes = tokenScopes;
         this.useSticky = false;
         // this.readOnly = true;
-        this.inlineEdition = true;
+        this.inlineEdition = false;
         this.defaultSortBy = 'creationDate';
         this.defaultSortDirection = 'asc';
         this.i18nColumnPrefix = 'ACCOUNT.TOKENS.TABLE.';
@@ -31590,10 +31620,10 @@ class UserTokenTable extends AppInMemoryTable {
     }
     setValue(value, opts) {
         // Set scopes from flags
-        value?.forEach(userToken => {
+        value?.forEach((userToken) => {
             const scopes = [];
             if (userToken.flags) {
-                this.tokenScopes.forEach(scope => {
+                this.tokenScopes.forEach((scope) => {
                     // eslint-disable-next-line no-bitwise
                     if (userToken.flags & scope.flag) {
                         scopes.push(scope);
@@ -31605,6 +31635,9 @@ class UserTokenTable extends AppInMemoryTable {
         super.setValue(value, opts);
     }
     async addToken(event) {
+        if (event?.defaultPrevented)
+            return; // Avoid multiple call
+        event?.preventDefault();
         event?.stopPropagation();
         const modal = await this.modalCtrl.create({
             component: NewTokenModal,
@@ -31613,9 +31646,9 @@ class UserTokenTable extends AppInMemoryTable {
                 isNew: true,
                 data: new UserToken(),
                 tokenScopes: this.tokenScopes || [],
-                existingNames: this.value?.map(v => v.name)
+                existingNames: this.value?.map((v) => v.name),
             },
-            backdropDismiss: false
+            backdropDismiss: false,
         });
         await modal.present();
         const { data } = await modal.onDidDismiss();
@@ -31642,19 +31675,18 @@ class UserTokenTable extends AppInMemoryTable {
     //   // this.markAsDirty();
     // }
     display(scopes) {
-        return scopes?.map(value => this.translate.instant(value.name)).join(', ');
+        return scopes?.map((value) => this.translate.instant(value.name)).join(', ');
+    }
+    markForCheck() {
+        this.cd.markForCheck();
     }
 }
-UserTokenTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserTokenTable, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: i2$8.ValidatorService }, { token: ENVIRONMENT }, { token: APP_USER_TOKEN_SCOPES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-UserTokenTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserTokenTable, selector: "app-user-token-table", inputs: { useSticky: "useSticky" }, providers: [
-        { provide: ValidatorService, useClass: UserTokenValidatorService }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-toolbar>\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <ng-container *ngIf=\"selection.isEmpty(); else hasSelection\">\n\n    <button mat-icon-button\n            *ngIf=\"canEdit && !mobile\"\n            [title]=\"'COMMON.BTN_ADD'|translate\"\n            (click)=\"addToken($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <ng-template #hasSelection>\n\n    <button mat-icon-button\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"deleteSelection($event)\">\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n\n  </ng-template>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet : 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n<!--      <ng-container matColumnDef=\"flags\">-->\n<!--        <th mat-header-cell *matHeaderCellDef mat-sort-header>-->\n<!--          <ion-label>{{ i18nColumnPrefix + 'FLAGS' | translate }}</ion-label>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\">-->\n<!--          {{ row.currentData | propertyGet : 'flags' }}-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet : 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'creationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'expirationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'lastUsedDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'UPDATE_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'updateDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UserTokenTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserTokenTable, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: i2$8.ValidatorService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }, { token: APP_USER_TOKEN_SCOPES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+UserTokenTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserTokenTable, selector: "app-user-token-table", inputs: { useSticky: "useSticky" }, providers: [{ provide: ValidatorService, useClass: UserTokenValidatorService }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar>\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <ng-container *ngIf=\"selection.isEmpty(); else hasSelection\">\n\n    <button mat-icon-button\n            *ngIf=\"canEdit && !mobile\"\n            [title]=\"'COMMON.BTN_ADD'|translate\"\n            (click)=\"addToken($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <ng-template #hasSelection>\n\n    <button mat-icon-button\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"deleteSelection($event)\">\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n\n  </ng-template>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"cdk-visually-hidden\">\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"cdk-visually-hidden\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet : 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet : 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'creationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'expirationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'lastUsedDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserTokenTable, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-token-table', providers: [
-                        { provide: ValidatorService, useClass: UserTokenValidatorService }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <ng-container *ngIf=\"selection.isEmpty(); else hasSelection\">\n\n    <button mat-icon-button\n            *ngIf=\"canEdit && !mobile\"\n            [title]=\"'COMMON.BTN_ADD'|translate\"\n            (click)=\"addToken($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <ng-template #hasSelection>\n\n    <button mat-icon-button\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"deleteSelection($event)\">\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n\n  </ng-template>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet : 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n<!--      <ng-container matColumnDef=\"flags\">-->\n<!--        <th mat-header-cell *matHeaderCellDef mat-sort-header>-->\n<!--          <ion-label>{{ i18nColumnPrefix + 'FLAGS' | translate }}</ion-label>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\">-->\n<!--          {{ row.currentData | propertyGet : 'flags' }}-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet : 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'creationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'expirationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'lastUsedDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'UPDATE_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'updateDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: i2$8.ValidatorService }, { type: Environment, decorators: [{
+            args: [{ selector: 'app-user-token-table', providers: [{ provide: ValidatorService, useClass: UserTokenValidatorService }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <ng-container *ngIf=\"selection.isEmpty(); else hasSelection\">\n\n    <button mat-icon-button\n            *ngIf=\"canEdit && !mobile\"\n            [title]=\"'COMMON.BTN_ADD'|translate\"\n            (click)=\"addToken($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <ng-template #hasSelection>\n\n    <button mat-icon-button\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"deleteSelection($event)\">\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n\n  </ng-template>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"cdk-visually-hidden\">\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"cdk-visually-hidden\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet : 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet : 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'creationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'expirationDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet : 'lastUsedDate' | dateFormat : {time: true} }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: i2$8.ValidatorService }, { type: i0.ChangeDetectorRef }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
                 }] }, { type: undefined, decorators: [{
@@ -36829,7 +36861,7 @@ class UsersPage extends AppTable {
                     console.warn('[users] Unknown action=' + action);
                     break;
             }
-            // Mark as consummed
+            // Mark as consumed
             this.router.navigate(['.'], {
                 relativeTo: this.route,
                 queryParams: { ...queryParams, action: undefined },
@@ -40118,5 +40150,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractDateFormat, AbstractNamedFilterService, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBooleanField, MatChipsField, MatColorPipe, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NamedFilter, NamedFilterFilter, NamedFilterSelector, NetworkService, NewTokenModal, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, SCRYPT_PARAMS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedTextFormModule, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, SubMenuTabDirective, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, initArrayControlsFromValues, isAndroid, isBlankString, isCapacitor, isControlHasInput, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setPropertyByPath, setTabIndex, sleep, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractDateFormat, AbstractNamedFilterService, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBooleanField, MatChipsField, MatColorPipe, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NetworkService, NewTokenModal, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, SCRYPT_PARAMS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedTextFormModule, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, SubMenuTabDirective, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, initArrayControlsFromValues, isAndroid, isBlankString, isCapacitor, isControlHasInput, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setPropertyByPath, setTabIndex, sleep, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map