@sumaris-net/ngx-components 1.23.66 → 1.23.68-alpha1

package/bundles/sumaris-net.ngx-components.umd.js

@@ -2312,41 +2312,76 @@
         items: [{ type: i0.Input }]
     };
 
-    var DateFormatPipe = /** @class */ (function () {
-        function DateFormatPipe(dateAdapter, translate) {
+    var AbstractDateFormat = /** @class */ (function () {
+        function AbstractDateFormat(dateAdapter, translate) {
             this.dateAdapter = dateAdapter;
             this.translate = translate;
             var translations = translate.instant(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_TIME_SECONDS_PATTERN']);
-            this.datePattern = translations['COMMON.DATE_PATTERN'];
-            this.dateTimePattern = translations['COMMON.DATE_TIME_PATTERN'];
-            this.dateTimeSecondsPattern = translations['COMMON.DATE_TIME_SECONDS_PATTERN'];
+            this._updateTranslations(translations);
         }
-        DateFormatPipe.prototype.transform = function (value, args) {
+        AbstractDateFormat.prototype.transform = function (value, args) {
             var pattern = args && args.pattern ||
                 (args && args.time ? (args.seconds ? this.dateTimeSecondsPattern : this.dateTimePattern) : this.datePattern);
             // Keep original moment object, if possible (to avoid a conversion)
+            console.debug('DEBUG DATE PATERN TRANSFORM', pattern);
             var date = momentImported.isMoment(value) ? value : this.dateAdapter.parse(value, DATE_ISO_PATTERN);
             return date && this.dateAdapter.format(date, pattern) || '';
         };
-        DateFormatPipe.prototype.format = function (date, pattern) {
-            return this.dateAdapter.format(date, pattern);
+        AbstractDateFormat.prototype._updateTranslations = function (translations) {
+            this.datePattern = this._getTranslationValue(translations, 'COMMON.DATE_PATTERN', 'DD/MM/YYYY');
+            this.dateTimePattern = this._getTranslationValue(translations, 'COMMON.DATE_TIME_PATTERN', 'DD/MM/YYYY HH:mm');
+            this.dateTimeSecondsPattern = this._getTranslationValue(translations, 'COMMON.DATE_TIME_SECONDS_PATTERN', 'DD/MM/YYYY HH:mm:ss');
+            console.debug('DEBUG DATE PATERN UPDATE', this.datePattern);
         };
-        DateFormatPipe.prototype.parse = function (value, parseFormat) {
-            return momentImported.isMoment(value) ? value : this.dateAdapter.parse(value, parseFormat || DATE_ISO_PATTERN);
+        AbstractDateFormat.prototype._getTranslationValue = function (translations, key, defaultValue) {
+            return (translations[key] !== key) ? translations[key] : defaultValue;
         };
-        return DateFormatPipe;
+        return AbstractDateFormat;
     }());
-    DateFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DateFormatPipe_Factory() { return new DateFormatPipe(i0.ɵɵinject(i1$1.MomentDateAdapter), i0.ɵɵinject(i1$2.TranslateService)); }, token: DateFormatPipe, providedIn: "root" });
+    var DateFormatPipe = /** @class */ (function (_super) {
+        __extends(DateFormatPipe, _super);
+        function DateFormatPipe(dateAdapter, translate) {
+            return _super.call(this, dateAdapter, translate) || this;
+        }
+        return DateFormatPipe;
+    }(AbstractDateFormat));
     DateFormatPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'dateFormat'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     DateFormatPipe.ctorParameters = function () { return [
         { type: i1$1.MomentDateAdapter },
         { type: i1$2.TranslateService }
     ]; };
+    var DateFormatService = /** @class */ (function (_super) {
+        __extends(DateFormatService, _super);
+        function DateFormatService(dateAdapter, translate) {
+            var _this = _super.call(this, dateAdapter, translate) || this;
+            // Subscribe to changes (e.g. when platform not ready yet)
+            _this._subscription = translate.get(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_TIME_SECONDS_PATTERN'])
+                .subscribe(function (translations) { return _this._updateTranslations(translations); });
+            return _this;
+        }
+        DateFormatService.prototype.ngOnDestroy = function () {
+            this._subscription.unsubscribe();
+        };
+        DateFormatService.prototype.format = function (date, pattern) {
+            return this.dateAdapter.format(date, pattern);
+        };
+        DateFormatService.prototype.parse = function (value, parseFormat) {
+            return momentImported.isMoment(value) ? value : this.dateAdapter.parse(value, parseFormat || DATE_ISO_PATTERN);
+        };
+        return DateFormatService;
+    }(AbstractDateFormat));
+    DateFormatService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DateFormatService_Factory() { return new DateFormatService(i0.ɵɵinject(i1$1.MomentDateAdapter), i0.ɵɵinject(i1$2.TranslateService)); }, token: DateFormatService, providedIn: "root" });
+    DateFormatService.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ];
+    DateFormatService.ctorParameters = function () { return [
+        { type: i1$1.MomentDateAdapter },
+        { type: i1$2.TranslateService }
+    ]; };
 
     var moment = momentImported__namespace;
     var DateDiffDurationPipe = /** @class */ (function () {
@@ -5131,7 +5166,7 @@
         });
         return PropertyFormatPipe;
     }());
-    PropertyFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function PropertyFormatPipe_Factory() { return new PropertyFormatPipe(i0.ɵɵinject(DateFormatPipe), i0.ɵɵinject(i1$2.TranslateService)); }, token: PropertyFormatPipe, providedIn: "root" });
+    PropertyFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function PropertyFormatPipe_Factory() { return new PropertyFormatPipe(i0.ɵɵinject(DateFormatService), i0.ɵɵinject(i1$2.TranslateService)); }, token: PropertyFormatPipe, providedIn: "root" });
     PropertyFormatPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'propertyFormat'
@@ -5139,7 +5174,7 @@
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
     PropertyFormatPipe.ctorParameters = function () { return [
-        { type: DateFormatPipe },
+        { type: DateFormatService },
         { type: i1$2.TranslateService }
     ]; };
 
@@ -7573,7 +7608,7 @@
                         DEFAULT_VALUE_ACCESSOR$4
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{width:100%}.mat-form-field.mat-boolean-field-radio{margin-top:-2px}.mat-form-field.mat-boolean-field-button{margin-top:-4px}.mat-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end:2px;--flex-basis:calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:40px}"]
+                    styles: [":host{width:100%}.mat-form-field.mat-boolean-field-radio{margin-top:-2px}.mat-form-field.mat-boolean-field-button{margin-top:-4px}.mat-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-form-field .mat-form-field-buttons .mat-form-field-button{--button-padding-end:2px;--flex-basis:calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);text-transform:capitalize;white-space:normal;-webkit-padding-end:var(--button-padding-end)!important;padding-inline-end:var(--button-padding-end)!important;padding-bottom:var(--button-padding-end)!important;height:40px}"]
                 },] }
     ];
     MatBooleanField.ctorParameters = function () { return [
@@ -18665,7 +18700,7 @@
                     template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <div class=\"modal-content\">\n    <app-upload-file\n      #uploader\n      [uploadFn]=\"uploadFn\"\n      [deleteFn]=\"deleteFn\"\n      [fileExtension]=\"fileExtension\"\n      [instantUpload]=\"instantUpload\"\n      [uniqueFile]=\"uniqueFile\"\n      [maxParallelUpload]=\"maxParallelUpload\"\n    ></app-upload-file>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <div *ngIf=\"importing\" class=\"importing-info\">\n          <ion-text color=\"medium\"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>\n          &nbsp;<ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n        </div>\n        <ion-item *ngIf=\"error\" lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-label translate>COMMON.BTN_IMPORT</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".importing-info{padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}"]
+                    styles: [".importing-info{-webkit-padding-start:var(--ion-padding);padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}"]
                 },] }
     ];
     UploadFilePopover.ctorParameters = function () { return [
@@ -19772,8 +19807,8 @@
                     AudioProvider,
                     FileService,
                     TranslateContextService,
+                    DateFormatService,
                     // Export Pipes as providers
-                    DateFormatPipe,
                     DateFromNowPipe,
                     DateDiffDurationPipe,
                     LatLongFormatPipe,
@@ -22633,7 +22668,7 @@
                     template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\n      <p [innerHTML]=\"'COMMON.LOADING_DOTS'|translate\"></p>\n      <div class=\"sk-cube1 sk-cube\"></div>\n      <div class=\"sk-cube2 sk-cube\"></div>\n      <div class=\"sk-cube4 sk-cube\"></div>\n      <div class=\"sk-cube3 sk-cube\"></div>\n    </div>\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar translucent>\n      <ion-buttons slot=\"start\">\n        <ion-menu-toggle>\n          <ion-button color=\"light\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n          </ion-button>\n        </ion-menu-toggle>\n      </ion-buttons>\n\n      <ion-buttons slot=\"end\">\n        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                           showInstallButton=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @fadeInAnimation>\n    <ion-card-header>\n      <ion-card-title class=\"ion-text-center\">\n        <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB'|translate: {appName: appName}\"></span>\n        <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP'|translate: {appName: appName}\"></span>\n      </ion-card-title>\n      <ion-card-subtitle [innerHTML]=\"description\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ logo }}\">\n      </ion-text>\n      <!-- register help text -->\n      <ion-text *ngIf=\"!isLogin && canRegister\">\n        <br/>\n        <span translate>HOME.REGISTER_HELP</span>\n      </ion-text>\n    </ion-card-content>\n\n    <ion-footer class=\"ion-padding-top\">\n\n      <!-- If NOT login -->\n      <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\n        <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n          <span translate>HOME.BTN_REGISTER</span>\n        </ion-button>\n        <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n          <span translate>AUTH.BTN_LOGIN</span>\n        </ion-button>\n\n      </ng-container>\n\n      <!-- If user login -->\n      <ng-template #loginButtons>\n\n        <!-- Feature buttons -->\n        <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n          <ng-container *ngFor=\"let item of buttons\">\n            <ion-button *ngIf=\"item.path\"\n                        expand=\"block\" color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\">\n              <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n              <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n              <ion-text>{{'HOME.BTN_DATA_ENTRY'|translate: {name: (item.title | translate) } }}</ion-text>\n            </ion-button>\n\n            <!-- divider -->\n            <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n              <ion-label translate>{{item.title}}&nbsp;</ion-label>\n            </div>\n          </ng-container>\n\n          <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n        </ng-container>\n\n        <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n          <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n          <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n        </ion-button>\n\n        <p hidden-xs hidden-sm hidden-mobile>\n          <ion-text [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></ion-text>\n          <br/>\n          <ion-text>\n            <a href=\"#\" (click)=\"logout($event)\">\n              <span translate>HOME.BTN_DISCONNECT</span>\n            </a>\n          </ion-text>\n        </p>\n\n\n      </ng-template>\n\n    </ion-footer>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               class=\"ion-text-center\">\n        <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n          <ion-card-header class=\"ion-no-padding\">\n            <!-- top bar -->\n            <ion-card-subtitle>\n              <button type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <ion-label [innerHTML]=\"page.subtitle|translate\"></ion-label>\n              <ion-text class=\"ion-float-end\" [title]=\"page.time|dateFormat:{time: true}\">\n                <small><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&nbsp;\n              </ion-text>\n            </ion-card-subtitle>\n\n            <!-- main page -->\n            <ion-card-title class=\"ion-no-margin ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"page.icon\"    slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{page.matIcon}}</mat-icon>\n\n                <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n              </ion-item>\n            </ion-card-title>\n          </ion-card-header>\n\n          <!-- children pages -->\n          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"childPage.icon\"    slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: [fadeInAnimation, slideUpDownAnimation],
-                    styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background:transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;display:inline-block;padding:15px}ion-content,ion-content .loading-page{background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;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:hsla(0,0%,100%,.7)}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:hsla(0,0%,100%,.7)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{--ion-item-background:$transparent;--ion-item-icon-color:var(--ion-color-primary);--ion-item-text-color:var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text{color:var(--ion-item-text-color)!important;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-label,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{background-color:hsla(0,0%,100%,.7);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)}}"]
+                    styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background:transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;display:inline-block;padding:15px}ion-content,ion-content .loading-page{background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;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:hsla(0,0%,100%,.7)}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:hsla(0,0%,100%,.7)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{--ion-item-background:$transparent;--ion-item-icon-color:var(--ion-color-primary);--ion-item-text-color:var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;-webkit-margin-end:16px!important;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-label,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-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;-webkit-margin-end:16px!important;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{background-color:hsla(0,0%,100%,.7);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)}}"]
                 },] }
     ];
     HomePage.ctorParameters = function () { return [
@@ -29462,7 +29497,7 @@
             _this.settings = injector.get(LocalSettingsService);
             _this.errorTranslator = injector.get(FormErrorTranslator);
             _this.cd = injector.get(i0.ChangeDetectorRef);
-            _this.dateFormat = injector.get(DateFormatPipe);
+            _this.dateFormat = injector.get(DateFormatService);
             _this.toastController = injector.get(i1$5.ToastController);
             _this._enableListenChanges = options.enableListenChanges;
             _this._listenIntervalInSeconds = options.listenIntervalInSeconds;
@@ -30303,7 +30338,7 @@
             _this.settings = injector.get(LocalSettingsService);
             _this.errorTranslator = injector.get(FormErrorTranslator);
             _this.cd = injector.get(i0.ChangeDetectorRef);
-            _this.dateFormat = injector.get(DateFormatPipe);
+            _this.dateFormat = injector.get(DateFormatService);
             _this.modalCtrl = injector.get(i1$5.ModalController);
             _this.i18nContext = {
                 prefix: options.i18nPrefix,
@@ -31801,7 +31836,7 @@
                     selector: 'app-user-event-notification-list',
                     template: "<ion-content>\n  <ion-list class=\"ion-list-popover\">\n\n    <ion-row class=\"ion-list-header column\">\n      <ion-col>\n        <ion-label>{{titleI18n | translate}}</ion-label>\n      </ion-col>\n      <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n        <ion-text color=\"primary\">\n          <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n        </ion-text>\n      </ion-col>\n    </ion-row>\n\n    <ion-item\n      *ngFor=\"let item of $items | async; trackBy: trackByFn; last as last\"\n      [lines]=\"last ? 'none' : undefined\"\n      [class.unread]=\"!item.readDate\"\n      [class.tappable]=\"item.actions|arrayFilter:isDefaultAction|isNotEmptyArray\"\n      (click)=\"click($event, item)\">\n\n      <ion-avatar slot=\"start\">\n\n        <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n        <ng-template #avatarIcon>\n          <app-icon\n            *ngIf=\"item.avatarIcon; else generateIcon\"\n            [ref]=\"item.avatarIcon\"\n            height=\"40\"\n            width=\"40\"\n          ></app-icon>\n        </ng-template>\n\n        <ng-template #generateIcon>\n          <div class=\"avatar\" *ngIf=\"item.avatarJdenticon\">\n            <svg width=\"40\" width=\"40\" [data-jdenticon-value]=\"item.avatarJdenticon\"></svg>\n          </div>\n        </ng-template>\n\n      </ion-avatar>\n\n      <ion-grid class=\"ion-no-margin ion-no-padding message\">\n        <ion-row>\n          <ion-col size=\"12\">\n            <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n          </ion-col>\n        </ion-row>\n\n        <!-- date -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <app-icon\n              *ngIf=\"item.icon\"\n              [ref]=\"item.icon\"\n              height=\"16\"\n              width=\"16\"\n              style=\"vertical-align: sub; margin-right: 3px\"\n            ></app-icon>\n            <small>\n              <span>{{item.creationDate|dateFromNow}}</span>\n              <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n            </small>\n          </ion-col>\n        </ion-row>\n\n        <!-- actions -->\n        <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n          <ion-col></ion-col>\n          <ion-col size=\"auto\">\n            <ng-container *ngFor=\"let action of item.actions\">\n              <a *ngIf=\"!action.default\" class=\"action\" (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n                <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n                <span>{{ action.name | translate }}</span>\n              </a>\n            </ng-container>\n          </ion-col>\n        </ion-row>\n\n      </ion-grid>\n\n      <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\n    </ion-item>\n\n    <!-- loading -->\n    <ng-container *ngIf=\"!($items|async); else notLoading\">\n      <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n    </ng-container>\n\n    <ng-template #notLoading>\n      <!-- no result -->\n      <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n        <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n      </ion-item>\n\n      <!-- Fetching more -->\n      <ng-container *ngIf=\"fetchingMore; else infiniteLoop\" lines=\"none\" disabled>\n        <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n      </ng-container>\n\n      <!-- Infinite loop -->\n      <ng-template #infiniteLoop>\n        <ng-container *ngIf=\"canFetchMore\" lines=\"none\" disabled\n                      [ngTemplateOutlet]=\"loadingItem\">\n        </ng-container>\n      </ng-template>\n    </ng-template>\n\n    <!-- footer -->\n    <ion-row class=\"ion-list-footer column\">\n      <ion-col>\n        <ion-text *ngIf=\"$itemCount|async; let count\"\n                  class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n      </ion-col>\n    </ion-row>\n\n  </ion-list>\n</ion-content>\n\n<!-- loading -->\n<ng-template #loadingItem>\n  <ion-item lines=\"none\" disabled>\n    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n  </ion-item>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host(.popover-viewport){overflow-y:auto;user-select:none;max-height:calc(90vh - 20px)}ion-list ion-item.tappable{cursor:pointer}ion-list ion-item.tappable:hover{--ion-item-background:var(--ion-item-background-color-hover)}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.message p.unread{font-weight:700}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}a.action{font-size:.9em;margin-right:10px;cursor:pointer}a.action:hover span{text-decoration:underline}a.action app-icon{vertical-align:middle}ion-avatar .avatar svg,ion-avatar img{border:1px solid rgba(var(--ion-color-secondary-rgb,.5));border-radius:50%}"]
+                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;max-height:calc(90vh - 20px)}ion-list ion-item.tappable{cursor:pointer}ion-list ion-item.tappable:hover{--ion-item-background:var(--ion-item-background-color-hover)}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.message p.unread{font-weight:700}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}a.action{font-size:.9em;margin-right:10px;cursor:pointer}a.action:hover span{text-decoration:underline}a.action app-icon{vertical-align:middle}ion-avatar .avatar svg,ion-avatar img{border:1px solid rgba(var(--ion-color-secondary-rgb,.5));border-radius:50%}"]
                 },] }
     ];
     UserEventNotificationList.ctorParameters = function () { return [
@@ -32320,7 +32355,7 @@
         { type: i0.Component, args: [{
                     selector: 'app-job-progression-list',
                     template: "<ion-list class=\"ion-list-popover\">\n\n  <ion-row class=\"ion-list-header column\">\n    <ion-col>\n      <ion-label>{{titleI18n | translate}}</ion-label>\n    </ion-col>\n  </ion-row>\n\n  <ion-item *ngIf=\"!jobProgressions?.length\">\n    {{'SOCIAL.JOB.PROGRESSION.EMPTY' | translate}}\n  </ion-item>\n  <ion-item *ngFor=\"let jobProgression of jobProgressions\" class=\"ion-item-job-progression\">\n    <ion-grid class=\"ion-no-margin\">\n      <ion-row class=\"name\">\n        <ion-col>\n          {{jobProgression.name}}\n        </ion-col>\n      </ion-row>\n      <ion-row class=\"message\">\n        <ion-col>\n          {{jobProgression.message}}\n        </ion-col>\n      </ion-row>\n      <ion-row class=\"progress-bar\">\n        <ion-col>\n          <ion-progress-bar\n            [value]=\"jobProgression.total > 0 ? jobProgression.current / jobProgression.total : undefined\"\n            [type]=\"jobProgression.total > 0 ? 'determinate' : 'indeterminate'\">\n          </ion-progress-bar>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
-                    styles: [":host(.popover-viewport){overflow-y:auto;user-select:none}.ion-item-job-progression{font-size:.9em}.ion-item-job-progression .message{font-style:italic}.ion-item-job-progression .progress-bar{margin-top:5px;margin-bottom:5px}"]
+                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ion-item-job-progression{font-size:.9em}.ion-item-job-progression .message{font-style:italic}.ion-item-job-progression .progress-bar{margin-top:5px;margin-bottom:5px}"]
                 },] }
     ];
     JobProgressionList.ctorParameters = function () { return []; };
@@ -33492,9 +33527,9 @@
 
     var moment$7 = momentImported__namespace;
     var SwipeTestPage = /** @class */ (function () {
-        function SwipeTestPage(formBuilder, dateFormatPipe) {
+        function SwipeTestPage(formBuilder, dateFormat) {
             this.formBuilder = formBuilder;
-            this.dateFormatPipe = dateFormatPipe;
+            this.dateFormat = dateFormat;
             this.$dates = new rxjs.BehaviorSubject(undefined);
             this._today = moment$7().startOf('day');
             this.form = formBuilder.group({
@@ -33539,7 +33574,7 @@
         /* -- protected methods -- */
         SwipeTestPage.prototype.displayDate = function () {
             var _this = this;
-            return function (obj) { return _this.dateFormatPipe.transform(obj, { pattern: 'dddd L' }).toString(); };
+            return function (obj) { return _this.dateFormat.transform(obj, { pattern: 'dddd L' }).toString(); };
         };
         SwipeTestPage.prototype.compareDate = function () {
             return function (d1, d2) { return d1 && d2 && d1.isSame(d2) || false; };
@@ -33554,7 +33589,7 @@
     ];
     SwipeTestPage.ctorParameters = function () { return [
         { type: i1.FormBuilder },
-        { type: DateFormatPipe }
+        { type: DateFormatService }
     ]; };
 
     var moment$8 = momentImported__namespace;
@@ -35547,6 +35582,7 @@
     exports.APP_TESTING_PAGES = APP_TESTING_PAGES;
     exports.APP_USER_EVENT_SERVICE = APP_USER_EVENT_SERVICE;
     exports.AboutModal = AboutModal;
+    exports.AbstractDateFormat = AbstractDateFormat;
     exports.AbstractUserEventService = AbstractUserEventService;
     exports.AccountPage = AccountPage;
     exports.AccountService = AccountService;
@@ -35625,6 +35661,7 @@
     exports.DEFAULT_REQUIRED_COLUMNS = DEFAULT_REQUIRED_COLUMNS;
     exports.DateDiffDurationPipe = DateDiffDurationPipe;
     exports.DateFormatPipe = DateFormatPipe;
+    exports.DateFormatService = DateFormatService;
     exports.DateFromNowPipe = DateFromNowPipe;
     exports.DateTimeTestPage = DateTimeTestPage;
     exports.DateUtils = DateUtils;