@testgorilla/tgo-ui 0.0.11 → 0.0.13

package/components/navbar/navbar.component.d.ts

@@ -18,12 +18,12 @@ export declare class NavbarComponent {
      */
     activedRoute: string;
     /**
-     * User first name and last name initials
+     * User first name and last name
      *
      * @type {string}
      * @memberof NavbarComponent
      */
-    userInitials: string;
+    userName: string;
     /**
      * @ignore
      */
@@ -36,5 +36,5 @@ export declare class NavbarComponent {
     navigate(routeId: string): void;
     logout(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "ui-navbar", never, { "routes": "routes"; "activedRoute": "activedRoute"; "userInitials": "userInitials"; }, { "navigateEvent": "navigateEvent"; "logoutEvent": "logoutEvent"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "ui-navbar", never, { "routes": "routes"; "activedRoute": "activedRoute"; "userName": "userName"; }, { "navigateEvent": "navigateEvent"; "logoutEvent": "logoutEvent"; }, never, never>;
 }

package/esm2020/components/navbar/navbar.component.mjs

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/material/toolbar";
-import * as i2 from "@angular/material/menu";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/material/core";
+import * as i2 from "@angular/material/button";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/material/menu";
+import * as i5 from "@angular/common";
 export class NavbarComponent {
     constructor() {
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
@@ -25,12 +26,12 @@ export class NavbarComponent {
          */
         this.activedRoute = '';
         /**
-         * User first name and last name initials
+         * User first name and last name
          *
          * @type {string}
          * @memberof NavbarComponent
          */
-        this.userInitials = '';
+        this.userName = '';
         /**
          * @ignore
          */
@@ -48,19 +49,19 @@ export class NavbarComponent {
     }
 }
 NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userInitials: "userInitials" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <!-- <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button> -->\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matMenuTriggerFor]=\"menu\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">Sign out</button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%}.mat-toolbar .custom-toolbar .init-gradient{width:160px;height:100%;background:linear-gradient(270deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.mat-toolbar .custom-toolbar .content{background-color:#e9f0f1;width:100%}.mat-toolbar .custom-toolbar .content .logo{width:140px;margin-left:28px;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .content .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation a.active{box-shadow:inset 0 5px 0 -1px #46a997}.mat-toolbar .custom-toolbar .content .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .content .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .content .actions .profile-circle{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:32px;height:32px;background:#D4E0E4;border-radius:128px;font-weight:600;font-size:14px;text-align:center;margin-left:32px}.mat-toolbar .custom-toolbar .final-gradient{width:160px;height:100%;background:linear-gradient(90deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:bolder}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <!-- <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button> -->\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matMenuTriggerFor]=\"menu\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">Sign out</button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%}.mat-toolbar .custom-toolbar .init-gradient{width:160px;height:100%;background:linear-gradient(270deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.mat-toolbar .custom-toolbar .content{background-color:#e9f0f1;width:100%}.mat-toolbar .custom-toolbar .content .logo{width:140px;margin-left:28px;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .content .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation a.active{box-shadow:inset 0 5px 0 -1px #46a997}.mat-toolbar .custom-toolbar .content .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .content .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .content .actions .profile-circle{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:32px;height:32px;background:#D4E0E4;border-radius:128px;font-weight:600;font-size:14px;text-align:center;margin-left:32px}.mat-toolbar .custom-toolbar .final-gradient{width:160px;height:100%;background:linear-gradient(90deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.row{display:flex;flex-direction:row}\n"] }]
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:bolder}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { routes: [{
                 type: Input
             }], activedRoute: [{
                 type: Input
-            }], userInitials: [{
+            }], userName: [{
                 type: Input
             }], navigateEvent: [{
                 type: Output
             }], logoutEvent: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25hdmJhci9uYXZiYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmF2YmFyL25hdmJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFVbkgsTUFBTSxPQUFPLGVBQWU7SUF3QzFCO1FBdkNBLG1IQUFtSDtRQUNuSCx3REFBd0Q7UUFDeEQsd0RBQXdEO1FBRXhEOzs7Ozs7V0FNRztRQUNNLFdBQU0sR0FBYSxFQUFFLENBQUM7UUFFL0I7Ozs7O1dBS0c7UUFDTSxpQkFBWSxHQUFHLEVBQUUsQ0FBQztRQUUzQjs7Ozs7V0FLRztRQUNNLGlCQUFZLEdBQUcsRUFBRSxDQUFDO1FBRTNCOztXQUVHO1FBQ08sa0JBQWEsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUUzRTs7V0FFRztRQUNPLGdCQUFXLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7SUFFdEQsQ0FBQztJQUVoQixRQUFRLENBQUMsT0FBZTtRQUN0QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLE9BQU8sRUFBRSxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzFCLENBQUM7OzZHQWhEVSxlQUFlO2lHQUFmLGVBQWUsb05DVjVCLDhrQ0F5Qlc7NEZEZkUsZUFBZTtrQkFQM0IsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7MEVBYzVCLE1BQU07c0JBQWQsS0FBSztnQkFRRyxZQUFZO3NCQUFwQixLQUFLO2dCQVFHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBS0ksYUFBYTtzQkFBdEIsTUFBTTtnQkFLRyxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSVJvdXRlIH0gZnJvbSAnLi9uYXZiYXIubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS1uYXZiYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbmF2YmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmF2YmFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBOYXZiYXJDb21wb25lbnQge1xuICAvLyBUT0RPOiBTb21lIHByb3BlcnRpZXMgYW5kIG1ldGhvZHMgYXJlIGlnbm9yZWQgb24gcHVycG9zZSBiZWNhdXNlIG9mIGEgY3VycmVudCBpc3N1ZSB3aXRoIGNvbXBvZG9jIGFuZCBhbmd1bGFyIDEzXG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9zdG9yeWJvb2tqcy9zdG9yeWJvb2svaXNzdWVzLzE2ODY1XG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9zdG9yeWJvb2tqcy9zdG9yeWJvb2svaXNzdWVzLzE3MDA0XG5cbiAgLyoqXG4gICAqIFJvdXRlcyBvYmplY3RcbiAgICpcbiAgICogQHR5cGUge0lSb3V0ZX1cbiAgICogQG1lbWJlcm9mIE5hdmJhckNvbXBvbmVudFxuICAgKiBAaWdub3JlXG4gICAqL1xuICBASW5wdXQoKSByb3V0ZXM6IElSb3V0ZVtdID0gW107XG5cbiAgLyoqXG4gICAqIEFjdGl2ZWQgcm91dGUgaWRcbiAgICpcbiAgICogQHR5cGUge3N0cmluZ31cbiAgICogQG1lbWJlcm9mIE5hdmJhckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgYWN0aXZlZFJvdXRlID0gJyc7XG5cbiAgLyoqXG4gICAqIFVzZXIgZmlyc3QgbmFtZSBhbmQgbGFzdCBuYW1lIGluaXRpYWxzXG4gICAqXG4gICAqIEB0eXBlIHtzdHJpbmd9XG4gICAqIEBtZW1iZXJvZiBOYXZiYXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHVzZXJJbml0aWFscyA9ICcnO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBAT3V0cHV0KCkgbmF2aWdhdGVFdmVudDogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQE91dHB1dCgpIGxvZ291dEV2ZW50OiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5hdmlnYXRlKHJvdXRlSWQ6IHN0cmluZykge1xuICAgIHRoaXMubmF2aWdhdGVFdmVudC5lbWl0KGAvJHtyb3V0ZUlkfWApO1xuICB9XG5cbiAgbG9nb3V0KCk6IHZvaWQge1xuICAgIHRoaXMubG9nb3V0RXZlbnQuZW1pdCgpO1xuICB9XG59XG4iLCI8bWF0LXRvb2xiYXI+XG4gICAgPGRpdiBjbGFzcz1cImN1c3RvbS10b29sYmFyIHJvd1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaW5pdC1ncmFkaWVudFwiPjwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGVudCByb3dcIj5cbiAgICAgICAgICAgIDxpbWcgY2xhc3M9XCJsb2dvXCIgc3JjPVwiL2ltYWdlcy90ZXN0Z29yaWxsYS5zdmdcIiAoY2xpY2spPVwibmF2aWdhdGUoJycpXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibmF2aWdhdGlvbiByb3dcIj5cbiAgICAgICAgICAgICAgICA8YSAqbmdGb3I9XCJsZXQgcm91dGUgb2Ygcm91dGVzXCIgKGNsaWNrKT1cIm5hdmlnYXRlKHJvdXRlLmlkKVwiIFtuZ0NsYXNzXT1cInsnYWN0aXZlJzogYWN0aXZlZFJvdXRlID09PSByb3V0ZS5pZH1cIj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4+e3sgcm91dGUudGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgICAgICAgPC9hPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uc1wiPlxuICAgICAgICAgICAgICAgIDwhLS0gPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtaWNvbj5oZWxwX291dGxpbmU8L21hdC1pY29uPlxuICAgICAgICAgICAgICAgIDwvYnV0dG9uPiAtLT5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZmlsZS1jaXJjbGVcIiBtYXRSaXBwbGUgW21hdFJpcHBsZVVuYm91bmRlZF09XCJ0cnVlXCIgW21hdFJpcHBsZUNlbnRlcmVkXT1cInRydWVcIiBbbWF0TWVudVRyaWdnZXJGb3JdPVwibWVudVwiPlxuICAgICAgICAgICAgICAgICAgICB7eyB1c2VySW5pdGlhbHMgfX1cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImZpbmFsLWdyYWRpZW50XCI+PC9kaXY+XG4gICAgPC9kaXY+XG48L21hdC10b29sYmFyPlxuXG48bWF0LW1lbnUgI21lbnU9XCJtYXRNZW51XCI+XG4gICAgPGJ1dHRvbiBtYXQtbWVudS1pdGVtIChjbGljayk9XCJsb2dvdXQoKVwiPlNpZ24gb3V0PC9idXR0b24+XG48L21hdC1tZW51PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25hdmJhci9uYXZiYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmF2YmFyL25hdmJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBVW5ILE1BQU0sT0FBTyxlQUFlO0lBd0MxQjtRQXZDQSxtSEFBbUg7UUFDbkgsd0RBQXdEO1FBQ3hELHdEQUF3RDtRQUV4RDs7Ozs7O1dBTUc7UUFDTSxXQUFNLEdBQWEsRUFBRSxDQUFDO1FBRS9COzs7OztXQUtHO1FBQ00saUJBQVksR0FBRyxFQUFFLENBQUM7UUFFM0I7Ozs7O1dBS0c7UUFDTSxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBRXZCOztXQUVHO1FBQ08sa0JBQWEsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUUzRTs7V0FFRztRQUNPLGdCQUFXLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7SUFFdEQsQ0FBQztJQUVoQixRQUFRLENBQUMsT0FBZTtRQUN0QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLE9BQU8sRUFBRSxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzFCLENBQUM7OzZHQWhEVSxlQUFlO2lHQUFmLGVBQWUsNE1DVjVCLDYyQkFzQlc7NEZEWkUsZUFBZTtrQkFQM0IsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7MEVBYzVCLE1BQU07c0JBQWQsS0FBSztnQkFRRyxZQUFZO3NCQUFwQixLQUFLO2dCQVFHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0ksYUFBYTtzQkFBdEIsTUFBTTtnQkFLRyxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSVJvdXRlIH0gZnJvbSAnLi9uYXZiYXIubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS1uYXZiYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbmF2YmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmF2YmFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBOYXZiYXJDb21wb25lbnQge1xuICAvLyBUT0RPOiBTb21lIHByb3BlcnRpZXMgYW5kIG1ldGhvZHMgYXJlIGlnbm9yZWQgb24gcHVycG9zZSBiZWNhdXNlIG9mIGEgY3VycmVudCBpc3N1ZSB3aXRoIGNvbXBvZG9jIGFuZCBhbmd1bGFyIDEzXG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9zdG9yeWJvb2tqcy9zdG9yeWJvb2svaXNzdWVzLzE2ODY1XG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9zdG9yeWJvb2tqcy9zdG9yeWJvb2svaXNzdWVzLzE3MDA0XG5cbiAgLyoqXG4gICAqIFJvdXRlcyBvYmplY3RcbiAgICpcbiAgICogQHR5cGUge0lSb3V0ZX1cbiAgICogQG1lbWJlcm9mIE5hdmJhckNvbXBvbmVudFxuICAgKiBAaWdub3JlXG4gICAqL1xuICBASW5wdXQoKSByb3V0ZXM6IElSb3V0ZVtdID0gW107XG5cbiAgLyoqXG4gICAqIEFjdGl2ZWQgcm91dGUgaWRcbiAgICpcbiAgICogQHR5cGUge3N0cmluZ31cbiAgICogQG1lbWJlcm9mIE5hdmJhckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgYWN0aXZlZFJvdXRlID0gJyc7XG5cbiAgLyoqXG4gICAqIFVzZXIgZmlyc3QgbmFtZSBhbmQgbGFzdCBuYW1lXG4gICAqXG4gICAqIEB0eXBlIHtzdHJpbmd9XG4gICAqIEBtZW1iZXJvZiBOYXZiYXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHVzZXJOYW1lID0gJyc7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIEBPdXRwdXQoKSBuYXZpZ2F0ZUV2ZW50OiBFdmVudEVtaXR0ZXI8c3RyaW5nPiA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBAT3V0cHV0KCkgbG9nb3V0RXZlbnQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmF2aWdhdGUocm91dGVJZDogc3RyaW5nKSB7XG4gICAgdGhpcy5uYXZpZ2F0ZUV2ZW50LmVtaXQoYC8ke3JvdXRlSWR9YCk7XG4gIH1cblxuICBsb2dvdXQoKTogdm9pZCB7XG4gICAgdGhpcy5sb2dvdXRFdmVudC5lbWl0KCk7XG4gIH1cbn1cbiIsIjxtYXQtdG9vbGJhcj5cbiAgICA8ZGl2IGNsYXNzPVwiY3VzdG9tLXRvb2xiYXIgcm93XCI+XG4gICAgICAgICAgICA8aW1nIGNsYXNzPVwibG9nb1wiIHNyYz1cIi9pbWFnZXMvdGVzdGdvcmlsbGEuc3ZnXCIgKGNsaWNrKT1cIm5hdmlnYXRlKCcnKVwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm5hdmlnYXRpb24gcm93XCI+XG4gICAgICAgICAgICAgICAgPGEgKm5nRm9yPVwibGV0IHJvdXRlIG9mIHJvdXRlc1wiIChjbGljayk9XCJuYXZpZ2F0ZShyb3V0ZS5pZClcIiBbbmdDbGFzc109XCJ7J2FjdGl2ZSc6IGFjdGl2ZWRSb3V0ZSA9PT0gcm91dGUuaWR9XCI+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuPnt7IHJvdXRlLnRpdGxlIH19PC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvYT5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFjdGlvbnNcIj5cbiAgICAgICAgICAgICAgICA8YnV0dG9uIG1hdC1idXR0b24gY2xhc3M9XCJwcm9maWxlLW1lbnVcIiBbbWF0TWVudVRyaWdnZXJGb3JdPVwibWVudVwiPlxuICAgICAgICAgICAgICAgICAgICB7eyB1c2VyTmFtZSB9fVxuICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24+ZXhwYW5kX21vcmU8L21hdC1pY29uPlxuICAgICAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuPC9tYXQtdG9vbGJhcj5cblxuPG1hdC1tZW51ICNtZW51PVwibWF0TWVudVwiPlxuICAgIDxidXR0b24gbWF0LW1lbnUtaXRlbSAoY2xpY2spPVwibG9nb3V0KClcIj5cbiAgICAgICAgPG1hdC1pY29uPmxvZ291dDwvbWF0LWljb24+XG4gICAgICAgIExvZyBvdXRcbiAgICA8L2J1dHRvbj5cbjwvbWF0LW1lbnU+Il19

package/esm2020/components/paginator/paginator.component.mjs

@@ -34,10 +34,10 @@ export class PaginatorComponent {
     }
 }
 PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;background:rgba(233,240,241,.5);font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{background:rgba(233,240,241,.5);height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;background:rgba(233,240,241,.5);font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{background:rgba(233,240,241,.5);height:100%;width:70px;border-radius:0}\n"] }]
+            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { length: [{
                 type: Input
             }], defaultPageSize: [{

package/esm2020/components/table/table.component.mjs

@@ -92,10 +92,10 @@ export class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: i1.DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd MMM yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0}table .mat-header-cell{font-weight:700;color:#000;background:rgba(233,240,241,.5)}table td,table th,table .mat-row{border:none}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"], components: [{ type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2.MatCellDef, selector: "[matCellDef]" }, { type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": i1.DataPropertyGetterPipe, "dfnsFormat": i5.FormatPipe, "dfnsParseIso": i5.ParseIsoPipe, "dfnsFormatDistanceToNow": i5.FormatDistanceToNowPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"], components: [{ type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2.MatCellDef, selector: "[matCellDef]" }, { type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": i1.DataPropertyGetterPipe, "dfnsFormat": i5.FormatPipe, "dfnsParseIso": i5.ParseIsoPipe, "dfnsFormatDistanceToNow": i5.FormatDistanceToNowPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd MMM yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0}table .mat-header-cell{font-weight:700;color:#000;background:rgba(233,240,241,.5)}table td,table th,table .mat-row{border:none}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"] }]
+            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataPropertyGetterPipe }]; }, propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort, { static: true }]
@@ -110,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], onRowClickEvent: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGFibGUvdGFibGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGFibGUvdGFibGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkgsT0FBTyxFQUFFLE9BQU8sRUFBUSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRTdELE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUE2QyxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQVFoRyxNQUFNLE9BQU8sY0FBYztJQThFekIsWUFBb0Isc0JBQThDO1FBQTlDLDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBd0I7UUE3RWxFLG1IQUFtSDtRQUNuSCx3REFBd0Q7UUFDeEQsd0RBQXdEO1FBRXhEOztXQUVHO1FBQ00sbUJBQWMsR0FBRztZQUN4QixTQUFTLEVBQUUsSUFBSTtTQUNoQixDQUFDO1FBRUY7O1dBRUc7UUFDSCxlQUFVLEdBQUcsSUFBSSxrQkFBa0IsQ0FBTSxFQUFFLENBQUMsQ0FBQztRQUU3Qzs7V0FFRztRQUNILHFCQUFnQixHQUFhLEVBQUUsQ0FBQztRQUVoQzs7V0FFRztRQUNILGFBQVEsR0FBRyxRQUFRLENBQUM7UUFFcEI7O1dBRUc7UUFDSCxlQUFVLEdBQUcsVUFBVSxDQUFDO1FBbUJ4Qjs7Ozs7V0FLRztRQUNNLGlCQUFZLEdBQXNCLEVBQUUsQ0FBQztRQUU5Qzs7OztXQUlHO1FBQ00sa0JBQWEsR0FBbUIsRUFBRSxDQUFDO1FBRTVDOztXQUVHO1FBQ08sZ0JBQVcsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUVyRTs7V0FFRztRQUNPLG9CQUFlLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFNRixDQUFDO0lBekN0RTs7Ozs7T0FLRztJQUNILElBQWEsU0FBUyxDQUFDLElBQWdCO1FBQ3JDLElBQUksSUFBSSxFQUFFLE1BQU0sRUFBRTtZQUNoQixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDL0I7SUFDSCxDQUFDO0lBMkJELFFBQVE7UUFDTixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsQ0FBQyxXQUE0QixFQUFFLEVBQUUsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDcEcsQ0FBQztJQUlELE1BQU0sQ0FBQyxVQUFnQjtRQUNyQixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFDLE1BQXVCLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEtBQUssVUFBVSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzFHLElBQUksVUFBVSxFQUFFLE9BQU8sRUFBRTtZQUN2QixVQUFVLENBQUMsTUFBTSxHQUFHLFVBQVUsRUFBRSxPQUFPLENBQUM7U0FDekM7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsVUFBVSxDQUFDLFNBQWM7UUFDdkIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUVEOztPQUVHO0lBQ0ssa0JBQWtCLENBQUMsSUFBUztRQUNsQyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksa0JBQWtCLENBQU0sSUFBSSxDQUFDLENBQUM7UUFDcEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxtQkFBbUIsR0FBRyxDQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDO1FBQ2hILElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDbkMsQ0FBQzs7NEdBbkdVLGNBQWM7Z0dBQWQsY0FBYyxxUUFtQ2QsT0FBTyw4REMvQ3BCLG95RUErQ0E7NEZEbkNhLGNBQWM7a0JBTjFCLFNBQVM7K0JBQ0UsVUFBVSxtQkFHSCx1QkFBdUIsQ0FBQyxNQUFNOzZHQXFDVCxJQUFJO3NCQUF6QyxTQUFTO3VCQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBUXZCLFNBQVM7c0JBQXJCLEtBQUs7Z0JBWUcsWUFBWTtzQkFBcEIsS0FBSztnQkFPRyxhQUFhO3NCQUFyQixLQUFLO2dCQUtJLFdBQVc7c0JBQXBCLE1BQU07Z0JBS0csZUFBZTtzQkFBeEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFNvcnQsIFNvcnQgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zb3J0JztcbmltcG9ydCB7IE1hdFRhYmxlRGF0YVNvdXJjZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3RhYmxlJztcbmltcG9ydCB7IERhdGFQcm9wZXJ0eUdldHRlclBpcGUgfSBmcm9tICcuLi8uLi9zaGFyZWQvcGlwZXMvZGF0YVByb3BlcnR5R2V0dGVyJztcbmltcG9ydCB7IERhdGFUeXBlLCBEYXRlRm9ybWF0LCBJRGF0YVNvdXJjZSwgSVN0YXR1c09wdGlvbnMsIElUYWJsZUNvbHVtbiB9IGZyb20gJy4vdGFibGUubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS10YWJsZScsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RhYmxlLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUYWJsZUNvbXBvbmVudDxUIGV4dGVuZHMgSURhdGFTb3VyY2U+IGltcGxlbWVudHMgT25Jbml0IHtcbiAgLy8gVE9ETzogU29tZSBwcm9wZXJ0aWVzIGFuZCBtZXRob2RzIGFyZSBpZ25vcmVkIG9uIHB1cnBvc2UgYmVjYXVzZSBvZiBhIGN1cnJlbnQgaXNzdWUgd2l0aCBjb21wb2RvYyBhbmQgYW5ndWxhciAxM1xuICAvLyBodHRwczovL2dpdGh1Yi5jb20vc3Rvcnlib29ranMvc3Rvcnlib29rL2lzc3Vlcy8xNjg2NVxuICAvLyBodHRwczovL2dpdGh1Yi5jb20vc3Rvcnlib29ranMvc3Rvcnlib29rL2lzc3Vlcy8xNzAwNFxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICByZWFkb25seSB0aW1lQWdvT3B0aW9ucyA9IHtcbiAgICBhZGRTdWZmaXg6IHRydWUsXG4gIH07XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGRhdGFTb3VyY2UgPSBuZXcgTWF0VGFibGVEYXRhU291cmNlPGFueT4oW10pO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBkaXNwbGF5ZWRDb2x1bW5zOiBzdHJpbmdbXSA9IFtdO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBEYXRhVHlwZSA9IERhdGFUeXBlO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBEYXRlRm9ybWF0ID0gRGF0ZUZvcm1hdDtcblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQFZpZXdDaGlsZChNYXRTb3J0LCB7IHN0YXRpYzogdHJ1ZSB9KSBzb3J0ITogTWF0U29ydDtcblxuICAvKipcbiAgICogRGF0YSB0byBiZSByZW5kZXJlZFxuICAgKlxuICAgKiBAdHlwZSB7SURhdGFTb3VyY2V9XG4gICAqIEBtZW1iZXJvZiBUYWJsZUNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgc2V0IHRhYmxlRGF0YShkYXRhOiBUW10gfCBudWxsKSB7XG4gICAgaWYgKGRhdGE/Lmxlbmd0aCkge1xuICAgICAgdGhpcy5zZXRUYWJsZURhdGFTb3VyY2UoZGF0YSk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIERhdGEgc3RydWN0dXJlIHRvIHNlbGVjdCB3aGljaCBjb2x1bW5zIHNob3VsZCBiZSByZW5kZXJlZCBhbmQgdGhlaXIgY2FwYWJpbGl0aWVzXG4gICAqXG4gICAqIEB0eXBlIHtJVGFibGVDb2x1bW59XG4gICAqIEBtZW1iZXJvZiBUYWJsZUNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgdGFibGVDb2x1bW5zOiBJVGFibGVDb2x1bW48VD5bXSA9IFtdO1xuXG4gIC8qKlxuICAgKiBAdHlwZSB7SVN0YXR1c09wdGlvbnN9XG4gICAqIEBtZW1iZXJvZiBUYWJsZUNvbXBvbmVudFxuICAgKiBAaWdub3JlXG4gICAqL1xuICBASW5wdXQoKSBzdGF0dXNPcHRpb25zOiBJU3RhdHVzT3B0aW9ucyA9IHt9O1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBAT3V0cHV0KCkgb25Tb3J0RXZlbnQ6IEV2ZW50RW1pdHRlcjxTb3J0PiA9IG5ldyBFdmVudEVtaXR0ZXI8U29ydD4oKTtcblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQE91dHB1dCgpIG9uUm93Q2xpY2tFdmVudDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmRpc3BsYXllZENvbHVtbnMgPSB0aGlzLnRhYmxlQ29sdW1ucy5tYXAoKHRhYmxlQ29sdW1uOiBJVGFibGVDb2x1bW48VD4pID0+IHRhYmxlQ29sdW1uLm5hbWUpO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBkYXRhUHJvcGVydHlHZXR0ZXJQaXBlOiBEYXRhUHJvcGVydHlHZXR0ZXJQaXBlKSB7fVxuXG4gIG9uU29ydChzb3J0UGFyYW1zOiBTb3J0KSB7XG4gICAgY29uc3QgY29sdW1uU29ydCA9IHRoaXMudGFibGVDb2x1bW5zLmZpbmQoKGNvbHVtbjogSVRhYmxlQ29sdW1uPFQ+KSA9PiBjb2x1bW4ubmFtZSA9PT0gc29ydFBhcmFtcy5hY3RpdmUpO1xuICAgIGlmIChjb2x1bW5Tb3J0Py5kYXRhS2V5KSB7XG4gICAgICBzb3J0UGFyYW1zLmFjdGl2ZSA9IGNvbHVtblNvcnQ/LmRhdGFLZXk7XG4gICAgfVxuICAgIHRoaXMub25Tb3J0RXZlbnQuZW1pdChzb3J0UGFyYW1zKTtcbiAgfVxuXG4gIG9uUm93Q2xpY2socm93UGFyYW1zOiBhbnkpIHtcbiAgICB0aGlzLm9uUm93Q2xpY2tFdmVudC5lbWl0KHJvd1BhcmFtcyk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgcHJpdmF0ZSBzZXRUYWJsZURhdGFTb3VyY2UoZGF0YTogVFtdKSB7XG4gICAgdGhpcy5kYXRhU291cmNlID0gbmV3IE1hdFRhYmxlRGF0YVNvdXJjZTxhbnk+KGRhdGEpO1xuICAgIHRoaXMuZGF0YVNvdXJjZS5zb3J0aW5nRGF0YUFjY2Vzc29yID0gKGl0ZW0sIHByb3BlcnR5KSA9PiB0aGlzLmRhdGFQcm9wZXJ0eUdldHRlclBpcGUudHJhbnNmb3JtKGl0ZW0sIHByb3BlcnR5KTtcbiAgICB0aGlzLmRhdGFTb3VyY2Uuc29ydCA9IHRoaXMuc29ydDtcbiAgfVxufVxuIiwiPHRhYmxlIG1hdC10YWJsZSBbZGF0YVNvdXJjZV09XCJkYXRhU291cmNlXCIgbWF0U29ydCAobWF0U29ydENoYW5nZSk9XCJvblNvcnQoJGV2ZW50KVwiPlxuICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCB0YWJsZUNvbHVtbiBvZiB0YWJsZUNvbHVtbnNcIiBbbWF0Q29sdW1uRGVmXT1cInRhYmxlQ29sdW1uLm5hbWVcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidGFibGVDb2x1bW4uc29ydGFibGU7IGVsc2Ugbm90U29ydGFibGVcIj5cbiAgICAgIDx0aCBtYXQtaGVhZGVyLWNlbGwgKm1hdEhlYWRlckNlbGxEZWY9XCJsZXQgZWxlbWVudFwiIFttYXQtc29ydC1oZWFkZXJdPVwidGFibGVDb2x1bW4uZGF0YUtleSB8fCAnJ1wiXG4gICAgICAgIGFycm93UG9zaXRpb249XCJhZnRlclwiPlxuICAgICAgICB7e3RhYmxlQ29sdW1uLm5hbWUgfCB1cHBlcmNhc2V9fVxuICAgICAgPC90aD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctdGVtcGxhdGUgI25vdFNvcnRhYmxlPlxuICAgICAgPHRoIG1hdC1oZWFkZXItY2VsbCAqbWF0SGVhZGVyQ2VsbERlZj5cbiAgICAgICAge3t0YWJsZUNvbHVtbi5uYW1lIHwgdXBwZXJjYXNlfX1cbiAgICAgIDwvdGg+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8dGQgbWF0LWNlbGwgKm1hdENlbGxEZWY9XCJsZXQgZWxlbWVudFwiIChjbGljayk9XCJvblJvd0NsaWNrKGVsZW1lbnQpXCI+XG4gICAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJ0YWJsZUNvbHVtbi5kYXRhVHlwZVwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCJEYXRhVHlwZS5TdHJpbmdcIj5cbiAgICAgICAgICB7e2VsZW1lbnQgfCBkYXRhUHJvcGVydHlHZXR0ZXI6IHRhYmxlQ29sdW1uLmRhdGFLZXl9fVxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiRGF0YVR5cGUuRGF0ZVwiPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwidGFibGVDb2x1bW4uZGF0ZUZvcm1hdCA9PT0gRGF0ZUZvcm1hdC5TaG9ydFwiPnt7KGVsZW1lbnQgfCBkYXRhUHJvcGVydHlHZXR0ZXI6XG4gICAgICAgICAgICB0YWJsZUNvbHVtbi5kYXRhS2V5KSB8IGRmbnNQYXJzZUlzbyB8IGRmbnNGb3JtYXQ6ICdkZCBNTU0geXl5eSd9fTwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiAqbmdJZj1cInRhYmxlQ29sdW1uLmRhdGVGb3JtYXQgPT09IERhdGVGb3JtYXQuVGltZUFnb1wiPnt7KGVsZW1lbnQgfCBkYXRhUHJvcGVydHlHZXR0ZXI6XG4gICAgICAgICAgICB0YWJsZUNvbHVtbi5kYXRhS2V5KSB8IGRmbnNQYXJzZUlzbyB8IGRmbnNGb3JtYXREaXN0YW5jZVRvTm93OiB0aW1lQWdvT3B0aW9uc319PC9zcGFuPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiRGF0YVR5cGUuUGVyY2VudGFnZVwiPlxuICAgICAgICAgIHt7ZWxlbWVudCB8IGRhdGFQcm9wZXJ0eUdldHRlcjogdGFibGVDb2x1bW4uZGF0YUtleX19JVxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiRGF0YVR5cGUuTGFiZWxcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICAqbmdUZW1wbGF0ZU91dGxldD1cImxhYmVsOyBjb250ZXh0OiB7bGFiZWw6IHN0YXR1c09wdGlvbnNbZWxlbWVudCB8IGRhdGFQcm9wZXJ0eUdldHRlcjogdGFibGVDb2x1bW4uZGF0YUtleV19XCI+XG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaERlZmF1bHQ+XG4gICAgICAgICAge3tlbGVtZW50IHwgZGF0YVByb3BlcnR5R2V0dGVyOiB0YWJsZUNvbHVtbi5kYXRhS2V5fX1cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L3RkPlxuICA8L25nLWNvbnRhaW5lcj5cbiAgPHRyIG1hdC1oZWFkZXItcm93ICptYXRIZWFkZXJSb3dEZWY9XCJkaXNwbGF5ZWRDb2x1bW5zXCI+PC90cj5cbiAgPHRyIG1hdC1yb3cgKm1hdFJvd0RlZj1cImxldCByb3c7IGNvbHVtbnM6IGRpc3BsYXllZENvbHVtbnM7XCI+PC90cj5cbjwvdGFibGU+XG5cbjxuZy10ZW1wbGF0ZSAjbGFiZWwgbGV0LWxhYmVsPVwibGFiZWxcIj5cbiAgPHNwYW4gY2xhc3M9XCJsYWJlbFwiIFtuZ1N0eWxlXT1cInsnYmFja2dyb3VuZC1jb2xvcic6IGxhYmVsPy5iYWNrZ3JvdW5kQ29sb3IsICdjb2xvcic6IGxhYmVsPy5jb2xvcn1cIj5cbiAgICB7eyBsYWJlbD8udGl0bGUgfX1cbiAgPC9zcGFuPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGFibGUvdGFibGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGFibGUvdGFibGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkgsT0FBTyxFQUFFLE9BQU8sRUFBUSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRTdELE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUE2QyxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQVFoRyxNQUFNLE9BQU8sY0FBYztJQThFekIsWUFBb0Isc0JBQThDO1FBQTlDLDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBd0I7UUE3RWxFLG1IQUFtSDtRQUNuSCx3REFBd0Q7UUFDeEQsd0RBQXdEO1FBRXhEOztXQUVHO1FBQ00sbUJBQWMsR0FBRztZQUN4QixTQUFTLEVBQUUsSUFBSTtTQUNoQixDQUFDO1FBRUY7O1dBRUc7UUFDSCxlQUFVLEdBQUcsSUFBSSxrQkFBa0IsQ0FBTSxFQUFFLENBQUMsQ0FBQztRQUU3Qzs7V0FFRztRQUNILHFCQUFnQixHQUFhLEVBQUUsQ0FBQztRQUVoQzs7V0FFRztRQUNILGFBQVEsR0FBRyxRQUFRLENBQUM7UUFFcEI7O1dBRUc7UUFDSCxlQUFVLEdBQUcsVUFBVSxDQUFDO1FBbUJ4Qjs7Ozs7V0FLRztRQUNNLGlCQUFZLEdBQXNCLEVBQUUsQ0FBQztRQUU5Qzs7OztXQUlHO1FBQ00sa0JBQWEsR0FBbUIsRUFBRSxDQUFDO1FBRTVDOztXQUVHO1FBQ08sZ0JBQVcsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUVyRTs7V0FFRztRQUNPLG9CQUFlLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFNRixDQUFDO0lBekN0RTs7Ozs7T0FLRztJQUNILElBQWEsU0FBUyxDQUFDLElBQWdCO1FBQ3JDLElBQUksSUFBSSxFQUFFLE1BQU0sRUFBRTtZQUNoQixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDL0I7SUFDSCxDQUFDO0lBMkJELFFBQVE7UUFDTixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsQ0FBQyxXQUE0QixFQUFFLEVBQUUsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDcEcsQ0FBQztJQUlELE1BQU0sQ0FBQyxVQUFnQjtRQUNyQixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFDLE1BQXVCLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEtBQUssVUFBVSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzFHLElBQUksVUFBVSxFQUFFLE9BQU8sRUFBRTtZQUN2QixVQUFVLENBQUMsTUFBTSxHQUFHLFVBQVUsRUFBRSxPQUFPLENBQUM7U0FDekM7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsVUFBVSxDQUFDLFNBQWM7UUFDdkIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUVEOztPQUVHO0lBQ0ssa0JBQWtCLENBQUMsSUFBUztRQUNsQyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksa0JBQWtCLENBQU0sSUFBSSxDQUFDLENBQUM7UUFDcEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxtQkFBbUIsR0FBRyxDQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDO1FBQ2hILElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDbkMsQ0FBQzs7NEdBbkdVLGNBQWM7Z0dBQWQsY0FBYyxxUUFtQ2QsT0FBTyw4REMvQ3BCLG15RUErQ0E7NEZEbkNhLGNBQWM7a0JBTjFCLFNBQVM7K0JBQ0UsVUFBVSxtQkFHSCx1QkFBdUIsQ0FBQyxNQUFNOzZHQXFDVCxJQUFJO3NCQUF6QyxTQUFTO3VCQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBUXZCLFNBQVM7c0JBQXJCLEtBQUs7Z0JBWUcsWUFBWTtzQkFBcEIsS0FBSztnQkFPRyxhQUFhO3NCQUFyQixLQUFLO2dCQUtJLFdBQVc7c0JBQXBCLE1BQU07Z0JBS0csZUFBZTtzQkFBeEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFNvcnQsIFNvcnQgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zb3J0JztcbmltcG9ydCB7IE1hdFRhYmxlRGF0YVNvdXJjZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3RhYmxlJztcbmltcG9ydCB7IERhdGFQcm9wZXJ0eUdldHRlclBpcGUgfSBmcm9tICcuLi8uLi9zaGFyZWQvcGlwZXMvZGF0YVByb3BlcnR5R2V0dGVyJztcbmltcG9ydCB7IERhdGFUeXBlLCBEYXRlRm9ybWF0LCBJRGF0YVNvdXJjZSwgSVN0YXR1c09wdGlvbnMsIElUYWJsZUNvbHVtbiB9IGZyb20gJy4vdGFibGUubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS10YWJsZScsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RhYmxlLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUYWJsZUNvbXBvbmVudDxUIGV4dGVuZHMgSURhdGFTb3VyY2U+IGltcGxlbWVudHMgT25Jbml0IHtcbiAgLy8gVE9ETzogU29tZSBwcm9wZXJ0aWVzIGFuZCBtZXRob2RzIGFyZSBpZ25vcmVkIG9uIHB1cnBvc2UgYmVjYXVzZSBvZiBhIGN1cnJlbnQgaXNzdWUgd2l0aCBjb21wb2RvYyBhbmQgYW5ndWxhciAxM1xuICAvLyBodHRwczovL2dpdGh1Yi5jb20vc3Rvcnlib29ranMvc3Rvcnlib29rL2lzc3Vlcy8xNjg2NVxuICAvLyBodHRwczovL2dpdGh1Yi5jb20vc3Rvcnlib29ranMvc3Rvcnlib29rL2lzc3Vlcy8xNzAwNFxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICByZWFkb25seSB0aW1lQWdvT3B0aW9ucyA9IHtcbiAgICBhZGRTdWZmaXg6IHRydWUsXG4gIH07XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGRhdGFTb3VyY2UgPSBuZXcgTWF0VGFibGVEYXRhU291cmNlPGFueT4oW10pO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBkaXNwbGF5ZWRDb2x1bW5zOiBzdHJpbmdbXSA9IFtdO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBEYXRhVHlwZSA9IERhdGFUeXBlO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBEYXRlRm9ybWF0ID0gRGF0ZUZvcm1hdDtcblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQFZpZXdDaGlsZChNYXRTb3J0LCB7IHN0YXRpYzogdHJ1ZSB9KSBzb3J0ITogTWF0U29ydDtcblxuICAvKipcbiAgICogRGF0YSB0byBiZSByZW5kZXJlZFxuICAgKlxuICAgKiBAdHlwZSB7SURhdGFTb3VyY2V9XG4gICAqIEBtZW1iZXJvZiBUYWJsZUNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgc2V0IHRhYmxlRGF0YShkYXRhOiBUW10gfCBudWxsKSB7XG4gICAgaWYgKGRhdGE/Lmxlbmd0aCkge1xuICAgICAgdGhpcy5zZXRUYWJsZURhdGFTb3VyY2UoZGF0YSk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIERhdGEgc3RydWN0dXJlIHRvIHNlbGVjdCB3aGljaCBjb2x1bW5zIHNob3VsZCBiZSByZW5kZXJlZCBhbmQgdGhlaXIgY2FwYWJpbGl0aWVzXG4gICAqXG4gICAqIEB0eXBlIHtJVGFibGVDb2x1bW59XG4gICAqIEBtZW1iZXJvZiBUYWJsZUNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgdGFibGVDb2x1bW5zOiBJVGFibGVDb2x1bW48VD5bXSA9IFtdO1xuXG4gIC8qKlxuICAgKiBAdHlwZSB7SVN0YXR1c09wdGlvbnN9XG4gICAqIEBtZW1iZXJvZiBUYWJsZUNvbXBvbmVudFxuICAgKiBAaWdub3JlXG4gICAqL1xuICBASW5wdXQoKSBzdGF0dXNPcHRpb25zOiBJU3RhdHVzT3B0aW9ucyA9IHt9O1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBAT3V0cHV0KCkgb25Tb3J0RXZlbnQ6IEV2ZW50RW1pdHRlcjxTb3J0PiA9IG5ldyBFdmVudEVtaXR0ZXI8U29ydD4oKTtcblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQE91dHB1dCgpIG9uUm93Q2xpY2tFdmVudDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmRpc3BsYXllZENvbHVtbnMgPSB0aGlzLnRhYmxlQ29sdW1ucy5tYXAoKHRhYmxlQ29sdW1uOiBJVGFibGVDb2x1bW48VD4pID0+IHRhYmxlQ29sdW1uLm5hbWUpO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBkYXRhUHJvcGVydHlHZXR0ZXJQaXBlOiBEYXRhUHJvcGVydHlHZXR0ZXJQaXBlKSB7fVxuXG4gIG9uU29ydChzb3J0UGFyYW1zOiBTb3J0KSB7XG4gICAgY29uc3QgY29sdW1uU29ydCA9IHRoaXMudGFibGVDb2x1bW5zLmZpbmQoKGNvbHVtbjogSVRhYmxlQ29sdW1uPFQ+KSA9PiBjb2x1bW4ubmFtZSA9PT0gc29ydFBhcmFtcy5hY3RpdmUpO1xuICAgIGlmIChjb2x1bW5Tb3J0Py5kYXRhS2V5KSB7XG4gICAgICBzb3J0UGFyYW1zLmFjdGl2ZSA9IGNvbHVtblNvcnQ/LmRhdGFLZXk7XG4gICAgfVxuICAgIHRoaXMub25Tb3J0RXZlbnQuZW1pdChzb3J0UGFyYW1zKTtcbiAgfVxuXG4gIG9uUm93Q2xpY2socm93UGFyYW1zOiBhbnkpIHtcbiAgICB0aGlzLm9uUm93Q2xpY2tFdmVudC5lbWl0KHJvd1BhcmFtcyk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgcHJpdmF0ZSBzZXRUYWJsZURhdGFTb3VyY2UoZGF0YTogVFtdKSB7XG4gICAgdGhpcy5kYXRhU291cmNlID0gbmV3IE1hdFRhYmxlRGF0YVNvdXJjZTxhbnk+KGRhdGEpO1xuICAgIHRoaXMuZGF0YVNvdXJjZS5zb3J0aW5nRGF0YUFjY2Vzc29yID0gKGl0ZW0sIHByb3BlcnR5KSA9PiB0aGlzLmRhdGFQcm9wZXJ0eUdldHRlclBpcGUudHJhbnNmb3JtKGl0ZW0sIHByb3BlcnR5KTtcbiAgICB0aGlzLmRhdGFTb3VyY2Uuc29ydCA9IHRoaXMuc29ydDtcbiAgfVxufVxuIiwiPHRhYmxlIG1hdC10YWJsZSBbZGF0YVNvdXJjZV09XCJkYXRhU291cmNlXCIgbWF0U29ydCAobWF0U29ydENoYW5nZSk9XCJvblNvcnQoJGV2ZW50KVwiPlxuICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCB0YWJsZUNvbHVtbiBvZiB0YWJsZUNvbHVtbnNcIiBbbWF0Q29sdW1uRGVmXT1cInRhYmxlQ29sdW1uLm5hbWVcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidGFibGVDb2x1bW4uc29ydGFibGU7IGVsc2Ugbm90U29ydGFibGVcIj5cbiAgICAgIDx0aCBtYXQtaGVhZGVyLWNlbGwgKm1hdEhlYWRlckNlbGxEZWY9XCJsZXQgZWxlbWVudFwiIFttYXQtc29ydC1oZWFkZXJdPVwidGFibGVDb2x1bW4uZGF0YUtleSB8fCAnJ1wiXG4gICAgICAgIGFycm93UG9zaXRpb249XCJhZnRlclwiPlxuICAgICAgICB7e3RhYmxlQ29sdW1uLm5hbWUgfCB1cHBlcmNhc2V9fVxuICAgICAgPC90aD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctdGVtcGxhdGUgI25vdFNvcnRhYmxlPlxuICAgICAgPHRoIG1hdC1oZWFkZXItY2VsbCAqbWF0SGVhZGVyQ2VsbERlZj5cbiAgICAgICAge3t0YWJsZUNvbHVtbi5uYW1lIHwgdXBwZXJjYXNlfX1cbiAgICAgIDwvdGg+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8dGQgbWF0LWNlbGwgKm1hdENlbGxEZWY9XCJsZXQgZWxlbWVudFwiIChjbGljayk9XCJvblJvd0NsaWNrKGVsZW1lbnQpXCI+XG4gICAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJ0YWJsZUNvbHVtbi5kYXRhVHlwZVwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCJEYXRhVHlwZS5TdHJpbmdcIj5cbiAgICAgICAgICB7e2VsZW1lbnQgfCBkYXRhUHJvcGVydHlHZXR0ZXI6IHRhYmxlQ29sdW1uLmRhdGFLZXl9fVxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiRGF0YVR5cGUuRGF0ZVwiPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwidGFibGVDb2x1bW4uZGF0ZUZvcm1hdCA9PT0gRGF0ZUZvcm1hdC5TaG9ydFwiPnt7KGVsZW1lbnQgfCBkYXRhUHJvcGVydHlHZXR0ZXI6XG4gICAgICAgICAgICB0YWJsZUNvbHVtbi5kYXRhS2V5KSB8IGRmbnNQYXJzZUlzbyB8IGRmbnNGb3JtYXQ6ICdkZC5NTS55eXl5J319PC9zcGFuPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwidGFibGVDb2x1bW4uZGF0ZUZvcm1hdCA9PT0gRGF0ZUZvcm1hdC5UaW1lQWdvXCI+e3soZWxlbWVudCB8IGRhdGFQcm9wZXJ0eUdldHRlcjpcbiAgICAgICAgICAgIHRhYmxlQ29sdW1uLmRhdGFLZXkpIHwgZGZuc1BhcnNlSXNvIHwgZGZuc0Zvcm1hdERpc3RhbmNlVG9Ob3c6IHRpbWVBZ29PcHRpb25zfX08L3NwYW4+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCJEYXRhVHlwZS5QZXJjZW50YWdlXCI+XG4gICAgICAgICAge3tlbGVtZW50IHwgZGF0YVByb3BlcnR5R2V0dGVyOiB0YWJsZUNvbHVtbi5kYXRhS2V5fX0lXG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCJEYXRhVHlwZS5MYWJlbFwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwibGFiZWw7IGNvbnRleHQ6IHtsYWJlbDogc3RhdHVzT3B0aW9uc1tlbGVtZW50IHwgZGF0YVByb3BlcnR5R2V0dGVyOiB0YWJsZUNvbHVtbi5kYXRhS2V5XX1cIj5cbiAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoRGVmYXVsdD5cbiAgICAgICAgICB7e2VsZW1lbnQgfCBkYXRhUHJvcGVydHlHZXR0ZXI6IHRhYmxlQ29sdW1uLmRhdGFLZXl9fVxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvdGQ+XG4gIDwvbmctY29udGFpbmVyPlxuICA8dHIgbWF0LWhlYWRlci1yb3cgKm1hdEhlYWRlclJvd0RlZj1cImRpc3BsYXllZENvbHVtbnNcIj48L3RyPlxuICA8dHIgbWF0LXJvdyAqbWF0Um93RGVmPVwibGV0IHJvdzsgY29sdW1uczogZGlzcGxheWVkQ29sdW1ucztcIj48L3RyPlxuPC90YWJsZT5cblxuPG5nLXRlbXBsYXRlICNsYWJlbCBsZXQtbGFiZWw9XCJsYWJlbFwiPlxuICA8c3BhbiBjbGFzcz1cImxhYmVsXCIgW25nU3R5bGVdPVwieydiYWNrZ3JvdW5kLWNvbG9yJzogbGFiZWw/LmJhY2tncm91bmRDb2xvciwgJ2NvbG9yJzogbGFiZWw/LmNvbG9yfVwiPlxuICAgIHt7IGxhYmVsPy50aXRsZSB9fVxuICA8L3NwYW4+XG48L25nLXRlbXBsYXRlPlxuIl19

package/fesm2015/testgorilla-tgo-ui.mjs

@@ -18,9 +18,8 @@ import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1$3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i2$1 from '@angular/material/menu';
+import * as i4$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4$2 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import * as i1$4 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -28,7 +27,7 @@ import * as i3$2 from '@angular-material-extensions/password-strength';
 import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
 import * as i3$3 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i2$2 from '@angular/material/table';
+import * as i2$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i5 from 'ngx-date-fns';
 import { DateFnsModule } from 'ngx-date-fns';
@@ -379,12 +378,12 @@ class NavbarComponent {
          */
         this.activedRoute = '';
         /**
-         * User first name and last name initials
+         * User first name and last name
          *
          * @type {string}
          * @memberof NavbarComponent
          */
-        this.userInitials = '';
+        this.userName = '';
         /**
          * @ignore
          */
@@ -402,15 +401,15 @@ class NavbarComponent {
     }
 }
 NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userInitials: "userInitials" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <!-- <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button> -->\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matMenuTriggerFor]=\"menu\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">Sign out</button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%}.mat-toolbar .custom-toolbar .init-gradient{width:160px;height:100%;background:linear-gradient(270deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.mat-toolbar .custom-toolbar .content{background-color:#e9f0f1;width:100%}.mat-toolbar .custom-toolbar .content .logo{width:140px;margin-left:28px;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .content .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation a.active{box-shadow:inset 0 5px 0 -1px #46a997}.mat-toolbar .custom-toolbar .content .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .content .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .content .actions .profile-circle{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:32px;height:32px;background:#D4E0E4;border-radius:128px;font-weight:600;font-size:14px;text-align:center;margin-left:32px}.mat-toolbar .custom-toolbar .final-gradient{width:160px;height:100%;background:linear-gradient(90deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:bolder}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i1$1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <!-- <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button> -->\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matMenuTriggerFor]=\"menu\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">Sign out</button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%}.mat-toolbar .custom-toolbar .init-gradient{width:160px;height:100%;background:linear-gradient(270deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.mat-toolbar .custom-toolbar .content{background-color:#e9f0f1;width:100%}.mat-toolbar .custom-toolbar .content .logo{width:140px;margin-left:28px;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .content .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation a.active{box-shadow:inset 0 5px 0 -1px #46a997}.mat-toolbar .custom-toolbar .content .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .content .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .content .actions .profile-circle{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:32px;height:32px;background:#D4E0E4;border-radius:128px;font-weight:600;font-size:14px;text-align:center;margin-left:32px}.mat-toolbar .custom-toolbar .final-gradient{width:160px;height:100%;background:linear-gradient(90deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.row{display:flex;flex-direction:row}\n"] }]
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n                    {{ userName }}\n                    <mat-icon>expand_more</mat-icon>\n                </button>\n            </div>\n        </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        Log out\n    </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:bolder}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { routes: [{
                 type: Input
             }], activedRoute: [{
                 type: Input
-            }], userInitials: [{
+            }], userName: [{
                 type: Input
             }], navigateEvent: [{
                 type: Output
@@ -466,10 +465,10 @@ class PaginatorComponent {
     }
 }
 PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;background:rgba(233,240,241,.5);font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{background:rgba(233,240,241,.5);height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1$4.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1$4.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;background:rgba(233,240,241,.5);font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{background:rgba(233,240,241,.5);height:100%;width:70px;border-radius:0}\n"] }]
+            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { length: [{
                 type: Input
             }], defaultPageSize: [{
@@ -741,10 +740,10 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd MMM yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0}table .mat-header-cell{font-weight:700;color:#000;background:rgba(233,240,241,.5)}table td,table th,table .mat-row{border:none}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"], components: [{ type: i2$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$2.MatCellDef, selector: "[matCellDef]" }, { type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe, "dfnsFormat": i5.FormatPipe, "dfnsParseIso": i5.ParseIsoPipe, "dfnsFormatDistanceToNow": i5.FormatDistanceToNowPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe, "dfnsFormat": i5.FormatPipe, "dfnsParseIso": i5.ParseIsoPipe, "dfnsFormatDistanceToNow": i5.FormatDistanceToNowPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd MMM yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0}table .mat-header-cell{font-weight:700;color:#000;background:rgba(233,240,241,.5)}table td,table th,table .mat-row{border:none}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"] }]
+            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n        arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <ng-container\n            *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n          </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n  <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n    {{ label?.title }}\n  </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"] }]
         }], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort, { static: true }]