@sumaris-net/ngx-components 1.21.0-beta1 → 1.21.0-beta2

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

@@ -24386,6 +24386,9 @@
             this._subscription = new rxjs.Subscription();
             this.loading = true;
             this.isLogin = false;
+            // showUserEventNotification: boolean;
+            // showJobProgression: boolean;
+            // jobProgressionOptions: JobProgressionOptions;
             this.$items = new rxjs.BehaviorSubject(undefined);
             this.id = 'menu';
             this.menuId = 'left';
@@ -24410,6 +24413,10 @@
                         case 2:
                             // Wait platform started
                             _b.sent();
+                            // Init social options
+                            // this.showUserEventNotification = toBoolean(this.socialModuleOptions?.showUserEventNotification, false);
+                            // this.showJobProgression = toBoolean(this.socialModuleOptions?.showJobProgression, false);
+                            // this.jobProgressionOptions = this.socialModuleOptions?.jobProgressionOptions;
                             // Listen to menu service event
                             this.menuService.splitPaneWhen
                                 .subscribe(function (value) { return _this.setSplitPaneWhen(value); });
@@ -24749,7 +24756,7 @@
     MenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-menu',
-                    template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
+                    template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n<!--            todo ajouter ici les 2 composants du module social -->\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
                     animations: [fadeInAnimation],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["ion-menu{--ion-item-background:transparent;--ion-item-divider-background:transparent;--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint);--ion-item-background-selected:var(--ion-color-secondary100);--ion-item-text-color-selected:var(--ion-color-primary);--ion-item-icon-color-selected:var(--ion-color-primary);--ion-item-text-color-disable:var(--ion-color-medium);--ion-item-icon-color-disable:var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:50%;background-color:var(--ion-color-secondary);border:1px solid var(--ion-color-primary);overflow:hidden!important;font-size:var(--avatar-size,60px)!important;line-height:var(--avatar-size,60px);height:var(--avatar-size,60px)!important;width:var(--avatar-size,60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size,60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top:188px}ion-menu ion-content.no-profile-header{--offset-top:79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color:var(--ion-color-secondary-tint);--ion-item-text-color:var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color:var(--ion-color-tertiary-tint);--ion-item-text-color:var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color:var(--ion-color-danger-tint);--ion-item-text-color:var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color:var(--ion-color-medium-shade);--ion-item-text-color:var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color:var(--ion-color-dark-tint);--ion-item-text-color:var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item ion-icon,ion-menu ion-content ion-list ion-item mat-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-label,ion-menu ion-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover:var(--ion-item-background-selected)!important}ion-menu ion-content ion-list ion-item.selected ion-icon,ion-menu ion-content ion-list ion-item.selected mat-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-label,ion-menu ion-content ion-list ion-item.selected ion-text{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover:var(--ion-item-background-selected)!important;--ion-item-icon-color-selected:var(--ion-item-icon-color)!important;--ion-item-text-color-selected:var(--ion-item-text-color)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width:40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size,80px)!important;line-height:var(--avatar-size,80px);height:var(--avatar-size,80px)!important;width:var(--avatar-size,80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size,80px)}}"]
@@ -30949,7 +30956,7 @@
     UserEventNotificationList.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-user-event-notification-list',
-                    template: "\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-row>\n\n  <ion-item *ngIf=\"!(userEvents | async)?.length\">\n    {{'COMMON.NO_RESULT' | translate}}\n  </ion-item>\n  <ion-item\n    *ngFor=\"let userEvent of userEvents | async\"\n    (click)=\"read($event, userEvent)\"\n  >\n\n    <ion-avatar slot=\"start\">\n\n      <img *ngIf=\"userEvent.avatar; else avatarIcon\" src=\"{{ userEvent.avatar }}\">\n\n      <ng-template #avatarIcon>\n        <app-icon\n          *ngIf=\"userEvent.avatarIcon\"\n          [ref]=\"userEvent.avatarIcon\"\n          height=\"40\"\n          width=\"40\"\n        ></app-icon>\n      </ng-template>\n\n    </ion-avatar>\n\n    <ion-grid class=\"ion-no-margin ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          <p [class.unread]=\"!userEvent.readDate\">\n            {{userEvent.message}}\n          </p>\n        </ion-col>\n      </ion-row>\n      <ion-row *ngIf=\"userEvent.actions?.length\">\n        <ion-col>\n          <p>\n            <span *ngFor=\"let action of userEvent.actions\">\n              <a\n                [style.margin-right.px]=\"8\"\n                [style.cursor]=\"'pointer'\"\n                (click)=\"executeAction(action, userEvent)\"\n              >\n                {{ '&#10142;&nbsp;' + action.name}}\n              </a>\n            </span>\n          </p>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <app-icon\n            *ngIf=\"userEvent.icon\"\n            [ref]=\"userEvent.icon\"\n            height=\"16\"\n            width=\"16\"\n            [style.vertical-align]=\"'sub'\"\n          ></app-icon>\n          <small>\n            <span>{{userEvent.creationDate|dateFromNow}}</span>\n            <span [style.color]=\"'gray'\">{{ ' | ' + (userEvent.creationDate|dateFormat:{time:true}) }}</span>\n          </small>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
+                    template: "\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-row>\n\n  <ion-item *ngIf=\"!(userEvents | async)?.length\">\n    {{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}\n  </ion-item>\n  <ion-item\n    *ngFor=\"let userEvent of userEvents | async\"\n    (click)=\"read($event, userEvent)\"\n  >\n\n    <ion-avatar slot=\"start\">\n\n      <img *ngIf=\"userEvent.avatar; else avatarIcon\" src=\"{{ userEvent.avatar }}\">\n\n      <ng-template #avatarIcon>\n        <app-icon\n          *ngIf=\"userEvent.avatarIcon\"\n          [ref]=\"userEvent.avatarIcon\"\n          height=\"40\"\n          width=\"40\"\n        ></app-icon>\n      </ng-template>\n\n    </ion-avatar>\n\n    <ion-grid class=\"ion-no-margin ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          <p [class.unread]=\"!userEvent.readDate\">\n            {{userEvent.message}}\n          </p>\n        </ion-col>\n      </ion-row>\n      <ion-row *ngIf=\"userEvent.actions?.length\">\n        <ion-col>\n          <p>\n            <span *ngFor=\"let action of userEvent.actions\">\n              <a\n                [style.margin-right.px]=\"8\"\n                [style.cursor]=\"'pointer'\"\n                (click)=\"executeAction(action, userEvent)\"\n              >\n                {{ '&#10142;&nbsp;' + action.name}}\n              </a>\n            </span>\n          </p>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <app-icon\n            *ngIf=\"userEvent.icon\"\n            [ref]=\"userEvent.icon\"\n            height=\"16\"\n            width=\"16\"\n            [style.vertical-align]=\"'sub'\"\n          ></app-icon>\n          <small>\n            <span>{{userEvent.creationDate|dateFromNow}}</span>\n            <span [style.color]=\"'gray'\">{{ ' | ' + (userEvent.creationDate|dateFormat:{time:true}) }}</span>\n          </small>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
                     styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.unread{font-weight:700}"]
                 },] }
     ];
@@ -30969,7 +30976,7 @@
             this.popoverController = popoverController;
             this.cd = cd;
             this.debug = false;
-            this.titleI18n = 'SOCIAL.USER_EVENT.TITLE';
+            this.titleI18n = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
             this.disabled = false;
             this.userEventsSubject = new rxjs.BehaviorSubject(undefined);
             this._subscriptions = new rxjs.Subscription();
@@ -30978,7 +30985,8 @@
         }
         Object.defineProperty(UserEventNotificationComponent.prototype, "count", {
             get: function () {
-                return this.userEventService.userEventCount.pipe(operators.map(function (value) { return value === 0 ? undefined : value; }));
+                var _a;
+                return (_a = this.userEventService) === null || _a === void 0 ? void 0 : _a.userEventCount.pipe(operators.map(function (value) { return value === 0 ? undefined : value; }));
             },
             enumerable: false,
             configurable: true
@@ -30986,6 +30994,11 @@
         UserEventNotificationComponent.prototype.ngOnInit = function () {
             var _this = this;
             var _a;
+            if (isNil(this.userEventService)) {
+                console.warn(this._logPrefix + "No service injected");
+                this.disabled = true;
+                return;
+            }
             this._subscriptions.add(this.userEventService.watchAll(0, 10, 'creationDate', "desc", {
                 recipients: [(_a = this.accountService.person) === null || _a === void 0 ? void 0 : _a.pubkey]
             }).subscribe(function (value) {
@@ -31047,7 +31060,7 @@
                 },] }
     ];
     UserEventNotificationComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [UserEventServiceToken,] }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [UserEventServiceToken,] }] },
         { type: AccountService },
         { type: i1$5.PopoverController },
         { type: i0.ChangeDetectorRef }
@@ -31415,7 +31428,7 @@
     JobProgressionList.decorators = [
         { 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    {{'COMMON.NO_RESULT' | translate}}\n  </ion-item>\n  <ion-item *ngFor=\"let jobProgression of jobProgressions\">\n    <ion-grid class=\"ion-no-margin\">\n      <ion-row>\n        <ion-col>\n          {{jobProgression.message}}\n        </ion-col>\n      </ion-row>\n      <ion-row>\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",
+                    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\">\n    <ion-grid class=\"ion-no-margin\">\n      <ion-row>\n        <ion-col>\n          {{jobProgression.message}}\n        </ion-col>\n      </ion-row>\n      <ion-row>\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;-webkit-user-select:none;-moz-user-select:none;user-select:none}"]
                 },] }
     ];
@@ -31431,10 +31444,7 @@
             this.popoverController = popoverController;
             this.cd = cd;
             this.debug = false;
-            this.titleI18n = 'SOCIAL.JOB_PROGRESSION.TITLE';
-            this.autoRemove = true;
-            this.autoHide = false;
-            this.autoHideDelay = 1000; // millisecond
+            this.titleI18n = 'SOCIAL.JOB.PROGRESSION.TITLE';
             this.jobFinished = new i0.EventEmitter();
             this.disabled = true;
             this.color = 'accent';
@@ -31446,9 +31456,23 @@
             this._logPrefix = '[job-progression] ';
         }
         JobProgressionComponent.prototype.ngOnInit = function () {
+            var _a, _b, _c, _d;
+            if (isNil(this.jobProgressionService)) {
+                console.warn(this._logPrefix + "No service injected");
+            }
+            // parse options
+            this.autoHide = toBoolean((_a = this.options) === null || _a === void 0 ? void 0 : _a.autoHide, false);
+            this.visible = !this.autoHide;
+            this.autoHideDelay = toNumber((_b = this.options) === null || _b === void 0 ? void 0 : _b.autoHideDelay, 1000);
+            this.autoRemove = toBoolean((_c = this.options) === null || _c === void 0 ? void 0 : _c.autoRemove, true);
+            this.autoRemoveDelay = toNumber((_d = this.options) === null || _d === void 0 ? void 0 : _d.autoRemoveDelay, 1000);
         };
         JobProgressionComponent.prototype.addJob = function (id) {
             var _this = this;
+            if (isNil(this.jobProgressionService)) {
+                console.warn(this._logPrefix + "No service injected. Can't add a job");
+                return;
+            }
             if (this.debug) {
                 console.debug(this._logPrefix + "Add job id=" + id);
             }
@@ -31465,6 +31489,8 @@
                 }
                 return true;
             }), operators.map(function (progression) {
+                // Ensure visible
+                _this.visible = true;
                 // Get current progression object
                 var currentProgression = _this.getProgression(id);
                 if (!currentProgression) {
@@ -31494,7 +31520,17 @@
                     // emit event
                     _this.jobFinished.emit(progression.id);
                     if (_this.autoRemove) {
-                        setTimeout(function () { return _this.removeJob(progression.id); }, 1000);
+                        setTimeout(function () {
+                            var _a;
+                            _this.removeJob(progression.id);
+                            // If last job
+                            if (_this.autoHide && !((_a = _this.jobProgressions) === null || _a === void 0 ? void 0 : _a.length)) {
+                                setTimeout(function () {
+                                    _this.visible = false;
+                                    _this.markForCheck();
+                                }, _this.autoHideDelay);
+                            }
+                        }, _this.autoRemoveDelay);
                     }
                 }
             });
@@ -31543,8 +31579,8 @@
         JobProgressionComponent.prototype.showList = function (event) {
             return __awaiter(this, void 0, void 0, function () {
                 var popover;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0: return [4 /*yield*/, this.popoverController.create({
                                 component: JobProgressionList,
                                 componentProps: {
@@ -31558,10 +31594,10 @@
                                 cssClass: 'popover-large'
                             })];
                         case 1:
-                            popover = _a.sent();
+                            popover = _e.sent();
                             return [4 /*yield*/, popover.present()];
                         case 2:
-                            _a.sent();
+                            _e.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -31581,22 +31617,20 @@
     JobProgressionComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-job-progression',
-                    template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"!autoHide || jobProgressions?.length\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"jobProgressions?.length\"\n    [matBadgeHidden]=\"!jobProgressions?.length\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobProgressions?.length ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *ngIf=\"jobProgressions?.length\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode\"\n    [value]=\"value\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n",
+                    template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"jobProgressions?.length\"\n    [matBadgeHidden]=\"!jobProgressions?.length\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobProgressions?.length ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *ngIf=\"jobProgressions?.length\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode\"\n    [value]=\"value\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".floating-spinner{position:absolute;top:6px;left:5px}"]
                 },] }
     ];
     JobProgressionComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [JobProgressionServiceToken,] }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [JobProgressionServiceToken,] }] },
         { type: i1$5.PopoverController },
         { type: i0.ChangeDetectorRef }
     ]; };
     JobProgressionComponent.propDecorators = {
         debug: [{ type: i0.Input }],
         titleI18n: [{ type: i0.Input }],
-        autoRemove: [{ type: i0.Input }],
-        autoHide: [{ type: i0.Input }],
-        autoHideDelay: [{ type: i0.Input }],
+        options: [{ type: i0.Input }],
         jobFinished: [{ type: i0.Output }]
     };
 
@@ -31622,6 +31656,7 @@
                 },] }
     ];
 
+    var SocialModuleOptionsToken = new i0.InjectionToken("SocialModuleOptions");
     var SocialModule = /** @class */ (function () {
         function SocialModule() {
         }
@@ -33911,6 +33946,7 @@
     exports.IsNotOnFieldModePipe = IsNotOnFieldModePipe;
     exports.IsOnFieldModePipe = IsOnFieldModePipe;
     exports.Job = Job;
+    exports.JobModule = JobModule;
     exports.JobProgressionComponent = JobProgressionComponent;
     exports.JobProgressionService = JobProgressionService;
     exports.JobProgressionServiceToken = JobProgressionServiceToken;
@@ -33951,6 +33987,7 @@
     exports.MenuService = MenuService;
     exports.MessageForm = MessageForm;
     exports.MessageModal = MessageModal;
+    exports.MessageModule = MessageModule;
     exports.MessageService = MessageService;
     exports.MessageTypeList = MessageTypeList;
     exports.MessageTypes = MessageTypes;
@@ -34018,6 +34055,7 @@
     exports.SharedValidators = SharedValidators;
     exports.SocialErrorCodes = SocialErrorCodes;
     exports.SocialModule = SocialModule;
+    exports.SocialModuleOptionsToken = SocialModuleOptionsToken;
     exports.StartableService = StartableService;
     exports.StatusById = StatusById;
     exports.StatusIds = StatusIds;
@@ -34046,6 +34084,7 @@
     exports.UploadFileTestingPage = UploadFileTestingPage;
     exports.UriUtils = UriUtils;
     exports.UserEventFragments = UserEventFragments;
+    exports.UserEventModule = UserEventModule;
     exports.UserEventNotificationComponent = UserEventNotificationComponent;
     exports.UserEventService = UserEventService;
     exports.UserEventServiceToken = UserEventServiceToken;
@@ -34213,16 +34252,13 @@
     exports.ɵh = LocalSettingsValidatorService;
     exports.ɵi = AppUpdateOfflineModeCard;
     exports.ɵj = AppIconComponent;
-    exports.ɵk = UserEventModule;
-    exports.ɵl = UserEventNotificationList;
-    exports.ɵm = JobModule;
-    exports.ɵn = JobProgressionList;
-    exports.ɵo = MessageModule;
-    exports.ɵp = DateTestPage;
-    exports.ɵq = NumpadTestPage;
-    exports.ɵr = MatBadgeIconTestPage;
-    exports.ɵs = ToastTestingModule;
-    exports.ɵt = ToastTestingPage;
+    exports.ɵk = UserEventNotificationList;
+    exports.ɵl = JobProgressionList;
+    exports.ɵm = DateTestPage;
+    exports.ɵn = NumpadTestPage;
+    exports.ɵo = MatBadgeIconTestPage;
+    exports.ɵp = ToastTestingModule;
+    exports.ɵq = ToastTestingPage;
 
     Object.defineProperty(exports, '__esModule', { value: true });