@recursyve/nice-ui-kit.v2 16.0.0-beta.132 → 16.0.0-beta.134

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/esm2022/lib/components/navigation/horizontal/components/basic/basic.component.mjs +4 -4
  2. package/esm2022/lib/components/navigation/horizontal/components/branch/branch.component.mjs +5 -5
  3. package/esm2022/lib/components/navigation/horizontal/horizontal.component.mjs +16 -12
  4. package/esm2022/lib/components/navigation/navigation.component.mjs +11 -4
  5. package/esm2022/lib/components/navigation/navigation.module.mjs +4 -1
  6. package/esm2022/lib/components/navigation/pipes/translate-with-context.pipe.mjs +25 -0
  7. package/esm2022/lib/components/navigation/providers/translation-context.service.mjs +16 -0
  8. package/esm2022/lib/components/navigation/vertical/components/aside/aside.component.mjs +4 -4
  9. package/esm2022/lib/components/navigation/vertical/components/basic/basic.component.mjs +5 -5
  10. package/esm2022/lib/components/navigation/vertical/components/collapsable/collapsable.component.mjs +6 -6
  11. package/esm2022/lib/components/navigation/vertical/components/group/group.component.mjs +5 -5
  12. package/esm2022/lib/components/navigation/vertical/vertical.component.mjs +24 -20
  13. package/fesm2022/recursyve-nice-ui-kit.v2.mjs +71 -27
  14. package/fesm2022/recursyve-nice-ui-kit.v2.mjs.map +1 -1
  15. package/lib/components/navigation/horizontal/horizontal.component.d.ts +4 -2
  16. package/lib/components/navigation/navigation.component.d.ts +3 -1
  17. package/lib/components/navigation/navigation.module.d.ts +12 -11
  18. package/lib/components/navigation/pipes/translate-with-context.pipe.d.ts +12 -0
  19. package/lib/components/navigation/providers/translation-context.service.d.ts +8 -0
  20. package/lib/components/navigation/vertical/vertical.component.d.ts +4 -2
  21. package/package.json +1 -2
@@ -7731,11 +7731,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImpor
7731
7731
  }]
7732
7732
  }], ctorParameters: function () { return [{ type: i1$b.Router }]; } });
7733
7733
 
7734
+ class NiceTranslationContextService {
7735
+ get context() {
7736
+ return this._context;
7737
+ }
7738
+ set context(context) {
7739
+ this._context = context;
7740
+ }
7741
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceTranslationContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
7742
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceTranslationContextService }); }
7743
+ }
7744
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceTranslationContextService, decorators: [{
7745
+ type: Injectable
7746
+ }] });
7747
+
7734
7748
  class NiceNavigationComponent {
7735
- constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService) {
7749
+ constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService, _translationContext) {
7736
7750
  this._changeDetectorRef = _changeDetectorRef;
7737
7751
  this._niceNavigationService = _niceNavigationService;
7738
7752
  this._niceUtilsService = _niceUtilsService;
7753
+ this._translationContext = _translationContext;
7739
7754
  this.animateNextNavChange = false;
7740
7755
  this.onRefreshed = new ReplaySubject(1);
7741
7756
  this._unsubscribeAll = new Subject();
@@ -7773,6 +7788,10 @@ class NiceNavigationComponent {
7773
7788
  // Mark for check
7774
7789
  this._changeDetectorRef.markForCheck();
7775
7790
  }
7791
+ if ("translationContext" in changes) {
7792
+ // Mark for check
7793
+ this._translationContext.context = changes.translationContext.currentValue;
7794
+ }
7776
7795
  }
7777
7796
  /**
7778
7797
  * Refresh the component to apply the changes
@@ -7789,7 +7808,7 @@ class NiceNavigationComponent {
7789
7808
  trackByFn(index, item) {
7790
7809
  return item.id || index;
7791
7810
  }
7792
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
7811
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: NiceTranslationContextService }], target: i0.ɵɵFactoryTarget.Component }); }
7793
7812
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceNavigationComponent, selector: "ng-component", usesOnChanges: true, ngImport: i0, template: ``, isInline: true }); }
7794
7813
  }
7795
7814
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceNavigationComponent, decorators: [{
@@ -7797,7 +7816,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImpor
7797
7816
  args: [{
7798
7817
  template: ``
7799
7818
  }]
7800
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }]; } });
7819
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: NiceTranslationContextService }]; } });
7820
+
7821
+ class NiceTranslateWithContextPipe {
7822
+ constructor(translate, context) {
7823
+ this.translate = translate;
7824
+ this.context = context;
7825
+ }
7826
+ transform(value) {
7827
+ if (!value) {
7828
+ return value;
7829
+ }
7830
+ return this.translate.instant(value, this.context.context);
7831
+ }
7832
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceTranslateWithContextPipe, deps: [{ token: i1$1.TranslateService }, { token: NiceTranslationContextService }], target: i0.ɵɵFactoryTarget.Pipe }); }
7833
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.5", ngImport: i0, type: NiceTranslateWithContextPipe, name: "niceTranslateWithContext", pure: false }); }
7834
+ }
7835
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceTranslateWithContextPipe, decorators: [{
7836
+ type: Pipe,
7837
+ args: [{ name: "niceTranslateWithContext", pure: false }]
7838
+ }], ctorParameters: function () { return [{ type: i1$1.TranslateService }, { type: NiceTranslationContextService }]; } });
7801
7839
 
7802
7840
  class NiceHorizontalNavigationBasicItemComponent {
7803
7841
  /**
@@ -7834,11 +7872,11 @@ class NiceHorizontalNavigationBasicItemComponent {
7834
7872
  this._unsubscribeAll.complete();
7835
7873
  }
7836
7874
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceHorizontalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
7837
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: { item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, 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 [matTooltip]=\"item.tooltip | translate\"\n [matTooltipDisabled]=\"!showTooltips\"\n [matTooltipPosition]=\"tooltipPosition\"\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: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7875
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: { item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, 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 [matTooltip]=\"item.tooltip | niceTranslateWithContext\"\n [matTooltipDisabled]=\"!showTooltips\"\n [matTooltipPosition]=\"tooltipPosition\"\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: NiceTranslateWithContextPipe, name: "niceTranslateWithContext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7838
7876
  }
7839
7877
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceHorizontalNavigationBasicItemComponent, decorators: [{
7840
7878
  type: Component,
7841
- 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 [matTooltip]=\"item.tooltip | translate\"\n [matTooltipDisabled]=\"!showTooltips\"\n [matTooltipPosition]=\"tooltipPosition\"\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" }]
7879
+ 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 [matTooltip]=\"item.tooltip | niceTranslateWithContext\"\n [matTooltipDisabled]=\"!showTooltips\"\n [matTooltipPosition]=\"tooltipPosition\"\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\n </div>\n </div>\n</ng-template>\n" }]
7842
7880
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }]; }, propDecorators: { item: [{
7843
7881
  type: Input
7844
7882
  }], name: [{
@@ -7967,11 +8005,11 @@ class NiceHorizontalNavigationBranchItemComponent {
7967
8005
  this._changeDetectorRef.markForCheck();
7968
8006
  }
7969
8007
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceHorizontalNavigationBranchItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
7970
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "showTooltips", "tooltipPosition"] }, { 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 }); }
8008
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationDividerItemComponent, selector: "nice-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }, { kind: "pipe", type: NiceTranslateWithContextPipe, name: "niceTranslateWithContext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7971
8009
  }
7972
8010
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceHorizontalNavigationBranchItemComponent, decorators: [{
7973
8011
  type: Component,
7974
- 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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" }]
8012
+ 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n" }]
7975
8013
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }]; }, propDecorators: { child: [{
7976
8014
  type: Input
7977
8015
  }], item: [{
@@ -8042,24 +8080,26 @@ class NiceHorizontalNavigationComponent extends NiceNavigationComponent {
8042
8080
  /**
8043
8081
  * Constructor
8044
8082
  */
8045
- constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService) {
8046
- super(_changeDetectorRef, _niceNavigationService, _niceUtilsService);
8083
+ constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService, _translationContextService) {
8084
+ super(_changeDetectorRef, _niceNavigationService, _niceUtilsService, _translationContextService);
8047
8085
  this.name = this._niceUtilsService.randomId();
8048
8086
  this.showTooltips = false;
8049
8087
  this.tooltipPosition = "after";
8050
8088
  }
8051
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceHorizontalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
8052
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceHorizontalNavigationComponent, selector: "nice-horizontal-navigation", inputs: { name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition", navigation: "navigation" }, exportAs: ["niceHorizontalNavigation"], usesInheritance: true, ngImport: i0, template: "<div class=\"nice-horizontal-navigation-wrapper\">\n <ng-container *ngFor=\"let item of navigation\">\n <!-- Skip the hidden items -->\n <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n <!-- Basic -->\n <nice-horizontal-navigation-basic-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'basic'\"\n [item]=\"item\"\n [name]=\"name\"\n [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-horizontal-navigation-basic-item>\n\n <!-- Branch: aside, collapsable, group -->\n <nice-horizontal-navigation-branch-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n [item]=\"item\"\n [name]=\"name\"\n [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-horizontal-navigation-branch-item>\n\n <!-- Spacer -->\n <nice-horizontal-navigation-spacer-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'spacer'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-horizontal-navigation-spacer-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: "component", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationSpacerItemComponent, selector: "nice-horizontal-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 }); }
8089
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceHorizontalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: NiceTranslationContextService }], target: i0.ɵɵFactoryTarget.Component }); }
8090
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceHorizontalNavigationComponent, selector: "nice-horizontal-navigation", inputs: { name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition", translationContext: "translationContext", navigation: "navigation" }, providers: [NiceTranslationContextService], exportAs: ["niceHorizontalNavigation"], usesInheritance: true, ngImport: i0, template: "<div class=\"nice-horizontal-navigation-wrapper\">\n <ng-container *ngFor=\"let item of navigation\">\n <!-- Skip the hidden items -->\n <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n <!-- Basic -->\n <nice-horizontal-navigation-basic-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'basic'\"\n [item]=\"item\"\n [name]=\"name\"\n [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-horizontal-navigation-basic-item>\n\n <!-- Branch: aside, collapsable, group -->\n <nice-horizontal-navigation-branch-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n [item]=\"item\"\n [name]=\"name\"\n [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-horizontal-navigation-branch-item>\n\n <!-- Spacer -->\n <nice-horizontal-navigation-spacer-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'spacer'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-horizontal-navigation-spacer-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: "component", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationSpacerItemComponent, selector: "nice-horizontal-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 }); }
8053
8091
  }
8054
8092
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceHorizontalNavigationComponent, decorators: [{
8055
8093
  type: Component,
8056
- args: [{ selector: "nice-horizontal-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: "niceHorizontalNavigation", template: "<div class=\"nice-horizontal-navigation-wrapper\">\n <ng-container *ngFor=\"let item of navigation\">\n <!-- Skip the hidden items -->\n <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n <!-- Basic -->\n <nice-horizontal-navigation-basic-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'basic'\"\n [item]=\"item\"\n [name]=\"name\"\n [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-horizontal-navigation-basic-item>\n\n <!-- Branch: aside, collapsable, group -->\n <nice-horizontal-navigation-branch-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n [item]=\"item\"\n [name]=\"name\"\n [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-horizontal-navigation-branch-item>\n\n <!-- Spacer -->\n <nice-horizontal-navigation-spacer-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'spacer'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-horizontal-navigation-spacer-item>\n </ng-container>\n </ng-container>\n</div>\n" }]
8057
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }]; }, propDecorators: { name: [{
8094
+ args: [{ selector: "nice-horizontal-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [NiceTranslationContextService], exportAs: "niceHorizontalNavigation", template: "<div class=\"nice-horizontal-navigation-wrapper\">\n <ng-container *ngFor=\"let item of navigation\">\n <!-- Skip the hidden items -->\n <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n <!-- Basic -->\n <nice-horizontal-navigation-basic-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'basic'\"\n [item]=\"item\"\n [name]=\"name\"\n [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-horizontal-navigation-basic-item>\n\n <!-- Branch: aside, collapsable, group -->\n <nice-horizontal-navigation-branch-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n [item]=\"item\"\n [name]=\"name\"\n [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-horizontal-navigation-branch-item>\n\n <!-- Spacer -->\n <nice-horizontal-navigation-spacer-item\n class=\"nice-horizontal-navigation-menu-item\"\n *ngIf=\"item.type === 'spacer'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-horizontal-navigation-spacer-item>\n </ng-container>\n </ng-container>\n</div>\n" }]
8095
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: NiceTranslationContextService }]; }, propDecorators: { name: [{
8058
8096
  type: Input
8059
8097
  }], showTooltips: [{
8060
8098
  type: Input
8061
8099
  }], tooltipPosition: [{
8062
8100
  type: Input
8101
+ }], translationContext: [{
8102
+ type: Input
8063
8103
  }], navigation: [{
8064
8104
  type: Input
8065
8105
  }] } });
@@ -8657,11 +8697,11 @@ class NiceVerticalNavigationBasicItemComponent {
8657
8697
  this._unsubscribeAll.complete();
8658
8698
  }
8659
8699
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$b.ActivatedRoute }, { token: i1$b.Router }], target: i0.ɵɵFactoryTarget.Component }); }
8660
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: { item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n class=\"nice-vertical-navigation-item-wrapper\"\n matTooltipClass=\"nice-vertical-navigation-item-tooltips\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n [matTooltip]=\"item.tooltip | translate\"\n [matTooltipDisabled]=\"!showTooltips\"\n [matTooltipPosition]=\"tooltipPosition\"\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: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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 }); }
8700
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: { item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n class=\"nice-vertical-navigation-item-wrapper\"\n matTooltipClass=\"nice-vertical-navigation-item-tooltips\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n [matTooltip]=\"item.tooltip | niceTranslateWithContext\"\n [matTooltipDisabled]=\"!showTooltips\"\n [matTooltipPosition]=\"tooltipPosition\"\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: ["shouldShow", "item"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }, { kind: "pipe", type: NiceTranslateWithContextPipe, name: "niceTranslateWithContext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8661
8701
  }
8662
8702
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, decorators: [{
8663
8703
  type: Component,
8664
- args: [{ selector: "nice-vertical-navigation-basic-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n class=\"nice-vertical-navigation-item-wrapper\"\n matTooltipClass=\"nice-vertical-navigation-item-tooltips\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n [matTooltip]=\"item.tooltip | translate\"\n [matTooltipDisabled]=\"!showTooltips\"\n [matTooltipPosition]=\"tooltipPosition\"\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" }]
8704
+ args: [{ selector: "nice-vertical-navigation-basic-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n class=\"nice-vertical-navigation-item-wrapper\"\n matTooltipClass=\"nice-vertical-navigation-item-tooltips\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n [matTooltip]=\"item.tooltip | niceTranslateWithContext\"\n [matTooltipDisabled]=\"!showTooltips\"\n [matTooltipPosition]=\"tooltipPosition\"\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\n </div>\n </div>\n </ng-container>\n</ng-template>\n" }]
8665
8705
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$b.ActivatedRoute }, { type: i1$b.Router }]; }, propDecorators: { item: [{
8666
8706
  type: Input
8667
8707
  }], name: [{
@@ -8987,11 +9027,11 @@ class NiceVerticalNavigationCollapsableItemComponent {
8987
9027
  return item.id || index;
8988
9028
  }
8989
9029
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$b.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
8990
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { 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 }); }
9030
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, 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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { 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: NiceShouldHidePipe, name: "niceShouldHide" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }, { kind: "pipe", type: NiceTranslateWithContextPipe, name: "niceTranslateWithContext" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8991
9031
  }
8992
9032
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, decorators: [{
8993
9033
  type: Component,
8994
- 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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" }]
9034
+ 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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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" }]
8995
9035
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$b.Router }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
8996
9036
  type: Input
8997
9037
  }], item: [{
@@ -9051,11 +9091,11 @@ class NiceVerticalNavigationGroupItemComponent {
9051
9091
  return item.id || index;
9052
9092
  }
9053
9093
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
9054
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { 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", "showTooltips", "tooltipPosition"] }, { 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 }); }
9094
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, 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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { 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", "showTooltips", "tooltipPosition"] }, { 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" }, { kind: "pipe", type: NiceTranslateWithContextPipe, name: "niceTranslateWithContext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9055
9095
  }
9056
9096
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationGroupItemComponent, decorators: [{
9057
9097
  type: Component,
9058
- 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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" }]
9098
+ 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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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" }]
9059
9099
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
9060
9100
  type: Input
9061
9101
  }], item: [{
@@ -9176,11 +9216,11 @@ class NiceVerticalNavigationAsideItemComponent {
9176
9216
  return item.id || index;
9177
9217
  }
9178
9218
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationAsideItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$b.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
9179
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", skipChildren: "skipChildren", tooltipPosition: "tooltipPosition" }, 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { 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", "showTooltips", "tooltipPosition"] }, { 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 }); }
9219
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", skipChildren: "skipChildren", tooltipPosition: "tooltipPosition" }, 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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { 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", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: NiceTranslateWithContextPipe, name: "niceTranslateWithContext" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9180
9220
  }
9181
9221
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationAsideItemComponent, decorators: [{
9182
9222
  type: Component,
9183
- 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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" }]
9223
+ 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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 | niceTranslateWithContext }}\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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" }]
9184
9224
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$b.Router }, { type: NiceNavigationService }]; }, propDecorators: { activeItemId: [{
9185
9225
  type: Input
9186
9226
  }], autoCollapse: [{
@@ -9213,8 +9253,8 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
9213
9253
  /**
9214
9254
  * Constructor
9215
9255
  */
9216
- constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService, _animationBuilder, _elementRef, _renderer2, _router, _scrollStrategyOptions, _hintService) {
9217
- super(_changeDetectorRef, _niceNavigationService, _niceUtilsService);
9256
+ constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService, _translationContextService, _animationBuilder, _elementRef, _renderer2, _router, _scrollStrategyOptions, _hintService) {
9257
+ super(_changeDetectorRef, _niceNavigationService, _niceUtilsService, _translationContextService);
9218
9258
  this._animationBuilder = _animationBuilder;
9219
9259
  this._elementRef = _elementRef;
9220
9260
  this._renderer2 = _renderer2;
@@ -9701,13 +9741,13 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
9701
9741
  // Execute the observable
9702
9742
  this.openedChanged.next(open);
9703
9743
  }
9704
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", 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 }); }
9705
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", 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", showTooltips: "showTooltips", transparentOverlay: "transparentOverlay", tooltipPosition: "tooltipPosition", 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "skipChildren", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { 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", "showTooltips", "tooltipPosition"] }, { 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 }); }
9744
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: NiceTranslationContextService }, { token: i1$c.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$b.Router }, { token: i1$7.ScrollStrategyOptions }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Component }); }
9745
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", 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", showTooltips: "showTooltips", transparentOverlay: "transparentOverlay", tooltipPosition: "tooltipPosition", translationContext: "translationContext", 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" } }, providers: [NiceTranslationContextService], 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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", "showTooltips", "skipChildren", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { 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", "showTooltips", "tooltipPosition"] }, { 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 }); }
9706
9746
  }
9707
9747
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: NiceVerticalNavigationComponent, decorators: [{
9708
9748
  type: Component,
9709
- 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-vertical-navigation-aside-item>\n </ng-container>\n </ng-container>\n</div>\n" }]
9710
- }], 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: [{
9749
+ args: [{ selector: "nice-vertical-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [NiceTranslationContextService], 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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\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 [showTooltips]=\"showTooltips\"\n [tooltipPosition]=\"tooltipPosition\"\n ></nice-vertical-navigation-aside-item>\n </ng-container>\n </ng-container>\n</div>\n" }]
9750
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: NiceTranslationContextService }, { type: i1$c.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$b.Router }, { type: i1$7.ScrollStrategyOptions }, { type: NiceNavigationHintService }]; }, propDecorators: { name: [{
9711
9751
  type: Input
9712
9752
  }], appearance: [{
9713
9753
  type: Input
@@ -9731,6 +9771,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImpor
9731
9771
  type: Input
9732
9772
  }], tooltipPosition: [{
9733
9773
  type: Input
9774
+ }], translationContext: [{
9775
+ type: Input
9734
9776
  }], appearanceChanged: [{
9735
9777
  type: Output
9736
9778
  }], modeChanged: [{
@@ -9780,6 +9822,7 @@ class NiceNavigationModule {
9780
9822
  NiceVerticalNavigationComponent,
9781
9823
  NiceShouldHidePipe,
9782
9824
  NiceShouldShowHintPipe,
9825
+ NiceTranslateWithContextPipe,
9783
9826
  NiceShowHintDirective], imports: [CommonModule,
9784
9827
  RouterModule,
9785
9828
  MatButtonModule,
@@ -9830,6 +9873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImpor
9830
9873
  NiceVerticalNavigationComponent,
9831
9874
  NiceShouldHidePipe,
9832
9875
  NiceShouldShowHintPipe,
9876
+ NiceTranslateWithContextPipe,
9833
9877
  NiceShowHintDirective
9834
9878
  ],
9835
9879
  providers: [NiceNavigationHintService],