@koalarx/ui 13.0.16 → 13.0.19

package/core/fesm2020/koalarx-ui-core.mjs

@@ -15,7 +15,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2$1 from '@angular/router';
 import { NavigationError, NavigationEnd, NavigationCancel, NavigationStart, RouterModule } from '@angular/router';
 import * as i7 from '@angular/material/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, interval, Observable } from 'rxjs';
 import jwt from 'jwt-decode';
 import * as i4 from '@koalarx/ui/menu';
 import { menuStateSubject } from '@koalarx/ui/menu';
@@ -48,9 +48,9 @@ class LoaderBarPageComponent {
         this.typeLoader = 'indeterminate';
     }
 }
-LoaderBarPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: LoaderBarPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoaderBarPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: LoaderBarPageComponent, selector: "app-loader-page", inputs: { show: "show", progress: "progress", typeLoader: "typeLoader" }, ngImport: i0, template: "<div [ngClass]=\"{'bouncedInDown d-block': show}\" class=\"animated loader-bar-page\">\n  <mat-progress-bar\n    [bufferValue]=\"progress\"\n    [mode]=\"typeLoader\"\n    [value]=\"progress\"\n    color=\"primary\">\n  </mat-progress-bar>\n</div>\n", styles: [".loader-bar-page{position:absolute;display:none;top:0;left:0;width:100vw;height:100vh;z-index:100000}\n"], components: [{ type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: LoaderBarPageComponent, decorators: [{
+LoaderBarPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: LoaderBarPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoaderBarPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: LoaderBarPageComponent, selector: "app-loader-page", inputs: { show: "show", progress: "progress", typeLoader: "typeLoader" }, ngImport: i0, template: "<div [ngClass]=\"{'bouncedInDown d-block': show}\" class=\"animated loader-bar-page\">\n  <mat-progress-bar\n    [bufferValue]=\"progress\"\n    [mode]=\"typeLoader\"\n    [value]=\"progress\"\n    color=\"primary\">\n  </mat-progress-bar>\n</div>\n", styles: [".loader-bar-page{position:absolute;display:none;top:0;left:0;width:100vw;height:100vh;z-index:100000}\n"], components: [{ type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: LoaderBarPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-loader-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"{'bouncedInDown d-block': show}\" class=\"animated loader-bar-page\">\n  <mat-progress-bar\n    [bufferValue]=\"progress\"\n    [mode]=\"typeLoader\"\n    [value]=\"progress\"\n    color=\"primary\">\n  </mat-progress-bar>\n</div>\n", styles: [".loader-bar-page{position:absolute;display:none;top:0;left:0;width:100vw;height:100vh;z-index:100000}\n"] }]
         }], propDecorators: { show: [{
@@ -82,9 +82,9 @@ class NotificationComponent {
         this.delete.emit(notification);
     }
 }
-NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: NotificationComponent, selector: "koala-notification-list", inputs: { notifications: "notifications" }, outputs: { deleteAll: "deleteAll", delete: "delete" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"$event.stopPropagation()\" class=\"notifications-content\">\n  <div class=\"title\">\n    <mat-icon>info</mat-icon>\n    <h2>Notifica\u00E7\u00F5es</h2>\n    <span class=\"spacer\"></span>\n    <button (click)=\"deleteAllNotifications()\" *ngIf=\"notifications.length > 0\" class=\"btn-delete-all\"\n            mat-icon-button\n            matTooltip=\"Excluir Todas\" matTooltipPosition=\"above\">\n      <mat-icon>delete_sweep</mat-icon>\n    </button>\n  </div>\n  <mat-action-list *ngIf=\"notifications.length > 0 else noNotifications\">\n    <mat-list-item *ngFor=\"let notification of notifications\" [routerLink]=\"notification.redirectTo\" class=\"itemList\">\n      <button (click)=\"deleteNotification(notification)\" class=\"delete-notification\" color=\"warn\" mat-icon-button\n              matTooltip=\"Excluir\" matTooltipPosition=\"above\"\n              mat-list-icon>\n        <mat-icon>delete</mat-icon>\n      </button>\n      <mat-icon class=\"iconList\" mat-list-icon>announcement</mat-icon>\n      <h4 class=\"titleList\" mat-line>{{notification.title}}</h4>\n      <p [innerHTML]=\"notification.text\" class=\"textList\" mat-line></p>\n    </mat-list-item>\n  </mat-action-list>\n  <ng-template #noNotifications>\n    <div class=\"empty\">\n      <mat-icon>mood</mat-icon>\n      <p>Tudo certo por aqui!</p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".title{color:#616161;padding:5px 20px 15px}.title h2{vertical-align:middle;display:inline-flex;padding:0 10px;margin:0;font-family:OpenSans,sans-serif;font-size:.8em}.title mat-icon{vertical-align:middle;display:inline-flex;width:22px;height:22px;font-size:22px;line-height:22px}.title .btn-delete-all{position:absolute;right:20px;top:5px}.iconList{color:#1976d2}.titleList{font-family:OpenSansLight,sans-serif;font-size:.7em!important;color:#616161}.textList{font-family:OpenSans,sans-serif;font-size:.9em!important;color:#212121;white-space:unset!important}.itemList{height:-webkit-fit-content!important;height:-moz-fit-content!important;height:fit-content!important;padding:8px 0!important}.delete-notification{background:#b71c1c;border-radius:0!important;height:100%!important;margin-left:-75px;margin-right:10px;position:absolute;transition:.3s;width:50px!important}.delete-notification mat-icon{color:#fff;vertical-align:middle}mat-action-list{max-height:70vh;overflow-y:auto}mat-list-item:hover .delete-notification{margin-left:-15px}.empty{padding:50px;text-align:center;color:#616161}.empty mat-icon{width:40px;height:40px;font-size:40px;line-height:40px}.empty p{text-align:center;font-family:OpenSansLight,sans-serif;font-size:1em}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i7.MatLine, selector: "[mat-line], [matLine]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: NotificationComponent, decorators: [{
+NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: NotificationComponent, selector: "koala-notification-list", inputs: { notifications: "notifications" }, outputs: { deleteAll: "deleteAll", delete: "delete" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"$event.stopPropagation()\" class=\"notifications-content\">\n  <div class=\"title\">\n    <mat-icon>info</mat-icon>\n    <h2>Notifica\u00E7\u00F5es</h2>\n    <span class=\"spacer\"></span>\n    <button (click)=\"deleteAllNotifications()\" *ngIf=\"notifications.length > 0\" class=\"btn-delete-all\"\n            mat-icon-button\n            matTooltip=\"Excluir Todas\" matTooltipPosition=\"above\">\n      <mat-icon>delete_sweep</mat-icon>\n    </button>\n  </div>\n  <mat-action-list *ngIf=\"notifications.length > 0 else noNotifications\">\n    <mat-list-item *ngFor=\"let notification of notifications\" [routerLink]=\"notification.redirectTo\" class=\"itemList\">\n      <button (click)=\"deleteNotification(notification)\" class=\"delete-notification\" color=\"warn\" mat-icon-button\n              matTooltip=\"Excluir\" matTooltipPosition=\"above\"\n              mat-list-icon>\n        <mat-icon>delete</mat-icon>\n      </button>\n      <mat-icon class=\"iconList\" mat-list-icon>announcement</mat-icon>\n      <h4 class=\"titleList\" mat-line>{{notification.title}}</h4>\n      <p [innerHTML]=\"notification.text\" class=\"textList\" mat-line></p>\n    </mat-list-item>\n  </mat-action-list>\n  <ng-template #noNotifications>\n    <div class=\"empty\">\n      <mat-icon>mood</mat-icon>\n      <p>Tudo certo por aqui!</p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".title{color:#616161;padding:5px 20px 15px}.title h2{vertical-align:middle;display:inline-flex;padding:0 10px;margin:0;font-family:OpenSans,sans-serif;font-size:.8em}.title mat-icon{vertical-align:middle;display:inline-flex;width:22px;height:22px;font-size:22px;line-height:22px}.title .btn-delete-all{position:absolute;right:20px;top:5px}.iconList{color:#1976d2}.titleList{font-family:OpenSansLight,sans-serif;font-size:.7em!important;color:#616161}.textList{font-family:OpenSans,sans-serif;font-size:.9em!important;color:#212121;white-space:unset!important}.itemList{height:-webkit-fit-content!important;height:-moz-fit-content!important;height:fit-content!important;padding:8px 0!important}.delete-notification{background:#b71c1c;border-radius:0!important;height:100%!important;margin-left:-75px;margin-right:10px;position:absolute;transition:.3s;width:50px!important}.delete-notification mat-icon{color:#fff;vertical-align:middle}mat-action-list{max-height:70vh;overflow-y:auto}mat-list-item:hover .delete-notification{margin-left:-15px}.empty{padding:50px;text-align:center;color:#616161}.empty mat-icon{width:40px;height:40px;font-size:40px;line-height:40px}.empty p{text-align:center;font-family:OpenSansLight,sans-serif;font-size:1em}\n"], components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i7.MatLine, selector: "[mat-line], [matLine]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-notification-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (click)=\"$event.stopPropagation()\" class=\"notifications-content\">\n  <div class=\"title\">\n    <mat-icon>info</mat-icon>\n    <h2>Notifica\u00E7\u00F5es</h2>\n    <span class=\"spacer\"></span>\n    <button (click)=\"deleteAllNotifications()\" *ngIf=\"notifications.length > 0\" class=\"btn-delete-all\"\n            mat-icon-button\n            matTooltip=\"Excluir Todas\" matTooltipPosition=\"above\">\n      <mat-icon>delete_sweep</mat-icon>\n    </button>\n  </div>\n  <mat-action-list *ngIf=\"notifications.length > 0 else noNotifications\">\n    <mat-list-item *ngFor=\"let notification of notifications\" [routerLink]=\"notification.redirectTo\" class=\"itemList\">\n      <button (click)=\"deleteNotification(notification)\" class=\"delete-notification\" color=\"warn\" mat-icon-button\n              matTooltip=\"Excluir\" matTooltipPosition=\"above\"\n              mat-list-icon>\n        <mat-icon>delete</mat-icon>\n      </button>\n      <mat-icon class=\"iconList\" mat-list-icon>announcement</mat-icon>\n      <h4 class=\"titleList\" mat-line>{{notification.title}}</h4>\n      <p [innerHTML]=\"notification.text\" class=\"textList\" mat-line></p>\n    </mat-list-item>\n  </mat-action-list>\n  <ng-template #noNotifications>\n    <div class=\"empty\">\n      <mat-icon>mood</mat-icon>\n      <p>Tudo certo por aqui!</p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".title{color:#616161;padding:5px 20px 15px}.title h2{vertical-align:middle;display:inline-flex;padding:0 10px;margin:0;font-family:OpenSans,sans-serif;font-size:.8em}.title mat-icon{vertical-align:middle;display:inline-flex;width:22px;height:22px;font-size:22px;line-height:22px}.title .btn-delete-all{position:absolute;right:20px;top:5px}.iconList{color:#1976d2}.titleList{font-family:OpenSansLight,sans-serif;font-size:.7em!important;color:#616161}.textList{font-family:OpenSans,sans-serif;font-size:.9em!important;color:#212121;white-space:unset!important}.itemList{height:-webkit-fit-content!important;height:-moz-fit-content!important;height:fit-content!important;padding:8px 0!important}.delete-notification{background:#b71c1c;border-radius:0!important;height:100%!important;margin-left:-75px;margin-right:10px;position:absolute;transition:.3s;width:50px!important}.delete-notification mat-icon{color:#fff;vertical-align:middle}mat-action-list{max-height:70vh;overflow-y:auto}mat-list-item:hover .delete-notification{margin-left:-15px}.empty{padding:50px;text-align:center;color:#616161}.empty mat-icon{width:40px;height:40px;font-size:40px;line-height:40px}.empty p{text-align:center;font-family:OpenSansLight,sans-serif;font-size:1em}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { notifications: [{
@@ -239,21 +239,38 @@ class TokenFactory {
     }
 }
 
+class MatFormFieldHelper {
+    // Devido a mudanças constantes de estado dos campos de formulário, em certos casos o componente do Material Angular não se comporta conforme o esperado, devido a isso, este Helper tem essa função
+    static fixDisabledStateForDisabledFields() {
+        document.querySelectorAll(".mat-form-field input:disabled").forEach(inputEl => {
+            let matFormFieldElement;
+            let tmpElement;
+            do {
+                tmpElement = tmpElement ? tmpElement.parentElement : inputEl.parentElement;
+                if (tmpElement.classList.contains('mat-form-field')) {
+                    matFormFieldElement = tmpElement;
+                }
+            } while (!matFormFieldElement);
+            matFormFieldElement?.classList.add('mat-form-field-disabled');
+        });
+    }
+}
+
 class KoalaTokenService {
     constructor() {
         this.token$ = new BehaviorSubject(null);
         this.verifySession();
     }
     ngOnDestroy() {
-        if (this.intervalToken) {
-            clearInterval(this.intervalToken);
-        }
+        this.intervalToken?.unsubscribe();
+        this.intervalFixMatFormField?.unsubscribe();
     }
     setToken(token) {
         if (TokenFactory.hasToken()) {
             this.token$.next(token);
         }
         TokenFactory.setToken(token);
+        this.intervalFixMatFormField = interval(1000).subscribe(() => MatFormFieldHelper.fixDisabledStateForDisabledFields());
     }
     getToken() {
         return this.token$;
@@ -266,23 +283,24 @@ class KoalaTokenService {
     }
     removeToken() {
         TokenFactory.removeToken();
+        this.intervalFixMatFormField?.unsubscribe();
     }
     verifySession() {
         TokenFactory.init();
         this.token$.next(TokenFactory.getToken());
-        this.intervalToken = setInterval(() => {
+        this.intervalToken = interval(300).subscribe(() => {
             if (!TokenFactory.hasToken() && this.token$.getValue()) {
                 this.token$.next(null);
             }
             else if (TokenFactory.hasToken() && !this.token$.getValue()) {
                 this.token$.next(TokenFactory.getToken());
             }
-        }, 300);
+        });
     }
 }
-KoalaTokenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaTokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaTokenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaTokenService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaTokenService, decorators: [{
+KoalaTokenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaTokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaTokenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaTokenService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaTokenService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "any" }]
         }], ctorParameters: function () { return []; } });
@@ -339,9 +357,9 @@ class KoalaLoaderService {
         });
     }
 }
-KoalaLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaLoaderService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaLoaderService, decorators: [{
+KoalaLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaLoaderService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "any" }]
         }] });
@@ -524,9 +542,9 @@ class KoalaOAuth2Service {
             });
     }
 }
-KoalaOAuth2Service.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaOAuth2Service, deps: [{ token: i1$2.HttpClient }, { token: i2$1.Router }, { token: KoalaTokenService }], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaOAuth2Service.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaOAuth2Service });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaOAuth2Service, decorators: [{
+KoalaOAuth2Service.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaOAuth2Service, deps: [{ token: i1$2.HttpClient }, { token: i2$1.Router }, { token: KoalaTokenService }], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaOAuth2Service.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaOAuth2Service });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaOAuth2Service, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i2$1.Router }, { type: KoalaTokenService }]; } });
 
@@ -865,9 +883,9 @@ koala-menu ul li li.active a koala-icon * {fill: ${this.palletColors.menuOptions
         }
     }
 }
-PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: PageComponent, deps: [{ token: KoalaTokenService }, { token: i2$1.Router }, { token: KoalaLoaderService }, { token: i4.KoalaMenuService }, { token: KoalaOAuth2Service }, { token: i6.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component });
-PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: PageComponent, selector: "koala-page", inputs: { showMenu: "showMenu", color: "color", logo: "logo", startMenuOpened: "startMenuOpened", showLoaderPage: "showLoaderPage", messageLoaderPage: "messageLoaderPage", defaultPage: "defaultPage", openPages: "openPages", notifications: "notifications", userMenuOptions: "userMenuOptions", palletColors: "palletColors", language: "language" }, outputs: { validatingScope: "validatingScope", logoutEmitter: "logoutEmitter", deleteAllNotifications: "deleteAllNotifications", deleteNotification: "deleteNotification" }, providers: [KoalaTokenService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["drawer"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"showLoaderPage | async\" class=\"koala-loader-pg\">\n  <div class=\"loader-content\">\n    <figure>\n      <img [src]=\"logo\" alt=\"Logotipo\"/>\n      <figcaption *ngIf=\"(messageLoaderPage | async) as messageLoader\" [innerHTML]=\"messageLoader\"></figcaption>\n    </figure>\n    <mat-spinner></mat-spinner>\n  </div>\n</div>\n<app-loader-page *ngIf=\"(loaderSubject | async) as loader\" [progress]=\"loader.progress\" [show]=\"loader.show\"\n                 [typeLoader]=\"loader.typeLoader\"></app-loader-page>\n<mat-drawer-container autosize class=\"menu-container\">\n  <mat-drawer #drawer class=\"menu-options\" [mode]=\"isMobile ? 'push' : 'side'\">\n    <img [src]=\"logo\" alt=\"Logotipo\" id=\"logotipo\"/>\n    <ng-content *ngIf=\"showMenu\" select=\"[menu-options]\"></ng-content>\n  </mat-drawer>\n\n  <mat-toolbar *ngIf=\"!!(logged$ | async) && (username$ | async)\" class=\"toolbar\">\n    <img *ngIf=\"!showMenu\" [src]=\"logo\" alt=\"Logotipo Toolbar\" id=\"logotipo-toolbar\"/>\n    <button (click)=\"toogleMenu()\" *ngIf=\"showMenu\" [color]=\"color\" class=\"btn-collapse-menu\" mat-icon-button>\n      <mat-icon>menu</mat-icon>\n    </button>\n    <span class=\"spacer\"></span>\n\t  <div class=\"menu-toolbar\">\n\t\t  <ng-content select=\"[menu-toolbar]\"></ng-content>\n\t  </div>\n    <div *ngIf=\"(notifications | async) as notificationList\">\n      <button *ngIf=\"notifications\" [color]=\"color\" [matMenuTriggerFor]=\"notificationsMenu\" class=\"btn-toolbar\"\n              mat-icon-button>\n        <mat-icon\n\t        [matBadgeHidden]=\"notificationList.length === 0\"\n\t        [matBadge]=\"notificationList.length.toString()\"\n\t        matBadgeColor=\"warn\">notifications\n        </mat-icon>\n      </button>\n      <mat-menu #notificationsMenu=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n        <koala-notification-list\n          (delete)=\"deleteNotification.emit($event)\"\n          (deleteAll)=\"deleteAllNotifications.emit($event)\"\n          [notifications]=\"notificationList\">\n        </koala-notification-list>\n      </mat-menu>\n    </div>\n    <button [color]=\"color\" [matMenuTriggerFor]=\"userOptions\" class=\"btn-toolbar\" mat-button>\n      <span>{{username$ | async}}</span>\n      <span class=\"icon-user\">{{firstUserLetter$ | async}}</span>\n    </button>\n    <mat-menu #userOptions=\"matMenu\" class=\"user-menu menu-list\" yPosition=\"below\">\n      <div class=\"user-presentation\">\n        <span class=\"icon-user\">{{firstUserLetter$ | async}}</span><br/>\n        <span class=\"username\">{{username$ | async}}</span>\n      </div>\n      <button (click)=\"btn.action()\" *ngFor=\"let btn of userMenuOptions\" mat-menu-item>\n        <mat-icon>{{btn.icon}}</mat-icon>\n        <span>{{btn.name}}</span>\n      </button>\n      <button (click)=\"logout()\" mat-menu-item>\n        <mat-icon>exit_to_app</mat-icon>\n        <span>{{language === 'ptBr' ? 'Sair' : 'Logout'}}</span>\n      </button>\n    </mat-menu>\n  </mat-toolbar>\n\n  <ng-content class=\"page-content\" select=\"[page-content]\"></ng-content>\n\n</mat-drawer-container>\n\n<ng-content class=\"loading-info-content\" select=\"[loading-info-content]\"></ng-content>\n", styles: [".menu-container{height:100vh;width:100vw}.menu-options{border:none;padding:20px 0 0;width:250px}.page-content{align-items:center;display:flex;height:100%;justify-content:center}img#logotipo,img#logotipo-toolbar{display:block;height:auto;margin:0 auto 25px;position:relative;width:120px}.toolbar{box-shadow:none;padding:0 7px 0 13px}.toolbar img#logotipo-toolbar{margin:0;padding:0 10px}.menu-toolbar{margin:0 10px}.spacer{flex:1 1 auto}.btn-toolbar{display:inline-block;margin-right:10px;position:relative}.btn-toolbar span{padding:0 10px 0 0}.btn-toolbar span.icon-user,.user-presentation span.icon-user{border-radius:50%;display:inline-block;height:10px;line-height:10px;padding:5px;width:10px}.user-presentation{min-width:260px;padding:50px 10px;text-align:center}.user-presentation span.icon-user{font-size:30px;height:30px;line-height:30px;margin-bottom:10px;width:30px}.user-presentation span.username{font-family:OpenSansLight,sans-serif;word-break:break-all}@media (max-width: 900px){.btn-toolbar span:first-child{display:none}.btn-toolbar span.icon-user,.user-presentation span.icon-user{height:20px;line-height:20px;width:20px}}\n"], components: [{ type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: LoaderBarPageComponent, selector: "app-loader-page", inputs: ["show", "progress", "typeLoader"] }, { type: i9.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i9.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationComponent, selector: "koala-notification-list", inputs: ["notifications"], outputs: ["deleteAll", "delete"] }, { type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i16.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i15.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: PageComponent, decorators: [{
+PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: PageComponent, deps: [{ token: KoalaTokenService }, { token: i2$1.Router }, { token: KoalaLoaderService }, { token: i4.KoalaMenuService }, { token: KoalaOAuth2Service }, { token: i6.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component });
+PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: PageComponent, selector: "koala-page", inputs: { showMenu: "showMenu", color: "color", logo: "logo", startMenuOpened: "startMenuOpened", showLoaderPage: "showLoaderPage", messageLoaderPage: "messageLoaderPage", defaultPage: "defaultPage", openPages: "openPages", notifications: "notifications", userMenuOptions: "userMenuOptions", palletColors: "palletColors", language: "language" }, outputs: { validatingScope: "validatingScope", logoutEmitter: "logoutEmitter", deleteAllNotifications: "deleteAllNotifications", deleteNotification: "deleteNotification" }, providers: [KoalaTokenService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["drawer"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"showLoaderPage | async\" class=\"koala-loader-pg\">\n  <div class=\"loader-content\">\n    <figure>\n      <img [src]=\"logo\" alt=\"Logotipo\"/>\n      <figcaption *ngIf=\"(messageLoaderPage | async) as messageLoader\" [innerHTML]=\"messageLoader\"></figcaption>\n    </figure>\n    <mat-spinner></mat-spinner>\n  </div>\n</div>\n<app-loader-page *ngIf=\"(loaderSubject | async) as loader\" [progress]=\"loader.progress\" [show]=\"loader.show\"\n                 [typeLoader]=\"loader.typeLoader\"></app-loader-page>\n<mat-drawer-container autosize class=\"menu-container\">\n  <mat-drawer #drawer class=\"menu-options\" [mode]=\"isMobile ? 'push' : 'side'\">\n    <img [src]=\"logo\" alt=\"Logotipo\" id=\"logotipo\"/>\n    <ng-content *ngIf=\"showMenu\" select=\"[menu-options]\"></ng-content>\n  </mat-drawer>\n\n  <mat-toolbar *ngIf=\"!!(logged$ | async) && (username$ | async)\" class=\"toolbar\">\n    <img *ngIf=\"!showMenu\" [src]=\"logo\" alt=\"Logotipo Toolbar\" id=\"logotipo-toolbar\"/>\n    <button (click)=\"toogleMenu()\" *ngIf=\"showMenu\" [color]=\"color\" class=\"btn-collapse-menu\" mat-icon-button>\n      <mat-icon>menu</mat-icon>\n    </button>\n    <span class=\"spacer\"></span>\n\t  <div class=\"menu-toolbar\">\n\t\t  <ng-content select=\"[menu-toolbar]\"></ng-content>\n\t  </div>\n    <div *ngIf=\"(notifications | async) as notificationList\">\n      <button *ngIf=\"notifications\" [color]=\"color\" [matMenuTriggerFor]=\"notificationsMenu\" class=\"btn-toolbar\"\n              mat-icon-button>\n        <mat-icon\n\t        [matBadgeHidden]=\"notificationList.length === 0\"\n\t        [matBadge]=\"notificationList.length.toString()\"\n\t        matBadgeColor=\"warn\">notifications\n        </mat-icon>\n      </button>\n      <mat-menu #notificationsMenu=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n        <koala-notification-list\n          (delete)=\"deleteNotification.emit($event)\"\n          (deleteAll)=\"deleteAllNotifications.emit($event)\"\n          [notifications]=\"notificationList\">\n        </koala-notification-list>\n      </mat-menu>\n    </div>\n    <button [color]=\"color\" [matMenuTriggerFor]=\"userOptions\" class=\"btn-toolbar\" mat-button>\n      <span>{{username$ | async}}</span>\n      <span class=\"icon-user\">{{firstUserLetter$ | async}}</span>\n    </button>\n    <mat-menu #userOptions=\"matMenu\" class=\"user-menu menu-list\" yPosition=\"below\">\n      <div class=\"user-presentation\">\n        <span class=\"icon-user\">{{firstUserLetter$ | async}}</span><br/>\n        <span class=\"username\">{{username$ | async}}</span>\n      </div>\n      <button (click)=\"btn.action()\" *ngFor=\"let btn of userMenuOptions\" mat-menu-item>\n        <mat-icon>{{btn.icon}}</mat-icon>\n        <span>{{btn.name}}</span>\n      </button>\n      <button (click)=\"logout()\" mat-menu-item>\n        <mat-icon>exit_to_app</mat-icon>\n        <span>{{language === 'ptBr' ? 'Sair' : 'Logout'}}</span>\n      </button>\n    </mat-menu>\n  </mat-toolbar>\n\n  <ng-content class=\"page-content\" select=\"[page-content]\"></ng-content>\n\n</mat-drawer-container>\n\n<ng-content class=\"loading-info-content\" select=\"[loading-info-content]\"></ng-content>\n", styles: [".menu-container{height:100vh;width:100vw}.menu-options{border:none;padding:20px 0 0;width:250px}.page-content{align-items:center;display:flex;height:100%;justify-content:center}img#logotipo,img#logotipo-toolbar{display:block;height:auto;margin:0 auto 25px;position:relative;width:120px}.toolbar{box-shadow:none;padding:0 7px 0 13px}.toolbar img#logotipo-toolbar{margin:0;padding:0 10px}.menu-toolbar{margin:0 10px}.spacer{flex:1 1 auto}.btn-toolbar{display:inline-block;margin-right:10px;position:relative}.btn-toolbar span{padding:0 10px 0 0}.btn-toolbar span.icon-user,.user-presentation span.icon-user{border-radius:50%;display:inline-block;height:10px;line-height:10px;padding:5px;width:10px}.user-presentation{min-width:260px;padding:50px 10px;text-align:center}.user-presentation span.icon-user{font-size:30px;height:30px;line-height:30px;margin-bottom:10px;width:30px}.user-presentation span.username{font-family:OpenSansLight,sans-serif;word-break:break-all}@media (max-width: 900px){.btn-toolbar span:first-child{display:none}.btn-toolbar span.icon-user,.user-presentation span.icon-user{height:20px;line-height:20px;width:20px}}\n"], components: [{ type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: LoaderBarPageComponent, selector: "app-loader-page", inputs: ["show", "progress", "typeLoader"] }, { type: i9.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i9.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i13.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationComponent, selector: "koala-notification-list", inputs: ["notifications"], outputs: ["deleteAll", "delete"] }, { type: i13.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i16.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i15.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'koala-page', providers: [KoalaTokenService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"showLoaderPage | async\" class=\"koala-loader-pg\">\n  <div class=\"loader-content\">\n    <figure>\n      <img [src]=\"logo\" alt=\"Logotipo\"/>\n      <figcaption *ngIf=\"(messageLoaderPage | async) as messageLoader\" [innerHTML]=\"messageLoader\"></figcaption>\n    </figure>\n    <mat-spinner></mat-spinner>\n  </div>\n</div>\n<app-loader-page *ngIf=\"(loaderSubject | async) as loader\" [progress]=\"loader.progress\" [show]=\"loader.show\"\n                 [typeLoader]=\"loader.typeLoader\"></app-loader-page>\n<mat-drawer-container autosize class=\"menu-container\">\n  <mat-drawer #drawer class=\"menu-options\" [mode]=\"isMobile ? 'push' : 'side'\">\n    <img [src]=\"logo\" alt=\"Logotipo\" id=\"logotipo\"/>\n    <ng-content *ngIf=\"showMenu\" select=\"[menu-options]\"></ng-content>\n  </mat-drawer>\n\n  <mat-toolbar *ngIf=\"!!(logged$ | async) && (username$ | async)\" class=\"toolbar\">\n    <img *ngIf=\"!showMenu\" [src]=\"logo\" alt=\"Logotipo Toolbar\" id=\"logotipo-toolbar\"/>\n    <button (click)=\"toogleMenu()\" *ngIf=\"showMenu\" [color]=\"color\" class=\"btn-collapse-menu\" mat-icon-button>\n      <mat-icon>menu</mat-icon>\n    </button>\n    <span class=\"spacer\"></span>\n\t  <div class=\"menu-toolbar\">\n\t\t  <ng-content select=\"[menu-toolbar]\"></ng-content>\n\t  </div>\n    <div *ngIf=\"(notifications | async) as notificationList\">\n      <button *ngIf=\"notifications\" [color]=\"color\" [matMenuTriggerFor]=\"notificationsMenu\" class=\"btn-toolbar\"\n              mat-icon-button>\n        <mat-icon\n\t        [matBadgeHidden]=\"notificationList.length === 0\"\n\t        [matBadge]=\"notificationList.length.toString()\"\n\t        matBadgeColor=\"warn\">notifications\n        </mat-icon>\n      </button>\n      <mat-menu #notificationsMenu=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n        <koala-notification-list\n          (delete)=\"deleteNotification.emit($event)\"\n          (deleteAll)=\"deleteAllNotifications.emit($event)\"\n          [notifications]=\"notificationList\">\n        </koala-notification-list>\n      </mat-menu>\n    </div>\n    <button [color]=\"color\" [matMenuTriggerFor]=\"userOptions\" class=\"btn-toolbar\" mat-button>\n      <span>{{username$ | async}}</span>\n      <span class=\"icon-user\">{{firstUserLetter$ | async}}</span>\n    </button>\n    <mat-menu #userOptions=\"matMenu\" class=\"user-menu menu-list\" yPosition=\"below\">\n      <div class=\"user-presentation\">\n        <span class=\"icon-user\">{{firstUserLetter$ | async}}</span><br/>\n        <span class=\"username\">{{username$ | async}}</span>\n      </div>\n      <button (click)=\"btn.action()\" *ngFor=\"let btn of userMenuOptions\" mat-menu-item>\n        <mat-icon>{{btn.icon}}</mat-icon>\n        <span>{{btn.name}}</span>\n      </button>\n      <button (click)=\"logout()\" mat-menu-item>\n        <mat-icon>exit_to_app</mat-icon>\n        <span>{{language === 'ptBr' ? 'Sair' : 'Logout'}}</span>\n      </button>\n    </mat-menu>\n  </mat-toolbar>\n\n  <ng-content class=\"page-content\" select=\"[page-content]\"></ng-content>\n\n</mat-drawer-container>\n\n<ng-content class=\"loading-info-content\" select=\"[loading-info-content]\"></ng-content>\n", styles: [".menu-container{height:100vh;width:100vw}.menu-options{border:none;padding:20px 0 0;width:250px}.page-content{align-items:center;display:flex;height:100%;justify-content:center}img#logotipo,img#logotipo-toolbar{display:block;height:auto;margin:0 auto 25px;position:relative;width:120px}.toolbar{box-shadow:none;padding:0 7px 0 13px}.toolbar img#logotipo-toolbar{margin:0;padding:0 10px}.menu-toolbar{margin:0 10px}.spacer{flex:1 1 auto}.btn-toolbar{display:inline-block;margin-right:10px;position:relative}.btn-toolbar span{padding:0 10px 0 0}.btn-toolbar span.icon-user,.user-presentation span.icon-user{border-radius:50%;display:inline-block;height:10px;line-height:10px;padding:5px;width:10px}.user-presentation{min-width:260px;padding:50px 10px;text-align:center}.user-presentation span.icon-user{font-size:30px;height:30px;line-height:30px;margin-bottom:10px;width:30px}.user-presentation span.username{font-family:OpenSansLight,sans-serif;word-break:break-all}@media (max-width: 900px){.btn-toolbar span:first-child{display:none}.btn-toolbar span.icon-user,.user-presentation span.icon-user{height:20px;line-height:20px;width:20px}}\n"] }]
         }], ctorParameters: function () { return [{ type: KoalaTokenService }, { type: i2$1.Router }, { type: KoalaLoaderService }, { type: i4.KoalaMenuService }, { type: KoalaOAuth2Service }, { type: i6.DeviceDetectorService }]; }, propDecorators: { showMenu: [{
@@ -909,8 +927,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
 
 class KoalaPageModule {
 }
-KoalaPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KoalaPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaPageModule, declarations: [PageComponent,
+KoalaPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KoalaPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaPageModule, declarations: [PageComponent,
         NotificationComponent,
         LoaderBarPageComponent], imports: [CommonModule,
         RouterModule,
@@ -925,7 +943,7 @@ KoalaPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         MatListModule,
         MatMenuModule], exports: [PageComponent,
         RouterModule] });
-KoalaPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaPageModule, imports: [[
+KoalaPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaPageModule, imports: [[
             CommonModule,
             RouterModule,
             MatBadgeModule,
@@ -939,7 +957,7 @@ KoalaPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             MatListModule,
             MatMenuModule
         ], RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -976,9 +994,9 @@ class KoalaParameterHashLocationStrategy extends HashLocationStrategy {
             super.prepareExternalUrl(internal);
     }
 }
-KoalaParameterHashLocationStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaParameterHashLocationStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-KoalaParameterHashLocationStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaParameterHashLocationStrategy });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaParameterHashLocationStrategy, decorators: [{
+KoalaParameterHashLocationStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaParameterHashLocationStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+KoalaParameterHashLocationStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaParameterHashLocationStrategy });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaParameterHashLocationStrategy, decorators: [{
             type: Injectable
         }] });
 
@@ -1224,18 +1242,18 @@ class KoalaApiRequesterService {
         }
     }
 }
-KoalaApiRequesterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaApiRequesterService, deps: [{ token: i1$2.HttpClient }, { token: KoalaOAuth2Service }], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaApiRequesterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaApiRequesterService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaApiRequesterService, decorators: [{
+KoalaApiRequesterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaApiRequesterService, deps: [{ token: i1$2.HttpClient }, { token: KoalaOAuth2Service }], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaApiRequesterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaApiRequesterService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaApiRequesterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
         }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: KoalaOAuth2Service }]; } });
 
 class KoalaApiRequesterBase {
-    constructor(koalaService, endpoint, isMockup = false) {
+    constructor(koalaService, endpoint, environmentNameToEndpointApi = 'endpointApi', isMockup = false) {
         this.koalaService = koalaService;
         this.endpoint = endpoint;
-        koalaService.apiUrl = KoalaEnvironment.environment?.endpointApi;
+        koalaService.apiUrl = KoalaEnvironment.environment?.[environmentNameToEndpointApi];
         koalaService.isMockup = isMockup;
     }
     getAll(filter) {
@@ -1331,9 +1349,9 @@ class KoalaRequestService {
         });
     }
 }
-KoalaRequestService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaRequestService, deps: [{ token: i1$3.KoalaAlertService }], target: i0.ɵɵFactoryTarget.Injectable });
-KoalaRequestService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaRequestService, providedIn: "any" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: KoalaRequestService, decorators: [{
+KoalaRequestService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaRequestService, deps: [{ token: i1$3.KoalaAlertService }], target: i0.ɵɵFactoryTarget.Injectable });
+KoalaRequestService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaRequestService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: KoalaRequestService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "any" }]
         }], ctorParameters: function () { return [{ type: i1$3.KoalaAlertService }]; } });
@@ -1349,12 +1367,12 @@ class NgxKoalaModule {
         };
     }
 }
-NgxKoalaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: NgxKoalaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxKoalaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: NgxKoalaModule, imports: [CommonModule,
+NgxKoalaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: NgxKoalaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxKoalaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: NgxKoalaModule, imports: [CommonModule,
         HttpClientModule,
         KoalaPageModule], exports: [HttpClientModule,
         KoalaPageModule] });
-NgxKoalaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: NgxKoalaModule, providers: [
+NgxKoalaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: NgxKoalaModule, providers: [
         KoalaOAuth2Service
     ], imports: [[
             CommonModule,
@@ -1362,7 +1380,7 @@ NgxKoalaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             KoalaPageModule
         ], HttpClientModule,
         KoalaPageModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: NgxKoalaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: NgxKoalaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [