@sumaris-net/ngx-components 2.9.15 → 2.9.16

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

@@ -27353,7 +27353,7 @@ const getRandomImage = (files) => {
     return files[imgIndex];
 };
 const APP_HOME_BUTTONS = new InjectionToken('homeButton');
-class HomePage {
+class HomePage extends RxState {
     accountService;
     modalCtrl;
     translate;
@@ -27369,13 +27369,12 @@ class HomePage {
     _debug;
     _subscription = new Subscription();
     _config;
-    loading = true;
+    pageHistory$ = this.select('pageHistory');
+    loading$ = this.select('loading');
     waitingNetwork = false;
-    showSpinner = true;
     accountName = '';
     isLogin;
     $partners = new BehaviorSubject(null);
-    loadingBanner = true;
     logo;
     description;
     appName;
@@ -27383,14 +27382,38 @@ class HomePage {
     canRegister;
     contentStyle;
     contentCredits;
-    pageHistory = [];
     offline;
     $filteredButtons = new BehaviorSubject(undefined);
     showAccountButton;
+    set pageHistory(value) {
+        this.set('pageHistory', () => value);
+    }
+    get pageHistory() {
+        return this.get('pageHistory');
+    }
+    set loading(value) {
+        this.set('loading', () => value);
+    }
+    get loading() {
+        return this.get('loading');
+    }
+    set showSpinner(value) {
+        this.set('showSpinner', () => value);
+    }
+    get showSpinner() {
+        return this.get('showSpinner');
+    }
+    set showPartnerBanner(value) {
+        this.set('showPartnerBanner', () => value);
+    }
+    get showPartnerBanner() {
+        return this.get('showPartnerBanner');
+    }
     get currentLocaleCode() {
         return this.loading ? '' : (this.translate.currentLang || this.translate.defaultLang || this.environment.defaultLocale)?.substring(0, 2);
     }
     constructor(accountService, modalCtrl, translate, toastController, configService, platform, cd, network, settings, environment, locales, buttons) {
+        super();
         this.accountService = accountService;
         this.modalCtrl = modalCtrl;
         this.translate = translate;
@@ -27403,8 +27426,12 @@ class HomePage {
         this.environment = environment;
         this.locales = locales;
         this.buttons = buttons;
+        this.set({
+            loading: true,
+            showPartnerBanner: false,
+            showSpinner: !this.platform.started,
+        });
         this._debug = !environment.production;
-        this.showSpinner = !this.platform.started;
         this.platform.ready().then(() => this.start());
         this.showAccountButton = toBoolean(environment.account?.showAccountButton, true);
     }
@@ -27498,7 +27525,7 @@ class HomePage {
         this.canRegister = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.REGISTRATION_ENABLE);
         const partners = (config.partners || []).filter((p) => p && p.logo);
         this.$partners.next(partners);
-        this.loadingBanner = partners.length === 0;
+        this.showPartnerBanner = partners.length > 0;
         // If not already set, compute the background image
         if (!this.contentStyle) {
             const backgroundImages = (config.backgroundImages || [])
@@ -27521,19 +27548,13 @@ class HomePage {
         this.refreshButtons();
         this.markForCheck();
         // If first load, hide the loading indicator
-        if (this.loading) {
-            setTimeout$1(() => {
-                this.loading = false;
-                this.cd.detectChanges();
-            }, 500); // Add a delay, for animation
-        }
+        this.loading = false;
     }
     onSettingsChanged(settings) {
         if (settings.pageHistory !== this.pageHistory) {
             console.debug('[home] Page history loaded');
             this.pageHistory = settings.pageHistory || [];
         }
-        this.markForCheck();
     }
     onLogin(account) {
         if (!account)
@@ -27581,11 +27602,11 @@ class HomePage {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HomePage, deps: [{ token: AccountService }, { token: i2$1.ModalController }, { token: i1$1.TranslateService }, { token: i2$1.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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: HomePage, selector: "app-page-home", ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\" [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\" mat-menu-item (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  <span class=\"content-credits\">\n    <ion-text>{{ contentCredits }}</ion-text>\n  </span>\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\" *ngIf=\"currentLocaleCode; let code\" [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\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\" class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @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\"></ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"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      <div class=\"ion-padding-top\">\n        <!-- If NOT login -->\n        <ng-container *ngIf=\"!isLogin; else loginButtons\">\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        </ng-container>\n\n        <!-- If user login -->\n        <ng-template #loginButtons>\n          <!-- Feature buttons -->\n          <ng-container *rxIf=\"$filteredButtons; let buttons\">\n            <ng-container *ngFor=\"let item of buttons\">\n              <ion-button\n                *ngIf=\"item.path\"\n                expand=\"block\"\n                color=\"tertiary\"\n                [class]=\"item.cssClass\"\n                [routerLink]=\"item.path\"\n                routerDirection=\"root\"\n              >\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\n              [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n            ></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        </ng-template>\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid\n    *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n    class=\"history-container ion-align-self-center\"\n  >\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\" 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\n                type=\"button\"\n                tabindex=\"-1\"\n                (click)=\"removePageHistory(page.path)\"\n                mat-icon-button\n                class=\"ion-float-start ion-no-margin close-button\"\n              >\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>\n                  <ion-icon name=\"time-outline\"></ion-icon>\n                  &nbsp;{{ page.time | dateFromNow }}\n                </small>\n                &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\n                detail=\"true\"\n                tappable\n                class=\"text-1x\"\n                [routerLink]=\"page.path\"\n                routerDirection=\"root\"\n                lines=\"none\"\n              >\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\n                detail=\"true\"\n                *ngFor=\"let childPage of page.children\"\n                tappable\n                class=\"text-1x\"\n                [routerLink]=\"childPage.path\"\n                routerDirection=\"root\"\n              >\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</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;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-background-color);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]{--mdc-icon-button-state-layer-size: 40px;padding:8px;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{width:100%;--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%;-moz-text-size-adjust:100%;-ms-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)}}.content-credits{position:absolute;right:5px;bottom:5px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i9$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], 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: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton"] }, { kind: "pipe", type: i3$1.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: HomePage, selector: "app-page-home", usesInheritance: true, ngImport: i0, template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\" [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\" mat-menu-item (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  <span class=\"content-credits\">\n    <ion-text>{{ contentCredits }}</ion-text>\n  </span>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\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    }\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        @if (currentLocaleCode; as code) {\n          <ion-button color=\"secondary\" fill=\"solid\" [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        }\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    <!-- Welcome card -->\n    <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @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\"></ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content class=\"ion-no-padding\">\n        <ion-text color=\"primary\">\n          <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"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        <div class=\"ion-padding-top\">\n          <!-- If NOT login -->\n          <ng-container *ngIf=\"!isLogin; else loginButtons\">\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          </ng-container>\n\n          <!-- If user login -->\n          <ng-template #loginButtons>\n            <!-- Feature buttons -->\n            <ng-container *rxIf=\"$filteredButtons; let buttons\">\n              <ng-container *ngFor=\"let item of buttons\">\n                <ion-button\n                  *ngIf=\"item.path\"\n                  expand=\"block\"\n                  color=\"tertiary\"\n                  [class]=\"item.cssClass\"\n                  [routerLink]=\"item.path\"\n                  routerDirection=\"root\"\n                >\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\n                [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n              ></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          </ng-template>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Page history -->\n    @if (isLogin && (pageHistory$ | push); as pageHistory) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" 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\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\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>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &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\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\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                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\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\">\n                            {{ childPage.matIcon }}\n                          </mat-icon>\n\n                          <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    } @else if (showPartnerBanner) {\n      <!-- Display partners logos -->\n      <div class=\"bottom-banner ion-text-center ion-padding\" @fadeInAnimation>\n        @for (item of $partners | async; track $index) {\n          <a href=\"{{ item.siteUrl }}\">\n            <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{ item.label }}\" [title]=\"item.label\" />\n          </a>\n        }\n      </div>\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;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-background-color);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]{--mdc-icon-button-state-layer-size: 40px;padding:8px;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{width:100%;--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%;-moz-text-size-adjust:100%;-ms-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)}}.content-credits{position:absolute;right:5px;bottom:5px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i9$1.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], 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: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AppInstallUpgradeCard, selector: "app-install-upgrade-card", inputs: ["isLogin", "showUpgradeWarning", "showOfflineWarning", "showInstallButton"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i19.RxPush, name: "push" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }], animations: [fadeInAnimation, slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HomePage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation], template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\" [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\" mat-menu-item (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  <span class=\"content-credits\">\n    <ion-text>{{ contentCredits }}</ion-text>\n  </span>\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\" *ngIf=\"currentLocaleCode; let code\" [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\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\" class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @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\"></ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"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      <div class=\"ion-padding-top\">\n        <!-- If NOT login -->\n        <ng-container *ngIf=\"!isLogin; else loginButtons\">\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        </ng-container>\n\n        <!-- If user login -->\n        <ng-template #loginButtons>\n          <!-- Feature buttons -->\n          <ng-container *rxIf=\"$filteredButtons; let buttons\">\n            <ng-container *ngFor=\"let item of buttons\">\n              <ion-button\n                *ngIf=\"item.path\"\n                expand=\"block\"\n                color=\"tertiary\"\n                [class]=\"item.cssClass\"\n                [routerLink]=\"item.path\"\n                routerDirection=\"root\"\n              >\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\n              [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n            ></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        </ng-template>\n      </div>\n    </ion-card-content>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid\n    *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n    class=\"history-container ion-align-self-center\"\n  >\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\" 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\n                type=\"button\"\n                tabindex=\"-1\"\n                (click)=\"removePageHistory(page.path)\"\n                mat-icon-button\n                class=\"ion-float-start ion-no-margin close-button\"\n              >\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>\n                  <ion-icon name=\"time-outline\"></ion-icon>\n                  &nbsp;{{ page.time | dateFromNow }}\n                </small>\n                &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\n                detail=\"true\"\n                tappable\n                class=\"text-1x\"\n                [routerLink]=\"page.path\"\n                routerDirection=\"root\"\n                lines=\"none\"\n              >\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\n                detail=\"true\"\n                *ngFor=\"let childPage of page.children\"\n                tappable\n                class=\"text-1x\"\n                [routerLink]=\"childPage.path\"\n                routerDirection=\"root\"\n              >\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</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;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-background-color);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]{--mdc-icon-button-state-layer-size: 40px;padding:8px;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{width:100%;--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%;-moz-text-size-adjust:100%;-ms-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)}}.content-credits{position:absolute;right:5px;bottom:5px}\n"] }]
+            args: [{ selector: 'app-page-home', changeDetection: ChangeDetectionStrategy.OnPush, animations: [fadeInAnimation, slideUpDownAnimation], template: "<app-toolbar [canGoBack]=\"false\" visible-xs visible-sm visible-mobile>\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\" [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\" mat-menu-item (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  <span class=\"content-credits\">\n    <ion-text>{{ contentCredits }}</ion-text>\n  </span>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!(loading$ | push)\">\n    @if (showSpinner) {\n      <div class=\"spinner\">\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    }\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        @if (currentLocaleCode; as code) {\n          <ion-button color=\"secondary\" fill=\"solid\" [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        }\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\" [showInstallButton]=\"true\"></app-install-upgrade-card>\n\n  @if (!(loading$ | push)) {\n    <!-- Welcome card -->\n    <ion-card class=\"main welcome ion-padding ion-text-center ion-align-self-center\" @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\"></ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content class=\"ion-no-padding\">\n        <ion-text color=\"primary\">\n          <img *ngIf=\"logo\" [attr.src]=\"logo\" alt=\"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        <div class=\"ion-padding-top\">\n          <!-- If NOT login -->\n          <ng-container *ngIf=\"!isLogin; else loginButtons\">\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          </ng-container>\n\n          <!-- If user login -->\n          <ng-template #loginButtons>\n            <!-- Feature buttons -->\n            <ng-container *rxIf=\"$filteredButtons; let buttons\">\n              <ng-container *ngFor=\"let item of buttons\">\n                <ion-button\n                  *ngIf=\"item.path\"\n                  expand=\"block\"\n                  color=\"tertiary\"\n                  [class]=\"item.cssClass\"\n                  [routerLink]=\"item.path\"\n                  routerDirection=\"root\"\n                >\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\n                [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: { displayName: accountName }\"\n              ></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          </ng-template>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Page history -->\n    @if (isLogin && (pageHistory$ | push); as pageHistory) {\n      <ion-grid class=\"history-container ion-align-self-center\">\n        <ion-row>\n          @for (page of pageHistory; track page.path) {\n            <ion-col size=\"12\" size-xl=\"\" 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\n                      type=\"button\"\n                      tabindex=\"-1\"\n                      (click)=\"removePageHistory(page.path)\"\n                      mat-icon-button\n                      class=\"ion-float-start ion-no-margin close-button\"\n                    >\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>\n                        <ion-icon name=\"time-outline\"></ion-icon>\n                        &nbsp;{{ page.time | dateFromNow }}\n                      </small>\n                      &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\n                      detail=\"true\"\n                      tappable\n                      class=\"text-1x\"\n                      [routerLink]=\"page.path\"\n                      routerDirection=\"root\"\n                      lines=\"none\"\n                    >\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                @if (page.children | isNotEmptyArray) {\n                  <ion-card-content class=\"ion-no-padding ion-padding-start\">\n                    <ion-list class=\"ion-no-padding\">\n                      @for (childPage of page.children; track childPage.path) {\n                        <ion-item\n                          detail=\"true\"\n                          tappable\n                          class=\"text-1x\"\n                          [routerLink]=\"childPage.path\"\n                          routerDirection=\"root\"\n                        >\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\">\n                            {{ childPage.matIcon }}\n                          </mat-icon>\n\n                          <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n                        </ion-item>\n                      }\n                    </ion-list>\n                  </ion-card-content>\n                }\n              </ion-card>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    } @else if (showPartnerBanner) {\n      <!-- Display partners logos -->\n      <div class=\"bottom-banner ion-text-center ion-padding\" @fadeInAnimation>\n        @for (item of $partners | async; track $index) {\n          <a href=\"{{ item.siteUrl }}\">\n            <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{ item.label }}\" [title]=\"item.label\" />\n          </a>\n        }\n      </div>\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;background-color:var(--ion-background-color);display:inline-block;padding:15px}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;background-color:var(--ion-background-color);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]{--mdc-icon-button-state-layer-size: 40px;padding:8px;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{width:100%;--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%;-moz-text-size-adjust:100%;-ms-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)}}.content-credits{position:absolute;right:5px;bottom:5px}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$1.ModalController }, { type: i1$1.TranslateService }, { type: i2$1.ToastController }, { type: ConfigService }, { type: PlatformService }, { type: i0.ChangeDetectorRef }, { type: NetworkService }, { type: LocalSettingsService }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]