@sumaris-net/ngx-components 1.2.0 → 1.2.4

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

@@ -80,6 +80,7 @@ import { CacheService, CacheModule } from 'ionic-cache';
 import * as i6 from 'ionic-cache/dist/cache.service';
 import * as i9 from '@ionic-native/network/ngx/index';
 import * as i10 from '@ionic-native/splash-screen/ngx/index';
+import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import * as i2$4 from '@angular/cdk/platform';
 import { Platform as Platform$1 } from '@angular/cdk/platform';
@@ -101,6 +102,7 @@ import * as i14 from '@ionic-native/status-bar/ngx/index';
 import * as i15 from '@ionic-native/keyboard/ngx/index';
 import * as i17 from '@ionic-native/in-app-browser/ngx/index';
 import * as i18 from '@ionic-native/downloader/ngx/index';
+import * as i19 from '@awesome-cordova-plugins/file-opener/ngx/index';
 import { ValidatorService, TableDataSource } from '@e-is/ngx-material-table';
 import { SelectionModel } from '@angular/cdk/collections';
 import { NgxJdenticonModule } from 'ngx-jdenticon';
@@ -14588,7 +14590,7 @@ ConfigService.ctorParameters = () => [
 
 const moment$2 = momentImported;
 class PlatformService extends StartableService {
-    constructor(platform, cdkPlatform, toastController, translate, dateAdapter, entitiesStorage, settings, networkService, accountService, configService, cache, storage, audioProvider, environment, statusBar, keyboard, splashScreen, browser, downloader) {
+    constructor(platform, cdkPlatform, toastController, translate, dateAdapter, entitiesStorage, settings, networkService, accountService, configService, cache, storage, audioProvider, environment, statusBar, keyboard, splashScreen, browser, downloader, fileOpener) {
         super(platform);
         this.platform = platform;
         this.cdkPlatform = cdkPlatform;
@@ -14609,6 +14611,7 @@ class PlatformService extends StartableService {
         this.splashScreen = splashScreen;
         this.browser = browser;
         this.downloader = downloader;
+        this.fileOpener = fileOpener;
         this._downloadingJobs = new Map();
         this._debug = !environment.production;
         if (this._debug)
@@ -14705,6 +14708,10 @@ class PlatformService extends StartableService {
             window.open(url, target, features, replace);
         }
     }
+    openFile(filePath, fileMimeType) {
+        console.debug(`[platform] Opening file: ${filePath} (${fileMimeType}) ...`);
+        return this.fileOpener.open(filePath, fileMimeType);
+    }
     getDownloadingJob(uri) {
         return this._downloadingJobs.get(uri);
     }
@@ -14716,7 +14723,7 @@ class PlatformService extends StartableService {
             let location$ = this._downloadingJobs.get(request.uri);
             if (location$)
                 return location$;
-            request = Object.assign({ visibleInDownloadsUi: true, notificationVisibility: NotificationVisibility.VisibleNotifyCompleted, title: request.title || request.filename }, request);
+            request = Object.assign(Object.assign({ visibleInDownloadsUi: true, notificationVisibility: NotificationVisibility.VisibleNotifyCompleted, title: request.title || request.filename }, request), { destinationInExternalPublicDir: Object.assign({ dirType: 'Downloads', subPath: request.filename || request.title || '' }, request.destinationInExternalPublicDir) });
             console.debug('[platform] Downloading, using request: ' + JSON.stringify(request));
             // Start download
             location$ = from(this.downloader.download(request));
@@ -14727,6 +14734,7 @@ class PlatformService extends StartableService {
                 console.info('[platform] File successfully downloaded at:' + location);
                 // Forget the request
                 this._downloadingJobs.delete(request.uri);
+                return location;
             }), catchError(err => {
                 console.error('[platform] Unable to download: ' + (err && err.message || err));
                 // Forget the request
@@ -14918,7 +14926,7 @@ class PlatformService extends StartableService {
         });
     }
 }
-PlatformService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PlatformService_Factory() { return new PlatformService(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i2$4.Platform), i0.ɵɵinject(i1$4.ToastController), i0.ɵɵinject(i1$1.TranslateService), i0.ɵɵinject(i1.MomentDateAdapter), i0.ɵɵinject(EntitiesStorage), i0.ɵɵinject(LocalSettingsService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(AccountService), i0.ɵɵinject(ConfigService), i0.ɵɵinject(i6.CacheService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(AudioProvider), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(i14.StatusBar, 8), i0.ɵɵinject(i15.Keyboard, 8), i0.ɵɵinject(i10.SplashScreen, 8), i0.ɵɵinject(i17.InAppBrowser, 8), i0.ɵɵinject(i18.Downloader, 8)); }, token: PlatformService, providedIn: "root" });
+PlatformService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PlatformService_Factory() { return new PlatformService(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i2$4.Platform), i0.ɵɵinject(i1$4.ToastController), i0.ɵɵinject(i1$1.TranslateService), i0.ɵɵinject(i1.MomentDateAdapter), i0.ɵɵinject(EntitiesStorage), i0.ɵɵinject(LocalSettingsService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(AccountService), i0.ɵɵinject(ConfigService), i0.ɵɵinject(i6.CacheService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(AudioProvider), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(i14.StatusBar, 8), i0.ɵɵinject(i15.Keyboard, 8), i0.ɵɵinject(i10.SplashScreen, 8), i0.ɵɵinject(i17.InAppBrowser, 8), i0.ɵɵinject(i18.Downloader, 8), i0.ɵɵinject(i19.FileOpener, 8)); }, token: PlatformService, providedIn: "root" });
 PlatformService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -14941,7 +14949,8 @@ PlatformService.ctorParameters = () => [
     { type: Keyboard, decorators: [{ type: Optional }] },
     { type: SplashScreen, decorators: [{ type: Optional }] },
     { type: InAppBrowser, decorators: [{ type: Optional }] },
-    { type: Downloader, decorators: [{ type: Optional }] }
+    { type: Downloader, decorators: [{ type: Optional }] },
+    { type: FileOpener, decorators: [{ type: Optional }] }
 ];
 
 class AppHelpModal {
@@ -18963,12 +18972,35 @@ class AppInstallUpgradeCard {
                 console.error('[install-upgrade-card] Missing required argument \'link.url\'');
                 return; // Skip
             }
-            return this.listenDownloadJob(link.url, this.platform.download({
+            // Mark link as downloading
+            link.downloading = true;
+            this.markForCheck();
+            this.listenDownloadJob(link.url, this.platform.download({
                 uri: link.url,
                 title: link.title,
                 filename: link.filename,
                 mimeType: link.mimeType
-            }));
+            }))
+                .then((location) => {
+                link.location = location;
+                link.downloading = false;
+            })
+                .catch(() => link.downloading = false)
+                .then(() => this.markForCheck());
+        });
+    }
+    openFile(event, link) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!link || !link.location) {
+                console.error('[install-upgrade-card] Missing required argument \'link.location\'');
+                return; // Skip
+            }
+            try {
+                yield this.platform.openFile(link.location, "application/vnd.android.package-archive");
+            }
+            catch (err) {
+                console.error('[install-upgrade-card] Cannot open file: ' + (err && err.message || err), err);
+            }
         });
     }
     tryOnline() {
@@ -19126,8 +19158,16 @@ class AppInstallUpgradeCard {
         // Listening downloading promise, if exists
         (this.upgradeLinks || []).forEach(link => {
             const job = this.platform.getDownloadingJob(link.url);
-            if (job)
-                this.listenDownloadJob(link.url, job);
+            if (job) {
+                link.downloading = true;
+                this.listenDownloadJob(link.url, job)
+                    .then((location) => {
+                    link.location = location;
+                    link.downloading = false;
+                })
+                    .catch(() => link.downloading = false)
+                    .then(() => this.markForCheck());
+            }
         });
     }
     listenDownloadJob(url, job) {
@@ -19137,20 +19177,25 @@ class AppInstallUpgradeCard {
             try {
                 // Mark as downloading
                 if (!this.downloading) {
-                    console.info(`[install-upgrade-card] Platform is already downloading \'${url}\' ...`);
+                    console.info(`[install-upgrade-card] Asking platform to download '${url}'...`);
                     this.downloading = true;
                     this.markForCheck();
                 }
+                else {
+                    console.info(`[install-upgrade-card] Platform is already downloading!`);
+                }
                 const location = yield job.toPromise();
                 if (location) {
                     console.info('[install-upgrade-card] File downloaded at: ' + location);
-                    return this.showDownloadCompleteDialog();
+                    this.showDownloadCompleteDialog();
                 }
+                return location;
             }
             // Failed: display a toast
             catch (err) {
                 console.error('[install-upgrade-card] Download failed: ' + (err && err.message || err));
-                return this.showDownloadFailedToast(err);
+                this.showDownloadFailedToast(err);
+                throw err;
             }
             finally {
                 this.downloading = false;
@@ -19191,6 +19236,8 @@ class AppInstallUpgradeCard {
         });
     }
     markForCheck() {
+        if (!this._subscription)
+            return; // Skip if destroyed
         this.cd.markForCheck();
     }
     showToast(opts) {
@@ -19204,7 +19251,7 @@ class AppInstallUpgradeCard {
 AppInstallUpgradeCard.decorators = [
     { type: Component, args: [{
                 selector: 'app-install-upgrade-card',
-                template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && upgradeLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of upgradeLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Update offline feature card-->\n<ion-card *ngIf=\"showUpdateOfflineFeature && !loading && !offline\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateOfflineModeClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.filename; else redirectButton\">\n\n    <ng-container *ngIf=\"canDownload; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button (click)=\"download($event, asLink(link))\"\n                  [disabled]=\"link.downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!link.downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"link.downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
+                template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && upgradeLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of upgradeLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Update offline feature card-->\n<ion-card *ngIf=\"showUpdateOfflineFeature && !loading && !offline\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateOfflineModeClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.filename; else redirectButton\">\n\n    <ng-container *ngIf=\"canDownload; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button (click)=\"download($event, asLink(link))\"\n                  *ngIf=\"!link.location; else openButton\"\n                  [disabled]=\"downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"link.downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n\n      <!-- Open APK button -->\n      <ng-template #openButton>\n        <ion-button *ngIf=\"link.location\"\n                    (click)=\"openFile($event, link)\"\n                    color=\"tertiary\" class=\"ion-float-end\" >\n          <ion-label translate>COMMON.BTN_INSTALL</ion-label>\n        </ion-button>\n      </ng-template>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [slideUpDownAnimation],
                 styles: ["ion-text small{font-size:85%}"]