@recursyve/nice-ui-kit.v2 15.0.0-beta.120 → 15.0.0-beta.122

package/fesm2015/recursyve-nice-ui-kit.v2.mjs

@@ -1,12 +1,12 @@
-import * as i1$b from '@angular/animations';
+import * as i1$c from '@angular/animations';
 import { animation, style, animate, trigger, transition, useAnimation, state, keyframes } from '@angular/animations';
 import { HttpContextToken, HttpResponse, HttpContext, HttpParams } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, TemplateRef, Optional, Inject, ViewChild, ContentChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, ContentChildren, SimpleChange, SkipSelf } from '@angular/core';
 import { plainToInstance } from 'class-transformer';
-import { map, filter, takeUntil, tap, take, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
+import { map, filter, takeUntil, tap, take, finalize, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
 import { __rest, __awaiter } from 'tslib';
-import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, tap as tap$1, Observable, combineLatest, of, fromEvent, merge as merge$1, pairwise } from 'rxjs';
+import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, pairwise, tap as tap$1, Observable, combineLatest, defer, timer, of, fromEvent, merge as merge$1 } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe, CurrencyPipe, DOCUMENT, isPlatformServer, NgForOf, NgIf, AsyncPipe, UpperCasePipe } from '@angular/common';
@@ -14,60 +14,61 @@ import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$2 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, Validators, FormControl, ReactiveFormsModule, FormsModule, FormGroup } from '@angular/forms';
 import { LexoRank } from 'lexorank';
 import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i2$1 from '@angular/material/core';
 import { MatRippleModule, MatOption, mixinErrorState, MAT_DATE_FORMATS, MATERIAL_SANITY_CHECKS } from '@angular/material/core';
-import * as i7 from '@angular/material/progress-spinner';
+import * as i1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i1 from '@ngx-translate/core';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i1$4 from '@angular/material/form-field';
+import * as i1$5 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import * as uuid from 'uuid';
-import * as i1$1 from '@angular/material/autocomplete';
+import * as i1$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
 import * as i2$2 from '@angular/cdk/a11y';
-import * as i1$3 from '@angular/material/input';
+import * as i1$4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i10 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { CdkStepper, CdkStep, CdkStepperModule } from '@angular/cdk/stepper';
-import * as i1$5 from '@recursyve/ngx-form-generator';
+import * as i1$6 from '@recursyve/ngx-form-generator';
 import { registerAsyncValidatorDecorator, AsyncValidator, NGX_FORM_GENERATOR_ASYNC_VALIDATORS, DynamicGroup } from '@recursyve/ngx-form-generator';
 import { ComponentPortal } from '@angular/cdk/portal';
-import * as i1$6 from '@angular/cdk/overlay';
+import * as i1$7 from '@angular/cdk/overlay';
 import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import * as i5 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i2$3 from '@angular/material/datepicker';
-import { MatDateRangePicker, MatDatepickerModule } from '@angular/material/datepicker';
+import { isSameDay } from 'date-fns';
 import subDays from 'date-fns/subDays';
-import * as i1$7 from 'ngx-mask';
-import * as i1$8 from '@angular/platform-browser';
+import * as i2$3 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i1$8 from 'ngx-mask';
+import * as i1$9 from '@angular/platform-browser';
 import { merge } from 'lodash-es';
-import * as i1$9 from '@angular/cdk/layout';
+import * as i1$a from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
-import * as i1$a from '@angular/router';
+import * as i1$b from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import * as i1$c from '@angular/material/bottom-sheet';
+import * as i1$d from '@angular/material/bottom-sheet';
 import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import * as i4$2 from '@angular/material/list';
 import { MatListModule, MAT_LIST_CONFIG } from '@angular/material/list';
-import * as i1$e from '@angular/cdk/platform';
+import * as i1$g from '@angular/cdk/platform';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import * as i1$d from '@angular/cdk/scrolling';
+import * as i1$e from '@angular/cdk/scrolling';
 import * as i3$1 from '@angular/cdk/bidi';
+import * as i1$f from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import PerfectScrollbar from 'perfect-scrollbar';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$f from '@angular/material/dialog';
+import * as i1$h from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i1$g from '@angular/material/snack-bar';
-import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i3$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2$4 from '@angular/cdk/drag-drop';
@@ -1766,7 +1767,7 @@ class NiceAssetsCarouselComponent {
         this.color = this.defaultColor;
         this.edit = false;
         this.loading = false;
-        this.accept = ["image/*"];
+        this.accept = [];
         this.customActions = [];
         this.multipleUpload = false;
         this.visiblePreviewAsset = 4;
@@ -1774,6 +1775,7 @@ class NiceAssetsCarouselComponent {
         this.activeChange = new EventEmitter();
         this.removedAsset = new EventEmitter();
         this.listStyle = { transform: "translateX(0px)" };
+        this._imagesMimeTypes = ["image/png", "image/jpeg", "image/webp", "image/avif"];
         if (!this.options) {
             this.options = {
                 actionButtons: {
@@ -1802,6 +1804,21 @@ class NiceAssetsCarouselComponent {
             };
         }
     }
+    ngOnInit() {
+        var _a;
+        if (!((_a = this.accept) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.accept = [...this._imagesMimeTypes];
+        }
+    }
+    ngOnChanges(changes) {
+        if ("accept" in changes && this.accept) {
+            const index = this.accept.indexOf("image/*");
+            if (index >= 0) {
+                this.accept.splice(index, 1);
+                this.accept.push(...this._imagesMimeTypes);
+            }
+        }
+    }
     writeValue(assets) {
         this._assets = assets !== null && assets !== void 0 ? assets : [];
         if (this._assets.length === 0) {
@@ -1846,42 +1863,30 @@ class NiceAssetsCarouselComponent {
     onFilesChange(event) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            let files = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files;
-            if (this.imagesProcessor) {
-                files = yield this.getProcessedFiles(files);
-            }
+            const files = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files;
             yield this.onFilesDrop(files);
             this.inputElement.nativeElement.value = "";
         });
     }
-    onFilesDrop(files) {
+    onFilesDrop(fileList) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
+            let files = this.filterOutUnsupportedFiles(fileList);
+            if (this.imagesProcessor) {
+                files = yield this.getProcessedFiles(files);
+            }
             if (!(files === null || files === void 0 ? void 0 : files.length)) {
                 return;
             }
-            let newAssetsAdded = false;
-            for (let i = 0; i < files.length; i++) {
-                const file = files.item(i);
-                if (!this.accept.some((accept) => {
-                    if (accept.endsWith("*")) {
-                        return file.type.startsWith(accept.replace("*", ""));
-                    }
-                    return accept === file.type;
-                })) {
-                    continue;
-                }
-                newAssetsAdded = true;
+            for (const file of files) {
                 this._assets.push({
                     file,
                     type: file.type.split("/").shift(),
                     base64: yield FileUtils.getDataUrl(file)
                 });
             }
-            if (newAssetsAdded) {
-                this.clickAsset(this._assets.length - 1);
-                (_a = this.propagate) === null || _a === void 0 ? void 0 : _a.call(this, this._assets);
-            }
+            this.clickAsset(this._assets.length - 1);
+            (_a = this.propagate) === null || _a === void 0 ? void 0 : _a.call(this, this._assets);
         });
     }
     clickRemove() {
@@ -1908,12 +1913,32 @@ class NiceAssetsCarouselComponent {
             yield this._assetsElement.get(this._active).nativeElement.firstElementChild.play();
         });
     }
+    filterOutUnsupportedFiles(fileList) {
+        const files = [];
+        for (let i = 0; i < fileList.length; i++) {
+            const file = fileList.item(i);
+            if (this.accept.some((accept) => {
+                if (accept.endsWith("*")) {
+                    return file.type.startsWith(accept.replace("*", ""));
+                }
+                return accept === file.type;
+            })) {
+                files.push(file);
+            }
+        }
+        return files;
+    }
     getProcessedFiles(files) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
+                if (!files.length) {
+                    return null;
+                }
                 return yield this.imagesProcessor(files);
             }
-            catch (e) { }
+            catch (e) {
+                return null;
+            }
         });
     }
 }
@@ -1924,7 +1949,7 @@ NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             useExisting: forwardRef(() => NiceAssetsCarouselComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "activeContent", first: true, predicate: NiceAssetsCarouselActiveContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "activeVideoElement", first: true, predicate: ["activeVideo"], descendants: true }, { propertyName: "assetsElement", predicate: ["assets"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n    <div\n        class=\"active-image\"\n        matRipple\n        [class.empty-state]=\"!_activeAsset\"\n        (click)=\"edit && fileInput.click();\n        $event.stopPropagation()\"\n    >\n        <div *ngIf=\"loading\" class=\"flex flex-row justify-center items-center h-full\">\n            <mat-spinner [diameter]=\"32\"></mat-spinner>\n        </div>\n        <ng-container *ngIf=\"!loading\">\n            <ng-container\n                *ngIf=\"_activeAsset && activeContent\"\n                [ngTemplateOutlet]=\"activeContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: _activeAsset}\"\n            ></ng-container>\n            <img\n                *ngIf=\"_activeAsset?.type === 'image'\"\n                (mouseover)=\"showOverlay=true\"\n                [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n                draggable=\"false\"\n                class=\"relative\"\n                alt=\"active-image\"\n            >\n            <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n            <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n                <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n                <div class=\"text\">\n                    {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n                </div>\n            </div>\n\n            <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n                <div\n                    (mouseout)=\"showOverlay=false\"\n                    class=\"flex flex-col justify-center items-center w-full h-full\"\n                >\n                    <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n                </div>\n            </div>\n\n            <div *ngIf=\"edit\" class=\"active-buttons\">\n                <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n                    <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n                </button>\n                <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n                    <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n                </button>\n                <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n                    <button\n                        mat-menu-item\n                        *ngFor=\"let action of customActions\"\n                        (click)=\"clickCustom(action)\"\n                    >\n                        <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n                        <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n                        <span>{{ action.name | translate }}</span>\n                    </button>\n                    <button mat-menu-item (click)=\"clickRemove()\">\n                        <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n                        <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n                        <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n                    </button>\n                </mat-menu>\n            </div>\n        </ng-container>\n    </div>\n\n    <div class=\"carousel\">\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n            <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n        </button>\n        <div class=\"asset-list-container\">\n            <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n                <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n                    <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n                </div>\n            </div>\n            <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n                <div\n                    #assets\n                    class=\"asset\"\n                    *ngFor=\"let asset of _assets; let i = index\"\n                    (click)=\"clickAsset(i)\"\n                    [ngClass]=\"color\"\n                    [class.active]=\"_active === i\"\n                >\n                    <ng-container>\n                        <img\n                            *ngIf=\"asset.type === 'image'\"\n                            draggable=\"false\"\n                            [src]=\"asset.url ?? asset.base64\"\n                            alt=\"add-image\"\n                        />\n                        <video\n                            *ngIf=\"asset.type === 'video'\"\n                            draggable=\"false\"\n                            loop\n                            [src]=\"asset.url ?? asset.base64\"\n                        ></video>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n            <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n        </button>\n    </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "activeContent", first: true, predicate: NiceAssetsCarouselActiveContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "activeVideoElement", first: true, predicate: ["activeVideo"], descendants: true }, { propertyName: "assetsElement", predicate: ["assets"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n    <div\n        class=\"active-image\"\n        matRipple\n        [class.empty-state]=\"!_activeAsset\"\n        (click)=\"edit && fileInput.click();\n        $event.stopPropagation()\"\n    >\n        <div *ngIf=\"loading\" class=\"flex flex-row justify-center items-center h-full\">\n            <mat-spinner [diameter]=\"32\"></mat-spinner>\n        </div>\n        <ng-container *ngIf=\"!loading\">\n            <ng-container\n                *ngIf=\"_activeAsset && activeContent\"\n                [ngTemplateOutlet]=\"activeContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: _activeAsset}\"\n            ></ng-container>\n            <img\n                *ngIf=\"_activeAsset?.type === 'image'\"\n                (mouseover)=\"showOverlay=true\"\n                [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n                draggable=\"false\"\n                class=\"relative\"\n                alt=\"active-image\"\n            >\n            <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n            <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n                <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n                <div class=\"text\">\n                    {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n                </div>\n            </div>\n\n            <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n                <div\n                    (mouseout)=\"showOverlay=false\"\n                    class=\"flex flex-col justify-center items-center w-full h-full\"\n                >\n                    <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n                </div>\n            </div>\n\n            <div *ngIf=\"edit\" class=\"active-buttons\">\n                <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n                    <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n                </button>\n                <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n                    <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n                </button>\n                <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n                    <button\n                        mat-menu-item\n                        *ngFor=\"let action of customActions\"\n                        (click)=\"clickCustom(action)\"\n                    >\n                        <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n                        <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n                        <span>{{ action.name | translate }}</span>\n                    </button>\n                    <button mat-menu-item (click)=\"clickRemove()\">\n                        <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n                        <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n                        <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n                    </button>\n                </mat-menu>\n            </div>\n        </ng-container>\n    </div>\n\n    <div class=\"carousel\">\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n            <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n        </button>\n        <div class=\"asset-list-container\">\n            <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n                <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n                    <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n                </div>\n            </div>\n            <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n                <div\n                    #assets\n                    class=\"asset\"\n                    *ngFor=\"let asset of _assets; let i = index\"\n                    (click)=\"clickAsset(i)\"\n                    [ngClass]=\"color\"\n                    [class.active]=\"_active === i\"\n                >\n                    <ng-container>\n                        <img\n                            *ngIf=\"asset.type === 'image'\"\n                            draggable=\"false\"\n                            [src]=\"asset.url ?? asset.base64\"\n                            alt=\"add-image\"\n                        />\n                        <video\n                            *ngIf=\"asset.type === 'video'\"\n                            draggable=\"false\"\n                            loop\n                            [src]=\"asset.url ?? asset.base64\"\n                        ></video>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n            <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n        </button>\n    </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
@@ -2123,7 +2148,7 @@ class OptionsScrollDirective {
         }
     }
 }
-OptionsScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OptionsScrollDirective, deps: [{ token: i1$1.MatAutocomplete }], target: i0.ɵɵFactoryTarget.Directive });
+OptionsScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OptionsScrollDirective, deps: [{ token: i1$2.MatAutocomplete }], target: i0.ɵɵFactoryTarget.Directive });
 OptionsScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: { thresholdPercent: "thresholdPercent" }, outputs: { optionsScroll: "optionsScroll" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OptionsScrollDirective, decorators: [{
             type: Directive,
@@ -2131,7 +2156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     // tslint:disable-next-line:directive-selector
                     selector: "mat-autocomplete[optionsScroll]"
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatAutocomplete }]; }, propDecorators: { thresholdPercent: [{
+        }], ctorParameters: function () { return [{ type: i1$2.MatAutocomplete }]; }, propDecorators: { thresholdPercent: [{
                 type: Input
             }], optionsScroll: [{
                 type: Output
@@ -2536,13 +2561,13 @@ class NiceTypeaheadComponent {
         }
     }
 }
-NiceTypeaheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceTypeaheadComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2$2.FocusMonitor }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NiceTypeaheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceTypeaheadComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }, { token: i2$2.FocusMonitor }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 NiceTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceTypeaheadComponent, selector: "nice-typeahead", inputs: { items: "items", labelFormatFn: "labelFormatFn", required: "required", disabled: "disabled", placeholder: "placeholder", emptyPlaceholder: "emptyPlaceholder", allowNotFoundItems: "allowNotFoundItems", panelClass: "panelClass", bindValue: "bindValue", bindLabel: "bindLabel", typeahead: "typeahead", page$: "page$", loading: "loading", loadingPage: "loadingPage", searchFn: "searchFn", optionTemplate: "optionTemplate" }, outputs: { change: "change" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [
         {
             provide: MatFormFieldControl,
             useExisting: NiceTypeaheadComponent
         }
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "options", predicate: MatOption, descendants: true }], ngImport: i0, template: "<div class=\"flex\" *ngIf=\"!disabled; else disable\">\n    <input\n        #searchInput\n        matInput\n        class=\"flex-auto\"\n        type=\"text\"\n        name=\"mat-autocomplete\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [matAutocomplete]=\"auto\"\n        [required]=\"required\"\n    />\n    <mat-icon *ngIf=\"value && !loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n        close\n    </mat-icon>\n\n    <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"loading\"></mat-spinner>\n</div>\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"panelWidth\"\n    [class]=\"panelClass\"\n    (optionActivated)=\"onOptionActivated($event)\"\n    (optionSelected)=\"onOptionSelected($event)\"\n    (closed)=\"updateState(false)\"\n    (opened)=\"updateState(true)\"\n    (optionsScroll)=\"onEndScroll()\"\n    autoActiveFirstOption\n>\n    <mat-progress-bar *ngIf=\"open && loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n    <mat-option *ngFor=\"let option of values\" [value]=\"option\">\n        <ng-container\n            *ngIf=\"optionTemplate; else format\"\n            [ngTemplateOutlet]=\"optionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: option }\">\n        </ng-container>\n        <ng-template #format>\n            {{ formatLabel(option) }}\n        </ng-template>\n    </mat-option>\n    <mat-option *ngIf=\"!values?.length && !allowNotFoundItems\" disabled>\n        <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n            {{ emptyPlaceholder }}\n        </ng-container>\n        <ng-template #defaultEmptyPlaceholder>\n            {{ \"components.typeahead.no_item_found\" | translate }}\n        </ng-template>\n    </mat-option>\n    <mat-option *ngIf=\"!values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n        <span class=\"italic\">{{ searchControl.value }}</span>\n    </mat-option>\n    <mat-progress-bar *ngIf=\"open && loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n</mat-autocomplete>\n\n<ng-template #disable>\n    <input\n        matInput\n        class=\"disabled-input\"\n        type=\"text\"\n        [disabled]=\"true\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [required]=\"required\"\n    />\n</ng-template>\n", styles: ["nice-typeahead{width:100%}nice-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-typeahead .disabled-input{flex:1 1 95%}nice-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i1$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "options", predicate: MatOption, descendants: true }], ngImport: i0, template: "<div class=\"flex\" *ngIf=\"!disabled; else disable\">\n    <input\n        #searchInput\n        matInput\n        class=\"flex-auto\"\n        type=\"text\"\n        name=\"mat-autocomplete\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [matAutocomplete]=\"auto\"\n        [required]=\"required\"\n    />\n    <mat-icon *ngIf=\"value && !loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n        close\n    </mat-icon>\n\n    <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"loading\"></mat-spinner>\n</div>\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"panelWidth\"\n    [class]=\"panelClass\"\n    (optionActivated)=\"onOptionActivated($event)\"\n    (optionSelected)=\"onOptionSelected($event)\"\n    (closed)=\"updateState(false)\"\n    (opened)=\"updateState(true)\"\n    (optionsScroll)=\"onEndScroll()\"\n    autoActiveFirstOption\n>\n    <mat-progress-bar *ngIf=\"open && loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n    <mat-option *ngFor=\"let option of values\" [value]=\"option\">\n        <ng-container\n            *ngIf=\"optionTemplate; else format\"\n            [ngTemplateOutlet]=\"optionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: option }\">\n        </ng-container>\n        <ng-template #format>\n            {{ formatLabel(option) }}\n        </ng-template>\n    </mat-option>\n    <mat-option *ngIf=\"!values?.length && !allowNotFoundItems\" disabled>\n        <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n            {{ emptyPlaceholder }}\n        </ng-container>\n        <ng-template #defaultEmptyPlaceholder>\n            {{ \"components.typeahead.no_item_found\" | translate }}\n        </ng-template>\n    </mat-option>\n    <mat-option *ngIf=\"!values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n        <span class=\"italic\">{{ searchControl.value }}</span>\n    </mat-option>\n    <mat-progress-bar *ngIf=\"open && loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n</mat-autocomplete>\n\n<ng-template #disable>\n    <input\n        matInput\n        class=\"disabled-input\"\n        type=\"text\"\n        [disabled]=\"true\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [required]=\"required\"\n    />\n</ng-template>\n", styles: ["nice-typeahead{width:100%}nice-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-typeahead .disabled-input{flex:1 1 95%}nice-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "component", type: i1$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i1$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-typeahead", encapsulation: ViewEncapsulation.None, providers: [
@@ -2552,7 +2577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         }
                     ], template: "<div class=\"flex\" *ngIf=\"!disabled; else disable\">\n    <input\n        #searchInput\n        matInput\n        class=\"flex-auto\"\n        type=\"text\"\n        name=\"mat-autocomplete\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [matAutocomplete]=\"auto\"\n        [required]=\"required\"\n    />\n    <mat-icon *ngIf=\"value && !loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n        close\n    </mat-icon>\n\n    <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"loading\"></mat-spinner>\n</div>\n<mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"panelWidth\"\n    [class]=\"panelClass\"\n    (optionActivated)=\"onOptionActivated($event)\"\n    (optionSelected)=\"onOptionSelected($event)\"\n    (closed)=\"updateState(false)\"\n    (opened)=\"updateState(true)\"\n    (optionsScroll)=\"onEndScroll()\"\n    autoActiveFirstOption\n>\n    <mat-progress-bar *ngIf=\"open && loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n    <mat-option *ngFor=\"let option of values\" [value]=\"option\">\n        <ng-container\n            *ngIf=\"optionTemplate; else format\"\n            [ngTemplateOutlet]=\"optionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: option }\">\n        </ng-container>\n        <ng-template #format>\n            {{ formatLabel(option) }}\n        </ng-template>\n    </mat-option>\n    <mat-option *ngIf=\"!values?.length && !allowNotFoundItems\" disabled>\n        <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n            {{ emptyPlaceholder }}\n        </ng-container>\n        <ng-template #defaultEmptyPlaceholder>\n            {{ \"components.typeahead.no_item_found\" | translate }}\n        </ng-template>\n    </mat-option>\n    <mat-option *ngIf=\"!values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n        <span class=\"italic\">{{ searchControl.value }}</span>\n    </mat-option>\n    <mat-progress-bar *ngIf=\"open && loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n</mat-autocomplete>\n\n<ng-template #disable>\n    <input\n        matInput\n        class=\"disabled-input\"\n        type=\"text\"\n        [disabled]=\"true\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [required]=\"required\"\n    />\n</ng-template>\n", styles: ["nice-typeahead{width:100%}nice-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-typeahead .disabled-input{flex:1 1 95%}nice-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.NgControl, decorators: [{
+        return [{ type: i1$3.NgControl, decorators: [{
                         type: Optional
                     }, {
                         type: Self
@@ -3169,14 +3194,14 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
         });
     }
 }
-NiceAsyncTypeaheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceAsyncTypeaheadComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.NgForm, optional: true }, { token: i1$2.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: NiceAsyncTypeaheadService }], target: i0.ɵɵFactoryTarget.Component });
+NiceAsyncTypeaheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceAsyncTypeaheadComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }, { token: i1$3.NgForm, optional: true }, { token: i1$3.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: NiceAsyncTypeaheadService }], target: i0.ɵɵFactoryTarget.Component });
 NiceAsyncTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceAsyncTypeaheadComponent, selector: "nice-async-typeahead", inputs: { resource: "resource", searchOptions: "searchOptions", autoReload: "autoReload", preloadResource: "preloadResource", allowNotFoundItems: "allowNotFoundItems", panelClass: "panelClass", bindValue: "bindValue", bindLabel: "bindLabel", placeholder: "placeholder", emptyPlaceholder: "emptyPlaceholder", optionTemplate: "optionTemplate", filterFn: "filterFn", labelFormatFn: "labelFormatFn", disabled: "disabled", value: "value", required: "required" }, outputs: { entityRemoved: "entityRemoved", selected: "selected" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [
         {
             provide: MatFormFieldControl,
             useExisting: NiceAsyncTypeaheadComponent
         },
         NiceAsyncTypeaheadService
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{ loading: service.loading$ | async, loadingPage: service.loadingPage$ | async, values: service.filteredItems$ | async } as ctx\">\n    <div class=\"flex\" *ngIf=\"!disabled; else disable\">\n        <input\n            #searchInput\n            matInput\n            class=\"flex-auto\"\n            type=\"text\"\n            name=\"mat-autocomplete\"\n            [disabled]=\"$any(disabled)\"\n            [placeholder]=\"placeholder\"\n            [formControl]=\"searchControl\"\n            [matAutocomplete]=\"auto\"\n            [required]=\"$any(required)\"\n            (focus)=\"focusChanged(true)\"\n        />\n        <mat-icon *ngIf=\"value && !ctx.loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n            close\n        </mat-icon>\n\n        <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"ctx.loading\"></mat-spinner>\n    </div>\n    <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        [panelWidth]=\"panelWidth\"\n        [class]=\"panelClass\"\n        (optionActivated)=\"onOptionActivated($event)\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        (closed)=\"updateState(false)\"\n        (opened)=\"updateState(true)\"\n        (optionsScroll)=\"onEndScroll()\"\n        autoActiveFirstOption\n    >\n        <mat-progress-bar *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n        <mat-option *ngFor=\"let option of ctx.values\" [value]=\"option\">\n            <ng-container\n                *ngIf=\"optionTemplate; else format\"\n                [ngTemplateOutlet]=\"optionTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-container>\n            <ng-template #format>\n                {{ formatLabel(option) }}\n            </ng-template>\n        </mat-option>\n        <mat-option *ngIf=\"!ctx.values?.length && !allowNotFoundItems\" disabled>\n            <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n                {{ emptyPlaceholder }}\n            </ng-container>\n            <ng-template #defaultEmptyPlaceholder>\n                {{ \"components.typeahead.no_item_found\" | translate }}\n            </ng-template>\n        </mat-option>\n        <mat-option *ngIf=\"!ctx.values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n            <span class=\"italic\">{{ searchControl.value }}</span>\n        </mat-option>\n        <mat-progress-bar *ngIf=\"open && ctx.loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n    </mat-autocomplete>\n</ng-container>\n\n<ng-template #disable>\n    <input\n        matInput\n        class=\"disabled-input\"\n        type=\"text\"\n        [disabled]=\"true\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [required]=\"$any(required)\"\n    />\n</ng-template>\n", styles: ["nice-async-typeahead{width:100%}nice-async-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-async-typeahead .disabled-input{flex:1 1 95%}nice-async-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-async-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "directive", type: i1$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{ loading: service.loading$ | async, loadingPage: service.loadingPage$ | async, values: service.filteredItems$ | async } as ctx\">\n    <div class=\"flex\" *ngIf=\"!disabled; else disable\">\n        <input\n            #searchInput\n            matInput\n            class=\"flex-auto\"\n            type=\"text\"\n            name=\"mat-autocomplete\"\n            [disabled]=\"$any(disabled)\"\n            [placeholder]=\"placeholder\"\n            [formControl]=\"searchControl\"\n            [matAutocomplete]=\"auto\"\n            [required]=\"$any(required)\"\n            (focus)=\"focusChanged(true)\"\n        />\n        <mat-icon *ngIf=\"value && !ctx.loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n            close\n        </mat-icon>\n\n        <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"ctx.loading\"></mat-spinner>\n    </div>\n    <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        [panelWidth]=\"panelWidth\"\n        [class]=\"panelClass\"\n        (optionActivated)=\"onOptionActivated($event)\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        (closed)=\"updateState(false)\"\n        (opened)=\"updateState(true)\"\n        (optionsScroll)=\"onEndScroll()\"\n        autoActiveFirstOption\n    >\n        <mat-progress-bar *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n        <mat-option *ngFor=\"let option of ctx.values\" [value]=\"option\">\n            <ng-container\n                *ngIf=\"optionTemplate; else format\"\n                [ngTemplateOutlet]=\"optionTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-container>\n            <ng-template #format>\n                {{ formatLabel(option) }}\n            </ng-template>\n        </mat-option>\n        <mat-option *ngIf=\"!ctx.values?.length && !allowNotFoundItems\" disabled>\n            <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n                {{ emptyPlaceholder }}\n            </ng-container>\n            <ng-template #defaultEmptyPlaceholder>\n                {{ \"components.typeahead.no_item_found\" | translate }}\n            </ng-template>\n        </mat-option>\n        <mat-option *ngIf=\"!ctx.values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n            <span class=\"italic\">{{ searchControl.value }}</span>\n        </mat-option>\n        <mat-progress-bar *ngIf=\"open && ctx.loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n    </mat-autocomplete>\n</ng-container>\n\n<ng-template #disable>\n    <input\n        matInput\n        class=\"disabled-input\"\n        type=\"text\"\n        [disabled]=\"true\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [required]=\"$any(required)\"\n    />\n</ng-template>\n", styles: ["nice-async-typeahead{width:100%}nice-async-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-async-typeahead .disabled-input{flex:1 1 95%}nice-async-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-async-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "directive", type: i1$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i1$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceAsyncTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-async-typeahead", encapsulation: ViewEncapsulation.None, providers: [
@@ -3187,13 +3212,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         NiceAsyncTypeaheadService
                     ], template: "<ng-container *ngIf=\"{ loading: service.loading$ | async, loadingPage: service.loadingPage$ | async, values: service.filteredItems$ | async } as ctx\">\n    <div class=\"flex\" *ngIf=\"!disabled; else disable\">\n        <input\n            #searchInput\n            matInput\n            class=\"flex-auto\"\n            type=\"text\"\n            name=\"mat-autocomplete\"\n            [disabled]=\"$any(disabled)\"\n            [placeholder]=\"placeholder\"\n            [formControl]=\"searchControl\"\n            [matAutocomplete]=\"auto\"\n            [required]=\"$any(required)\"\n            (focus)=\"focusChanged(true)\"\n        />\n        <mat-icon *ngIf=\"value && !ctx.loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n            close\n        </mat-icon>\n\n        <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"ctx.loading\"></mat-spinner>\n    </div>\n    <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        [panelWidth]=\"panelWidth\"\n        [class]=\"panelClass\"\n        (optionActivated)=\"onOptionActivated($event)\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        (closed)=\"updateState(false)\"\n        (opened)=\"updateState(true)\"\n        (optionsScroll)=\"onEndScroll()\"\n        autoActiveFirstOption\n    >\n        <mat-progress-bar *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n        <mat-option *ngFor=\"let option of ctx.values\" [value]=\"option\">\n            <ng-container\n                *ngIf=\"optionTemplate; else format\"\n                [ngTemplateOutlet]=\"optionTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-container>\n            <ng-template #format>\n                {{ formatLabel(option) }}\n            </ng-template>\n        </mat-option>\n        <mat-option *ngIf=\"!ctx.values?.length && !allowNotFoundItems\" disabled>\n            <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n                {{ emptyPlaceholder }}\n            </ng-container>\n            <ng-template #defaultEmptyPlaceholder>\n                {{ \"components.typeahead.no_item_found\" | translate }}\n            </ng-template>\n        </mat-option>\n        <mat-option *ngIf=\"!ctx.values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n            <span class=\"italic\">{{ searchControl.value }}</span>\n        </mat-option>\n        <mat-progress-bar *ngIf=\"open && ctx.loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n    </mat-autocomplete>\n</ng-container>\n\n<ng-template #disable>\n    <input\n        matInput\n        class=\"disabled-input\"\n        type=\"text\"\n        [disabled]=\"true\"\n        [placeholder]=\"placeholder\"\n        [formControl]=\"searchControl\"\n        [required]=\"$any(required)\"\n    />\n</ng-template>\n", styles: ["nice-async-typeahead{width:100%}nice-async-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-async-typeahead .disabled-input{flex:1 1 95%}nice-async-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-async-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.NgControl, decorators: [{
+        return [{ type: i1$3.NgControl, decorators: [{
                         type: Optional
                     }, {
                         type: Self
-                    }] }, { type: i1$2.NgForm, decorators: [{
+                    }] }, { type: i1$3.NgForm, decorators: [{
                         type: Optional
-                    }] }, { type: i1$2.FormGroupDirective, decorators: [{
+                    }] }, { type: i1$3.FormGroupDirective, decorators: [{
                         type: Optional
                     }] }, { type: i2$1.ErrorStateMatcher }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: NiceAsyncTypeaheadService }];
     }, propDecorators: { input: [{
@@ -3368,14 +3393,14 @@ class NiceBaseFormComponent {
         return null;
     }
 }
-NiceBaseFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceBaseFormComponent, deps: [{ token: i1$5.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
+NiceBaseFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceBaseFormComponent, deps: [{ token: i1$6.GeneratedFormGroup }], target: i0.ɵɵFactoryTarget.Component });
 NiceBaseFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceBaseFormComponent, selector: "ng-component", inputs: { loading: "loading" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: CdkStepper, descendants: true }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceBaseFormComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.GeneratedFormGroup }]; }, propDecorators: { stepper: [{
+        }], ctorParameters: function () { return [{ type: i1$6.GeneratedFormGroup }]; }, propDecorators: { stepper: [{
                 type: ViewChild,
                 args: [CdkStepper]
             }], loading: [{
@@ -3532,11 +3557,11 @@ class PictureModalService {
         overlayRef.backdropClick().subscribe(() => overlayRef.dispose());
     }
 }
-PictureModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PictureModalService, deps: [{ token: i1$6.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+PictureModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PictureModalService, deps: [{ token: i1$7.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
 PictureModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PictureModalService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PictureModalService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$6.Overlay }]; } });
+        }], ctorParameters: function () { return [{ type: i1$7.Overlay }]; } });
 
 class CarouselLayoutPipe {
     transform(value, direction) {
@@ -3640,7 +3665,7 @@ class NiceCollapsableComponent {
     }
 }
 NiceCollapsableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceCollapsableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NiceCollapsableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceCollapsableComponent, selector: "nice-collapsable", inputs: { open: "open" }, outputs: { openChange: "openChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nice-collapse\">\n    <input type=\"checkbox\" class=\"peer cursor-pointer\" [formControl]=\"control\"/>\n    <div class=\"collapse-title\">\n        <ng-content select=\"[niceCollapsableTitle]\"></ng-content>\n    </div>\n    <div class=\"collapse-content\">\n        <div class=\"content\">\n            <ng-content select=\"[niceCollapsableContent]\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceCollapsableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceCollapsableComponent, selector: "nice-collapsable", inputs: { open: "open" }, outputs: { openChange: "openChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nice-collapse\">\n    <input type=\"checkbox\" class=\"peer cursor-pointer\" [formControl]=\"control\"/>\n    <div class=\"collapse-title\">\n        <ng-content select=\"[niceCollapsableTitle]\"></ng-content>\n    </div>\n    <div class=\"collapse-content\">\n        <div class=\"content\">\n            <ng-content select=\"[niceCollapsableContent]\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceCollapsableComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-collapsable", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nice-collapse\">\n    <input type=\"checkbox\" class=\"peer cursor-pointer\" [formControl]=\"control\"/>\n    <div class=\"collapse-title\">\n        <ng-content select=\"[niceCollapsableTitle]\"></ng-content>\n    </div>\n    <div class=\"collapse-content\">\n        <div class=\"content\">\n            <ng-content select=\"[niceCollapsableContent]\"></ng-content>\n        </div>\n    </div>\n</div>\n" }]
@@ -3773,7 +3798,7 @@ class RangePresetComponent {
     }
 }
 RangePresetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RangePresetComponent, deps: [{ token: i2$1.DateAdapter }, { token: i2$3.MatDateRangePicker }, { token: NiceDateRangePickerServiceService }], target: i0.ɵɵFactoryTarget.Component });
-RangePresetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RangePresetComponent, selector: "nice-range-preset", ngImport: i0, template: "<mat-card class=\"mat-elevation-z3\">\n    <button\n            *ngIf=\"allowClear$ | async\"\n            mat-button\n            (click)=\"clearRange()\"\n    >\n        {{ \"nice_ui_kit.date_range_picker.clear\" | translate }}\n    </button>\n\n    <button\n        *ngFor=\"let item of customPresets\"\n        mat-button\n        (click)=\"selectRange(item)\"\n    >\n        {{ \"nice_ui_kit.date_range_picker.presets.\" + item | translate }}\n    </button>\n</mat-card>\n", styles: [":host{position:absolute;width:200px;left:-200px}@media screen and (max-width: 959px){:host{z-index:1000;left:50px!important}}button{width:100%;text-align:left;text-transform:unset!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RangePresetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RangePresetComponent, selector: "nice-range-preset", ngImport: i0, template: "<mat-card class=\"mat-elevation-z3\">\n    <button\n            *ngIf=\"allowClear$ | async\"\n            mat-button\n            (click)=\"clearRange()\"\n    >\n        {{ \"nice_ui_kit.date_range_picker.clear\" | translate }}\n    </button>\n\n    <button\n        *ngFor=\"let item of customPresets\"\n        mat-button\n        (click)=\"selectRange(item)\"\n    >\n        {{ \"nice_ui_kit.date_range_picker.presets.\" + item | translate }}\n    </button>\n</mat-card>\n", styles: [":host{position:absolute;width:200px;left:-200px}@media screen and (max-width: 959px){:host{z-index:1000;left:50px!important}}button{width:100%;text-align:left;text-transform:unset!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RangePresetComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-range-preset", changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"mat-elevation-z3\">\n    <button\n            *ngIf=\"allowClear$ | async\"\n            mat-button\n            (click)=\"clearRange()\"\n    >\n        {{ \"nice_ui_kit.date_range_picker.clear\" | translate }}\n    </button>\n\n    <button\n        *ngFor=\"let item of customPresets\"\n        mat-button\n        (click)=\"selectRange(item)\"\n    >\n        {{ \"nice_ui_kit.date_range_picker.presets.\" + item | translate }}\n    </button>\n</mat-card>\n", styles: [":host{position:absolute;width:200px;left:-200px}@media screen and (max-width: 959px){:host{z-index:1000;left:50px!important}}button{width:100%;text-align:left;text-transform:unset!important}\n"] }]
@@ -3854,12 +3879,12 @@ class LocalizedDatePipe {
         return "MMMM d";
     }
 }
-LocalizedDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedDatePipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+LocalizedDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedDatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
 LocalizedDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LocalizedDatePipe, name: "localizedDate" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedDatePipe, decorators: [{
             type: Pipe,
             args: [{ name: "localizedDate" }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
 class NiceDateRangePickerComponent {
     constructor() {
@@ -3880,10 +3905,32 @@ class NiceDateRangePickerComponent {
             to: this.max
         };
         this.formGroup.patchValue(this.value);
-        this.formGroup.valueChanges.subscribe((_) => {
+        this.formGroup.valueChanges.pipe(startWith(this.value), pairwise(), filter(([before, after]) => {
+            /**
+             * We filter out the value changes to only emit when the selection is completed/
+             */
+            if (!after.from && !after.to) {
+                return true;
+            }
+            // This is the middle of the selection
+            if (after.from && !after.to) {
+                return false;
+            }
+            // This means that the selection is done
+            if (!before.to && after.to) {
+                return true;
+            }
+            // This is an edge case when we select a new range with an active range selected.
+            // The after.to will be at null after the after.from is emitted
+            if (!isSameDay(before.from, after.from) && isSameDay(before.to, after.to)) {
+                return false;
+            }
+            // Skip if noting has changed
+            return !(isSameDay(before.from, after.from) && !isSameDay(before.to, after.to));
+        })).subscribe((_) => {
             var _a;
             this.value = this.formGroup.getRawValue();
-            (_a = this.propage) === null || _a === void 0 ? void 0 : _a.call(this, this.value);
+            (_a = this.propagate) === null || _a === void 0 ? void 0 : _a.call(this, this.value);
         });
     }
     writeValue(value) {
@@ -3891,7 +3938,7 @@ class NiceDateRangePickerComponent {
         this.formGroup.patchValue(this.value);
     }
     registerOnChange(fn) {
-        this.propage = fn;
+        this.propagate = fn;
     }
     registerOnTouched(fn) { }
 }
@@ -3902,7 +3949,7 @@ NiceDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             useExisting: forwardRef(() => NiceDateRangePickerComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDateRangePicker, descendants: true }], ngImport: i0, template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i1$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], ngImport: i0, template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-date-range-picker", encapsulation: ViewEncapsulation.None, providers: [
@@ -3911,11 +3958,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: forwardRef(() => NiceDateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"] }]
-        }], propDecorators: { picker: [{
-                type: ViewChild,
-                args: [MatDateRangePicker]
-            }], min: [{
+                    ], template: "<div class=\"nice-date-picker-container\">\n    <div class=\"nice-date-picker-header\">\n        <div class=\"from-to\">\n            <ng-container *ngIf=\"value?.from\">\n                {{ value.from | localizedDate: \"longDate\" }}\n            </ng-container>\n            <ng-container *ngIf=\"value?.to\">\n                <div class=\"separator\">-</div>\n                {{ value.to | localizedDate: \"longDate\" }}\n            </ng-container>\n        </div>\n    </div>\n\n    <mat-date-range-input [formGroup]=\"formGroup\" [max]=\"nowIsMax ? now : null\" [rangePicker]=\"picker\">\n        <input formControlName=\"from\" class=\"hidden-input\" matStartDate placeholder=\"Start date\">\n        <input formControlName=\"to\" class=\"hidden-input\" matEndDate placeholder=\"End date\">\n    </mat-date-range-input>\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n    <mat-date-range-picker\n            [calendarHeaderComponent]=\"HeaderComponent\"\n            #picker\n    ></mat-date-range-picker>\n</div>\n", styles: ["nice-date-range-picker .mat-date-range-input{width:0;height:0;padding:0;margin:0;border:none;visibility:hidden}\n"] }]
+        }], propDecorators: { min: [{
                 type: Input
             }], max: [{
                 type: Input
@@ -3936,12 +3980,12 @@ class BooleanPipe {
         return this.translateService.instant(value ? "general.yes" : "general.no");
     }
 }
-BooleanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BooleanPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+BooleanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BooleanPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
 BooleanPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: BooleanPipe, name: "boolean" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: BooleanPipe, decorators: [{
             type: Pipe,
             args: [{ name: "boolean" }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
 class CapitalizeFirstLetterPipe {
     transform(value) {
@@ -4075,12 +4119,12 @@ class LocalizedBooleanPipe {
         return this.translateService.instant(`general.bool_${value}`);
     }
 }
-LocalizedBooleanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedBooleanPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+LocalizedBooleanPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedBooleanPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
 LocalizedBooleanPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LocalizedBooleanPipe, name: "localizedBoolean" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedBooleanPipe, decorators: [{
             type: Pipe,
             args: [{ name: "localizedBoolean" }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
 class LocalizedCurrencyPipe extends CurrencyPipe {
     constructor(translateService) {
@@ -4088,12 +4132,12 @@ class LocalizedCurrencyPipe extends CurrencyPipe {
         this.translateService = translateService;
     }
 }
-LocalizedCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedCurrencyPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+LocalizedCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedCurrencyPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
 LocalizedCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LocalizedCurrencyPipe, name: "localizedCurrency" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{ name: "localizedCurrency" }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
 class LocalizedDateOnlyPipe {
     constructor(translateService) {
@@ -4104,12 +4148,12 @@ class LocalizedDateOnlyPipe {
         return pipe.transform(value, pattern, fallbackWithNull, "UTC");
     }
 }
-LocalizedDateOnlyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedDateOnlyPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+LocalizedDateOnlyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedDateOnlyPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
 LocalizedDateOnlyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LocalizedDateOnlyPipe, name: "localizedDateOnly" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalizedDateOnlyPipe, decorators: [{
             type: Pipe,
             args: [{ name: "localizedDateOnly" }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
 // Formats minutes in hh:mm format.
 class MinutesToTimePipe {
@@ -4177,12 +4221,12 @@ class PhonePipe {
         return `${formattedPhoneNumber} #${extension}`;
     }
 }
-PhonePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PhonePipe, deps: [{ token: i1$7.NgxMaskService }], target: i0.ɵɵFactoryTarget.Pipe });
+PhonePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PhonePipe, deps: [{ token: i1$8.NgxMaskService }], target: i0.ɵɵFactoryTarget.Pipe });
 PhonePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PhonePipe, name: "phone" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PhonePipe, decorators: [{
             type: Pipe,
             args: [{ name: "phone" }]
-        }], ctorParameters: function () { return [{ type: i1$7.NgxMaskService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$8.NgxMaskService }]; } });
 
 class PostalCodePipe {
     constructor(maskService) {
@@ -4195,12 +4239,12 @@ class PostalCodePipe {
         return "";
     }
 }
-PostalCodePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PostalCodePipe, deps: [{ token: i1$7.NgxMaskService }], target: i0.ɵɵFactoryTarget.Pipe });
+PostalCodePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PostalCodePipe, deps: [{ token: i1$8.NgxMaskService }], target: i0.ɵɵFactoryTarget.Pipe });
 PostalCodePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PostalCodePipe, name: "postalCode" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PostalCodePipe, decorators: [{
             type: Pipe,
             args: [{ name: "postalCode" }]
-        }], ctorParameters: function () { return [{ type: i1$7.NgxMaskService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$8.NgxMaskService }]; } });
 
 class RoundPipe {
     transform(input) {
@@ -4259,12 +4303,12 @@ class SanitizeBypassPipe {
         }
     }
 }
-SanitizeBypassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SanitizeBypassPipe, deps: [{ token: i1$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SanitizeBypassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SanitizeBypassPipe, deps: [{ token: i1$9.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
 SanitizeBypassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SanitizeBypassPipe, name: "sanitizeBypass" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SanitizeBypassPipe, decorators: [{
             type: Pipe,
             args: [{ name: "sanitizeBypass" }]
-        }], ctorParameters: function () { return [{ type: i1$8.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$9.DomSanitizer }]; } });
 
 class TrackByPropPipe {
     transform(prop) {
@@ -4682,11 +4726,11 @@ class NiceMediaWatcherService {
         }
     }
 }
-NiceMediaWatcherService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceMediaWatcherService, deps: [{ token: i1$9.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceMediaWatcherService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceMediaWatcherService, deps: [{ token: i1$a.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceMediaWatcherService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceMediaWatcherService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceMediaWatcherService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$9.BreakpointObserver }]; } });
+        }], ctorParameters: function () { return [{ type: i1$a.BreakpointObserver }]; } });
 
 class NiceMediaWatcherModule {
     /**
@@ -4740,7 +4784,7 @@ class NiceSplashScreenService {
         this._document.body.classList.add("nice-splash-screen-hidden");
     }
 }
-NiceSplashScreenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSplashScreenService, deps: [{ token: DOCUMENT }, { token: i1$a.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceSplashScreenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSplashScreenService, deps: [{ token: DOCUMENT }, { token: i1$b.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceSplashScreenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSplashScreenService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSplashScreenService, decorators: [{
             type: Injectable
@@ -4748,7 +4792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
-                    }] }, { type: i1$a.Router }];
+                    }] }, { type: i1$b.Router }];
     } });
 
 class NiceSplashScreenModule {
@@ -5095,12 +5139,12 @@ class NiceDrawerComponent {
         this.openedChanged.next(open);
     }
 }
-NiceDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceDrawerComponent, deps: [{ token: i1$b.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NiceDrawerService }, { token: NiceUtilsService }], target: i0.ɵɵFactoryTarget.Component });
+NiceDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceDrawerComponent, deps: [{ token: i1$c.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NiceDrawerService }, { token: NiceUtilsService }], target: i0.ɵɵFactoryTarget.Component });
 NiceDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceDrawerComponent, selector: "nice-drawer", inputs: { fixed: "fixed", mode: "mode", width: "width", name: "name", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { fixedChanged: "fixedChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged" }, host: { listeners: { "mouseenter": "_onMouseenter()", "mouseleave": "_onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, exportAs: ["niceDrawer"], usesOnChanges: true, ngImport: i0, template: "<div class=\"nice-drawer-toggle\">\n    <ng-content select=\"[niceDrawerToggle]\"></ng-content>\n</div>\n\n<div class=\"nice-drawer-content\" [style.visibility]=\"opened ? 'visible' : 'hidden'\">\n    <ng-content></ng-content>\n</div>\n", styles: [""], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-drawer", encapsulation: ViewEncapsulation.None, exportAs: "niceDrawer", template: "<div class=\"nice-drawer-toggle\">\n    <ng-content select=\"[niceDrawerToggle]\"></ng-content>\n</div>\n\n<div class=\"nice-drawer-content\" [style.visibility]=\"opened ? 'visible' : 'hidden'\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$b.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NiceDrawerService }, { type: NiceUtilsService }]; }, propDecorators: { fixed: [{
+        }], ctorParameters: function () { return [{ type: i1$c.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NiceDrawerService }, { type: NiceUtilsService }]; }, propDecorators: { fixed: [{
                 type: Input
             }], mode: [{
                 type: Input
@@ -5199,8 +5243,8 @@ class ExportBottomSheetComponent {
         strategy.onClickExport();
     }
 }
-ExportBottomSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ExportBottomSheetComponent, deps: [{ token: MAT_BOTTOM_SHEET_DATA }, { token: i1$c.MatBottomSheetRef }, { token: ExportBottomSheetService }], target: i0.ɵɵFactoryTarget.Component });
-ExportBottomSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ExportBottomSheetComponent, selector: "nice-export-bottom-sheet", ngImport: i0, template: "<mat-nav-list>\n    <a *ngFor=\"let strategy of exportBottomSheetConfig.exportStrategies\" mat-list-item (click)=\"clickExport(strategy)\">\n        <i [ngClass]=\"getStrategyIcon(strategy)\" mat-list-icon></i>\n        <span mat-line [innerHtml]=\"'components.export_bottom_sheet.types.' + strategy.type | translate\"></span>\n    </a>\n</mat-nav-list>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+ExportBottomSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ExportBottomSheetComponent, deps: [{ token: MAT_BOTTOM_SHEET_DATA }, { token: i1$d.MatBottomSheetRef }, { token: ExportBottomSheetService }], target: i0.ɵɵFactoryTarget.Component });
+ExportBottomSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ExportBottomSheetComponent, selector: "nice-export-bottom-sheet", ngImport: i0, template: "<mat-nav-list>\n    <a *ngFor=\"let strategy of exportBottomSheetConfig.exportStrategies\" mat-list-item (click)=\"clickExport(strategy)\">\n        <i [ngClass]=\"getStrategyIcon(strategy)\" mat-list-icon></i>\n        <span mat-line [innerHtml]=\"'components.export_bottom_sheet.types.' + strategy.type | translate\"></span>\n    </a>\n</mat-nav-list>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ExportBottomSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-export-bottom-sheet", template: "<mat-nav-list>\n    <a *ngFor=\"let strategy of exportBottomSheetConfig.exportStrategies\" mat-list-item (click)=\"clickExport(strategy)\">\n        <i [ngClass]=\"getStrategyIcon(strategy)\" mat-list-icon></i>\n        <span mat-line [innerHtml]=\"'components.export_bottom_sheet.types.' + strategy.type | translate\"></span>\n    </a>\n</mat-nav-list>\n" }]
@@ -5208,7 +5252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_BOTTOM_SHEET_DATA]
-                    }] }, { type: i1$c.MatBottomSheetRef }, { type: ExportBottomSheetService }];
+                    }] }, { type: i1$d.MatBottomSheetRef }, { type: ExportBottomSheetService }];
     } });
 
 class NiceExportBottomSheetModule {
@@ -5265,7 +5309,7 @@ NiceFormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
         <div [@animation]="increment" *ngIf="message">
             <mat-error>{{ message }}</mat-error>
         </div>
-    `, isInline: true, styles: [".form-error-show .mat-mdc-form-field-subscript-wrapper.override-height:before{height:32px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }], animations: [
+    `, isInline: true, styles: [".form-error-show .mat-mdc-form-field-subscript-wrapper.override-height:before{height:32px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }], animations: [
         trigger("animation", [
             transition(":increment", [style({ opacity: 0 }), animate("200ms ease-in", style({ opacity: 1 }))]),
             transition(":enter", [
@@ -5385,12 +5429,12 @@ class NiceControlStatusDirective {
         this.ref.instance.error = text;
     }
 }
-NiceControlStatusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceControlStatusDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$4.MatFormField }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceControlStatusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceControlStatusDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$5.MatFormField }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
 NiceControlStatusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceControlStatusDirective, selector: "[niceControlStatus]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceControlStatusDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceControlStatus]" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$4.MatFormField }, { type: i1.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$5.MatFormField }, { type: i1$1.TranslateService }]; } });
 
 class NiceFormErrorModule {
 }
@@ -6386,7 +6430,7 @@ class NiceImageCropperComponent {
     }
 }
 NiceImageCropperComponent.и = "NiceImageCropper";
-NiceImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceImageCropperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i1$d.ViewportRuler }], target: i0.ɵɵFactoryTarget.Component });
+NiceImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceImageCropperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i1$e.ViewportRuler }], target: i0.ɵɵFactoryTarget.Component });
 NiceImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceImageCropperComponent, selector: "nice-img-cropper, nice-image-cropper", inputs: { config: "config", scale: "scale", maxFileSize: "maxFileSize" }, outputs: { scaleChange: "scaleChange", minScaleChange: "minScale", maxScaleChange: "maxScale", imageLoaded: "imageLoaded", ready: "ready", cropped: "cropped", cleaned: "cleaned", error: "error" }, viewQueries: [{ propertyName: "_imgContainer", first: true, predicate: ["_imgContainer"], descendants: true, static: true }, { propertyName: "_areaRef", first: true, predicate: ["_area"], descendants: true, read: ElementRef }, { propertyName: "_imgCanvas", first: true, predicate: ["_imgCanvas"], descendants: true, static: true }], ngImport: i0, template: "<!-- (selectstart): On Safari starting to slide temporarily triggers text selection mode which\nshow the wrong cursor. We prevent it by stopping the `selectstart` event. -->\n<div class=\"image-container\" #_imgContainer\n     (selectstart)=\"$event.preventDefault()\"\n>\n    <canvas #_imgCanvas></canvas>\n</div>\n<nice-cropper-area\n    #_area\n    *ngIf=\"_isLoadedImg\"\n    [round]=\"!!config.round\"\n    [resizableArea]=\"!!config.resizableArea\"\n    [keepAspectRatio]=\"!!config.keepAspectRatio\"\n    [ngStyle]=\"{\n        width: config.width + 'px',\n        height: config.height + 'px'\n    }\"\n></nice-cropper-area>\n<button class=\"close-button\" mat-icon-button *ngIf=\"_isLoadedImg\" (click)=\"clean()\">\n    <mat-icon>arrow_back</mat-icon>\n</button>\n", styles: ["nice-image-cropper,nice-img-cropper{-webkit-user-select:none;user-select:none;display:flex;overflow:hidden;position:relative;justify-content:center;align-items:center}nice-image-cropper .image-container,nice-img-cropper .image-container{cursor:move;position:absolute;top:0;left:0;display:flex;touch-action:none}nice-image-cropper .image-container>canvas,nice-img-cropper .image-container>canvas{display:block}nice-image-cropper .close-button,nice-img-cropper .close-button{position:absolute;top:8px;left:8px;background-color:#fff!important;border-radius:4px;height:20px;width:20px;min-height:20px}nice-image-cropper .close-button .mat-icon,nice-img-cropper .close-button .mat-icon{height:14px!important;width:14px!important;font-size:14px!important;line-height:14px!important}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i3.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i4.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return NiceCropperAreaComponent; }), selector: "nice-cropper-area", inputs: ["keepAspectRatio", "round", "resizableArea"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceImageCropperComponent, decorators: [{
             type: Component,
@@ -6395,7 +6439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
-                    }] }, { type: i1$d.ViewportRuler }];
+                    }] }, { type: i1$e.ViewportRuler }];
     }, propDecorators: { _imgContainer: [{
                 type: ViewChild,
                 args: ["_imgContainer", { static: true }]
@@ -6942,7 +6986,7 @@ class NiceLoadingSpinnerComponent {
     }
 }
 NiceLoadingSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NiceLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceLoadingSpinnerComponent, selector: "nice-loading-spinner", inputs: { loading: "loading", mode: "mode", diameter: "diameter" }, ngImport: i0, template: "<mat-spinner [diameter]=\"diameter\" [mode]=\"mode\" [color]=\"'accent'\"></mat-spinner>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+NiceLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceLoadingSpinnerComponent, selector: "nice-loading-spinner", inputs: { loading: "loading", mode: "mode", diameter: "diameter" }, ngImport: i0, template: "<mat-spinner [diameter]=\"diameter\" [mode]=\"mode\" [color]=\"'accent'\"></mat-spinner>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-loading-spinner", template: "<mat-spinner [diameter]=\"diameter\" [mode]=\"mode\" [color]=\"'accent'\"></mat-spinner>\n", styles: [":host{display:inline-block}\n"] }]
@@ -6976,7 +7020,7 @@ class DynamicOverlay extends Overlay {
         this._dynamicOverlayContainer.setContainerElement(containerElement);
     }
 }
-DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicOverlay, deps: [{ token: DOCUMENT }, { token: i1$6.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$6.OverlayPositionBuilder }, { token: i1$6.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: i3$1.Directionality }, { token: i0.RendererFactory2 }, { token: i2.Location }, { token: i1$6.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicOverlay, deps: [{ token: DOCUMENT }, { token: i1$7.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$7.OverlayPositionBuilder }, { token: i1$7.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: i3$1.Directionality }, { token: i0.RendererFactory2 }, { token: i2.Location }, { token: i1$7.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
 DynamicOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicOverlay, providedIn: "root" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DynamicOverlay, decorators: [{
             type: Injectable,
@@ -6985,7 +7029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
-                    }] }, { type: i1$6.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1$6.OverlayPositionBuilder }, { type: i1$6.OverlayKeyboardDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: i3$1.Directionality }, { type: i0.RendererFactory2 }, { type: i2.Location }, { type: i1$6.OverlayOutsideClickDispatcher }];
+                    }] }, { type: i1$7.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1$7.OverlayPositionBuilder }, { type: i1$7.OverlayKeyboardDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: i3$1.Directionality }, { type: i0.RendererFactory2 }, { type: i2.Location }, { type: i1$7.OverlayOutsideClickDispatcher }];
     } });
 
 const NICE_LOADING_OPTIONS = new InjectionToken("nice_loading_options");
@@ -7081,6 +7125,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class NiceLoadingToastComponent {
+    get appearance() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.appearance) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.appearance;
+    }
+    get color() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.color;
+    }
+    get showIcon() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showIcon) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.showIcon;
+    }
+    get type() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.type;
+    }
+    constructor(data) {
+        this.data = data;
+    }
+}
+NiceLoadingToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastComponent, deps: [{ token: MAT_SNACK_BAR_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NiceLoadingToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceLoadingToastComponent, selector: "nice-loading-toast", inputs: { message: "message", options: "options" }, ngImport: i0, template: "<nice-alert class=\"toast\" disableAnimation [appearance]=\"appearance\" [color]=\"color\" [dismissible]=\"false\" [type]=\"type\" [showIcon]=\"showIcon\">\n    <div class=\"full flex justify-between gap-8\" niceAlertTitle>\n        <span class=\"flex-auto\">{{ data?.message ?? message }}</span>\n\n        <div>\n            <mat-spinner [diameter]=\"21\"></mat-spinner>\n        </div>\n    </div>\n</nice-alert>\n", styles: [".nice-loading-toast .mdc-snackbar__surface{background:transparent!important;box-shadow:none!important;padding:0;min-width:unset}.nice-loading-toast .toast{padding:16px;border-radius:4px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NiceAlertComponent, selector: "nice-alert", inputs: ["appearance", "dismissed", "dismissible", "disableAnimation", "name", "showIcon", "type", "color"], outputs: ["dismissedChanged"], exportAs: ["niceAlert"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nice-loading-toast", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nice-alert class=\"toast\" disableAnimation [appearance]=\"appearance\" [color]=\"color\" [dismissible]=\"false\" [type]=\"type\" [showIcon]=\"showIcon\">\n    <div class=\"full flex justify-between gap-8\" niceAlertTitle>\n        <span class=\"flex-auto\">{{ data?.message ?? message }}</span>\n\n        <div>\n            <mat-spinner [diameter]=\"21\"></mat-spinner>\n        </div>\n    </div>\n</nice-alert>\n", styles: [".nice-loading-toast .mdc-snackbar__surface{background:transparent!important;box-shadow:none!important;padding:0;min-width:unset}.nice-loading-toast .toast{padding:16px;border-radius:4px;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MAT_SNACK_BAR_DATA]
+                    }] }];
+    }, propDecorators: { message: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+const NICE_LOADING_TOAST_OPTIONS = new InjectionToken("nice_loading_toast_options");
+
+class NiceLoadingToastDirective {
+    set niceLoadingDisableUserInteraction(disableUserInteraction) {
+        this._niceLoadingDisableUserInteraction = coerceBooleanProperty(disableUserInteraction);
+    }
+    set loading(loading) {
+        if (loading === this._loading) {
+            return;
+        }
+        this._loading = loading;
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .global()
+                    .bottom("22px")
+                    .right("16px"),
+                hasBackdrop: this._niceLoadingDisableUserInteraction,
+                backdropClass: "bg-transparent",
+                panelClass: "nice-loading-toast"
+            });
+        }
+        if (this._loading) {
+            const toastInstance = this.overlayRef.attach(new ComponentPortal(NiceLoadingToastComponent));
+            toastInstance.instance.message = this.niceLoadingMessage;
+            toastInstance.instance.options = this.options;
+        }
+        else {
+            this.overlayRef.detach();
+        }
+    }
+    constructor(options, overlay) {
+        this.options = options;
+        this.overlay = overlay;
+        this._loading = false;
+        this._niceLoadingDisableUserInteraction = true;
+    }
+}
+NiceLoadingToastDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastDirective, deps: [{ token: NICE_LOADING_TOAST_OPTIONS, optional: true }, { token: i1$7.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
+NiceLoadingToastDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceLoadingToastDirective, selector: "[niceLoadingToast]", inputs: { niceLoadingMessage: "niceLoadingMessage", niceLoadingDisableUserInteraction: "niceLoadingDisableUserInteraction", loading: ["niceLoadingToast", "loading"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceLoadingToast]" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NICE_LOADING_TOAST_OPTIONS]
+                    }] }, { type: i1$7.Overlay }];
+    }, propDecorators: { niceLoadingMessage: [{
+                type: Input
+            }], niceLoadingDisableUserInteraction: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: ["niceLoadingToast"]
+            }] } });
+
+class NiceLoadingToastService {
+    constructor(options, snackbar, translateService) {
+        this.options = options;
+        this.snackbar = snackbar;
+        this.translateService = translateService;
+    }
+    showLoadingToast(messageKey, params) {
+        const message = this.getTranslations(messageKey, params);
+        return this.snackbar.openFromComponent(NiceLoadingToastComponent, {
+            horizontalPosition: "end",
+            verticalPosition: "bottom",
+            panelClass: ["nice-loading-toast"],
+            data: {
+                message,
+                options: this.options
+            }
+        });
+    }
+    getTranslations(message, params) {
+        try {
+            return this.translateService.instant(message, params);
+        }
+        catch (e) {
+            return "";
+        }
+    }
+}
+NiceLoadingToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastService, deps: [{ token: NICE_LOADING_TOAST_OPTIONS, optional: true }, { token: i1$f.MatSnackBar }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceLoadingToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastService, providedIn: "any" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "any" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NICE_LOADING_TOAST_OPTIONS]
+                    }] }, { type: i1$f.MatSnackBar }, { type: i1$1.TranslateService }];
+    } });
+
+const defaultOptions$1 = {
+    color: "primary",
+    type: "info",
+    showIcon: true,
+    appearance: "outline"
+};
+class NiceLoadingToastModule {
+    static forRoot(options) {
+        return {
+            ngModule: NiceLoadingToastModule,
+            providers: [
+                NiceLoadingToastService,
+                {
+                    provide: NICE_LOADING_TOAST_OPTIONS,
+                    useValue: Object.assign(Object.assign({}, defaultOptions$1), (options !== null && options !== void 0 ? options : {}))
+                }
+            ]
+        };
+    }
+    static forFeature(options) {
+        return {
+            ngModule: NiceLoadingToastModule,
+            providers: [
+                NiceLoadingToastService,
+                {
+                    provide: NICE_LOADING_TOAST_OPTIONS,
+                    useValue: Object.assign(Object.assign({}, defaultOptions$1), options)
+                }
+            ]
+        };
+    }
+}
+NiceLoadingToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NiceLoadingToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastModule, declarations: [NiceLoadingToastComponent, NiceLoadingToastDirective], imports: [CommonModule, MatSnackBarModule, MatProgressSpinnerModule, NiceAlertModule], exports: [NiceLoadingToastDirective] });
+NiceLoadingToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastModule, providers: [DynamicOverlayContainer, NiceLoadingToastService], imports: [CommonModule, MatSnackBarModule, MatProgressSpinnerModule, NiceAlertModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceLoadingToastModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, MatSnackBarModule, MatProgressSpinnerModule, NiceAlertModule],
+                    providers: [DynamicOverlayContainer, NiceLoadingToastService],
+                    declarations: [NiceLoadingToastComponent, NiceLoadingToastDirective],
+                    exports: [NiceLoadingToastDirective]
+                }]
+        }] });
+
+function showLoadingToast(loadingToastService, key, options = {}) {
+    return source => defer(() => {
+        var _a;
+        const ref = loadingToastService.showLoadingToast(key);
+        return combineLatest([
+            source,
+            timer((_a = options.minDuration) !== null && _a !== void 0 ? _a : 1000)
+        ]).pipe(map(([value]) => value), finalize(() => ref.dismiss()));
+    });
+}
+
 class NiceLottieComponent {
     constructor(platformId) {
         this.platformId = platformId;
@@ -7438,14 +7678,14 @@ class NiceNavigationService {
         }
     }
 }
-NiceNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceNavigationService, deps: [{ token: i1$a.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceNavigationService, deps: [{ token: i1$b.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceNavigationService, providedIn: "root" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceNavigationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root"
                 }]
-        }], ctorParameters: function () { return [{ type: i1$a.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$b.Router }]; } });
 
 class NiceNavigationComponent {
     constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService) {
@@ -7551,7 +7791,7 @@ class NiceHorizontalNavigationBasicItemComponent {
     }
 }
 NiceHorizontalNavigationBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceHorizontalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceHorizontalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-horizontal-navigation-item-wrapper\"\n    [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <!-- Item with an internal link -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n        (click)=\"item.function(item)\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\"\n        mat-menu-item\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-horizontal-navigation-item-active-forced': item.active}\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-horizontal-navigation-item nice-horizontal-navigation-item-disabled\"\n        *ngIf=\"item.disabled\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <!-- Icon -->\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n    >\n        {{ item.icon }}\n    </mat-icon>\n\n    <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n    ></mat-icon>\n\n    <!-- Title & Subtitle -->\n    <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n        <div class=\"nice-horizontal-navigation-item-title\">\n            <span [ngClass]=\"item.classes?.title\">\n                {{ item.title | translate }}\n            </span>\n        </div>\n        <div\n            class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n            *ngIf=\"item.subtitle\"\n        >\n            <span [ngClass]=\"item.classes?.subtitle\">\n                {{ item.subtitle | translate }}\n            </span>\n        </div>\n    </div>\n\n    <!-- Badge -->\n    <div\n        class=\"nice-horizontal-navigation-item-badge\"\n        *ngIf=\"item.badge\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item-badge-content\"\n            [ngClass]=\"item.badge.classes\">\n            {{ item.badge.title | translate }}\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$a.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$a.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceHorizontalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-horizontal-navigation-item-wrapper\"\n    [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <!-- Item with an internal link -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n        (click)=\"item.function(item)\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\"\n        mat-menu-item\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-horizontal-navigation-item-active-forced': item.active}\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-horizontal-navigation-item nice-horizontal-navigation-item-disabled\"\n        *ngIf=\"item.disabled\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <!-- Icon -->\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n    >\n        {{ item.icon }}\n    </mat-icon>\n\n    <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n    ></mat-icon>\n\n    <!-- Title & Subtitle -->\n    <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n        <div class=\"nice-horizontal-navigation-item-title\">\n            <span [ngClass]=\"item.classes?.title\">\n                {{ item.title | translate }}\n            </span>\n        </div>\n        <div\n            class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n            *ngIf=\"item.subtitle\"\n        >\n            <span [ngClass]=\"item.classes?.subtitle\">\n                {{ item.subtitle | translate }}\n            </span>\n        </div>\n    </div>\n\n    <!-- Badge -->\n    <div\n        class=\"nice-horizontal-navigation-item-badge\"\n        *ngIf=\"item.badge\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item-badge-content\"\n            [ngClass]=\"item.badge.classes\">\n            {{ item.badge.title | translate }}\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$b.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$b.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceHorizontalNavigationBasicItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-horizontal-navigation-basic-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-horizontal-navigation-item-wrapper\"\n    [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <!-- Item with an internal link -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n        (click)=\"item.function(item)\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\"\n        mat-menu-item\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-horizontal-navigation-item-active-forced': item.active}\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-horizontal-navigation-item nice-horizontal-navigation-item-disabled\"\n        *ngIf=\"item.disabled\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <!-- Icon -->\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n    >\n        {{ item.icon }}\n    </mat-icon>\n\n    <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n    ></mat-icon>\n\n    <!-- Title & Subtitle -->\n    <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n        <div class=\"nice-horizontal-navigation-item-title\">\n            <span [ngClass]=\"item.classes?.title\">\n                {{ item.title | translate }}\n            </span>\n        </div>\n        <div\n            class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n            *ngIf=\"item.subtitle\"\n        >\n            <span [ngClass]=\"item.classes?.subtitle\">\n                {{ item.subtitle | translate }}\n            </span>\n        </div>\n    </div>\n\n    <!-- Badge -->\n    <div\n        class=\"nice-horizontal-navigation-item-badge\"\n        *ngIf=\"item.badge\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item-badge-content\"\n            [ngClass]=\"item.badge.classes\">\n            {{ item.badge.title | translate }}\n        </div>\n    </div>\n</ng-template>\n" }]
@@ -7678,7 +7918,7 @@ class NiceHorizontalNavigationBranchItemComponent {
     }
 }
 NiceHorizontalNavigationBranchItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceHorizontalNavigationBranchItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceHorizontalNavigationBranchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"!child\"\n    [ngClass]=\"{\n        'nice-horizontal-navigation-menu-active': trigger.menuOpen,\n        'nice-horizontal-navigation-menu-active-forced': item.active\n    }\"\n    [matMenuTriggerFor]=\"matMenu\"\n    (onMenuOpen)=\"triggerChangeDetection()\"\n    (onMenuClose)=\"triggerChangeDetection()\"\n    #trigger=\"matMenuTrigger\"\n>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n</div>\n\n<mat-menu\n    class=\"nice-horizontal-navigation-menu-panel\"\n    [overlapTrigger]=\"false\"\n    #matMenu=\"matMenu\"\n>\n    <ng-container *ngFor=\"let item of item.children\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [disabled]=\"item.disabled\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-basic-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-basic-item>\n            </div>\n\n            <!-- Branch: aside, collapsable, group -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [disabled]=\"item.disabled\"\n                [matMenuTriggerFor]=\"branch.matMenu\"\n                mat-menu-item\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                <nice-horizontal-navigation-branch-item\n                    [child]=\"true\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    #branch\n                ></nice-horizontal-navigation-branch-item>\n            </div>\n\n            <!-- Divider -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'divider'\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-divider-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-divider-item>\n            </div>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<!-- Item template -->\n<ng-template\n    let-item\n    #itemTemplate\n>\n    <div\n        class=\"nice-horizontal-navigation-item-wrapper\"\n        [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n        [ngClass]=\"item.classes?.wrapper\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item\"\n            [ngClass]=\"{\n                'nice-horizontal-navigation-item-disabled': item.disabled,\n                'nice-horizontal-navigation-item-active-forced': item.active\n            }\">\n\n            <!-- Icon -->\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n            ></mat-icon>\n\n            <!-- Title & Subtitle -->\n            <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n                <div class=\"nice-horizontal-navigation-item-title\">\n                    <span [ngClass]=\"item.classes?.title\">\n                        {{ item.title | translate }}\n                    </span>\n                </div>\n                <div\n                    class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n                    *ngIf=\"item.subtitle\"\n                >\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{ item.subtitle | translate }}\n                    </span>\n                </div>\n            </div>\n\n            <!-- Badge -->\n            <div\n                class=\"nice-horizontal-navigation-item-badge\"\n                *ngIf=\"item.badge\">\n                <div\n                    class=\"nice-horizontal-navigation-item-badge-content\"\n                    [ngClass]=\"item.badge.classes\"\n                >\n                    {{ item.badge.title | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "component", type: NiceHorizontalNavigationDividerItemComponent, selector: "nice-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceHorizontalNavigationBranchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"!child\"\n    [ngClass]=\"{\n        'nice-horizontal-navigation-menu-active': trigger.menuOpen,\n        'nice-horizontal-navigation-menu-active-forced': item.active\n    }\"\n    [matMenuTriggerFor]=\"matMenu\"\n    (onMenuOpen)=\"triggerChangeDetection()\"\n    (onMenuClose)=\"triggerChangeDetection()\"\n    #trigger=\"matMenuTrigger\"\n>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n</div>\n\n<mat-menu\n    class=\"nice-horizontal-navigation-menu-panel\"\n    [overlapTrigger]=\"false\"\n    #matMenu=\"matMenu\"\n>\n    <ng-container *ngFor=\"let item of item.children\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [disabled]=\"item.disabled\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-basic-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-basic-item>\n            </div>\n\n            <!-- Branch: aside, collapsable, group -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [disabled]=\"item.disabled\"\n                [matMenuTriggerFor]=\"branch.matMenu\"\n                mat-menu-item\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                <nice-horizontal-navigation-branch-item\n                    [child]=\"true\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    #branch\n                ></nice-horizontal-navigation-branch-item>\n            </div>\n\n            <!-- Divider -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'divider'\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-divider-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-divider-item>\n            </div>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<!-- Item template -->\n<ng-template\n    let-item\n    #itemTemplate\n>\n    <div\n        class=\"nice-horizontal-navigation-item-wrapper\"\n        [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n        [ngClass]=\"item.classes?.wrapper\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item\"\n            [ngClass]=\"{\n                'nice-horizontal-navigation-item-disabled': item.disabled,\n                'nice-horizontal-navigation-item-active-forced': item.active\n            }\">\n\n            <!-- Icon -->\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n            ></mat-icon>\n\n            <!-- Title & Subtitle -->\n            <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n                <div class=\"nice-horizontal-navigation-item-title\">\n                    <span [ngClass]=\"item.classes?.title\">\n                        {{ item.title | translate }}\n                    </span>\n                </div>\n                <div\n                    class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n                    *ngIf=\"item.subtitle\"\n                >\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{ item.subtitle | translate }}\n                    </span>\n                </div>\n            </div>\n\n            <!-- Badge -->\n            <div\n                class=\"nice-horizontal-navigation-item-badge\"\n                *ngIf=\"item.badge\">\n                <div\n                    class=\"nice-horizontal-navigation-item-badge-content\"\n                    [ngClass]=\"item.badge.classes\"\n                >\n                    {{ item.badge.title | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "component", type: NiceHorizontalNavigationDividerItemComponent, selector: "nice-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceHorizontalNavigationBranchItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-horizontal-navigation-branch-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"!child\"\n    [ngClass]=\"{\n        'nice-horizontal-navigation-menu-active': trigger.menuOpen,\n        'nice-horizontal-navigation-menu-active-forced': item.active\n    }\"\n    [matMenuTriggerFor]=\"matMenu\"\n    (onMenuOpen)=\"triggerChangeDetection()\"\n    (onMenuClose)=\"triggerChangeDetection()\"\n    #trigger=\"matMenuTrigger\"\n>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n</div>\n\n<mat-menu\n    class=\"nice-horizontal-navigation-menu-panel\"\n    [overlapTrigger]=\"false\"\n    #matMenu=\"matMenu\"\n>\n    <ng-container *ngFor=\"let item of item.children\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [disabled]=\"item.disabled\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-basic-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-basic-item>\n            </div>\n\n            <!-- Branch: aside, collapsable, group -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [disabled]=\"item.disabled\"\n                [matMenuTriggerFor]=\"branch.matMenu\"\n                mat-menu-item\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                <nice-horizontal-navigation-branch-item\n                    [child]=\"true\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    #branch\n                ></nice-horizontal-navigation-branch-item>\n            </div>\n\n            <!-- Divider -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'divider'\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-divider-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-divider-item>\n            </div>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<!-- Item template -->\n<ng-template\n    let-item\n    #itemTemplate\n>\n    <div\n        class=\"nice-horizontal-navigation-item-wrapper\"\n        [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n        [ngClass]=\"item.classes?.wrapper\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item\"\n            [ngClass]=\"{\n                'nice-horizontal-navigation-item-disabled': item.disabled,\n                'nice-horizontal-navigation-item-active-forced': item.active\n            }\">\n\n            <!-- Icon -->\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n            ></mat-icon>\n\n            <!-- Title & Subtitle -->\n            <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n                <div class=\"nice-horizontal-navigation-item-title\">\n                    <span [ngClass]=\"item.classes?.title\">\n                        {{ item.title | translate }}\n                    </span>\n                </div>\n                <div\n                    class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n                    *ngIf=\"item.subtitle\"\n                >\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{ item.subtitle | translate }}\n                    </span>\n                </div>\n            </div>\n\n            <!-- Badge -->\n            <div\n                class=\"nice-horizontal-navigation-item-badge\"\n                *ngIf=\"item.badge\">\n                <div\n                    class=\"nice-horizontal-navigation-item-badge-content\"\n                    [ngClass]=\"item.badge.classes\"\n                >\n                    {{ item.badge.title | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n" }]
@@ -8062,7 +8302,7 @@ class NiceScrollbarDirective {
         this._ps = null;
     }
 }
-NiceScrollbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceScrollbarDirective, deps: [{ token: i0.ElementRef }, { token: i1$e.Platform }, { token: i1$a.Router }], target: i0.ɵɵFactoryTarget.Directive });
+NiceScrollbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceScrollbarDirective, deps: [{ token: i0.ElementRef }, { token: i1$g.Platform }, { token: i1$b.Router }], target: i0.ɵɵFactoryTarget.Directive });
 NiceScrollbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceScrollbarDirective, selector: "[niceScrollbar]", inputs: { niceScrollbar: "niceScrollbar", niceScrollbarOptions: "niceScrollbarOptions" }, exportAs: ["niceScrollbar"], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceScrollbarDirective, decorators: [{
             type: Directive,
@@ -8070,7 +8310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     selector: "[niceScrollbar]",
                     exportAs: "niceScrollbar"
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$e.Platform }, { type: i1$a.Router }]; }, propDecorators: { niceScrollbar: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$g.Platform }, { type: i1$b.Router }]; }, propDecorators: { niceScrollbar: [{
                 type: Input
             }], niceScrollbarOptions: [{
                 type: Input
@@ -8274,12 +8514,12 @@ class NiceShowHintDirective {
         });
     }
 }
-NiceShowHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceShowHintDirective, deps: [{ token: i1$6.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i1$e.Platform }, { token: i2$2.FocusMonitor }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Directive });
+NiceShowHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceShowHintDirective, deps: [{ token: i1$7.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i1$g.Platform }, { token: i2$2.FocusMonitor }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Directive });
 NiceShowHintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: { shouldShow: "shouldShow", item: "item" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceShowHintDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceShowHint]" }]
-        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i1$e.Platform }, { type: i2$2.FocusMonitor }, { type: NiceNavigationHintService }]; }, propDecorators: { shouldShow: [{
+        }], ctorParameters: function () { return [{ type: i1$7.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i1$g.Platform }, { type: i2$2.FocusMonitor }, { type: NiceNavigationHintService }]; }, propDecorators: { shouldShow: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -8356,12 +8596,12 @@ class NiceVerticalNavigationBasicItemComponent {
         this._unsubscribeAll.complete();
     }
 }
-NiceVerticalNavigationBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$a.ActivatedRoute }, { token: i1$a.Router }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n\n    <!-- Item with an internal link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n        *ngIf=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n            <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.activeIcon || item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.activeIcon || item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-container>\n\n            <ng-template #notActive>\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-template>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$a.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$a.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: ["shouldShow", "item"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceVerticalNavigationBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$b.ActivatedRoute }, { token: i1$b.Router }], target: i0.ɵɵFactoryTarget.Component });
+NiceVerticalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n\n    <!-- Item with an internal link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n        *ngIf=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n            <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.activeIcon || item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.activeIcon || item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-container>\n\n            <ng-template #notActive>\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-template>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$b.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$b.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: ["shouldShow", "item"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-vertical-navigation-basic-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n\n    <!-- Item with an internal link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n        *ngIf=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n            <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.activeIcon || item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.activeIcon || item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-container>\n\n            <ng-template #notActive>\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-template>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$a.ActivatedRoute }, { type: i1$a.Router }]; }, propDecorators: { item: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$b.ActivatedRoute }, { type: i1$b.Router }]; }, propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -8680,12 +8920,12 @@ class NiceVerticalNavigationCollapsableItemComponent {
         return item.id || index;
     }
 }
-NiceVerticalNavigationCollapsableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$a.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationCollapsableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n        [class.child-activated]=\"hasChildActivated$ | async\"\n        (click)=\"toggleCollapsable()\"\n        *ngIf=\"{ showHint: item.children ?? [] | niceShouldShowHint | async } as ctx\"\n    >\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\" style=\"position: relative\">\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType == 'svg'\"\n            ></mat-icon>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint && isCollapsed\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\">\n\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n\n        <!-- Arrow -->\n        <mat-icon class=\"nice-vertical-navigation-item-arrow icon-size-4\">chevron_right</mat-icon>\n    </div>\n</div>\n\n<div\n    class=\"nice-vertical-navigation-item-children\"\n    *ngIf=\"!isCollapsed\"\n    @expandCollapse\n>\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-vertical-navigation-basic-item\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-basic-item>\n\n            <!-- Collapsable -->\n            <nice-vertical-navigation-collapsable-item\n                *ngIf=\"item.type === 'collapsable'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-collapsable-item>\n\n            <!-- Divider -->\n            <nice-vertical-navigation-divider-item\n                *ngIf=\"item.type === 'divider'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-divider-item>\n\n            <!-- Group -->\n<!--            <nice-vertical-navigation-group-item\n                *ngIf=\"item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-group-item>-->\n\n            <!-- Spacer -->\n            <nice-vertical-navigation-spacer-item\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceVerticalNavigationCollapsableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$b.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+NiceVerticalNavigationCollapsableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n        [class.child-activated]=\"hasChildActivated$ | async\"\n        (click)=\"toggleCollapsable()\"\n        *ngIf=\"{ showHint: item.children ?? [] | niceShouldShowHint | async } as ctx\"\n    >\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\" style=\"position: relative\">\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType == 'svg'\"\n            ></mat-icon>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint && isCollapsed\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\">\n\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n\n        <!-- Arrow -->\n        <mat-icon class=\"nice-vertical-navigation-item-arrow icon-size-4\">chevron_right</mat-icon>\n    </div>\n</div>\n\n<div\n    class=\"nice-vertical-navigation-item-children\"\n    *ngIf=\"!isCollapsed\"\n    @expandCollapse\n>\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-vertical-navigation-basic-item\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-basic-item>\n\n            <!-- Collapsable -->\n            <nice-vertical-navigation-collapsable-item\n                *ngIf=\"item.type === 'collapsable'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-collapsable-item>\n\n            <!-- Divider -->\n            <nice-vertical-navigation-divider-item\n                *ngIf=\"item.type === 'divider'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-divider-item>\n\n            <!-- Group -->\n<!--            <nice-vertical-navigation-group-item\n                *ngIf=\"item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-group-item>-->\n\n            <!-- Spacer -->\n            <nice-vertical-navigation-spacer-item\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-vertical-navigation-collapsable-item", animations: niceAnimations, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n        [class.child-activated]=\"hasChildActivated$ | async\"\n        (click)=\"toggleCollapsable()\"\n        *ngIf=\"{ showHint: item.children ?? [] | niceShouldShowHint | async } as ctx\"\n    >\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\" style=\"position: relative\">\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType == 'svg'\"\n            ></mat-icon>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint && isCollapsed\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\">\n\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n\n        <!-- Arrow -->\n        <mat-icon class=\"nice-vertical-navigation-item-arrow icon-size-4\">chevron_right</mat-icon>\n    </div>\n</div>\n\n<div\n    class=\"nice-vertical-navigation-item-children\"\n    *ngIf=\"!isCollapsed\"\n    @expandCollapse\n>\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-vertical-navigation-basic-item\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-basic-item>\n\n            <!-- Collapsable -->\n            <nice-vertical-navigation-collapsable-item\n                *ngIf=\"item.type === 'collapsable'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-collapsable-item>\n\n            <!-- Divider -->\n            <nice-vertical-navigation-divider-item\n                *ngIf=\"item.type === 'divider'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-divider-item>\n\n            <!-- Group -->\n<!--            <nice-vertical-navigation-group-item\n                *ngIf=\"item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-group-item>-->\n\n            <!-- Spacer -->\n            <nice-vertical-navigation-spacer-item\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$a.Router }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$b.Router }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -8739,7 +8979,7 @@ class NiceVerticalNavigationGroupItemComponent {
     }
 }
 NiceVerticalNavigationGroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div class=\"nice-vertical-navigation-item\">\n        <!-- Icon -->\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\" *ngIf=\"item.title || item.subtitle\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n    <!-- Skip the hidden items -->\n    <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n        <!-- Basic -->\n        <nice-vertical-navigation-basic-item\n            *ngIf=\"item.type === 'basic'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-basic-item>\n\n        <!-- Collapsable -->\n        <nice-vertical-navigation-collapsable-item\n            *ngIf=\"item.type === 'collapsable'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [autoCollapse]=\"autoCollapse\"\n        ></nice-vertical-navigation-collapsable-item>\n\n        <!-- Divider -->\n        <nice-vertical-navigation-divider-item\n            *ngIf=\"item.type === 'divider'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-divider-item>\n\n        <!-- Group -->\n        <nice-vertical-navigation-group-item\n            *ngIf=\"item.type === 'group'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-group-item>\n\n        <!-- Spacer -->\n        <nice-vertical-navigation-spacer-item\n            *ngIf=\"item.type === 'spacer'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-spacer-item>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceVerticalNavigationGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div class=\"nice-vertical-navigation-item\">\n        <!-- Icon -->\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\" *ngIf=\"item.title || item.subtitle\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n    <!-- Skip the hidden items -->\n    <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n        <!-- Basic -->\n        <nice-vertical-navigation-basic-item\n            *ngIf=\"item.type === 'basic'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-basic-item>\n\n        <!-- Collapsable -->\n        <nice-vertical-navigation-collapsable-item\n            *ngIf=\"item.type === 'collapsable'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [autoCollapse]=\"autoCollapse\"\n        ></nice-vertical-navigation-collapsable-item>\n\n        <!-- Divider -->\n        <nice-vertical-navigation-divider-item\n            *ngIf=\"item.type === 'divider'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-divider-item>\n\n        <!-- Group -->\n        <nice-vertical-navigation-group-item\n            *ngIf=\"item.type === 'group'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-group-item>\n\n        <!-- Spacer -->\n        <nice-vertical-navigation-spacer-item\n            *ngIf=\"item.type === 'spacer'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-spacer-item>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationGroupItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-vertical-navigation-group-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div class=\"nice-vertical-navigation-item\">\n        <!-- Icon -->\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\" *ngIf=\"item.title || item.subtitle\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n    <!-- Skip the hidden items -->\n    <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n        <!-- Basic -->\n        <nice-vertical-navigation-basic-item\n            *ngIf=\"item.type === 'basic'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-basic-item>\n\n        <!-- Collapsable -->\n        <nice-vertical-navigation-collapsable-item\n            *ngIf=\"item.type === 'collapsable'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [autoCollapse]=\"autoCollapse\"\n        ></nice-vertical-navigation-collapsable-item>\n\n        <!-- Divider -->\n        <nice-vertical-navigation-divider-item\n            *ngIf=\"item.type === 'divider'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-divider-item>\n\n        <!-- Group -->\n        <nice-vertical-navigation-group-item\n            *ngIf=\"item.type === 'group'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-group-item>\n\n        <!-- Spacer -->\n        <nice-vertical-navigation-spacer-item\n            *ngIf=\"item.type === 'spacer'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-spacer-item>\n    </ng-container>\n</ng-container>\n" }]
@@ -8857,12 +9097,12 @@ class NiceVerticalNavigationAsideItemComponent {
         return item.id || index;
     }
 }
-NiceVerticalNavigationAsideItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationAsideItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$a.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationAsideItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", skipChildren: "skipChildren" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{\n            'nice-vertical-navigation-item-active': active,\n            'nice-vertical-navigation-item-disabled': item.disabled,\n            'nice-vertical-navigation-item-active-forced': item.active\n        }\"\n    >\n        <!-- Icon -->\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"!skipChildren\">\n    <div class=\"nice-vertical-navigation-item-children\">\n        <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceVerticalNavigationAsideItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationAsideItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$b.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+NiceVerticalNavigationAsideItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", skipChildren: "skipChildren" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{\n            'nice-vertical-navigation-item-active': active,\n            'nice-vertical-navigation-item-disabled': item.disabled,\n            'nice-vertical-navigation-item-active-forced': item.active\n        }\"\n    >\n        <!-- Icon -->\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"!skipChildren\">\n    <div class=\"nice-vertical-navigation-item-children\">\n        <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationAsideItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-vertical-navigation-aside-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{\n            'nice-vertical-navigation-item-active': active,\n            'nice-vertical-navigation-item-disabled': item.disabled,\n            'nice-vertical-navigation-item-active-forced': item.active\n        }\"\n    >\n        <!-- Icon -->\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"!skipChildren\">\n    <div class=\"nice-vertical-navigation-item-children\">\n        <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$a.Router }, { type: NiceNavigationService }]; }, propDecorators: { activeItemId: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$b.Router }, { type: NiceNavigationService }]; }, propDecorators: { activeItemId: [{
                 type: Input
             }], autoCollapse: [{
                 type: Input
@@ -9377,12 +9617,12 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
         this.openedChanged.next(open);
     }
 }
-NiceVerticalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$b.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$a.Router }, { token: i1$6.ScrollStrategyOptions }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Component });
+NiceVerticalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$c.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$b.Router }, { token: i1$7.ScrollStrategyOptions }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Component });
 NiceVerticalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceVerticalNavigationComponent, selector: "nice-vertical-navigation", inputs: { name: "name", appearance: "appearance", autoCollapse: "autoCollapse", inner: "inner", mode: "mode", opened: "opened", hovered: "hovered", hasHint: "hasHint", position: "position", transparentOverlay: "transparentOverlay", navigation: "navigation" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", hoveredChanged: "hoveredChanged", positionChanged: "positionChanged" }, host: { listeners: { "mouseenter": "_onMouseenter()", "mouseleave": "_onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }, { propertyName: "niceScrollbarDirectives", predicate: NiceScrollbarDirective, descendants: true }], exportAs: ["niceVerticalNavigation"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"nice-vertical-navigation-wrapper\">\n    <!-- Header -->\n    <div class=\"nice-vertical-navigation-header\">\n        <ng-content select=\"[niceVerticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <!-- Content -->\n    <div\n        class=\"nice-vertical-navigation-content\"\n        niceScrollbar\n        [niceScrollbarOptions]=\"{ wheelPropagation: inner, suppressScrollX: true }\"\n        #navigationContent\n    >\n        <!-- Content header -->\n        <div class=\"nice-vertical-navigation-content-header\">\n            <ng-content select=\"[niceVerticalNavigationContentHeader]\"></ng-content>\n        </div>\n\n        <!-- Items -->\n        <div *ngFor=\"let item of navigation; trackBy: trackByFn\" [@.disabled]=\"!animateNextNavChange\" @slideInRight>\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n                <!-- Aside -->\n                <nice-vertical-navigation-aside-item\n                    *ngIf=\"item.type === 'aside'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [activeItemId]=\"activeAsideItemId\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [skipChildren]=\"true\"\n                    (click)=\"toggleAside(item)\"\n                ></nice-vertical-navigation-aside-item>\n\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </div>\n\n        <!-- Content footer -->\n        <div class=\"nice-vertical-navigation-content-footer\">\n            <ng-content select=\"[niceVerticalNavigationContentFooter]\"></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Footer -->\n    <div class=\"nice-vertical-navigation-footer\">\n        <ng-content select=\"[niceVerticalNavigationFooter]\"></ng-content>\n    </div>\n</div>\n\n<!-- Aside -->\n<div\n    class=\"nice-vertical-navigation-aside-wrapper\"\n    *ngIf=\"activeAsideItemId\"\n    niceScrollbar\n    [niceScrollbarOptions]=\"{ wheelPropagation: false, suppressScrollX: true }\"\n    [@fadeInLeft]=\"position === 'left'\"\n    [@fadeInRight]=\"position === 'right'\"\n    [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\"\n>\n\n    <!-- Items -->\n    <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n            <!-- Aside -->\n            <nice-vertical-navigation-aside-item\n                *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-aside-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NiceScrollbarDirective, selector: "[niceScrollbar]", inputs: ["niceScrollbar", "niceScrollbarOptions"], exportAs: ["niceScrollbar"] }, { kind: "component", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-vertical-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: "niceVerticalNavigation", template: "<div class=\"nice-vertical-navigation-wrapper\">\n    <!-- Header -->\n    <div class=\"nice-vertical-navigation-header\">\n        <ng-content select=\"[niceVerticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <!-- Content -->\n    <div\n        class=\"nice-vertical-navigation-content\"\n        niceScrollbar\n        [niceScrollbarOptions]=\"{ wheelPropagation: inner, suppressScrollX: true }\"\n        #navigationContent\n    >\n        <!-- Content header -->\n        <div class=\"nice-vertical-navigation-content-header\">\n            <ng-content select=\"[niceVerticalNavigationContentHeader]\"></ng-content>\n        </div>\n\n        <!-- Items -->\n        <div *ngFor=\"let item of navigation; trackBy: trackByFn\" [@.disabled]=\"!animateNextNavChange\" @slideInRight>\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n                <!-- Aside -->\n                <nice-vertical-navigation-aside-item\n                    *ngIf=\"item.type === 'aside'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [activeItemId]=\"activeAsideItemId\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [skipChildren]=\"true\"\n                    (click)=\"toggleAside(item)\"\n                ></nice-vertical-navigation-aside-item>\n\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </div>\n\n        <!-- Content footer -->\n        <div class=\"nice-vertical-navigation-content-footer\">\n            <ng-content select=\"[niceVerticalNavigationContentFooter]\"></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Footer -->\n    <div class=\"nice-vertical-navigation-footer\">\n        <ng-content select=\"[niceVerticalNavigationFooter]\"></ng-content>\n    </div>\n</div>\n\n<!-- Aside -->\n<div\n    class=\"nice-vertical-navigation-aside-wrapper\"\n    *ngIf=\"activeAsideItemId\"\n    niceScrollbar\n    [niceScrollbarOptions]=\"{ wheelPropagation: false, suppressScrollX: true }\"\n    [@fadeInLeft]=\"position === 'left'\"\n    [@fadeInRight]=\"position === 'right'\"\n    [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\"\n>\n\n    <!-- Items -->\n    <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n            <!-- Aside -->\n            <nice-vertical-navigation-aside-item\n                *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-aside-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$b.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$a.Router }, { type: i1$6.ScrollStrategyOptions }, { type: NiceNavigationHintService }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$c.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$b.Router }, { type: i1$7.ScrollStrategyOptions }, { type: NiceNavigationHintService }]; }, propDecorators: { name: [{
                 type: Input
             }], appearance: [{
                 type: Input
@@ -9566,7 +9806,7 @@ NiceSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => NiceSearchBarComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<button mat-icon-button *ngIf=\"!opened\" (click)=\"open()\">\n    <mat-icon [svgIcon]=\"'heroicons_outline:search'\"></mat-icon>\n</button>\n\n<div class=\"absolute inset-0 flex items-center flex-shrink-0 z-99 bg-default\" *ngIf=\"opened\" @slideInTop @slideOutTop >\n    <mat-icon class=\"absolute ml-6 sm:ml-8\" [svgIcon]=\"'heroicons_outline:search'\"></mat-icon>\n    <input class=\"w-full h-full px-16 sm:px-18 bg-transparent\" [ngModel]=\"searchValue\" (ngModelChange)=\"onSearchChange($event)\">\n    <button class=\"absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5\" mat-icon-button (click)=\"close()\">\n        <mat-icon [svgIcon]=\"'heroicons_outline:x'\"></mat-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: niceAnimations });
+    ], ngImport: i0, template: "<button mat-icon-button *ngIf=\"!opened\" (click)=\"open()\">\n    <mat-icon [svgIcon]=\"'heroicons_outline:search'\"></mat-icon>\n</button>\n\n<div class=\"absolute inset-0 flex items-center flex-shrink-0 z-99 bg-default\" *ngIf=\"opened\" @slideInTop @slideOutTop >\n    <mat-icon class=\"absolute ml-6 sm:ml-8\" [svgIcon]=\"'heroicons_outline:search'\"></mat-icon>\n    <input class=\"w-full h-full px-16 sm:px-18 bg-transparent\" [ngModel]=\"searchValue\" (ngModelChange)=\"onSearchChange($event)\">\n    <button class=\"absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5\" mat-icon-button (click)=\"close()\">\n        <mat-icon [svgIcon]=\"'heroicons_outline:x'\"></mat-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: niceAnimations });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-search-bar", providers: [
@@ -9659,8 +9899,8 @@ class NiceSweetAlertComponent {
         }
     }
 }
-NiceSweetAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSweetAlertComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$f.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-NiceSweetAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceSweetAlertComponent, selector: "nice-alert", ngImport: i0, template: "<mat-dialog-content class=\"mat-typography mb-12 text-center\">\n    <nice-lottie\n        [options]=\"lottieConfig\"\n        [width]=\"250\"\n        (animCreated)=\"handleAnimation($event)\"\n    ></nice-lottie>\n    <h2 class=\"mt-8\">{{ alertConfig?.title }}</h2>\n    <span [innerHTML]=\"alertConfig?.message\"></span>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n    <ng-container *ngFor=\"let button of alertConfig.buttons; let i = index\">\n        <button mat-raised-button class=\"mr-4\" [ngClass]=\"getConfirmButtonClass()\" *ngIf=\"i === 0\" (click)=\"confirm()\">\n            {{ button }}\n        </button>\n        <button mat-button (click)=\"close()\" *ngIf=\"i !== 0\">{{ button }}</button>\n    </ng-container>\n</mat-dialog-actions>\n", styles: [".nice-alert-modal{width:500px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$f.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$f.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-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: NiceLottieComponent, selector: "nice-lottie", inputs: ["options", "width", "height"], outputs: ["animCreated"] }], encapsulation: i0.ViewEncapsulation.None });
+NiceSweetAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSweetAlertComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$h.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+NiceSweetAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceSweetAlertComponent, selector: "nice-alert", ngImport: i0, template: "<mat-dialog-content class=\"mat-typography mb-12 text-center\">\n    <nice-lottie\n        [options]=\"lottieConfig\"\n        [width]=\"250\"\n        (animCreated)=\"handleAnimation($event)\"\n    ></nice-lottie>\n    <h2 class=\"mt-8\">{{ alertConfig?.title }}</h2>\n    <span [innerHTML]=\"alertConfig?.message\"></span>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n    <ng-container *ngFor=\"let button of alertConfig.buttons; let i = index\">\n        <button mat-raised-button class=\"mr-4\" [ngClass]=\"getConfirmButtonClass()\" *ngIf=\"i === 0\" (click)=\"confirm()\">\n            {{ button }}\n        </button>\n        <button mat-button (click)=\"close()\" *ngIf=\"i !== 0\">{{ button }}</button>\n    </ng-container>\n</mat-dialog-actions>\n", styles: [".nice-alert-modal{width:500px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$h.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$h.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-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: NiceLottieComponent, selector: "nice-lottie", inputs: ["options", "width", "height"], outputs: ["animCreated"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSweetAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-alert", encapsulation: ViewEncapsulation.None, template: "<mat-dialog-content class=\"mat-typography mb-12 text-center\">\n    <nice-lottie\n        [options]=\"lottieConfig\"\n        [width]=\"250\"\n        (animCreated)=\"handleAnimation($event)\"\n    ></nice-lottie>\n    <h2 class=\"mt-8\">{{ alertConfig?.title }}</h2>\n    <span [innerHTML]=\"alertConfig?.message\"></span>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n    <ng-container *ngFor=\"let button of alertConfig.buttons; let i = index\">\n        <button mat-raised-button class=\"mr-4\" [ngClass]=\"getConfirmButtonClass()\" *ngIf=\"i === 0\" (click)=\"confirm()\">\n            {{ button }}\n        </button>\n        <button mat-button (click)=\"close()\" *ngIf=\"i !== 0\">{{ button }}</button>\n    </ng-container>\n</mat-dialog-actions>\n", styles: [".nice-alert-modal{width:500px}\n"] }]
@@ -9668,7 +9908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
-                    }] }, { type: i1$f.MatDialogRef }];
+                    }] }, { type: i1$h.MatDialogRef }];
     } });
 
 const NICE_ALERT_OPTIONS = new InjectionToken("nice_alert_options");
@@ -9749,7 +9989,7 @@ class NiceSweetAlertService {
         ];
     }
 }
-NiceSweetAlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSweetAlertService, deps: [{ token: NICE_ALERT_OPTIONS, optional: true }, { token: i1$f.MatDialog }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceSweetAlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSweetAlertService, deps: [{ token: NICE_ALERT_OPTIONS, optional: true }, { token: i1$h.MatDialog }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceSweetAlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSweetAlertService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceSweetAlertService, decorators: [{
             type: Injectable
@@ -9759,7 +9999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     }, {
                         type: Inject,
                         args: [NICE_ALERT_OPTIONS]
-                    }] }, { type: i1$f.MatDialog }, { type: i1.TranslateService }];
+                    }] }, { type: i1$h.MatDialog }, { type: i1$1.TranslateService }];
     } });
 
 class NiceSweetAlertDirective {
@@ -9830,7 +10070,7 @@ class NiceToastComponent {
         this.snackbarRef.dismiss();
     }
 }
-NiceToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceToastComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$g.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component });
+NiceToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceToastComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$f.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component });
 NiceToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NiceToastComponent, selector: "nice-toast", ngImport: i0, template: "<nice-alert disableAnimation [type]=\"data.type\" [appearance]=\"data.appearance || 'outline'\" (click)=\"dismiss()\">\n    <span niceAlertTitle *ngIf=\"data.title\">{{ data.title }}</span>\n    <span [innerHtml]=\"data.message\" *ngIf=\"data.message\"></span>\n</nice-alert>\n", styles: [".message-box .mdc-snackbar__surface{background-color:transparent!important;box-shadow:none!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NiceAlertComponent, selector: "nice-alert", inputs: ["appearance", "dismissed", "dismissible", "disableAnimation", "name", "showIcon", "type", "color"], outputs: ["dismissedChanged"], exportAs: ["niceAlert"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceToastComponent, decorators: [{
             type: Component,
@@ -9839,7 +10079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_SNACK_BAR_DATA]
-                    }] }, { type: i1$g.MatSnackBarRef }];
+                    }] }, { type: i1$f.MatSnackBarRef }];
     } });
 
 const NICE_TOAST_OPTIONS = new InjectionToken("nice_toast_options");
@@ -9887,7 +10127,7 @@ class NiceToastService {
         }
     }
 }
-NiceToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceToastService, deps: [{ token: NICE_TOAST_OPTIONS }, { token: i1$g.MatSnackBar }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+NiceToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceToastService, deps: [{ token: NICE_TOAST_OPTIONS }, { token: i1$f.MatSnackBar }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 NiceToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceToastService, providedIn: "any" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceToastService, decorators: [{
             type: Injectable,
@@ -9896,7 +10136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [NICE_TOAST_OPTIONS]
-                    }] }, { type: i1$g.MatSnackBar }, { type: i1.TranslateService }];
+                    }] }, { type: i1$f.MatSnackBar }, { type: i1$1.TranslateService }];
     } });
 
 const defaultOptions = {
@@ -9941,6 +10181,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+function showSuccessToast(loadingToastService, options) {
+    return source => source.pipe(tap$1({
+        next: () => loadingToastService.success(options.messageKey, options.titleKey, options.params)
+    }));
+}
+function showErrorToast(loadingToastService, options) {
+    return source => source.pipe(tap$1({
+        next: () => loadingToastService.error(options.messageKey, options.titleKey, options.params)
+    }));
+}
+function showInfoToast(loadingToastService, options) {
+    return source => source.pipe(tap$1({
+        next: () => loadingToastService.info(options.messageKey, options.titleKey, options.params)
+    }));
+}
+function showWarningToast(loadingToastService, options) {
+    return source => source.pipe(tap$1({
+        next: () => loadingToastService.warning(options.messageKey, options.titleKey, options.params)
+    }));
+}
+
+function showSuccessOrErrorToast(loadingToastService, options) {
+    return source => source.pipe(tap$1({
+        next: () => {
+            const [message, title] = transformOptions(options, "success");
+            loadingToastService.success(message, title, options.params);
+        },
+        error: () => {
+            const [message, title] = transformOptions(options, "error");
+            loadingToastService.error(message, title, options.params);
+        }
+    }));
+}
+function transformOptions(options, type) {
+    var _a, _b, _c, _d;
+    const commonOptions = options;
+    if (commonOptions.messageKey || commonOptions.titleKey) {
+        return [commonOptions.messageKey ? `${commonOptions.messageKey}.${type}` : "", commonOptions.titleKey ? `${commonOptions.titleKey}.${type}` : ""];
+    }
+    const fullOptions = options;
+    return [(_b = (_a = fullOptions.message) === null || _a === void 0 ? void 0 : _a[type]) !== null && _b !== void 0 ? _b : "", (_d = (_c = fullOptions.title) === null || _c === void 0 ? void 0 : _c[type]) !== null && _d !== void 0 ? _d : ""];
+}
+
 class ToggleButtonComponent {
 }
 ToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -10108,16 +10391,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
-class TranslationFormService {
+class NiceTranslationFormService {
     constructor() {
         this._languages$ = new BehaviorSubject([]);
         this._requiredLanguages$ = new BehaviorSubject([]);
     }
     get languages$() {
-        return this._languages$;
+        return this._languages$.asObservable();
+    }
+    get languages() {
+        return this._languages$.getValue();
     }
     get requiredLanguages$() {
-        return this._requiredLanguages$;
+        return this._requiredLanguages$.asObservable();
+    }
+    get requiredLanguages() {
+        return this._requiredLanguages$.value;
+    }
+    get hasLanguages$() {
+        return this._languages$.asObservable().pipe(map((languages) => !!(languages === null || languages === void 0 ? void 0 : languages.length)));
+    }
+    get hasLanguages() {
+        var _a;
+        return !!((_a = this.languages) === null || _a === void 0 ? void 0 : _a.length);
     }
     setLanguages(languages) {
         this._languages$.next(languages !== null && languages !== void 0 ? languages : []);
@@ -10126,7 +10422,7 @@ class TranslationFormService {
         if (!(languages === null || languages === void 0 ? void 0 : languages.length)) {
             this._requiredLanguages$.next([]);
         }
-        const languagesValues = this.languages$.getValue();
+        const languagesValues = this.languages;
         const unregisteredLanguages = languages === null || languages === void 0 ? void 0 : languages.filter((language) => !languagesValues.includes(language));
         if (unregisteredLanguages === null || unregisteredLanguages === void 0 ? void 0 : unregisteredLanguages.length) {
             throw new Error(`You provided languages that are not configured
@@ -10142,9 +10438,9 @@ class TranslationFormService {
         }
     }
 }
-TranslationFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TranslationFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationFormService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationFormService, decorators: [{
+NiceTranslationFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceTranslationFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NiceTranslationFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceTranslationFormService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceTranslationFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
@@ -10171,13 +10467,19 @@ class TranslationContextDirective {
     updateLanguage(language) {
         this.activeLanguage$.next(language);
     }
+    reset() {
+        if (!this.translationFormService.languages.length) {
+            return;
+        }
+        this.activeLanguage$.next(this.translationFormService.languages[0]);
+    }
 }
-TranslationContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationContextDirective, deps: [{ token: TranslationFormService }], target: i0.ɵɵFactoryTarget.Directive });
+TranslationContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationContextDirective, deps: [{ token: NiceTranslationFormService }], target: i0.ɵɵFactoryTarget.Directive });
 TranslationContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TranslationContextDirective, selector: "[niceTranslationContext]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationContextDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceTranslationContext]" }]
-        }], ctorParameters: function () { return [{ type: TranslationFormService }]; } });
+        }], ctorParameters: function () { return [{ type: NiceTranslationFormService }]; } });
 
 class TranslationToggleComponent {
     constructor(context, translationFormService) {
@@ -10190,54 +10492,12 @@ class TranslationToggleComponent {
         this.context.updateLanguage($event.value);
     }
 }
-TranslationToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationToggleComponent, deps: [{ token: TranslationContextDirective }, { token: TranslationFormService }], target: i0.ɵɵFactoryTarget.Component });
+TranslationToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationToggleComponent, deps: [{ token: TranslationContextDirective }, { token: NiceTranslationFormService }], target: i0.ɵɵFactoryTarget.Component });
 TranslationToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TranslationToggleComponent, selector: "nice-translation-toggle", ngImport: i0, template: "<mat-button-toggle-group\n    *ngIf=\"(languages$ | async)?.length > 1\"\n    (change)=\"onChange($event)\"\n    [value]=\"activeLanguage$ | async\"\n>\n    <mat-button-toggle *ngFor=\"let language of languages$ | async\" [value]=\"language\">\n        {{ language | uppercase }}\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", dependencies: [{ kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-translation-toggle", template: "<mat-button-toggle-group\n    *ngIf=\"(languages$ | async)?.length > 1\"\n    (change)=\"onChange($event)\"\n    [value]=\"activeLanguage$ | async\"\n>\n    <mat-button-toggle *ngFor=\"let language of languages$ | async\" [value]=\"language\">\n        {{ language | uppercase }}\n    </mat-button-toggle>\n</mat-button-toggle-group>\n" }]
-        }], ctorParameters: function () { return [{ type: TranslationContextDirective }, { type: TranslationFormService }]; } });
-
-function RequireForLanguages() {
-    return registerAsyncValidatorDecorator({
-        name: "RequireForLanguages",
-    });
-}
-class RequireForLanguagesValidator extends AsyncValidator {
-    constructor(service) {
-        super();
-        this.service = service;
-        this.name = "RequireForLanguages";
-    }
-    validate(formGroup) {
-        const requiredLanguages = this.service.requiredLanguages$.getValue();
-        if (!requiredLanguages.length) {
-            return of(null);
-        }
-        const missingLanguages = [];
-        for (const requiredLanguage of requiredLanguages) {
-            const control = formGroup.get(requiredLanguage);
-            if (control === null || control === void 0 ? void 0 : control.value) {
-                continue;
-            }
-            missingLanguages.push(requiredLanguage);
-        }
-        if (missingLanguages === null || missingLanguages === void 0 ? void 0 : missingLanguages.length) {
-            return of({ languageRequired: { missingLanguages } });
-        }
-        return of(null);
-    }
-}
-RequireForLanguagesValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RequireForLanguagesValidator, deps: [{ token: TranslationFormService }], target: i0.ɵɵFactoryTarget.Injectable });
-RequireForLanguagesValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RequireForLanguagesValidator });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RequireForLanguagesValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: TranslationFormService }]; } });
-
-class TranslationForm {
-    constructor(values) {
-        Object.assign(this, values !== null && values !== void 0 ? values : {});
-    }
-}
+        }], ctorParameters: function () { return [{ type: TranslationContextDirective }, { type: NiceTranslationFormService }]; } });
 
 class TranslationFormComponent {
     get classList() {
@@ -10361,14 +10621,15 @@ class TranslationFormComponent {
         this.currentControl = this.formGroup.get(languages[0]);
     }
 }
-TranslationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationFormComponent, deps: [{ token: i1$2.ControlContainer }, { token: TranslationContextDirective }, { token: TranslationFormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TranslationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TranslationFormComponent, selector: "ng-component", inputs: { required: "required", disabled: "disabled", placeholder: "placeholder", floating: "floating", maxLength: "maxLength" }, host: { properties: { "class": "this.classList", "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, ngImport: i0, template: ``, isInline: true });
+TranslationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationFormComponent, deps: [{ token: i1$3.ControlContainer }, { token: TranslationContextDirective }, { token: NiceTranslationFormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TranslationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TranslationFormComponent, selector: "ng-component", inputs: { required: "required", disabled: "disabled", placeholder: "placeholder", floating: "floating", maxLength: "maxLength" }, host: { properties: { "class": "this.classList", "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationFormComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.ControlContainer }, { type: TranslationContextDirective }, { type: TranslationFormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { classList: [{
+        }], ctorParameters: function () { return [{ type: i1$3.ControlContainer }, { type: TranslationContextDirective }, { type: NiceTranslationFormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { classList: [{
                 type: HostBinding,
                 args: ["class"]
             }], shouldLabelFloat: [{
@@ -10405,7 +10666,7 @@ TranslationFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             provide: MatFormFieldControl,
             useExisting: TranslationFormTextareaComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<textarea\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [class.resize-none]=\"!resizable\"\n></textarea>\n", dependencies: [{ kind: "directive", type: i1$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<textarea\n    *ngIf=\"currentControl\"\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [class.resize-none]=\"!resizable\"\n></textarea>\n", dependencies: [{ kind: "directive", type: i1$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationFormTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-translation-form-textarea", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10413,7 +10674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             provide: MatFormFieldControl,
                             useExisting: TranslationFormTextareaComponent,
                         },
-                    ], template: "<textarea\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [class.resize-none]=\"!resizable\"\n></textarea>\n" }]
+                    ], template: "<textarea\n    *ngIf=\"currentControl\"\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [class.resize-none]=\"!resizable\"\n></textarea>\n" }]
         }], propDecorators: { resizable: [{
                 type: Input
             }], rows: [{
@@ -10430,7 +10691,7 @@ TranslationFormTextfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             provide: MatFormFieldControl,
             useExisting: TranslationFormTextfieldComponent,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<input\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n", dependencies: [{ kind: "directive", type: i1$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<input\n    matInput\n    *ngIf=\"currentControl\"\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n", dependencies: [{ kind: "directive", type: i1$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TranslationFormTextfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-translation-form-textfield", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10438,9 +10699,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             provide: MatFormFieldControl,
                             useExisting: TranslationFormTextfieldComponent,
                         },
-                    ], template: "<input\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n" }]
+                    ], template: "<input\n    matInput\n    *ngIf=\"currentControl\"\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n" }]
         }] });
 
+function RequireForLanguages() {
+    return registerAsyncValidatorDecorator({
+        name: "RequireForLanguages",
+    });
+}
+class RequireForLanguagesValidator extends AsyncValidator {
+    constructor(service) {
+        super();
+        this.service = service;
+        this.name = "RequireForLanguages";
+    }
+    validate(formGroup) {
+        return this.service.requiredLanguages$.pipe(take(1), map((requiredLanguages) => {
+            if (!requiredLanguages.length) {
+                return null;
+            }
+            const missingLanguages = [];
+            for (const requiredLanguage of requiredLanguages) {
+                const control = formGroup.get(requiredLanguage);
+                if (control === null || control === void 0 ? void 0 : control.value) {
+                    continue;
+                }
+                missingLanguages.push(requiredLanguage);
+            }
+            if (missingLanguages === null || missingLanguages === void 0 ? void 0 : missingLanguages.length) {
+                return { languageRequired: { missingLanguages } };
+            }
+            return null;
+        }));
+    }
+}
+RequireForLanguagesValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RequireForLanguagesValidator, deps: [{ token: NiceTranslationFormService }], target: i0.ɵɵFactoryTarget.Injectable });
+RequireForLanguagesValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RequireForLanguagesValidator });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RequireForLanguagesValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceTranslationFormService }]; } });
+
 class NiceTranslationFormModule {
     static forRoot() {
         return {
@@ -10501,7 +10799,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }] });
 
 // tslint:disable-next-line:variable-name
-const TranslationFormDecorator = () => DynamicGroup();
+const TranslationFormGroup = () => DynamicGroup();
+
+class TranslationForm {
+    constructor(values) {
+        Object.assign(this, values !== null && values !== void 0 ? values : {});
+    }
+}
 
 class NiceAutofocusDirective {
     constructor(elem) {
@@ -10852,7 +11156,7 @@ class NiceChipListDirective {
         });
     }
 }
-NiceChipListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceChipListDirective, deps: [{ token: NiceAsyncTypeaheadComponent, optional: true }, { token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceChipListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceChipListDirective, deps: [{ token: NiceAsyncTypeaheadComponent, optional: true }, { token: i1$3.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 NiceChipListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceChipListDirective, selector: "input[niceChipList], nice-async-typeahead[niceChipList]", inputs: { withItemList: "withItemList", reloadOnSelected: "reloadOnSelected", separatorKeyboardCodes: "separatorKeyboardCodes" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceChipListDirective, decorators: [{
             type: Directive,
@@ -10862,7 +11166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
         }], ctorParameters: function () {
         return [{ type: NiceAsyncTypeaheadComponent, decorators: [{
                         type: Optional
-                    }] }, { type: i1$2.NgControl, decorators: [{
+                    }] }, { type: i1$3.NgControl, decorators: [{
                         type: Optional
                     }, {
                         type: Self
@@ -10977,7 +11281,7 @@ class NiceDraggableListDirective {
         return LexoRankUtils.getNewRank(itemAfter === null || itemAfter === void 0 ? void 0 : itemAfter[this.rankProperty], itemBefore === null || itemBefore === void 0 ? void 0 : itemBefore[this.rankProperty]);
     }
 }
-NiceDraggableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceDraggableListDirective, deps: [{ token: i1$2.FormArrayName, optional: true }, { token: i2$4.CdkDropList }], target: i0.ɵɵFactoryTarget.Directive });
+NiceDraggableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceDraggableListDirective, deps: [{ token: i1$3.FormArrayName, optional: true }, { token: i2$4.CdkDropList }], target: i0.ɵɵFactoryTarget.Directive });
 NiceDraggableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceDraggableListDirective, selector: "[cdkDropList][niceDraggableList]", inputs: { items: "items", rankProperty: "rankProperty" }, outputs: { itemsUpdated: "itemsUpdated", itemRankUpdated: "itemRankUpdated" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceDraggableListDirective, decorators: [{
             type: Directive,
@@ -10985,7 +11289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     selector: "[cdkDropList][niceDraggableList]"
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.FormArrayName, decorators: [{
+        return [{ type: i1$3.FormArrayName, decorators: [{
                         type: Optional
                     }] }, { type: i2$4.CdkDropList }];
     }, propDecorators: { items: [{
@@ -11116,11 +11420,11 @@ class NiceModalOpenerDirective {
             .subscribe(res => this.modalAfterClosed.emit(res));
     }
 }
-NiceModalOpenerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceModalOpenerDirective, deps: [{ token: i1$f.MatDialog }, { token: i0.Type }, { token: i1$f.MatDialogConfig }], target: i0.ɵɵFactoryTarget.Directive });
+NiceModalOpenerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceModalOpenerDirective, deps: [{ token: i1$h.MatDialog }, { token: i0.Type }, { token: i1$h.MatDialogConfig }], target: i0.ɵɵFactoryTarget.Directive });
 NiceModalOpenerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceModalOpenerDirective, inputs: { modalData: "modalData" }, outputs: { modalAfterClosed: "modalAfterClosed" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceModalOpenerDirective, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i1$f.MatDialog }, { type: i0.Type }, { type: i1$f.MatDialogConfig }]; }, propDecorators: { modalData: [{
+        }], ctorParameters: function () { return [{ type: i1$h.MatDialog }, { type: i0.Type }, { type: i1$h.MatDialogConfig }]; }, propDecorators: { modalData: [{
                 type: Input
             }], modalAfterClosed: [{
                 type: Output
@@ -11134,11 +11438,11 @@ class NiceModalOnClickDirective extends NiceModalOpenerDirective {
         this.open();
     }
 }
-NiceModalOnClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceModalOnClickDirective, deps: [{ token: i1$f.MatDialog }, { token: i0.Type }, { token: i1$f.MatDialogConfig }], target: i0.ɵɵFactoryTarget.Directive });
+NiceModalOnClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceModalOnClickDirective, deps: [{ token: i1$h.MatDialog }, { token: i0.Type }, { token: i1$h.MatDialogConfig }], target: i0.ɵɵFactoryTarget.Directive });
 NiceModalOnClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceModalOnClickDirective, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceModalOnClickDirective, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i1$f.MatDialog }, { type: i0.Type }, { type: i1$f.MatDialogConfig }]; }, propDecorators: { onClick: [{
+        }], ctorParameters: function () { return [{ type: i1$h.MatDialog }, { type: i0.Type }, { type: i1$h.MatDialogConfig }]; }, propDecorators: { onClick: [{
                 type: HostListener,
                 args: ["click"]
             }] } });
@@ -11174,7 +11478,7 @@ class NiceScrollResetDirective {
         this._unsubscribeAll.complete();
     }
 }
-NiceScrollResetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceScrollResetDirective, deps: [{ token: i0.ElementRef }, { token: i1$a.Router }], target: i0.ɵɵFactoryTarget.Directive });
+NiceScrollResetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceScrollResetDirective, deps: [{ token: i0.ElementRef }, { token: i1$b.Router }], target: i0.ɵɵFactoryTarget.Directive });
 NiceScrollResetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: NiceScrollResetDirective, selector: "[niceScrollReset]", exportAs: ["niceScrollReset"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceScrollResetDirective, decorators: [{
             type: Directive,
@@ -11182,7 +11486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     selector: "[niceScrollReset]",
                     exportAs: "niceScrollReset"
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$a.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$b.Router }]; } });
 
 class NiceScrollResetModule {
 }
@@ -11434,5 +11738,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LexoRankUtils, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NICE_ASYNC_TYPEAHEAD_PROVIDER, NavigationHideItemResolver, NavigationHintResolver, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselActiveContentDirective, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceCollapsableComponent, NiceCollapsableModule, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDateRangePickerComponent, NiceDateRangePickerModule, NiceDraggableListDirective, NiceDraggableListModule, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertDirective, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTranslationFormModule, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RequireForLanguages, RequireForLanguagesValidator, RerenderDirective, ResolveDirective, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TranslationContextDirective, TranslationForm, TranslationFormDecorator, TranslationFormService, TranslationFormTextareaComponent, TranslationFormTextfieldComponent, TranslationToggleComponent, TypeUtils, UrlUtils, _HintComponentBase, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
+export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LexoRankUtils, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NICE_ASYNC_TYPEAHEAD_PROVIDER, NavigationHideItemResolver, NavigationHintResolver, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselActiveContentDirective, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceCollapsableComponent, NiceCollapsableModule, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDateRangePickerComponent, NiceDateRangePickerModule, NiceDraggableListDirective, NiceDraggableListModule, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLoadingToastComponent, NiceLoadingToastDirective, NiceLoadingToastModule, NiceLoadingToastService, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertDirective, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTranslationFormModule, NiceTranslationFormService, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RequireForLanguages, RequireForLanguagesValidator, RerenderDirective, ResolveDirective, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TranslationContextDirective, TranslationForm, TranslationFormGroup, TranslationFormTextareaComponent, TranslationFormTextfieldComponent, TranslationToggleComponent, TypeUtils, UrlUtils, _HintComponentBase, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round, showErrorToast, showInfoToast, showLoadingToast, showSuccessOrErrorToast, showSuccessToast, showWarningToast };
 //# sourceMappingURL=recursyve-nice-ui-kit.v2.mjs.map