@kolektor/nucleus-material 0.0.10-pre.6137 → 0.0.11-pre.6442

package/fesm2020/kolektor-nucleus-material.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, Injectable, NgModule, Input, Directive } from '@angular/core';
+import { Component, Inject, Injectable, NgModule, Input, Directive, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$1 from '@angular/common';
@@ -16,7 +16,7 @@ import { NavigationEnd } from '@angular/router';
 import * as i1$3 from '@angular/material/tabs';
 import * as Hammer from 'hammerjs';
 import * as i1$4 from '@angular/material/snack-bar';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 
 class NucDialogComponent {
     constructor(dialogRef, dialogData) {
@@ -24,9 +24,9 @@ class NucDialogComponent {
         this.dialogData = dialogData;
     }
 }
-NucDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-NucDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: NucDialogComponent, selector: "nuc-dialog", ngImport: i0, template: "<ng-container *ngIf=\"dialogData\">\r\n  <h2 mat-dialog-title *ngIf=\"dialogData.title\">\r\n    {{dialogData.title}}\r\n  </h2>\r\n  <mat-dialog-content>{{dialogData.message}}</mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <ng-container *ngFor=\"let action of dialogData.actions\">\r\n      <button color=\"{{action.color || 'primary'}}\" *ngIf=\"action.value === undefined\" mat-button mat-dialog-close>{{action.text}}</button>\r\n      <button color=\"{{action.color || 'primary'}}\" *ngIf=\"action.value !== undefined\" mat-button [mat-dialog-close]=\"action.value\">{{action.text}}</button>\r\n    </ng-container>\r\n  </mat-dialog-actions>\r\n</ng-container>\r\n", styles: ["mat-dialog-actions{justify-content:flex-end}mat-dialog-content{white-space:pre-wrap}button{text-transform:uppercase;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucDialogComponent, decorators: [{
+NucDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+NucDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: NucDialogComponent, selector: "nuc-dialog", ngImport: i0, template: "<ng-container *ngIf=\"dialogData\">\r\n  <h2 mat-dialog-title *ngIf=\"dialogData.title\">\r\n    {{dialogData.title}}\r\n  </h2>\r\n  <mat-dialog-content>{{dialogData.message}}</mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <ng-container *ngFor=\"let action of dialogData.actions\">\r\n      <button color=\"{{action.color || 'primary'}}\" *ngIf=\"action.value === undefined\" mat-button mat-dialog-close>{{action.text}}</button>\r\n      <button color=\"{{action.color || 'primary'}}\" *ngIf=\"action.value !== undefined\" mat-button [mat-dialog-close]=\"action.value\">{{action.text}}</button>\r\n    </ng-container>\r\n  </mat-dialog-actions>\r\n</ng-container>\r\n", styles: ["mat-dialog-actions{justify-content:flex-end}mat-dialog-content{white-space:pre-wrap}button{text-transform:uppercase;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i3.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nuc-dialog', template: "<ng-container *ngIf=\"dialogData\">\r\n  <h2 mat-dialog-title *ngIf=\"dialogData.title\">\r\n    {{dialogData.title}}\r\n  </h2>\r\n  <mat-dialog-content>{{dialogData.message}}</mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <ng-container *ngFor=\"let action of dialogData.actions\">\r\n      <button color=\"{{action.color || 'primary'}}\" *ngIf=\"action.value === undefined\" mat-button mat-dialog-close>{{action.text}}</button>\r\n      <button color=\"{{action.color || 'primary'}}\" *ngIf=\"action.value !== undefined\" mat-button [mat-dialog-close]=\"action.value\">{{action.text}}</button>\r\n    </ng-container>\r\n  </mat-dialog-actions>\r\n</ng-container>\r\n", styles: ["mat-dialog-actions{justify-content:flex-end}mat-dialog-content{white-space:pre-wrap}button{text-transform:uppercase;font-weight:700}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
@@ -60,9 +60,9 @@ class NucDialogService {
         }
     }
 }
-NucDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-NucDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucDialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucDialogService, decorators: [{
+NucDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+NucDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -71,14 +71,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 
 class NucDialogModule {
 }
-NucDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NucDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: NucDialogModule, declarations: [NucDialogComponent], imports: [CommonModule,
+NucDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NucDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: NucDialogModule, declarations: [NucDialogComponent], imports: [CommonModule,
         MatDialogModule,
         MatButtonModule] });
-NucDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucDialogModule, imports: [CommonModule,
+NucDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucDialogModule, imports: [CommonModule,
         MatDialogModule,
         MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -112,6 +112,7 @@ var LoadingStatus;
 class LoadingState {
     constructor() {
         this._status = LoadingStatus.undefined;
+        this._initialMessage = null;
         this._message = null;
         this._errorDetails = null;
         this._lastSubscription = null;
@@ -129,20 +130,26 @@ class LoadingState {
         return this._load(true, null, observable, resultFunction, errorFunction, completeFunction);
     }
     loadWithMessage(observable, message, resultFunction, errorFunction, completeFunction) {
+        this._initialMessage = message;
         return this._load(true, message, observable, resultFunction, errorFunction, completeFunction);
     }
     invoke(observable, resultFunction, errorFunction, completeFunction) {
         return this._load(false, null, observable, resultFunction, errorFunction, completeFunction);
     }
     invokeWithMessage(observable, message, resultFunction, errorFunction, completeFunction) {
+        this._initialMessage = message;
         return this._load(false, message, observable, resultFunction, errorFunction, completeFunction);
     }
     retry() {
         if (this._lastSubscription) {
             this._lastSubscription.unsubscribe();
         }
-        this.setInProgress();
-        this._lastSubscription = this._loadObservable.subscribe(this._resultFunction, this._errorFunction, this._completeFunction);
+        this.setInProgress(this._initialMessage);
+        this._lastSubscription = this._loadObservable.subscribe({
+            next: this._resultFunction,
+            error: this._errorFunction,
+            complete: this._completeFunction
+        });
         return this._lastSubscription;
     }
     setInProgress(message = null) {
@@ -162,13 +169,16 @@ class LoadingState {
             this._lastSubscription.unsubscribe();
         }
         this.setInProgress(progressMessage);
-        const obs = observable.pipe(tap(() => {
-            if (!saveAsLoadObservable && this.message) { // if message was used one time we clear it
-                this._message = null;
+        const obs = observable.pipe(tap({
+            next: () => {
+                if (!saveAsLoadObservable && this.message) { // if message was used one time we clear it
+                    this._message = null;
+                }
+                this.setCompleted();
+            },
+            error: (err) => {
+                this.setFailed(null, LoadingState.getErrorDetails(err));
             }
-            this.setCompleted();
-        }, (err) => {
-            this.setFailed(null, LoadingState.getErrorDetails(err));
         }));
         if (saveAsLoadObservable) {
             this._loadObservable = obs;
@@ -176,7 +186,11 @@ class LoadingState {
             this._errorFunction = errorFunction;
             this._completeFunction = completeFunction;
         }
-        this._lastSubscription = obs.subscribe(resultFunction, errorFunction, completeFunction);
+        this._lastSubscription = obs.subscribe({
+            next: resultFunction,
+            error: errorFunction,
+            complete: completeFunction
+        });
         return this._lastSubscription;
     }
     static getErrorDetails(error) {
@@ -237,9 +251,9 @@ class NucLoadedContentComponent {
         this._errorDetailsVisible = true;
     }
 }
-NucLoadedContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucLoadedContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NucLoadedContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: NucLoadedContentComponent, selector: "nuc-loaded-content-component", inputs: { completedTemplate: "completedTemplate", errorTemplate: "errorTemplate", inProgressTemplate: "inProgressTemplate", state: "state", inProgressMessage: "inProgressMessage", errorMessage: "errorMessage", showRetry: "showRetry" }, ngImport: i0, template: "<ng-container *ngIf=\"completed\">\r\n  <ng-container *ngTemplateOutlet=\"completedTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div class=\"indicators-container\" *ngIf=\"inProgress || failed\">\r\n  <ng-container *ngIf=\"inProgress\">\r\n    <ng-container *ngTemplateOutlet=\"inProgressTemplate ? inProgressTemplate: defaultInProgressTemplate\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"failed\">\r\n    <ng-container *ngTemplateOutlet=\"errorTemplate ? errorTemplate: defaultErrorTemplate\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #defaultInProgressTemplate>\r\n  <div class=\"spinner\">\r\n    <mat-spinner [diameter]=\"45\"></mat-spinner>\r\n  </div>\r\n  <p>\r\n    {{message}}\r\n  </p>\r\n</ng-template>\r\n\r\n<ng-template #defaultErrorTemplate>\r\n  <div>\r\n    <p class=\"message\">\r\n      <span>{{message}}</span>\r\n      <mat-icon *ngIf=\"state.errorDetails && !errorDetailsVisible\" class=\"info-button\" color=\"warn\" (click)=\"showErrorDetails()\">info</mat-icon>\r\n    </p>\r\n\r\n    <p *ngIf=\"errorDetailsVisible\" class=\"error-details mat-small\">\r\n      {{state.errorDetails}}\r\n    </p>\r\n\r\n    <p *ngIf=\"showRetryButton\">\r\n      <button mat-mini-fab color=\"primary\" (click)=\"state.retry()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n", styles: [".indicators-container{text-align:center;margin:0 auto;padding-top:4rem}.error-details{margin-top:1rem}.spinner{display:flex;justify-content:center;align-items:center;margin-bottom:.5rem}.message{display:flex;justify-content:center;align-items:center}.info-button{cursor:pointer;margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucLoadedContentComponent, decorators: [{
+NucLoadedContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucLoadedContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NucLoadedContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: NucLoadedContentComponent, selector: "nuc-loaded-content-component", inputs: { completedTemplate: "completedTemplate", errorTemplate: "errorTemplate", inProgressTemplate: "inProgressTemplate", state: "state", inProgressMessage: "inProgressMessage", errorMessage: "errorMessage", showRetry: "showRetry" }, ngImport: i0, template: "<ng-container *ngIf=\"completed\">\r\n  <ng-container *ngTemplateOutlet=\"completedTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div class=\"indicators-container\" *ngIf=\"inProgress || failed\">\r\n  <ng-container *ngIf=\"inProgress\">\r\n    <ng-container *ngTemplateOutlet=\"inProgressTemplate ? inProgressTemplate: defaultInProgressTemplate\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"failed\">\r\n    <ng-container *ngTemplateOutlet=\"errorTemplate ? errorTemplate: defaultErrorTemplate\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #defaultInProgressTemplate>\r\n  <div class=\"spinner\">\r\n    <mat-spinner [diameter]=\"45\"></mat-spinner>\r\n  </div>\r\n  <p>\r\n    {{message}}\r\n  </p>\r\n</ng-template>\r\n\r\n<ng-template #defaultErrorTemplate>\r\n  <div>\r\n    <p class=\"message\">\r\n      <span>{{message}}</span>\r\n      <mat-icon *ngIf=\"state.errorDetails && !errorDetailsVisible\" class=\"info-button\" color=\"warn\" (click)=\"showErrorDetails()\">info</mat-icon>\r\n    </p>\r\n\r\n    <p *ngIf=\"errorDetailsVisible\" class=\"error-details mat-small\">\r\n      {{state.errorDetails}}\r\n    </p>\r\n\r\n    <p *ngIf=\"showRetryButton\">\r\n      <button mat-mini-fab color=\"primary\" (click)=\"state.retry()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n", styles: [".indicators-container{text-align:center;margin:0 auto;padding-top:4rem}.error-details{margin-top:1rem}.spinner{display:flex;justify-content:center;align-items:center;margin-bottom:.5rem}.message{display:flex;justify-content:center;align-items:center}.info-button{cursor:pointer;margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucLoadedContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nuc-loaded-content-component', template: "<ng-container *ngIf=\"completed\">\r\n  <ng-container *ngTemplateOutlet=\"completedTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div class=\"indicators-container\" *ngIf=\"inProgress || failed\">\r\n  <ng-container *ngIf=\"inProgress\">\r\n    <ng-container *ngTemplateOutlet=\"inProgressTemplate ? inProgressTemplate: defaultInProgressTemplate\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"failed\">\r\n    <ng-container *ngTemplateOutlet=\"errorTemplate ? errorTemplate: defaultErrorTemplate\"></ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #defaultInProgressTemplate>\r\n  <div class=\"spinner\">\r\n    <mat-spinner [diameter]=\"45\"></mat-spinner>\r\n  </div>\r\n  <p>\r\n    {{message}}\r\n  </p>\r\n</ng-template>\r\n\r\n<ng-template #defaultErrorTemplate>\r\n  <div>\r\n    <p class=\"message\">\r\n      <span>{{message}}</span>\r\n      <mat-icon *ngIf=\"state.errorDetails && !errorDetailsVisible\" class=\"info-button\" color=\"warn\" (click)=\"showErrorDetails()\">info</mat-icon>\r\n    </p>\r\n\r\n    <p *ngIf=\"errorDetailsVisible\" class=\"error-details mat-small\">\r\n      {{state.errorDetails}}\r\n    </p>\r\n\r\n    <p *ngIf=\"showRetryButton\">\r\n      <button mat-mini-fab color=\"primary\" (click)=\"state.retry()\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n", styles: [".indicators-container{text-align:center;margin:0 auto;padding-top:4rem}.error-details{margin-top:1rem}.spinner{display:flex;justify-content:center;align-items:center;margin-bottom:.5rem}.message{display:flex;justify-content:center;align-items:center}.info-button{cursor:pointer;margin-left:.5rem}\n"] }]
         }], propDecorators: { completedTemplate: [{
@@ -309,9 +323,9 @@ class NucLoadedContentDirective {
         }
     }
 }
-NucLoadedContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucLoadedContentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-NucLoadedContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: NucLoadedContentDirective, selector: "[nucLoadedContent]", inputs: { nucLoadedContent: "nucLoadedContent", errorTemplate: ["nucLoadedContentError", "errorTemplate"], inProgressTemplate: ["nucLoadedContentInProgress", "inProgressTemplate"], inProgressMessage: ["nucLoadedContentInProgressMessage", "inProgressMessage"], errorMessage: ["nucLoadedContentErrorMessage", "errorMessage"], showRetry: ["nucLoadedContentShowRetry", "showRetry"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucLoadedContentDirective, decorators: [{
+NucLoadedContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucLoadedContentDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+NucLoadedContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.2", type: NucLoadedContentDirective, selector: "[nucLoadedContent]", inputs: { nucLoadedContent: "nucLoadedContent", errorTemplate: ["nucLoadedContentError", "errorTemplate"], inProgressTemplate: ["nucLoadedContentInProgress", "inProgressTemplate"], inProgressMessage: ["nucLoadedContentInProgressMessage", "inProgressMessage"], errorMessage: ["nucLoadedContentErrorMessage", "errorMessage"], showRetry: ["nucLoadedContentShowRetry", "showRetry"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucLoadedContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[nucLoadedContent]' }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { nucLoadedContent: [{
@@ -335,17 +349,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 
 class NucLoadedContentModule {
 }
-NucLoadedContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucLoadedContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NucLoadedContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: NucLoadedContentModule, declarations: [NucLoadedContentDirective,
+NucLoadedContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucLoadedContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NucLoadedContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: NucLoadedContentModule, declarations: [NucLoadedContentDirective,
         NucLoadedContentComponent], imports: [CommonModule,
         MatProgressSpinnerModule,
         MatButtonModule,
         MatIconModule], exports: [NucLoadedContentDirective] });
-NucLoadedContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucLoadedContentModule, imports: [CommonModule,
+NucLoadedContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucLoadedContentModule, imports: [CommonModule,
         MatProgressSpinnerModule,
         MatButtonModule,
         MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucLoadedContentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucLoadedContentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -416,9 +430,9 @@ class NativeStylingService {
         return Windows.UI.ColorHelper.fromArgb(color.a, color.r * factor, color.g * factor, color.b * factor);
     }
 }
-NativeStylingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NativeStylingService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-NativeStylingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NativeStylingService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NativeStylingService, decorators: [{
+NativeStylingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NativeStylingService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+NativeStylingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NativeStylingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NativeStylingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -483,19 +497,19 @@ class NucSwipeTabsDirective {
         return offset;
     }
 }
-NucSwipeTabsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSwipeTabsDirective, deps: [{ token: i0.ElementRef }, { token: i1$3.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive });
-NucSwipeTabsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: NucSwipeTabsDirective, selector: "[nucSwipe]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSwipeTabsDirective, decorators: [{
+NucSwipeTabsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSwipeTabsDirective, deps: [{ token: i0.ElementRef }, { token: i1$3.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive });
+NucSwipeTabsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.2", type: NucSwipeTabsDirective, selector: "[nucSwipe]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSwipeTabsDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[nucSwipe]' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.MatTabGroup }]; } });
 
 class NucSwipeTabsModule {
 }
-NucSwipeTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSwipeTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NucSwipeTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: NucSwipeTabsModule, declarations: [NucSwipeTabsDirective], imports: [CommonModule], exports: [NucSwipeTabsDirective] });
-NucSwipeTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSwipeTabsModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSwipeTabsModule, decorators: [{
+NucSwipeTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSwipeTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NucSwipeTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: NucSwipeTabsModule, declarations: [NucSwipeTabsDirective], imports: [CommonModule], exports: [NucSwipeTabsDirective] });
+NucSwipeTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSwipeTabsModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSwipeTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -510,32 +524,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 }]
         }] });
 
+var NucSnackbarType;
+(function (NucSnackbarType) {
+    NucSnackbarType["Info"] = "info";
+    NucSnackbarType["Warning"] = "warning";
+    NucSnackbarType["Danger"] = "danger";
+    NucSnackbarType["Success"] = "success";
+    NucSnackbarType["Progress"] = "progress";
+})(NucSnackbarType || (NucSnackbarType = {}));
+
+class ProgressSnackbarComponent {
+    constructor(data, elem) {
+        this.data = data;
+        this.elem = elem;
+    }
+    ngAfterViewInit() {
+        const element = this.elem.nativeElement;
+        const circle = element.querySelector('circle');
+        const message = element.querySelector('.message');
+        const color = window.getComputedStyle(message).color;
+        circle.style.stroke = color;
+    }
+}
+ProgressSnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ProgressSnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ProgressSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: ProgressSnackbarComponent, selector: "lib-progress-snackbar", host: { classAttribute: "mat-simple-snackbar" }, ngImport: i0, template: "<div class=\"mat-simple-snack-bar-content message\">\r\n  <mat-spinner style=\"vertical-align: middle; display: inline-flex; margin-right: 8px;\" diameter=\"16\" strokeWidth=\"1.5\" mode=\"indeterminate\" class=\"spinner\" color=\"red\"></mat-spinner>\r\n  {{data.message}}\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ProgressSnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-progress-snackbar', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'mat-simple-snackbar',
+                    }, template: "<div class=\"mat-simple-snack-bar-content message\">\r\n  <mat-spinner style=\"vertical-align: middle; display: inline-flex; margin-right: 8px;\" diameter=\"16\" strokeWidth=\"1.5\" mode=\"indeterminate\" class=\"spinner\" color=\"red\"></mat-spinner>\r\n  {{data.message}}\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }, { type: i0.ElementRef }]; } });
+
 class NucSnackbarService {
-    constructor(_matSnackBar, _zone) {
-        this._matSnackBar = _matSnackBar;
-        this._zone = _zone;
+    constructor(matSnackBar, zone) {
+        this.matSnackBar = matSnackBar;
+        this.zone = zone;
     }
     openSnackbar(type, message, action, duration) {
         let snackbarRef;
-        this._zone.run(() => {
-            snackbarRef = this._matSnackBar.open(message, action, {
-                duration,
-                panelClass: `${type}-snackbar`
-            });
+        this.zone.run(() => {
+            const panelClass = `${type}-snackbar`;
+            if (type === NucSnackbarType.Progress) {
+                snackbarRef = this.matSnackBar.openFromComponent(ProgressSnackbarComponent, {
+                    duration,
+                    panelClass,
+                    data: {
+                        message
+                    }
+                });
+            }
+            else {
+                snackbarRef = this.matSnackBar.open(message, action, {
+                    duration,
+                    panelClass
+                });
+            }
         });
         return snackbarRef;
     }
     openSnackbarWithConfig(message, action, config) {
         let snackbarRef;
-        this._zone.run(() => {
-            snackbarRef = this._matSnackBar.open(message, action, config);
+        this.zone.run(() => {
+            snackbarRef = this.matSnackBar.open(message, action, config);
         });
         return snackbarRef;
     }
 }
-NucSnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSnackbarService, deps: [{ token: i1$4.MatSnackBar }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-NucSnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSnackbarService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSnackbarService, decorators: [{
+NucSnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSnackbarService, deps: [{ token: i1$4.MatSnackBar }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+NucSnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSnackbarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSnackbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -544,31 +604,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 
 class NucSnackbarModule {
 }
-NucSnackbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NucSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: NucSnackbarModule, imports: [CommonModule,
-        MatSnackBarModule] });
-NucSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSnackbarModule, imports: [CommonModule,
-        MatSnackBarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucSnackbarModule, decorators: [{
+NucSnackbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NucSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: NucSnackbarModule, declarations: [ProgressSnackbarComponent], imports: [CommonModule,
+        MatSnackBarModule,
+        MatProgressSpinnerModule] });
+NucSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSnackbarModule, imports: [CommonModule,
+        MatSnackBarModule,
+        MatProgressSpinnerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucSnackbarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
+                    declarations: [
+                        ProgressSnackbarComponent
+                    ],
                     imports: [
                         CommonModule,
-                        MatSnackBarModule
+                        MatSnackBarModule,
+                        MatProgressSpinnerModule
+                    ],
+                    entryComponents: [
+                        ProgressSnackbarComponent
                     ],
                     exports: []
                 }]
         }] });
 
-var NucSnackbarType;
-(function (NucSnackbarType) {
-    NucSnackbarType["Info"] = "info";
-    NucSnackbarType["Warning"] = "warning";
-    NucSnackbarType["Danger"] = "danger";
-    NucSnackbarType["Success"] = "success";
-})(NucSnackbarType || (NucSnackbarType = {}));
-
 class NucUserAvatarComponent {
     constructor() {
         this.size = 'medium';
@@ -601,9 +661,9 @@ class NucUserAvatarComponent {
         return `hsl(${hue},${saturation}%,${lightness}%)`;
     }
 }
-NucUserAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NucUserAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: NucUserAvatarComponent, selector: "nuc-user-avatar", inputs: { name: "name", image: "image", size: "size", background: "background" }, ngImport: i0, template: "<ng-container *ngIf=\"image\">\r\n  <div class=\"user-avatar size-{{size}}\">\r\n    <img src=\"{{image}}\"  />\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!image\">\r\n  <div class=\"user-avatar size-{{size}} unselectable\" [style.background-color]=\"getHslString()\" [ngClass]=\"{'white-text': background, 'black-text border': !background}\">\r\n    {{getUserInitials()}}\r\n  </div>\r\n</ng-container>\r\n", styles: [".user-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;text-align:center;font-weight:400}.user-avatar img{object-fit:contain;width:inherit;height:inherit;border-radius:50%}.white-text{color:#fff}.black-text{color:#333}.unselectable{-webkit-user-select:none;user-select:none}.border{border:2px solid #333333}.user-avatar.size-small{height:24px;width:24px;font-size:.8em;line-height:24px}.user-avatar.size-medium{height:40px;width:40px;font-size:1.2em;line-height:40px}.user-avatar.size-large{height:64px;width:64px;font-size:2em;line-height:64px}.user-avatar.size-xlarge{height:90px;width:90px;font-size:3em;line-height:90px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucUserAvatarComponent, decorators: [{
+NucUserAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NucUserAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: NucUserAvatarComponent, selector: "nuc-user-avatar", inputs: { name: "name", image: "image", size: "size", background: "background" }, ngImport: i0, template: "<ng-container *ngIf=\"image\">\r\n  <div class=\"user-avatar size-{{size}}\">\r\n    <img src=\"{{image}}\"  />\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!image\">\r\n  <div class=\"user-avatar size-{{size}} unselectable\" [style.background-color]=\"getHslString()\" [ngClass]=\"{'white-text': background, 'black-text border': !background}\">\r\n    {{getUserInitials()}}\r\n  </div>\r\n</ng-container>\r\n", styles: [".user-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;text-align:center;font-weight:400}.user-avatar img{object-fit:contain;width:inherit;height:inherit;border-radius:50%}.white-text{color:#fff}.black-text{color:#333}.unselectable{-webkit-user-select:none;user-select:none}.border{border:2px solid #333333}.user-avatar.size-small{height:24px;width:24px;font-size:.8em;line-height:24px}.user-avatar.size-medium{height:40px;width:40px;font-size:1.2em;line-height:40px}.user-avatar.size-large{height:64px;width:64px;font-size:2em;line-height:64px}.user-avatar.size-xlarge{height:90px;width:90px;font-size:3em;line-height:90px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucUserAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nuc-user-avatar', template: "<ng-container *ngIf=\"image\">\r\n  <div class=\"user-avatar size-{{size}}\">\r\n    <img src=\"{{image}}\"  />\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!image\">\r\n  <div class=\"user-avatar size-{{size}} unselectable\" [style.background-color]=\"getHslString()\" [ngClass]=\"{'white-text': background, 'black-text border': !background}\">\r\n    {{getUserInitials()}}\r\n  </div>\r\n</ng-container>\r\n", styles: [".user-avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;text-align:center;font-weight:400}.user-avatar img{object-fit:contain;width:inherit;height:inherit;border-radius:50%}.white-text{color:#fff}.black-text{color:#333}.unselectable{-webkit-user-select:none;user-select:none}.border{border:2px solid #333333}.user-avatar.size-small{height:24px;width:24px;font-size:.8em;line-height:24px}.user-avatar.size-medium{height:40px;width:40px;font-size:1.2em;line-height:40px}.user-avatar.size-large{height:64px;width:64px;font-size:2em;line-height:64px}.user-avatar.size-xlarge{height:90px;width:90px;font-size:3em;line-height:90px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { name: [{
@@ -618,10 +678,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 
 class NucUserAvatarModule {
 }
-NucUserAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucUserAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NucUserAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: NucUserAvatarModule, declarations: [NucUserAvatarComponent], imports: [CommonModule], exports: [NucUserAvatarComponent] });
-NucUserAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucUserAvatarModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: NucUserAvatarModule, decorators: [{
+NucUserAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucUserAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NucUserAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: NucUserAvatarModule, declarations: [NucUserAvatarComponent], imports: [CommonModule], exports: [NucUserAvatarComponent] });
+NucUserAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucUserAvatarModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: NucUserAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [