@sumaris-net/ngx-components 2.4.0-rc7 → 2.4.0-rc9

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

@@ -82,8 +82,6 @@ import * as i6$3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i11$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i2$4 from '@angular/common/http';
-import { HttpResponse, HttpEventType, HttpClient, HttpHeaders, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import * as i5 from 'ngx-color-picker';
 import { ColorPickerModule } from 'ngx-color-picker';
 import * as i2$2 from '@ionic-native/audio-management/ngx';
@@ -92,6 +90,8 @@ import { Haptics } from '@capacitor/haptics';
 import { NativeAudio } from '@capacitor-community/native-audio';
 import * as i1$4 from '@angular/platform-browser';
 import { HammerGestureConfig, HammerModule } from '@angular/platform-browser';
+import * as i2$4 from '@angular/common/http';
+import { HttpEventType, HttpClient, HttpHeaders, HttpResponse, HttpClientModule } from '@angular/common/http';
 import { v4 } from 'uuid';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6$4 from 'ngx-markdown';
@@ -9827,58 +9827,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
-const APP_PROGRESS_BAR_SERVICE = new InjectionToken('ProgressBarService');
-class ProgressBarService {
-    constructor() {
-        this._requestsRunning = 0;
-        this.onProgressChanged = new EventEmitter();
-    }
-    list() {
-        return this._requestsRunning;
-    }
-    increase() {
-        this._requestsRunning++;
-        if (this._requestsRunning === 1) {
-            this.onProgressChanged.emit('query');
-        }
-    }
-    decrease() {
-        if (this._requestsRunning > 0) {
-            this._requestsRunning--;
-        }
-        if (this._requestsRunning === 0) {
-            this.onProgressChanged.emit(null);
-        }
-    }
-}
-ProgressBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ProgressBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-let ProgressInterceptor = class ProgressInterceptor {
-    constructor(progressBarService) {
-        this.progressBarService = progressBarService;
-    }
-    intercept(req, next) {
-        this.progressBarService.increase();
-        return next.handle(req)
-            .pipe(tap(event => {
-            if (event instanceof HttpResponse) {
-                this.progressBarService.decrease();
-            }
-        }), catchError((err, event) => {
-            this.progressBarService.decrease();
-            throw err;
-        }));
-    }
-};
-ProgressInterceptor = __decorate([
-    __param(0, Inject(APP_PROGRESS_BAR_SERVICE))
-], ProgressInterceptor);
-
 function rgbToHex(r, g, b) {
     return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
 }
@@ -12871,6 +12819,37 @@ class EntityStore {
     }
 }
 
+const APP_PROGRESS_BAR_SERVICE = new InjectionToken('ProgressBarService');
+class ProgressBarService {
+    constructor() {
+        this._requestsRunning = 0;
+        this.onProgressChanged = new EventEmitter();
+    }
+    list() {
+        return this._requestsRunning;
+    }
+    increase() {
+        this._requestsRunning++;
+        if (this._requestsRunning === 1) {
+            this.onProgressChanged.emit('query');
+        }
+    }
+    decrease() {
+        if (this._requestsRunning > 0) {
+            this._requestsRunning--;
+        }
+        if (this._requestsRunning === 0) {
+            this.onProgressChanged.emit(null);
+        }
+    }
+}
+ProgressBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ProgressBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const APP_LOCAL_STORAGE_TYPE_POLICIES = new InjectionToken('localStorageTypePolicies');
 class EntitiesStorage extends StartableService {
     constructor(platform, progressBarService, storage, environment, typePolicies) {
@@ -19064,8 +19043,10 @@ class ToolbarComponent {
         this.router = router;
         this.routerOutlet = routerOutlet;
         this.cd = cd;
+        this.progressBarService = progressBarService;
         this._closeTapCount = 0;
         this._validateTapCount = 0;
+        this._progressBarMode$ = new BehaviorSubject(null);
         this.title = '';
         this.color = 'primary';
         this.class = '';
@@ -19080,17 +19061,22 @@ class ToolbarComponent {
         this.showSearchBar = false;
         // Listen progress bar service mode
         if (progressBarService) {
-            this._progressBarMode$ = progressBarService.onProgressChanged
+            progressBarService.onProgressChanged
                 .pipe(startWith(null), // none, by default
             debounceTime(100), // wait 100ms, to group changes
             // DEBUG
             //tap((mode) => console.debug('[toolbar] Updating progressBarMode: ' + mode))
-            distinctUntilChanged());
-        }
-        else {
-            this._progressBarMode$ = of(null);
+            distinctUntilChanged()).subscribe(value => this._progressBarMode$.next(value));
         }
     }
+    set progressBarMode(value) {
+        if (this.progressBarService)
+            return;
+        this._progressBarMode$.next(value);
+    }
+    get progressBarMode() {
+        return this._progressBarMode$.value;
+    }
     set backHref(value) {
         if (value !== this._backHref) {
             this._backHref = value;
@@ -19237,7 +19223,7 @@ class ToolbarComponent {
     }
 }
 ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i2.IonRouterOutlet }, { token: i0.ChangeDetectorRef }, { token: APP_PROGRESS_BAR_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ToolbarComponent, selector: "app-toolbar", inputs: { title: "title", color: "color", class: "class", backHref: "backHref", defaultBackHref: "defaultBackHref", hasValidate: "hasValidate", hasClose: "hasClose", hasSearch: "hasSearch", canGoBack: "canGoBack", canShowMenu: "canShowMenu" }, outputs: { onValidate: "onValidate", onClose: "onClose", onValidateAndClose: "onValidateAndClose", onBackClick: "onBackClick", onSearch: "onSearch" }, providers: [
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ToolbarComponent, selector: "app-toolbar", inputs: { progressBarMode: "progressBarMode", title: "title", color: "color", class: "class", backHref: "backHref", defaultBackHref: "defaultBackHref", hasValidate: "hasValidate", hasClose: "hasClose", hasSearch: "hasSearch", canGoBack: "canGoBack", canShowMenu: "canShowMenu" }, outputs: { onValidate: "onValidate", onClose: "onClose", onValidateAndClose: "onValidateAndClose", onBackClick: "onBackClick", onSearch: "onSearch" }, providers: [
         { provide: ToolbarToken, useExisting: ToolbarComponent }
     ], viewQueries: [{ propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true, static: true }, { propertyName: "menuToggle", first: true, predicate: ["menuToggle"], descendants: true, static: true }], ngImport: i0, template: "<ion-header [class]=\"class\">\n  <ion-toolbar [color]=\"color\">\n\n    <ion-buttons slot=\"start\">\n\n      <!-- back button -->\n      <ion-button class=\"back-button\"\n                  *ngIf=\"canGoBack\"\n                  (click)=\"doBackClick($event)\"\n                  routerDirection=\"back\" >\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n\n      <!-- show menu button -->\n      <ion-menu-toggle #menuToggle\n                       [menu]=\"'left'\"\n                       [class.cdk-visually-hidden]=\"canGoBack || !canShowMenu\">\n        <ion-button>\n          <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n        </ion-button>\n      </ion-menu-toggle>\n\n      <ng-content select=\"[slot=start]\"></ng-content>\n    </ion-buttons>\n\n    <ion-title [innerHTML]=\"title\"></ion-title>\n\n    <ng-content select=\"ion-title\"></ng-content>\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\" collapse=\"true\">\n\n      <ng-content select=\"[slot=end]\"></ng-content>\n\n      <!-- search bar -->\n      <ion-searchbar #searchbar animated\n                     type=\"search\"\n                     *ngIf=\"hasSearch\"\n                     [class.cdk-visually-hidden]=\"!showSearchBar\"\n                     show-cancel-button=\"always\"\n                     (ionChange)=\"ionSearchBarChanged($event)\"\n                     (ionCancel)=\"toggleSearchBar()\">\n      </ion-searchbar>\n\n      <!-- search button -->\n      <ion-button (click)=\"toggleSearchBar()\"\n                  *ngIf=\"hasSearch && !showSearchBar\">\n        <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n      </ion-button>\n\n      <!-- close button -->\n      <ion-button *ngIf=\"hasClose\"\n                  (tap)=\"tapClose($event)\"\n                  class=\"visible-xs visible-sm visible-mobile\">\n        <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n      </ion-button>\n\n      <!-- validate button -->\n      <ion-button *ngIf=\"hasValidate\"\n                  (tap)=\"tapValidate($event)\"\n                  class=\"visible-xs visible-sm visible-mobile\">\n        <ion-icon slot=\"icon-only\" name=\"save\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- progress bar -->\n  <mat-progress-bar [color]=\"color|matColor\" [mode]=\"_progressBarMode$ | async\">\n  </mat-progress-bar>\n</ion-header>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "component", type: i4$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ToolbarComponent, decorators: [{
@@ -19252,7 +19238,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         type: Inject,
                         args: [APP_PROGRESS_BAR_SERVICE]
                     }] }];
-    }, propDecorators: { title: [{
+    }, propDecorators: { progressBarMode: [{
+                type: Input
+            }], title: [{
                 type: Input
             }], color: [{
                 type: Input
@@ -19344,7 +19332,6 @@ class SharedModule {
                 { provide: ENVIRONMENT, useValue: environment },
                 // { provide: StorageService, useClass: StorageService, deps: [ENVIRONMENT]},
                 { provide: APP_STORAGE, useExisting: StorageService },
-                // { provide: APP_PROGRESS_BAR_SERVICE, useClass: ProgressBarService },
                 StorageService,
                 AudioProvider,
                 FileService,
@@ -19359,7 +19346,6 @@ class SharedModule {
                 HighlightPipe,
                 NumberFormatPipe,
                 { provide: OverlayContainer, useClass: FullscreenOverlayContainer },
-                { provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true, deps: [APP_PROGRESS_BAR_SERVICE] },
                 { provide: MatPaginatorIntl, useClass: MatPaginatorI18n, deps: [TranslateService] },
                 { provide: MatStepperIntl, useClass: MatStepperI18n, deps: [TranslateService] },
                 // FIXME: try to force a custom overlay for autocomplete, because of there is a bug when using inside an ionic modal
@@ -19887,6 +19873,27 @@ class FormFieldValuesHolder {
     }
 }
 
+let ProgressInterceptor = class ProgressInterceptor {
+    constructor(progressBarService) {
+        this.progressBarService = progressBarService;
+    }
+    intercept(req, next) {
+        this.progressBarService.increase();
+        return next.handle(req)
+            .pipe(tap(event => {
+            if (event instanceof HttpResponse) {
+                this.progressBarService.decrease();
+            }
+        }), catchError((err, event) => {
+            this.progressBarService.decrease();
+            throw err;
+        }));
+    }
+};
+ProgressInterceptor = __decorate([
+    __param(0, Inject(APP_PROGRESS_BAR_SERVICE))
+], ProgressInterceptor);
+
 class ImageService extends StartableService {
     constructor(platform, settings, translate, popoverController, 
     //              protected camera: Camera,
@@ -23234,7 +23241,7 @@ class HomePage {
     }
 }
 HomePage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HomePage, deps: [{ token: AccountService }, { token: i2.ModalController }, { token: i1$1.TranslateService }, { token: i2.ToastController }, { token: ConfigService }, { token: PlatformService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: LocalSettingsService }, { token: ENVIRONMENT }, { token: APP_LOCALES }, { token: APP_HOME_BUTTONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-HomePage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: HomePage, selector: "app-page-home", ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\n      <p [innerHTML]=\"'COMMON.LOADING_DOTS'|translate\"></p>\n      <div class=\"sk-cube1 sk-cube\"></div>\n      <div class=\"sk-cube2 sk-cube\"></div>\n      <div class=\"sk-cube4 sk-cube\"></div>\n      <div class=\"sk-cube3 sk-cube\"></div>\n    </div>\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar translucent>\n      <ion-buttons slot=\"start\">\n        <ion-menu-toggle>\n          <ion-button color=\"light\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n          </ion-button>\n        </ion-menu-toggle>\n      </ion-buttons>\n\n      <ion-buttons slot=\"end\">\n        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                            [showInstallButton]=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @fadeInAnimation>\n    <ion-card-header>\n      <ion-card-title class=\"ion-text-center\">\n        <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB'|translate: {appName: appName}\"></span>\n        <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP'|translate: {appName: appName}\"></span>\n      </ion-card-title>\n      <ion-card-subtitle [innerHTML]=\"description\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ logo }}\">\n      </ion-text>\n      <!-- register help text -->\n      <ion-text *ngIf=\"!isLogin && canRegister\">\n        <br/>\n        <span translate>HOME.REGISTER_HELP</span>\n      </ion-text>\n    </ion-card-content>\n\n    <ion-footer class=\"ion-padding-top\">\n\n      <!-- If NOT login -->\n      <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\n        <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n          <span translate>HOME.BTN_REGISTER</span>\n        </ion-button>\n        <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n          <span translate>AUTH.BTN_LOGIN</span>\n        </ion-button>\n\n      </ng-container>\n\n      <!-- If user login -->\n      <ng-template #loginButtons>\n\n        <!-- Feature buttons -->\n        <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n          <ng-container *ngFor=\"let item of buttons\">\n            <ion-button *ngIf=\"item.path\"\n                        expand=\"block\" color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\">\n              <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n              <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n              <ion-text>{{'HOME.BTN_DATA_ENTRY'|translate: {name: (item.title | translate) } }}</ion-text>\n            </ion-button>\n\n            <!-- divider -->\n            <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n              <ion-label translate>{{item.title}}&nbsp;</ion-label>\n            </div>\n          </ng-container>\n\n          <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n        </ng-container>\n\n        <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n          <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n          <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n        </ion-button>\n\n        <p hidden-xs hidden-sm hidden-mobile>\n          <ion-text [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></ion-text>\n          <br/>\n          <ion-text>\n            <a href=\"#\" (click)=\"logout($event)\">\n              <span translate>HOME.BTN_DISCONNECT</span>\n            </a>\n          </ion-text>\n        </p>\n\n\n      </ng-template>\n\n    </ion-footer>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               class=\"ion-text-center\">\n        <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n          <ion-card-header class=\"ion-no-padding\">\n            <!-- top bar -->\n            <ion-card-subtitle>\n              <button type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <ion-label [innerHTML]=\"page.subtitle|translate\"></ion-label>\n              <ion-text class=\"ion-float-end\" [title]=\"page.time|dateFormat:{time: true}\">\n                <small><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&nbsp;\n              </ion-text>\n            </ion-card-subtitle>\n\n            <!-- main page -->\n            <ion-card-title class=\"ion-no-margin ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"page.icon\"    slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{page.matIcon}}</mat-icon>\n\n                <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n              </ion-item>\n            </ion-card-title>\n          </ion-card-header>\n\n          <!-- children pages -->\n          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"childPage.icon\"    slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n", styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;display:inline-block;padding:15px;background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-color-primary);z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:#ffffffb3}ion-content ion-card.welcome button{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:#ffffffb3}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{background-color:#ffffffb3;min-width:240px;z-index:0;position:absolute;left:16px;right:16px;bottom:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - 100px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: i11$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }], animations: [fadeInAnimation, slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HomePage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: HomePage, selector: "app-page-home", ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\n      <p [innerHTML]=\"'COMMON.LOADING_DOTS'|translate\"></p>\n      <div class=\"sk-cube1 sk-cube\"></div>\n      <div class=\"sk-cube2 sk-cube\"></div>\n      <div class=\"sk-cube4 sk-cube\"></div>\n      <div class=\"sk-cube3 sk-cube\"></div>\n    </div>\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar translucent>\n      <ion-buttons slot=\"start\">\n        <ion-menu-toggle>\n          <ion-button color=\"light\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n          </ion-button>\n        </ion-menu-toggle>\n      </ion-buttons>\n\n      <ion-buttons slot=\"end\">\n        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                            [showInstallButton]=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @fadeInAnimation>\n    <ion-card-header>\n      <ion-card-title class=\"ion-text-center\">\n        <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB'|translate: {appName: appName}\"></span>\n        <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP'|translate: {appName: appName}\"></span>\n      </ion-card-title>\n      <ion-card-subtitle [innerHTML]=\"description\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ logo }}\">\n      </ion-text>\n      <!-- register help text -->\n      <ion-text *ngIf=\"!isLogin && canRegister\">\n        <br/>\n        <span translate>HOME.REGISTER_HELP</span>\n      </ion-text>\n    </ion-card-content>\n\n    <ion-footer class=\"ion-padding-top\">\n\n      <!-- If NOT login -->\n      <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\n        <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n          <span translate>HOME.BTN_REGISTER</span>\n        </ion-button>\n        <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n          <span translate>AUTH.BTN_LOGIN</span>\n        </ion-button>\n\n      </ng-container>\n\n      <!-- If user login -->\n      <ng-template #loginButtons>\n\n        <!-- Feature buttons -->\n        <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n          <ng-container *ngFor=\"let item of buttons\">\n            <ion-button *ngIf=\"item.path\"\n                        expand=\"block\" color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\">\n              <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n              <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n              <ion-text>{{'HOME.BTN_DATA_ENTRY'|translate: {name: (item.title | translate) } }}</ion-text>\n            </ion-button>\n\n            <!-- divider -->\n            <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n              <ion-label translate>{{item.title}}&nbsp;</ion-label>\n            </div>\n          </ng-container>\n\n          <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n        </ng-container>\n\n        <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n          <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n          <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n        </ion-button>\n\n        <p hidden-xs hidden-sm hidden-mobile>\n          <ion-text [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></ion-text>\n          <br/>\n          <ion-text>\n            <a href=\"#\" (click)=\"logout($event)\">\n              <span translate>HOME.BTN_DISCONNECT</span>\n            </a>\n          </ion-text>\n        </p>\n\n\n      </ng-template>\n\n    </ion-footer>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               class=\"ion-text-center\">\n        <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n          <ion-card-header class=\"ion-no-padding\">\n            <!-- top bar -->\n            <ion-card-subtitle>\n              <button type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <ion-label [innerHTML]=\"page.subtitle|translate\"></ion-label>\n              <ion-text class=\"ion-float-end\" [title]=\"page.time|dateFormat:{time: true}\">\n                <small><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&nbsp;\n              </ion-text>\n            </ion-card-subtitle>\n\n            <!-- main page -->\n            <ion-card-title class=\"ion-no-margin ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"page.icon\"    slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{page.matIcon}}</mat-icon>\n\n                <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n              </ion-item>\n            </ion-card-title>\n          </ion-card-header>\n\n          <!-- children pages -->\n          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"childPage.icon\"    slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n", styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;display:inline-block;padding:15px;background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-color-primary);z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:#ffffffb3}ion-content ion-card.welcome button{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:#ffffffb3}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{background-color:#ffffffb3;min-width:240px;z-index:0;position:absolute;left:16px;right:16px;bottom:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - 100px)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: i11$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }], animations: [fadeInAnimation, slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HomePage, decorators: [{
             type: Component,
             args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation], template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\n      <p [innerHTML]=\"'COMMON.LOADING_DOTS'|translate\"></p>\n      <div class=\"sk-cube1 sk-cube\"></div>\n      <div class=\"sk-cube2 sk-cube\"></div>\n      <div class=\"sk-cube4 sk-cube\"></div>\n      <div class=\"sk-cube3 sk-cube\"></div>\n    </div>\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar translucent>\n      <ion-buttons slot=\"start\">\n        <ion-menu-toggle>\n          <ion-button color=\"light\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n          </ion-button>\n        </ion-menu-toggle>\n      </ion-buttons>\n\n      <ion-buttons slot=\"end\">\n        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                            [showInstallButton]=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @fadeInAnimation>\n    <ion-card-header>\n      <ion-card-title class=\"ion-text-center\">\n        <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB'|translate: {appName: appName}\"></span>\n        <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP'|translate: {appName: appName}\"></span>\n      </ion-card-title>\n      <ion-card-subtitle [innerHTML]=\"description\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ logo }}\">\n      </ion-text>\n      <!-- register help text -->\n      <ion-text *ngIf=\"!isLogin && canRegister\">\n        <br/>\n        <span translate>HOME.REGISTER_HELP</span>\n      </ion-text>\n    </ion-card-content>\n\n    <ion-footer class=\"ion-padding-top\">\n\n      <!-- If NOT login -->\n      <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\n        <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n          <span translate>HOME.BTN_REGISTER</span>\n        </ion-button>\n        <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n          <span translate>AUTH.BTN_LOGIN</span>\n        </ion-button>\n\n      </ng-container>\n\n      <!-- If user login -->\n      <ng-template #loginButtons>\n\n        <!-- Feature buttons -->\n        <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n          <ng-container *ngFor=\"let item of buttons\">\n            <ion-button *ngIf=\"item.path\"\n                        expand=\"block\" color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\">\n              <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n              <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n              <ion-text>{{'HOME.BTN_DATA_ENTRY'|translate: {name: (item.title | translate) } }}</ion-text>\n            </ion-button>\n\n            <!-- divider -->\n            <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n              <ion-label translate>{{item.title}}&nbsp;</ion-label>\n            </div>\n          </ng-container>\n\n          <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n        </ng-container>\n\n        <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n          <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n          <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n        </ion-button>\n\n        <p hidden-xs hidden-sm hidden-mobile>\n          <ion-text [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></ion-text>\n          <br/>\n          <ion-text>\n            <a href=\"#\" (click)=\"logout($event)\">\n              <span translate>HOME.BTN_DISCONNECT</span>\n            </a>\n          </ion-text>\n        </p>\n\n\n      </ng-template>\n\n    </ion-footer>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               class=\"ion-text-center\">\n        <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n          <ion-card-header class=\"ion-no-padding\">\n            <!-- top bar -->\n            <ion-card-subtitle>\n              <button type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <ion-label [innerHTML]=\"page.subtitle|translate\"></ion-label>\n              <ion-text class=\"ion-float-end\" [title]=\"page.time|dateFormat:{time: true}\">\n                <small><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&nbsp;\n              </ion-text>\n            </ion-card-subtitle>\n\n            <!-- main page -->\n            <ion-card-title class=\"ion-no-margin ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"page.icon\"    slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{page.matIcon}}</mat-icon>\n\n                <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n              </ion-item>\n            </ion-card-title>\n          </ion-card-header>\n\n          <!-- children pages -->\n          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"childPage.icon\"    slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n", styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background: transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;display:inline-block;padding:15px;background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-color-primary);z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:#ffffffb3}ion-content ion-card.welcome button{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:#ffffffb3}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{--ion-item-background: $transparent;--ion-item-icon-color: var(--ion-color-primary);--ion-item-text-color: var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background: var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color: var(--ion-color-dark);--ion-item-text-color: var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{background-color:#ffffffb3;min-width:240px;z-index:0;position:absolute;left:16px;right:16px;bottom:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content ion-text{text-align:center}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:calc(100% - 100px)}}\n"] }]
@@ -23319,7 +23326,7 @@ class RegisterConfirmPage {
     }
 }
 RegisterConfirmPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RegisterConfirmPage, deps: [{ token: PlatformService }, { token: AccountService }, { token: i1$5.ActivatedRoute }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-RegisterConfirmPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RegisterConfirmPage, selector: "app-register-confirm-page", ngImport: i0, template: "<app-toolbar [title]=\"'REGISTER.CONFIRMED.TITLE'|translate\" color=\"primary\">\n</app-toolbar>\n\n\n<ion-content class=\"bg-image-cover center ion-padding\" [ngStyle]=\"contentStyle\">\n\n  <p class=\"hidden-xs ion-padding\">&nbsp;<br /><br /></p>\n  <p class=\"hidden-xs\">&nbsp;</p>\n\n\n  <ion-card>\n    <ion-card-content>\n\n      <div>\n        <ng-container *ngIf=\"loading\">\n          <h4 translate>REGISTER.CONFIRMED.LOADING</h4>\n          <p><ion-spinner></ion-spinner></p>\n        </ng-container>\n\n        <!-- error -->\n        <ion-item *ngIf=\"!loading && error\">\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      </div>\n\n      <div *ngIf=\"!loading && !error\">\n        <h3>\n          <ion-icon name=\"checkmark\"></ion-icon>\n          <b translate>REGISTER.CONFIRMED.SUB_TITLE</b>\n        </h3>\n\n        <ion-text>\n          <p [innerHTML]=\"'REGISTER.CONFIRMED.SUCCESS'|translate: {email: email}\"></p>\n          <p *ngIf=\"!isLogin\" [innerHTML]=\"'REGISTER.CONFIRMED.LOGIN_HELP'|translate\"></p>\n        </ion-text>\n\n      </div>\n\n    </ion-card-content>\n\n    <ion-footer *ngIf=\"!loading\">\n      <ion-button expand=\"full\" color=\"primary\" [routerLink]=\"['/account']\" *ngIf=\"!isLogin\">\n        <ion-icon name=\"log-in\" slot=\"start\"></ion-icon>\n        <span translate>AUTH.BTN_LOGIN</span>\n      </ion-button>\n\n      <ion-button expand=\"full\" color=\"secondary\" [routerLink]=\"['/account']\" *ngIf=\"isLogin\">\n        <ion-icon name=\"contact\" slot=\"start\"></ion-icon>\n        <span translate>HOME.BTN_MY_ACCOUNT</span>\n      </ion-button>\n    </ion-footer>\n  </ion-card>\n\n</ion-content>\n", styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,.bottom-banner,ion-text,ion-card img,ion-card,ion-content{text-align:center;display:inline-block}ion-content{--ion-background-color: transparent;background-size:cover;display:inline-block;padding:15px}ion-card{padding:var(--ion-padding);background-color:#ffffffb3;min-width:240px;max-width:400px;z-index:9}ion-card button{margin-top:16px}ion-card img{max-width:250px}.bottom-banner{padding:var(--ion-padding);background-color:#ffffffb3;min-width:240px;z-index:0}.bottom-banner img.logo{max-height:50px;margin-left:8px}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:auto;max-width:260px}ion-content ion-card img{max-width:100px;margin-left:8px}ion-content ion-card ion-footer ion-button{margin-top:8px}.bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}.bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:606px}.main-content{padding-bottom:0}.bottom-banner{position:absolute;bottom:16px;left:16px;right:16px}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+RegisterConfirmPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RegisterConfirmPage, selector: "app-register-confirm-page", ngImport: i0, template: "<app-toolbar [title]=\"'REGISTER.CONFIRMED.TITLE'|translate\" color=\"primary\">\n</app-toolbar>\n\n\n<ion-content class=\"bg-image-cover center ion-padding\" [ngStyle]=\"contentStyle\">\n\n  <p class=\"hidden-xs ion-padding\">&nbsp;<br /><br /></p>\n  <p class=\"hidden-xs\">&nbsp;</p>\n\n\n  <ion-card>\n    <ion-card-content>\n\n      <div>\n        <ng-container *ngIf=\"loading\">\n          <h4 translate>REGISTER.CONFIRMED.LOADING</h4>\n          <p><ion-spinner></ion-spinner></p>\n        </ng-container>\n\n        <!-- error -->\n        <ion-item *ngIf=\"!loading && error\">\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      </div>\n\n      <div *ngIf=\"!loading && !error\">\n        <h3>\n          <ion-icon name=\"checkmark\"></ion-icon>\n          <b translate>REGISTER.CONFIRMED.SUB_TITLE</b>\n        </h3>\n\n        <ion-text>\n          <p [innerHTML]=\"'REGISTER.CONFIRMED.SUCCESS'|translate: {email: email}\"></p>\n          <p *ngIf=\"!isLogin\" [innerHTML]=\"'REGISTER.CONFIRMED.LOGIN_HELP'|translate\"></p>\n        </ion-text>\n\n      </div>\n\n    </ion-card-content>\n\n    <ion-footer *ngIf=\"!loading\">\n      <ion-button expand=\"full\" color=\"primary\" [routerLink]=\"['/account']\" *ngIf=\"!isLogin\">\n        <ion-icon name=\"log-in\" slot=\"start\"></ion-icon>\n        <span translate>AUTH.BTN_LOGIN</span>\n      </ion-button>\n\n      <ion-button expand=\"full\" color=\"secondary\" [routerLink]=\"['/account']\" *ngIf=\"isLogin\">\n        <ion-icon name=\"contact\" slot=\"start\"></ion-icon>\n        <span translate>HOME.BTN_MY_ACCOUNT</span>\n      </ion-button>\n    </ion-footer>\n  </ion-card>\n\n</ion-content>\n", styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,.bottom-banner,ion-text,ion-card img,ion-card,ion-content{text-align:center;display:inline-block}ion-content{--ion-background-color: transparent;background-size:cover;display:inline-block;padding:15px}ion-card{padding:var(--ion-padding);background-color:#ffffffb3;min-width:240px;max-width:400px;z-index:9}ion-card button{margin-top:16px}ion-card img{max-width:250px}.bottom-banner{padding:var(--ion-padding);background-color:#ffffffb3;min-width:240px;z-index:0}.bottom-banner img.logo{max-height:50px;margin-left:8px}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:auto;max-width:260px}ion-content ion-card img{max-width:100px;margin-left:8px}ion-content ion-card ion-footer ion-button{margin-top:8px}.bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}.bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:606px}.main-content{padding-bottom:0}.bottom-banner{position:absolute;bottom:16px;left:16px;right:16px}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RegisterConfirmPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-register-confirm-page', template: "<app-toolbar [title]=\"'REGISTER.CONFIRMED.TITLE'|translate\" color=\"primary\">\n</app-toolbar>\n\n\n<ion-content class=\"bg-image-cover center ion-padding\" [ngStyle]=\"contentStyle\">\n\n  <p class=\"hidden-xs ion-padding\">&nbsp;<br /><br /></p>\n  <p class=\"hidden-xs\">&nbsp;</p>\n\n\n  <ion-card>\n    <ion-card-content>\n\n      <div>\n        <ng-container *ngIf=\"loading\">\n          <h4 translate>REGISTER.CONFIRMED.LOADING</h4>\n          <p><ion-spinner></ion-spinner></p>\n        </ng-container>\n\n        <!-- error -->\n        <ion-item *ngIf=\"!loading && error\">\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      </div>\n\n      <div *ngIf=\"!loading && !error\">\n        <h3>\n          <ion-icon name=\"checkmark\"></ion-icon>\n          <b translate>REGISTER.CONFIRMED.SUB_TITLE</b>\n        </h3>\n\n        <ion-text>\n          <p [innerHTML]=\"'REGISTER.CONFIRMED.SUCCESS'|translate: {email: email}\"></p>\n          <p *ngIf=\"!isLogin\" [innerHTML]=\"'REGISTER.CONFIRMED.LOGIN_HELP'|translate\"></p>\n        </ion-text>\n\n      </div>\n\n    </ion-card-content>\n\n    <ion-footer *ngIf=\"!loading\">\n      <ion-button expand=\"full\" color=\"primary\" [routerLink]=\"['/account']\" *ngIf=\"!isLogin\">\n        <ion-icon name=\"log-in\" slot=\"start\"></ion-icon>\n        <span translate>AUTH.BTN_LOGIN</span>\n      </ion-button>\n\n      <ion-button expand=\"full\" color=\"secondary\" [routerLink]=\"['/account']\" *ngIf=\"isLogin\">\n        <ion-icon name=\"contact\" slot=\"start\"></ion-icon>\n        <span translate>HOME.BTN_MY_ACCOUNT</span>\n      </ion-button>\n    </ion-footer>\n  </ion-card>\n\n</ion-content>\n", styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,.bottom-banner,ion-text,ion-card img,ion-card,ion-content{text-align:center;display:inline-block}ion-content{--ion-background-color: transparent;background-size:cover;display:inline-block;padding:15px}ion-card{padding:var(--ion-padding);background-color:#ffffffb3;min-width:240px;max-width:400px;z-index:9}ion-card button{margin-top:16px}ion-card img{max-width:250px}.bottom-banner{padding:var(--ion-padding);background-color:#ffffffb3;min-width:240px;z-index:0}.bottom-banner img.logo{max-height:50px;margin-left:8px}@media screen and (max-width: 575px){ion-content ion-card{min-width:160px;width:auto;max-width:260px}ion-content ion-card img{max-width:100px;margin-left:8px}ion-content ion-card ion-footer ion-button{margin-top:8px}.bottom-banner img.logo{max-height:30px}}@media screen and (max-width: 767px) and (min-width: 576px){ion-content{min-height:555px}.bottom-banner img.logo{max-height:40px}}@media screen and (min-width: 768px){ion-content{min-height:606px}.main-content{padding-bottom:0}.bottom-banner{position:absolute;bottom:16px;left:16px;right:16px}}\n"] }]
@@ -23848,7 +23855,7 @@ class SettingsPage extends AppForm {
 SettingsPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SettingsPage, deps: [{ token: i0.Injector }, { token: PlatformService }, { token: i1$5.Router }, { token: LocalSettingsValidatorService }, { token: i2.AlertController }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: APP_LOCALES }], target: i0.ɵɵFactoryTarget.Component });
 SettingsPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SettingsPage, selector: "page-settings", providers: [
         { provide: ValidatorService, useExisting: LocalSettingsValidatorService },
-    ], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\"\n                *ngIf=\"!saving\"\n                [disabled]=\"saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item (click)=\"clearCache($event)\">\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item\n          [disabled]=\"!dirty\"\n          (click)=\"cancel($event)\">\n    <ion-label>\n      <mat-icon><ion-icon slot=\"start\" name=\"refresh\"></ion-icon></mat-icon>&nbsp;\n      <span translate>COMMON.BTN_RESET</span>\n    </ion-label>\n  </button>\n</mat-menu>\n\n<ion-content>\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n\n        <ion-col 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 [innerHTML]=\"'SETTINGS.DESCRIPTION'|translate\"></p>\n\n          <!-- account inheritance (desktop) -->\n          <mat-form-field [hidden]=\"!isLogin\" *ngIf=\"!mobile; else accountInheritanceMobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- check box (if desktop) -->\n            <mat-checkbox\n              *ngIf=\"!mobile; else accountInheritanceMobile\"\n              (change)=\"setAccountInheritance($event.checked)\"\n              [checked]=\"accountInheritance\">\n              <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n            </mat-checkbox>\n\n            <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- account inheritance (if mobile) -->\n          <ng-template #accountInheritanceMobile>\n            <mat-form-field [hidden]=\"!isLogin\">\n              <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n              <!-- slide toggle  -->\n              <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n              <mat-slide-toggle matSuffix\n                                (change)=\"setAccountInheritance($event.checked)\"\n                                [checked]=\"accountInheritance\">\n\n              </mat-slide-toggle>\n              <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          </ng-template>\n\n          <!-- locale -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{item.value}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n\n          <!-- Network entry -->\n          <h3>\n            <ion-text translate>SETTINGS.NETWORK_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Peer address -->\n          <mat-form-field>\n            <input matInput type=\"text\" [placeholder]=\"'SETTINGS.PEER_URL'|translate\"\n                   formControlName=\"peerUrl\"\n                   required>\n\n            <button mat-icon-button type=\"button\" matSuffix (click)=\"showSelectPeerModal()\" tabindex=\"-1\"\n                    [title]=\"'SETTINGS.BTN_CHANGE_PEER'|translate\">\n              <mat-icon>search</mat-icon>\n            </button>\n\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_REACHABLE\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n            </mat-error>\n          </mat-form-field>\n\n          <!-- Offline mode (if mobile) -->\n          <mat-form-field *ngIf=\"mobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- slide toggle  -->\n            <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n            <mat-slide-toggle matSuffix\n                              (change)=\"network.setForceOffline($event.checked)\"\n                              [checked]=\"network.offline\">\n\n            </mat-slide-toggle>\n          </mat-form-field>\n\n          <!-- Data entry -->\n          <h3>\n            <ion-text translate>SETTINGS.DATA_ENTRY_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Usage mode -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.USAGE_MODE'|translate\" formControlName=\"usageMode\"\n                        required>\n              <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                {{'SETTINGS.USAGE_MODES.'+item|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                        required>\n              <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"form.controls.latLongFormat.hasError('required')\"\n              translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- fields options -->\n          <ion-grid formArrayName=\"properties\" class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n                <span class=\"toolbar-spacer\"></span>\n\n                <!-- Show more options -->\n                <ion-button color=\"light\" *ngIf=\"propertiesForm?.length === 0\"\n                            [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                            (click)=\"propertiesFormHelper.add()\">\n                  <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n                  <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n                </ion-button>\n              </ion-col>\n            </ion-row>\n\n            <!-- Fields options -->\n            <ng-container *ngFor=\"let propertyForm of propertiesForm?.controls; let i=index\">\n              <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n                <!-- property key -->\n                <ion-col class=\"ion-no-padding\">\n                  <mat-form-field>\n                    <mat-select formControlName=\"key\"\n                                [placeholder]=\" 'SETTINGS.PROPERTY_KEY'|translate\">\n                      <mat-option *ngFor=\"let item of propertyDefinitions\" [value]=\"item.key\">{{ item.label | translate }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </ion-col>\n\n                <!-- property value -->\n                <ion-col class=\"ion-no-padding\" padding-left>\n                  <app-form-field *ngIf=\"getPropertyDefinition(i); let definition\"\n                                  floatLabel=\"never\"\n                                  [definition]=\"definition\"\n                                  [formControl]=\"propertyForm|formGetControl:'value'\"\n                                  [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                                  [required]=\"true\">\n                  </app-form-field>\n                </ion-col>\n                <ion-col size=\"2\" class=\"ion-no-padding\">\n                  <button type=\"button\" mat-icon-button color=\"light\"\n                          [disabled]=\"loading\"\n                          [title]=\"'COMMON.BTN_DELETE'|translate\"\n                          (click)=\"removePropertyAt(i)\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                  <button *ngIf=\"propertiesFormHelper.isLast(i)\"\n                          type=\"button\"\n                          mat-icon-button\n                          color=\"light\"\n                          [disabled]=\"loading\"\n                           [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                          (click)=\"propertiesFormHelper.add()\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </ion-col>\n              </ion-row>\n            </ng-container>\n          </ion-grid>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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: i11$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'SETTINGS.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\"\n                *ngIf=\"!saving\"\n                [disabled]=\"saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item (click)=\"clearCache($event)\">\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item\n          [disabled]=\"!dirty\"\n          (click)=\"cancel($event)\">\n    <ion-label>\n      <mat-icon><ion-icon slot=\"start\" name=\"refresh\"></ion-icon></mat-icon>&nbsp;\n      <span translate>COMMON.BTN_RESET</span>\n    </ion-label>\n  </button>\n</mat-menu>\n\n<ion-content>\n\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n\n        <ion-col 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 [innerHTML]=\"'SETTINGS.DESCRIPTION'|translate\"></p>\n\n          <!-- account inheritance (desktop) -->\n          <mat-form-field [hidden]=\"!isLogin\" *ngIf=\"!mobile; else accountInheritanceMobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- check box (if desktop) -->\n            <mat-checkbox\n              *ngIf=\"!mobile; else accountInheritanceMobile\"\n              (change)=\"setAccountInheritance($event.checked)\"\n              [checked]=\"accountInheritance\">\n              <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n            </mat-checkbox>\n\n            <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- account inheritance (if mobile) -->\n          <ng-template #accountInheritanceMobile>\n            <mat-form-field [hidden]=\"!isLogin\">\n              <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n              <!-- slide toggle  -->\n              <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n              <mat-slide-toggle matSuffix\n                                (change)=\"setAccountInheritance($event.checked)\"\n                                [checked]=\"accountInheritance\">\n\n              </mat-slide-toggle>\n              <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          </ng-template>\n\n          <!-- locale -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n              <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                {{item.value}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n\n          <!-- Network entry -->\n          <h3>\n            <ion-text translate>SETTINGS.NETWORK_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Peer address -->\n          <mat-form-field>\n            <input matInput type=\"text\" [placeholder]=\"'SETTINGS.PEER_URL'|translate\"\n                   formControlName=\"peerUrl\"\n                   required>\n\n            <button mat-icon-button type=\"button\" matSuffix (click)=\"showSelectPeerModal()\" tabindex=\"-1\"\n                    [title]=\"'SETTINGS.BTN_CHANGE_PEER'|translate\">\n              <mat-icon>search</mat-icon>\n            </button>\n\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_REACHABLE\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\"\n                       translate>SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n            </mat-error>\n          </mat-form-field>\n\n          <!-- Offline mode (if mobile) -->\n          <mat-form-field *ngIf=\"mobile\">\n            <input matInput hidden formControlName=\"accountInheritance\" type=\"text\">\n\n            <!-- slide toggle  -->\n            <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n            <mat-slide-toggle matSuffix\n                              (change)=\"network.setForceOffline($event.checked)\"\n                              [checked]=\"network.offline\">\n\n            </mat-slide-toggle>\n          </mat-form-field>\n\n          <!-- Data entry -->\n          <h3>\n            <ion-text translate>SETTINGS.DATA_ENTRY_DIVIDER</ion-text>\n          </h3>\n\n          <!-- Usage mode -->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.USAGE_MODE'|translate\" formControlName=\"usageMode\"\n                        required>\n              <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                {{'SETTINGS.USAGE_MODES.'+item|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\"\n                       translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- lat/long format-->\n          <mat-form-field>\n            <mat-select [placeholder]=\"'SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                        required>\n              <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n              </mat-option>\n            </mat-select>\n            <mat-error\n              *ngIf=\"form.controls.latLongFormat.hasError('required')\"\n              translate>ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n\n          <!-- fields options -->\n          <ion-grid formArrayName=\"properties\" class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding ion-align-self-end\" size=\"12\">\n                <span class=\"toolbar-spacer\"></span>\n\n                <!-- Show more options -->\n                <ion-button color=\"light\" *ngIf=\"propertiesForm?.length === 0\"\n                            [title]=\"'SETTINGS.BTN_SHOW_MORE_HELP'|translate\"\n                            (click)=\"propertiesFormHelper.add()\">\n                  <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n                  <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n                </ion-button>\n              </ion-col>\n            </ion-row>\n\n            <!-- Fields options -->\n            <ng-container *ngFor=\"let propertyForm of propertiesForm?.controls; let i=index\">\n              <ion-row class=\"ion-no-padding\" [formGroupName]=\"i\">\n\n                <!-- property key -->\n                <ion-col class=\"ion-no-padding\">\n                  <mat-form-field>\n                    <mat-select formControlName=\"key\"\n                                [placeholder]=\" 'SETTINGS.PROPERTY_KEY'|translate\">\n                      <mat-option *ngFor=\"let item of propertyDefinitions\" [value]=\"item.key\">{{ item.label | translate }}\n                      </mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                </ion-col>\n\n                <!-- property value -->\n                <ion-col class=\"ion-no-padding\" padding-left>\n                  <app-form-field *ngIf=\"getPropertyDefinition(i); let definition\"\n                                  floatLabel=\"never\"\n                                  [definition]=\"definition\"\n                                  [formControl]=\"propertyForm|formGetControl:'value'\"\n                                  [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                                  [required]=\"true\">\n                  </app-form-field>\n                </ion-col>\n                <ion-col size=\"2\" class=\"ion-no-padding\">\n                  <button type=\"button\" mat-icon-button color=\"light\"\n                          [disabled]=\"loading\"\n                          [title]=\"'COMMON.BTN_DELETE'|translate\"\n                          (click)=\"removePropertyAt(i)\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                  <button *ngIf=\"propertiesFormHelper.isLast(i)\"\n                          type=\"button\"\n                          mat-icon-button\n                          color=\"light\"\n                          [disabled]=\"loading\"\n                           [title]=\"'SETTINGS.BTN_ADD_PROPERTY'|translate\"\n                          (click)=\"propertiesFormHelper.add()\">\n                    <mat-icon>add</mat-icon>\n                  </button>\n                </ion-col>\n              </ion-row>\n            </ng-container>\n          </ion-grid>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"2\">&nbsp;\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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: i11$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SettingsPage, decorators: [{
             type: Component,
             args: [{ selector: 'page-settings', providers: [
@@ -24866,7 +24873,7 @@ class AccountPage extends AppForm {
     }
 }
 AccountPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccountPage, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: NetworkService }, { token: i1$5.Router }, { token: AccountValidatorService }, { token: UserSettingsValidatorService }, { token: i1$1.TranslateService }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: APP_LOCALES }], target: i0.ɵɵFactoryTarget.Component });
-AccountPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccountPage, selector: "app-account-page", viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- loader -->\n    <ion-spinner *ngIf=\"loading || saving; else endButtons\"></ion-spinner>\n\n    <ng-template #endButtons>\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH'|translate\"\n                  *ngIf=\"network.online\"\n                  (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\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  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\">\n\n      <!-- TAB: user details -->\n      <mat-tab label=\"{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}</ion-label>\n          <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\" *ngIf=\"submitted && form.invalid\"></ion-icon>\n        </ng-template>\n\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row class=\"ion-no-padding\">\n\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"3\"></ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION'|translate\"></p>\n\n              <!--h1>Identit\u00E9</h1-->\n\n              <!-- Email -->\n              <mat-form-field>\n                <input matInput [placeholder]=\"'USER.EMAIL'|translate\"\n                  formControlName=\"email\" autocomplete=\"section-red email\">\n                <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.email.hasError('email') && form.controls.email.dirty\">\n                  <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                </mat-error>\n              </mat-form-field>\n\n              <ion-grid *ngIf=\"email.notConfirmed\" class=\"ion-no-padding ion-padding-bottom\">\n                <ion-row>\n                  <ion-col color=\"danger\">\n                    <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n                    <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL'|translate\"></ion-text>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row style=\"height: 51px;\">\n                  <ion-col style=\"text-align: right;\">\n                    <ion-text>\n                      <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION'|translate\"></small>\n                    </ion-text>\n                  </ion-col>\n                  <ion-col size=\"auto\">\n                    <ion-button fill=\"solid\" color=\"secondary\" *ngIf=\"!email.sending\" (click)=\"sendConfirmationEmail($event)\">\n                      {{'ACCOUNT.BTN_RESEND'|translate}}\n                    </ion-button>\n                    <ion-spinner class=\"ion-no-padding\" *ngIf=\"email.sending\"></ion-spinner>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row *ngIf=\"email.error && !email.sending\">\n                  <ion-col>\n                    <span *ngIf=\"email.error && !email.sending\" [innerHTML]=\"email.error|translate\"></span>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <!-- Last name -->\n              <mat-form-field>\n                <input matInput [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.LAST_NAME'|translate\"\n                       formControlName=\"lastName\"\n                       autocomplete=\"section-blue family-name\"\n                       required>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty\">\n                  <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n                </mat-error>\n              </mat-form-field>\n\n              <!-- First name -->\n              <mat-form-field>\n                <input matInput [placeholder]=\"'USER.FIRST_NAME'|translate\" formControlName=\"firstName\" autocomplete=\"section-blue given-name\"\n                  required>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty\">\n                  <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n                </mat-error>\n              </mat-form-field>\n\n\n              <!-- Additional fields -->\n              <ng-container *ngFor=\"let definition of additionalFields\">\n                <app-form-field [definition]=\"definition\"\n                                [formControlName]=\"definition.key\"\n                                [required]=\"definition.extra && definition.extra.account && definition.extra.account.required || false\">\n                </app-form-field>\n              </ng-container>\n\n              <h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3>\n\n              <!-- profile -->\n              <mat-form-field>\n                <input matInput hidden readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PROFILE'|translate\"\n                  formControlName=\"mainProfile\" required>\n                <span>{{'USER.PROFILE_ENUM.'+form.controls.mainProfile.value | translate}}</span>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- pubkey -->\n              <mat-form-field>\n                <input matInput readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PUBKEY'|translate\" formControlName=\"pubkey\"\n                  required>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\">\n                  <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n                </mat-error>\n              </mat-form-field>\n\n            </ion-col>\n\n            <!-- right  margin -->\n            <ion-col size=\"0\" size-lg=\"3\"></ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab label=\"{{'ACCOUNT.SETTINGS.TITLE'|translate}}\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>\n        </ng-template>\n\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row class=\"ion-no-padding\">\n\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;\n            </ion-col>\n\n            <ion-col class=\"ion-padding\">\n\n              <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION'|translate\"></p>\n\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{item.value}}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"settingsForm.controls.locale.hasError('required') && settingsForm.controls.locale.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- lat/long format-->\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                  required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"settingsForm.controls.latLongFormat.hasError('required') && settingsForm.controls.latLongFormat.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <form formGroupName=\"content\">\n\n\n              </form>\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n    </mat-tab-group>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonText, selector: "ion-text", 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: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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.MatPrefix, selector: "[matPrefix]" }, { 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: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i16.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i16.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i16.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AccountPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccountPage, selector: "app-account-page", viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- loader -->\n    <ion-spinner *ngIf=\"loading || saving; else endButtons\"></ion-spinner>\n\n    <ng-template #endButtons>\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH'|translate\"\n                  *ngIf=\"network.online\"\n                  (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\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  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\">\n\n      <!-- TAB: user details -->\n      <mat-tab label=\"{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}</ion-label>\n          <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\" *ngIf=\"submitted && form.invalid\"></ion-icon>\n        </ng-template>\n\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row class=\"ion-no-padding\">\n\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"3\"></ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION'|translate\"></p>\n\n              <!--h1>Identit\u00E9</h1-->\n\n              <!-- Email -->\n              <mat-form-field>\n                <input matInput [placeholder]=\"'USER.EMAIL'|translate\"\n                  formControlName=\"email\" autocomplete=\"section-red email\">\n                <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.email.hasError('email') && form.controls.email.dirty\">\n                  <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                </mat-error>\n              </mat-form-field>\n\n              <ion-grid *ngIf=\"email.notConfirmed\" class=\"ion-no-padding ion-padding-bottom\">\n                <ion-row>\n                  <ion-col color=\"danger\">\n                    <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n                    <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL'|translate\"></ion-text>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row style=\"height: 51px;\">\n                  <ion-col style=\"text-align: right;\">\n                    <ion-text>\n                      <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION'|translate\"></small>\n                    </ion-text>\n                  </ion-col>\n                  <ion-col size=\"auto\">\n                    <ion-button fill=\"solid\" color=\"secondary\" *ngIf=\"!email.sending\" (click)=\"sendConfirmationEmail($event)\">\n                      {{'ACCOUNT.BTN_RESEND'|translate}}\n                    </ion-button>\n                    <ion-spinner class=\"ion-no-padding\" *ngIf=\"email.sending\"></ion-spinner>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row *ngIf=\"email.error && !email.sending\">\n                  <ion-col>\n                    <span *ngIf=\"email.error && !email.sending\" [innerHTML]=\"email.error|translate\"></span>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <!-- Last name -->\n              <mat-form-field>\n                <input matInput [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.LAST_NAME'|translate\"\n                       formControlName=\"lastName\"\n                       autocomplete=\"section-blue family-name\"\n                       required>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty\">\n                  <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n                </mat-error>\n              </mat-form-field>\n\n              <!-- First name -->\n              <mat-form-field>\n                <input matInput [placeholder]=\"'USER.FIRST_NAME'|translate\" formControlName=\"firstName\" autocomplete=\"section-blue given-name\"\n                  required>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty\">\n                  <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n                </mat-error>\n              </mat-form-field>\n\n\n              <!-- Additional fields -->\n              <ng-container *ngFor=\"let definition of additionalFields\">\n                <app-form-field [definition]=\"definition\"\n                                [formControlName]=\"definition.key\"\n                                [required]=\"definition.extra && definition.extra.account && definition.extra.account.required || false\">\n                </app-form-field>\n              </ng-container>\n\n              <h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3>\n\n              <!-- profile -->\n              <mat-form-field>\n                <input matInput hidden readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PROFILE'|translate\"\n                  formControlName=\"mainProfile\" required>\n                <span>{{'USER.PROFILE_ENUM.'+form.controls.mainProfile.value | translate}}</span>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- pubkey -->\n              <mat-form-field>\n                <input matInput readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PUBKEY'|translate\" formControlName=\"pubkey\"\n                  required>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\">\n                  <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n                </mat-error>\n              </mat-form-field>\n\n            </ion-col>\n\n            <!-- right  margin -->\n            <ion-col size=\"0\" size-lg=\"3\"></ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab label=\"{{'ACCOUNT.SETTINGS.TITLE'|translate}}\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>\n        </ng-template>\n\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row class=\"ion-no-padding\">\n\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;\n            </ion-col>\n\n            <ion-col class=\"ion-padding\">\n\n              <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION'|translate\"></p>\n\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{item.value}}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"settingsForm.controls.locale.hasError('required') && settingsForm.controls.locale.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- lat/long format-->\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                  required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"settingsForm.controls.latLongFormat.hasError('required') && settingsForm.controls.latLongFormat.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <form formGroupName=\"content\">\n\n\n              </form>\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n    </mat-tab-group>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i2.IonText, selector: "ion-text", 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: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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.MatPrefix, selector: "[matPrefix]" }, { 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: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i16.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i16.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i16.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccountPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-account-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar [title]=\"'ACCOUNT.TITLE'|translate\" color=\"primary\"\n             [hasValidate]=\"dirty && !saving\"\n             [hasClose]=\"!dirty && !saving\"\n             (onValidate)=\"save($event)\"\n             [canGoBack]=\"false\"\n             (onClose)=\"close($event)\">\n\n  <ion-buttons slot=\"end\">\n    <!-- loader -->\n    <ion-spinner *ngIf=\"loading || saving; else endButtons\"></ion-spinner>\n\n    <ng-template #endButtons>\n      <!-- refresh button (if online) -->\n      <ion-button [matTooltip]=\"'COMMON.BTN_REFRESH'|translate\"\n                  *ngIf=\"network.online\"\n                  (click)=\"refresh($event)\">\n        <mat-icon slot=\"icon-only\">refresh</mat-icon>\n      </ion-button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content>\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  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n\n    <mat-tab-group #tabGroup [(selectedIndex)]=\"selectedTabIndex\">\n\n      <!-- TAB: user details -->\n      <mat-tab label=\"{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}\" class=\"ion-padding\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"person-circle\"></ion-icon>\n          </mat-icon>\n          <ion-label>{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}</ion-label>\n          <ion-icon slot=\"end\" name=\"alert-circle\" color=\"danger\" *ngIf=\"submitted && form.invalid\"></ion-icon>\n        </ng-template>\n\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row class=\"ion-no-padding\">\n\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"3\"></ion-col>\n\n            <ion-col class=\"ion-padding\">\n              <p [innerHTML]=\"'ACCOUNT.USER_DETAILS.DESCRIPTION'|translate\"></p>\n\n              <!--h1>Identit\u00E9</h1-->\n\n              <!-- Email -->\n              <mat-form-field>\n                <input matInput [placeholder]=\"'USER.EMAIL'|translate\"\n                  formControlName=\"email\" autocomplete=\"section-red email\">\n                <mat-error *ngIf=\"form.controls.email.hasError('required') && form.controls.email.dirty\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.email.hasError('email') && form.controls.email.dirty\">\n                  <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n                </mat-error>\n              </mat-form-field>\n\n              <ion-grid *ngIf=\"email.notConfirmed\" class=\"ion-no-padding ion-padding-bottom\">\n                <ion-row>\n                  <ion-col color=\"danger\">\n                    <ion-icon slot=\"start\" color=\"danger\" name=\"alert-circle\" color=\"danger\"></ion-icon>\n                    <ion-text [innerHTML]=\"'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL'|translate\"></ion-text>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row style=\"height: 51px;\">\n                  <ion-col style=\"text-align: right;\">\n                    <ion-text>\n                      <small [innerHTML]=\"'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION'|translate\"></small>\n                    </ion-text>\n                  </ion-col>\n                  <ion-col size=\"auto\">\n                    <ion-button fill=\"solid\" color=\"secondary\" *ngIf=\"!email.sending\" (click)=\"sendConfirmationEmail($event)\">\n                      {{'ACCOUNT.BTN_RESEND'|translate}}\n                    </ion-button>\n                    <ion-spinner class=\"ion-no-padding\" *ngIf=\"email.sending\"></ion-spinner>\n                  </ion-col>\n                </ion-row>\n\n                <ion-row *ngIf=\"email.error && !email.sending\">\n                  <ion-col>\n                    <span *ngIf=\"email.error && !email.sending\" [innerHTML]=\"email.error|translate\"></span>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n              <!-- Last name -->\n              <mat-form-field>\n                <input matInput [appAutofocus]=\"true\" [autofocusDelay]=\"500\" [placeholder]=\"'USER.LAST_NAME'|translate\"\n                       formControlName=\"lastName\"\n                       autocomplete=\"section-blue family-name\"\n                       required>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('required') && form.controls.lastName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty\">\n                  <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n                </mat-error>\n              </mat-form-field>\n\n              <!-- First name -->\n              <mat-form-field>\n                <input matInput [placeholder]=\"'USER.FIRST_NAME'|translate\" formControlName=\"firstName\" autocomplete=\"section-blue given-name\"\n                  required>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('required') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty\">\n                  <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n                </mat-error>\n              </mat-form-field>\n\n\n              <!-- Additional fields -->\n              <ng-container *ngFor=\"let definition of additionalFields\">\n                <app-form-field [definition]=\"definition\"\n                                [formControlName]=\"definition.key\"\n                                [required]=\"definition.extra && definition.extra.account && definition.extra.account.required || false\">\n                </app-form-field>\n              </ng-container>\n\n              <h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3>\n\n              <!-- profile -->\n              <mat-form-field>\n                <input matInput hidden readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PROFILE'|translate\"\n                  formControlName=\"mainProfile\" required>\n                <span>{{'USER.PROFILE_ENUM.'+form.controls.mainProfile.value | translate}}</span>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- pubkey -->\n              <mat-form-field>\n                <input matInput readonly=\"true\" [placeholder]=\"'ACCOUNT.USER_DETAILS.PUBKEY'|translate\" formControlName=\"pubkey\"\n                  required>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty\">\n                  <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n                </mat-error>\n              </mat-form-field>\n\n            </ion-col>\n\n            <!-- right  margin -->\n            <ion-col size=\"0\" size-lg=\"3\"></ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n\n      <!-- TAB: settings -->\n      <mat-tab label=\"{{'ACCOUNT.SETTINGS.TITLE'|translate}}\" formGroupName=\"settings\">\n        <ng-template mat-tab-label>\n          <mat-icon>\n            <ion-icon matPrefix slot=\"start\" name=\"settings\"></ion-icon>\n          </mat-icon>\n          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>\n        </ng-template>\n\n        <ion-grid class=\"ion-no-padding\">\n          <ion-row class=\"ion-no-padding\">\n\n            <!-- left  margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;\n            </ion-col>\n\n            <ion-col class=\"ion-padding\">\n\n              <p [innerHTML]=\"'ACCOUNT.SETTINGS.DESCRIPTION'|translate\"></p>\n\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.SETTINGS.LOCALE'|translate\" formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{item.value}}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"settingsForm.controls.locale.hasError('required') && settingsForm.controls.locale.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <!-- lat/long format-->\n              <mat-form-field>\n                <mat-select [placeholder]=\"'ACCOUNT.SETTINGS.LAT_LONG_FORMAT'|translate\" formControlName=\"latLongFormat\"\n                  required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{'COMMON.LAT_LONG.'+item+'_PLACEHOLDER'|translate}}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"settingsForm.controls.latLongFormat.hasError('required') && settingsForm.controls.latLongFormat.dirty\"\n                  translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n\n              <form formGroupName=\"content\">\n\n\n              </form>\n            </ion-col>\n\n            <!-- right margin -->\n            <ion-col size=\"0\" size-lg=\"3\">&nbsp;\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </mat-tab>\n    </mat-tab-group>\n\n\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar (onCancel)=\"cancel()\" (onSave)=\"save($event)\" [disabled]=\"!form.dirty || saving\"></app-form-buttons-bar>\n</ion-footer>\n", styles: ["mat-tab-group .mat-tab-body-content{padding:var(--ion-grid-padding);display:grid}form{width:100%}form mat-form-field{width:100%}\n"] }]
@@ -33506,7 +33513,7 @@ class UsersPage extends AppTable {
 UsersPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UsersPage, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: i3$3.ValidatorService }, { token: ConfigService }, { token: PersonService }, { token: MessageService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
 UsersPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: UsersPage, selector: "app-users-table", inputs: { useSticky: "useSticky" }, providers: [
         { provide: ValidatorService, useExisting: PersonValidatorService }
-    ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'USER.LIST.TITLE'|translate\"\n             color=\"primary\"\n             [canGoBack]=\"false\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\">\n  <ion-buttons slot=\"end\">\n\n    <!-- Compose message -->\n    <button mat-icon-button *ngIf=\"canSendMessage\"\n            [title]=\"'USER.LIST.BTN_SEND_MESSAGE'|translate\"\n            (click)=\"openComposeMessageModal($event)\">\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\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      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    </ng-container>\n\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              class=\"hidden-xs hidden-sm\"\n              [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- debug -->\n  <app-debug *ngIf=\"debug\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          focusColumn: {{focusColumn}}<br/>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <input matInput [placeholder]=\"'USER.LIST.FILTER.SEARCH'|translate\" formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-select formControlName=\"statusId\" [placeholder]=\"'USER.STATUS'|translate\">\n                <mat-option [value]=\"null\"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label |translate }}\n                </mat-option>\n              </mat-select>\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                      [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" visible-xs visible-sm visible-mobile 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  <div class=\"table-container\">\n    <table #table mat-table matSort\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\" [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [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      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"avatar\" *ngIf=\"row.currentData.avatar; else generateIcon\"\n               [ngStyle]=\"{'background-image':'url('+row.currentData.avatar+')'}\"></div>\n          <ng-template #generateIcon>\n            <div class=\"avatar\">\n              <svg width=\"38\" width=\"38\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            </div>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='lastName'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['lastName']\"\n                   [placeholder]=\"'USER.LAST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='lastName'\">\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='firstName'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['firstName']\"\n                   [placeholder]=\"'USER.FIRST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='firstName'\">\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='email'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['email']\"\n                   [placeholder]=\"'USER.EMAIL'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='email'\">\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      <ng-container *ngFor=\"let definition of additionalFields\" [matColumnDef]=\"definition.key\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{definition.label|translate}}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn=definition.key\">\n          <app-form-field floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"row.validator.controls[definition.key]\"\n                          [required]=\"definition.extra?.account?.required\"\n                          [autofocus]=\"row.editing && focusColumn===definition.key\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='profile'\">\n          <mat-form-field floatLabel=\"never\">\n            <mat-select [formControl]=\"row.validator.controls['mainProfile']\"\n                        [placeholder]=\"'USER.PROFILE'|translate\">\n              <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='status'\">\n          <mat-form-field floatLabel=\"never\">\n            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\"\n                        [placeholder]=\"'REFERENTIAL.STATUS'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <ion-icon [name]=\"item.icon\"></ion-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='username'\">\n          <mat-form-field floatLabel=\"never\" >\n            <input matInput [formControl]=\"row.validator.controls.username\"\n                   [placeholder]=\"'USER.USERNAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='username'\">\n            <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='usernameExtranet'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls.usernameExtranet\"\n                   [placeholder]=\"'USER.USERNAME_EXTRANET'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='usernameExtranet'\">\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            [title]=\"row.validator.controls.pubkey.valueChanges|async\"\n            (click)=\"focusColumn='pubkey'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['pubkey']\" [placeholder]=\"'USER.PUBKEY'|translate\"\n                   [readonly]=\"!row.editing\" autocomplete=\"off\">\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\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-error]=\"row.validator.invalid\"\n          [class.mat-row-dirty]=\"row.currentData.dirty\"\n          [class.mat-row-disabled]=\"!row.editing\"\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  </div>\n</ion-content>\n\n<ion-footer>\n  <mat-paginator class=\"mat-paginator-footer\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\"\n                 [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"!mobile && inlineEdition\"\n                        (onCancel)=\"onRefresh.emit()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject|async) || !dirty\"></app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}.table-container{height:100%}.mat-table .mat-cell .avatar{height:40px;width:40px;margin:2px 0 0;background-size:cover;background-repeat:no-repeat;background-position:center}.mat-table .mat-column-id{width:30px}.mat-table .mat-column-avatar{width:50px}.mat-table .mat-column-avatar .avatar{border-radius:5px;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5)}.mat-table .mat-column-lastName,.mat-table .mat-column-firstName{min-width:80px}.mat-table .mat-column-email,.mat-table .mat-column-pubkey,.mat-table .mat-column-department{min-width:180px}.mat-table .mat-column-profile{min-width:110px}.mat-table .mat-column-status{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$2.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i17.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i17.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["title", "enable", "expanded"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'USER.LIST.TITLE'|translate\"\n             color=\"primary\"\n             [canGoBack]=\"false\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\">\n  <ion-buttons slot=\"end\">\n\n    <!-- Compose message -->\n    <button mat-icon-button *ngIf=\"canSendMessage\"\n            [title]=\"'USER.LIST.BTN_SEND_MESSAGE'|translate\"\n            (click)=\"openComposeMessageModal($event)\">\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\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      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    </ng-container>\n\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              class=\"hidden-xs hidden-sm\"\n              [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- debug -->\n  <app-debug *ngIf=\"debug\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          focusColumn: {{focusColumn}}<br/>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <input matInput [placeholder]=\"'USER.LIST.FILTER.SEARCH'|translate\" formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-select formControlName=\"statusId\" [placeholder]=\"'USER.STATUS'|translate\">\n                <mat-option [value]=\"null\"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label |translate }}\n                </mat-option>\n              </mat-select>\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                      [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" visible-xs visible-sm visible-mobile 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  <div class=\"table-container\">\n    <table #table mat-table matSort\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\" [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [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      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"avatar\" *ngIf=\"row.currentData.avatar; else generateIcon\"\n               [ngStyle]=\"{'background-image':'url('+row.currentData.avatar+')'}\"></div>\n          <ng-template #generateIcon>\n            <div class=\"avatar\">\n              <svg width=\"38\" width=\"38\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            </div>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='lastName'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['lastName']\"\n                   [placeholder]=\"'USER.LAST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='lastName'\">\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='firstName'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['firstName']\"\n                   [placeholder]=\"'USER.FIRST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='firstName'\">\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='email'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['email']\"\n                   [placeholder]=\"'USER.EMAIL'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='email'\">\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      <ng-container *ngFor=\"let definition of additionalFields\" [matColumnDef]=\"definition.key\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{definition.label|translate}}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn=definition.key\">\n          <app-form-field floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"row.validator.controls[definition.key]\"\n                          [required]=\"definition.extra?.account?.required\"\n                          [autofocus]=\"row.editing && focusColumn===definition.key\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='profile'\">\n          <mat-form-field floatLabel=\"never\">\n            <mat-select [formControl]=\"row.validator.controls['mainProfile']\"\n                        [placeholder]=\"'USER.PROFILE'|translate\">\n              <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='status'\">\n          <mat-form-field floatLabel=\"never\">\n            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\"\n                        [placeholder]=\"'REFERENTIAL.STATUS'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <ion-icon [name]=\"item.icon\"></ion-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='username'\">\n          <mat-form-field floatLabel=\"never\" >\n            <input matInput [formControl]=\"row.validator.controls.username\"\n                   [placeholder]=\"'USER.USERNAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='username'\">\n            <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='usernameExtranet'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls.usernameExtranet\"\n                   [placeholder]=\"'USER.USERNAME_EXTRANET'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='usernameExtranet'\">\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            [title]=\"row.validator.controls.pubkey.valueChanges|async\"\n            (click)=\"focusColumn='pubkey'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['pubkey']\" [placeholder]=\"'USER.PUBKEY'|translate\"\n                   [readonly]=\"!row.editing\" autocomplete=\"off\">\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\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-error]=\"row.validator.invalid\"\n          [class.mat-row-dirty]=\"row.currentData.dirty\"\n          [class.mat-row-disabled]=\"!row.editing\"\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  </div>\n</ion-content>\n\n<ion-footer>\n  <mat-paginator class=\"mat-paginator-footer\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\"\n                 [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"!mobile && inlineEdition\"\n                        (onCancel)=\"onRefresh.emit()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject|async) || !dirty\"></app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}.table-container{height:100%}.mat-table .mat-cell .avatar{height:40px;width:40px;margin:2px 0 0;background-size:cover;background-repeat:no-repeat;background-position:center}.mat-table .mat-column-id{width:30px}.mat-table .mat-column-avatar{width:50px}.mat-table .mat-column-avatar .avatar{border-radius:5px;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5)}.mat-table .mat-column-lastName,.mat-table .mat-column-firstName{min-width:80px}.mat-table .mat-column-email,.mat-table .mat-column-pubkey,.mat-table .mat-column-department{min-width:180px}.mat-table .mat-column-profile{min-width:110px}.mat-table .mat-column-status{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$2.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i17.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i17.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "chipColor", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["title", "enable", "expanded"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UsersPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-users-table', providers: [
@@ -35264,7 +35271,7 @@ TableTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         {
             provide: AppTable, useExisting: forwardRef(() => TableTestPage),
         }
-    ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n  <ion-buttons slot=\"end\">\n\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\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  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\"\n                     [placeholder]=\"'TABLE.TESTING.SEARCH_TEXT'|translate\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <!-- group header cells -->\n\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\" style=\"background-color: whitesmoke; margin-bottom: -1px;\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_1'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_2'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" >\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\" [class.mat-column-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\" [class.mat-column-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      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='label'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['label']\"\n                   [placeholder]=\"'TABLE.TESTING.LABEL'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'label'\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </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 translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\"\n            (click)=\"focusColumn='name'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput\n                   [formControl]=\"row.validator?.controls.name\" [placeholder]=\"'TABLE.TESTING.NAME'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'name'\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-autocomplete-field floatLabel=\"never\"\n                                  [formControl]=\"row.validator.controls.levelId\"\n                                  [config]=\"autocompleteFields.level\"\n                                  [readonly]=\"!row.editing\"\n                                  [required]=\"true\">\n          </mat-autocomplete-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-form-field floatLabel=\"never\">\n            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\" [placeholder]=\"i18nColumnPrefix + 'STATUS_ID'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <ion-icon [name]=\"item.icon\"></ion-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id!==-1\">\n            <small [matTooltip]=\"'TABLE.TESTING.CREATION_DATE'|translate\" *ngIf=\"row.currentData.creationDate; let creationDate\">\n              <ion-icon name=\"calendar\"></ion-icon>\n              {{ creationDate | dateFormat: {time: true} }}\n            </small><br/>\n            <small [matTooltip]=\"'TABLE.TESTING.UPDATE_DATE'|translate\" *ngIf=\"row.currentData.updateDate; let updateDate\">\n              <ion-icon name=\"time-outline\"></ion-icon>\n              {{ updateDate | dateFormat: {time: true} }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field floatLabel=\"never\" *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input type=\"text\" matInput [formControl]=\"row.validator?.controls.comments\"\n                   [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                   [readonly]=\"!row.editing\">\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <mat-icon class=\"comment\"\n                      *ngIf=\"row.validator?.controls.comments.value\"\n                      [title]=\"row.validator?.controls.comments.value\"></mat-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\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                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns;\" class=\"mat-toolbar\"></tr>\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-disabled]=\"!row.editing\"\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    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 class=\"mat-paginator-footer\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" 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  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-table .mat-column-select{min-width:30px}.table-container .mat-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-table .mat-column-label,.table-container .mat-table .mat-column-name,.table-container .mat-table .mat-column-levelId,.table-container .mat-table .mat-column-statusId{min-width:150px}.table-container .mat-table .mat-column-comments{min-width:100px;max-width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonText, selector: "ion-text", 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i17.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i17.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "filter", "readonly", "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: ToolbarComponent, selector: "app-toolbar", inputs: ["title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n  <ion-buttons slot=\"end\">\n\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\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  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\"\n                     [placeholder]=\"'TABLE.TESTING.SEARCH_TEXT'|translate\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\">\n\n      <!-- group header cells -->\n\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\" style=\"background-color: whitesmoke; margin-bottom: -1px;\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_1'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_2'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" >\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\" [class.mat-column-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\" [class.mat-column-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      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='label'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['label']\"\n                   [placeholder]=\"'TABLE.TESTING.LABEL'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'label'\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </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 translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\"\n            (click)=\"focusColumn='name'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput\n                   [formControl]=\"row.validator?.controls.name\" [placeholder]=\"'TABLE.TESTING.NAME'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'name'\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-autocomplete-field floatLabel=\"never\"\n                                  [formControl]=\"row.validator.controls.levelId\"\n                                  [config]=\"autocompleteFields.level\"\n                                  [readonly]=\"!row.editing\"\n                                  [required]=\"true\">\n          </mat-autocomplete-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-form-field floatLabel=\"never\">\n            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\" [placeholder]=\"i18nColumnPrefix + 'STATUS_ID'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <ion-icon [name]=\"item.icon\"></ion-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id!==-1\">\n            <small [matTooltip]=\"'TABLE.TESTING.CREATION_DATE'|translate\" *ngIf=\"row.currentData.creationDate; let creationDate\">\n              <ion-icon name=\"calendar\"></ion-icon>\n              {{ creationDate | dateFormat: {time: true} }}\n            </small><br/>\n            <small [matTooltip]=\"'TABLE.TESTING.UPDATE_DATE'|translate\" *ngIf=\"row.currentData.updateDate; let updateDate\">\n              <ion-icon name=\"time-outline\"></ion-icon>\n              {{ updateDate | dateFormat: {time: true} }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field floatLabel=\"never\" *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input type=\"text\" matInput [formControl]=\"row.validator?.controls.comments\"\n                   [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                   [readonly]=\"!row.editing\">\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <mat-icon class=\"comment\"\n                      *ngIf=\"row.validator?.controls.comments.value\"\n                      [title]=\"row.validator?.controls.comments.value\"></mat-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\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                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns;\" class=\"mat-toolbar\"></tr>\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-disabled]=\"!row.editing\"\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    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 class=\"mat-paginator-footer\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" 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  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-table .mat-column-select{min-width:30px}.table-container .mat-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-table .mat-column-label,.table-container .mat-table .mat-column-name,.table-container .mat-table .mat-column-levelId,.table-container .mat-table .mat-column-statusId{min-width:150px}.table-container .mat-table .mat-column-comments{min-width:100px;max-width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonText, selector: "ion-text", 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { 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.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i17.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i17.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "filter", "readonly", "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: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList"], outputs: ["onCancel", "onSave", "onNext", "onBack"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-table-testing', providers: [