@recursyve/nice-ui-kit.v2 13.2.0-beta.110 → 13.2.0-beta.111
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.
- package/esm2020/lib/components/navigation/directives/show-hint.directive.mjs +164 -0
- package/esm2020/lib/components/navigation/navigation.module.mjs +9 -3
- package/esm2020/lib/components/navigation/navigation.types.mjs +1 -1
- package/esm2020/lib/components/navigation/pipes/should-show-hint.pipe.mjs +32 -0
- package/esm2020/lib/components/navigation/providers/hint.resolver.mjs +3 -0
- package/esm2020/lib/components/navigation/vertical/components/basic/basic.component.mjs +6 -4
- package/esm2020/lib/components/navigation/vertical/components/collapsable/collapsable.component.mjs +5 -4
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs +195 -7
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs +194 -7
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/lib/components/navigation/directives/show-hint.directive.d.ts +34 -0
- package/lib/components/navigation/navigation.module.d.ts +12 -10
- package/lib/components/navigation/navigation.types.d.ts +6 -0
- package/lib/components/navigation/pipes/should-show-hint.pipe.d.ts +12 -0
- package/lib/components/navigation/providers/hint.resolver.d.ts +4 -0
- package/package.json +1 -1
- package/src/lib/components/navigation/vertical/styles/appearances/default.theme.scss +38 -0
|
@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
|
|
|
5
5
|
import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, Optional, Inject, ViewChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, TemplateRef, ContentChildren, ContentChild, SimpleChange, SkipSelf } from '@angular/core';
|
|
6
6
|
import { plainToInstance } from 'class-transformer';
|
|
7
7
|
import { map, filter, takeUntil, tap, take, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
|
|
8
|
-
import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, tap as tap$1, Observable, combineLatest, fromEvent, merge as merge$1 } from 'rxjs';
|
|
8
|
+
import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, tap as tap$1, Observable, combineLatest, fromEvent, of, merge as merge$1 } from 'rxjs';
|
|
9
9
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
10
10
|
import * as i3 from '@angular/material/icon';
|
|
11
11
|
import { MatIconModule } from '@angular/material/icon';
|
|
@@ -7007,6 +7007,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
7007
7007
|
}]
|
|
7008
7008
|
}] });
|
|
7009
7009
|
|
|
7010
|
+
class NiceShowHintDirective {
|
|
7011
|
+
constructor(_overlay, _elementRef, _viewContainerRef, _ngZone, _platform) {
|
|
7012
|
+
this._overlay = _overlay;
|
|
7013
|
+
this._elementRef = _elementRef;
|
|
7014
|
+
this._viewContainerRef = _viewContainerRef;
|
|
7015
|
+
this._ngZone = _ngZone;
|
|
7016
|
+
this._platform = _platform;
|
|
7017
|
+
this.shouldShow = false;
|
|
7018
|
+
this._pointerExitEventsInitialized = false;
|
|
7019
|
+
this._passiveListeners = [];
|
|
7020
|
+
this.unsubscribeAll$ = new Subject();
|
|
7021
|
+
}
|
|
7022
|
+
ngAfterViewInit() {
|
|
7023
|
+
this._setupPointerEnterEventsIfNeeded();
|
|
7024
|
+
if (this.item.hint) {
|
|
7025
|
+
this._portal = new ComponentPortal(this.item.hint.component, this._viewContainerRef);
|
|
7026
|
+
}
|
|
7027
|
+
}
|
|
7028
|
+
ngOnDestroy() {
|
|
7029
|
+
this.unsubscribeAll$.next();
|
|
7030
|
+
this.unsubscribeAll$.complete();
|
|
7031
|
+
}
|
|
7032
|
+
show() {
|
|
7033
|
+
if (!this.shouldShow || !this.item.hint || this._isHintVisible()) {
|
|
7034
|
+
return;
|
|
7035
|
+
}
|
|
7036
|
+
const overlayRef = this._createOverlay();
|
|
7037
|
+
this._detach();
|
|
7038
|
+
const instance = (this._hintInstance = overlayRef.attach(this._portal).instance);
|
|
7039
|
+
instance._triggerElement = this._elementRef.nativeElement;
|
|
7040
|
+
instance
|
|
7041
|
+
.afterHidden()
|
|
7042
|
+
.pipe(takeUntil(this.unsubscribeAll$))
|
|
7043
|
+
.subscribe(() => this._detach());
|
|
7044
|
+
instance.show();
|
|
7045
|
+
}
|
|
7046
|
+
hide() {
|
|
7047
|
+
const instance = this._hintInstance;
|
|
7048
|
+
if (instance) {
|
|
7049
|
+
this._detach();
|
|
7050
|
+
}
|
|
7051
|
+
}
|
|
7052
|
+
_createOverlay() {
|
|
7053
|
+
if (this._overlayRef) {
|
|
7054
|
+
const existingStrategy = this._overlayRef.getConfig()
|
|
7055
|
+
.positionStrategy;
|
|
7056
|
+
// @ts-ignore
|
|
7057
|
+
if (!origin && existingStrategy._origin instanceof ElementRef) {
|
|
7058
|
+
return this._overlayRef;
|
|
7059
|
+
}
|
|
7060
|
+
this._detach();
|
|
7061
|
+
}
|
|
7062
|
+
// Create connected position strategy that listens for scroll events to reposition.
|
|
7063
|
+
const strategy = this._overlay
|
|
7064
|
+
.position()
|
|
7065
|
+
.flexibleConnectedTo(this._elementRef)
|
|
7066
|
+
.withPositions([
|
|
7067
|
+
{
|
|
7068
|
+
originX: "center",
|
|
7069
|
+
originY: "bottom",
|
|
7070
|
+
overlayX: "start",
|
|
7071
|
+
overlayY: "top",
|
|
7072
|
+
offsetY: 8
|
|
7073
|
+
}
|
|
7074
|
+
])
|
|
7075
|
+
.withFlexibleDimensions(false);
|
|
7076
|
+
strategy.positionChanges.pipe(takeUntil(this.unsubscribeAll$)).subscribe(change => {
|
|
7077
|
+
if (this._hintInstance) {
|
|
7078
|
+
if (change.scrollableViewProperties.isOverlayClipped && this._hintInstance.isVisible()) {
|
|
7079
|
+
// After position changes occur and the overlay is clipped by
|
|
7080
|
+
// a parent scrollable then close the tooltip.
|
|
7081
|
+
this._ngZone.run(() => this.hide());
|
|
7082
|
+
}
|
|
7083
|
+
}
|
|
7084
|
+
});
|
|
7085
|
+
this._overlayRef = this._overlay.create({
|
|
7086
|
+
positionStrategy: strategy
|
|
7087
|
+
});
|
|
7088
|
+
this._overlayRef
|
|
7089
|
+
.detachments()
|
|
7090
|
+
.pipe(takeUntil(this.unsubscribeAll$))
|
|
7091
|
+
.subscribe(() => this._detach());
|
|
7092
|
+
this._overlayRef
|
|
7093
|
+
.outsidePointerEvents()
|
|
7094
|
+
.pipe(takeUntil(this.unsubscribeAll$))
|
|
7095
|
+
.subscribe(() => this._hintInstance?._handleBodyInteraction());
|
|
7096
|
+
return this._overlayRef;
|
|
7097
|
+
}
|
|
7098
|
+
_detach() {
|
|
7099
|
+
if (this._overlayRef && this._overlayRef.hasAttached()) {
|
|
7100
|
+
this._overlayRef.detach();
|
|
7101
|
+
}
|
|
7102
|
+
this._hintInstance = null;
|
|
7103
|
+
}
|
|
7104
|
+
_isHintVisible() {
|
|
7105
|
+
return !!this._hintInstance && this._hintInstance.isVisible();
|
|
7106
|
+
}
|
|
7107
|
+
_setupPointerEnterEventsIfNeeded() {
|
|
7108
|
+
// Optimization: Defer hooking up events if there's no message or the tooltip is disabled.
|
|
7109
|
+
if (this._passiveListeners.length) {
|
|
7110
|
+
return;
|
|
7111
|
+
}
|
|
7112
|
+
// The mouse events shouldn't be bound on mobile devices, because they can prevent the
|
|
7113
|
+
// first tap from firing its click event or can cause the tooltip to open for clicks.
|
|
7114
|
+
if (this._platformSupportsMouseEvents()) {
|
|
7115
|
+
this._passiveListeners.push([
|
|
7116
|
+
"mouseenter",
|
|
7117
|
+
() => {
|
|
7118
|
+
this._setupPointerExitEventsIfNeeded();
|
|
7119
|
+
this.show();
|
|
7120
|
+
},
|
|
7121
|
+
]);
|
|
7122
|
+
}
|
|
7123
|
+
this._addListeners(this._passiveListeners);
|
|
7124
|
+
}
|
|
7125
|
+
_setupPointerExitEventsIfNeeded() {
|
|
7126
|
+
if (this._pointerExitEventsInitialized) {
|
|
7127
|
+
return;
|
|
7128
|
+
}
|
|
7129
|
+
this._pointerExitEventsInitialized = true;
|
|
7130
|
+
const exitListeners = [];
|
|
7131
|
+
if (this._platformSupportsMouseEvents()) {
|
|
7132
|
+
exitListeners.push([
|
|
7133
|
+
"mouseleave",
|
|
7134
|
+
event => {
|
|
7135
|
+
const newTarget = event.relatedTarget;
|
|
7136
|
+
if (!newTarget || !this._overlayRef?.overlayElement.contains(newTarget)) {
|
|
7137
|
+
this.hide();
|
|
7138
|
+
}
|
|
7139
|
+
},
|
|
7140
|
+
]);
|
|
7141
|
+
}
|
|
7142
|
+
this._addListeners(exitListeners);
|
|
7143
|
+
this._passiveListeners.push(...exitListeners);
|
|
7144
|
+
}
|
|
7145
|
+
_platformSupportsMouseEvents() {
|
|
7146
|
+
return !this._platform.IOS && !this._platform.ANDROID;
|
|
7147
|
+
}
|
|
7148
|
+
_addListeners(listeners) {
|
|
7149
|
+
listeners.forEach(([event, listener]) => {
|
|
7150
|
+
this._elementRef.nativeElement.addEventListener(event, listener);
|
|
7151
|
+
});
|
|
7152
|
+
}
|
|
7153
|
+
}
|
|
7154
|
+
NiceShowHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShowHintDirective, deps: [{ token: i1$4.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i1$a.Platform }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7155
|
+
NiceShowHintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: { shouldShow: "shouldShow", item: "item" }, ngImport: i0 });
|
|
7156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShowHintDirective, decorators: [{
|
|
7157
|
+
type: Directive,
|
|
7158
|
+
args: [{ selector: "[niceShowHint]" }]
|
|
7159
|
+
}], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i1$a.Platform }]; }, propDecorators: { shouldShow: [{
|
|
7160
|
+
type: Input
|
|
7161
|
+
}], item: [{
|
|
7162
|
+
type: Input
|
|
7163
|
+
}] } });
|
|
7164
|
+
|
|
7165
|
+
class NiceShouldShowHintPipe {
|
|
7166
|
+
constructor(injector) {
|
|
7167
|
+
this.injector = injector;
|
|
7168
|
+
}
|
|
7169
|
+
transform(value) {
|
|
7170
|
+
if (!Array.isArray(value)) {
|
|
7171
|
+
value = [value];
|
|
7172
|
+
}
|
|
7173
|
+
return combineLatest(value.map(x => this.transformHint(x))).pipe(map(res => res.some(x => x)));
|
|
7174
|
+
}
|
|
7175
|
+
transformHint(value) {
|
|
7176
|
+
if (!value.hint) {
|
|
7177
|
+
return of(false);
|
|
7178
|
+
}
|
|
7179
|
+
const resolver = this.injector.get(value.hint.resolver);
|
|
7180
|
+
if (!resolver) {
|
|
7181
|
+
return of(false);
|
|
7182
|
+
}
|
|
7183
|
+
return resolver.shouldShowHint();
|
|
7184
|
+
}
|
|
7185
|
+
}
|
|
7186
|
+
NiceShouldShowHintPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShouldShowHintPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
7187
|
+
NiceShouldShowHintPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShouldShowHintPipe, name: "niceShouldShowHint" });
|
|
7188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShouldShowHintPipe, decorators: [{
|
|
7189
|
+
type: Pipe,
|
|
7190
|
+
args: [{ name: "niceShouldShowHint" }]
|
|
7191
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
|
|
7192
|
+
|
|
7010
7193
|
class NiceVerticalNavigationBasicItemComponent {
|
|
7011
7194
|
/**
|
|
7012
7195
|
* Constructor
|
|
@@ -7051,10 +7234,10 @@ class NiceVerticalNavigationBasicItemComponent {
|
|
|
7051
7234
|
}
|
|
7052
7235
|
}
|
|
7053
7236
|
NiceVerticalNavigationBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$6.ActivatedRoute }, { token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
7054
|
-
NiceVerticalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n class=\"nice-vertical-navigation-item-wrapper\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n>\n\n <!-- Item with an internal link -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n [queryParams]=\"item?.queryParams\"\n [state]=\"item?.state\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with an external link -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n [href]=\"item.link\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with a function -->\n <div\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"!item.link && item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n <!-- Item with an internal link and function -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with an external link and function -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n [href]=\"item.link\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with a no link and no function -->\n <div\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"!item.link && !item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n <!-- Item is disabled -->\n <div\n class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n *ngIf=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n <!-- Icon -->\n
|
|
7237
|
+
NiceVerticalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n class=\"nice-vertical-navigation-item-wrapper\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n>\n\n <!-- Item with an internal link -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n [queryParams]=\"item?.queryParams\"\n [state]=\"item?.state\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with an external link -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n [href]=\"item.link\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with a function -->\n <div\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"!item.link && item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n <!-- Item with an internal link and function -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with an external link and function -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n [href]=\"item.link\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with a no link and no function -->\n <div\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"!item.link && !item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n <!-- Item is disabled -->\n <div\n class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n *ngIf=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n <!-- Icon -->\n <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n *ngIf=\"item.icon && item.iconType === 'material'\"\n >\n {{ item.activeIcon || item.icon }}\n </mat-icon>\n\n <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n [svgIcon]=\"item.activeIcon || item.icon\"\n *ngIf=\"item.icon && item.iconType == 'svg'\"\n ></mat-icon>\n </ng-container>\n\n <ng-template #notActive>\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n *ngIf=\"item.icon && item.iconType === 'material'\"\n >\n {{ item.icon }}\n </mat-icon>\n\n <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n [svgIcon]=\"item.icon\"\n *ngIf=\"item.icon && item.iconType == 'svg'\"\n ></mat-icon>\n </ng-template>\n\n <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n </div>\n\n <!-- Title & Subtitle -->\n <div class=\"nice-vertical-navigation-item-title-wrapper\">\n <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n <span [ngClass]=\"item.classes?.title\">\n {{ item.title | translate }}\n </span>\n\n <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n </div>\n <div\n class=\"nice-vertical-navigation-item-subtitle\"\n *ngIf=\"item.subtitle\"\n >\n <span [ngClass]=\"item.classes?.subtitle\">\n {{ item.subtitle | translate }}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n <div\n class=\"nice-vertical-navigation-item-badge\"\n *ngIf=\"item.badge\"\n >\n <div\n class=\"nice-vertical-navigation-item-badge-content\"\n [ngClass]=\"item.badge.classes\"\n >\n {{ item.badge.title | translate }}\n </div>\n </div>\n </ng-container>\n</ng-template>\n", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: ["shouldShow", "item"] }], pipes: { "async": i4.AsyncPipe, "niceShouldShowHint": NiceShouldShowHintPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7055
7238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, decorators: [{
|
|
7056
7239
|
type: Component,
|
|
7057
|
-
args: [{ selector: "nice-vertical-navigation-basic-item", styles: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n class=\"nice-vertical-navigation-item-wrapper\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n>\n\n <!-- Item with an internal link -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n [queryParams]=\"item?.queryParams\"\n [state]=\"item?.state\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with an external link -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n [href]=\"item.link\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with a function -->\n <div\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"!item.link && item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n <!-- Item with an internal link and function -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with an external link and function -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n [href]=\"item.link\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with a no link and no function -->\n <div\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"!item.link && !item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n <!-- Item is disabled -->\n <div\n class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n *ngIf=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n <!-- Icon -->\n
|
|
7240
|
+
args: [{ selector: "nice-vertical-navigation-basic-item", styles: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n class=\"nice-vertical-navigation-item-wrapper\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n>\n\n <!-- Item with an internal link -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n [queryParams]=\"item?.queryParams\"\n [state]=\"item?.state\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with an external link -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n [href]=\"item.link\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with a function -->\n <div\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"!item.link && item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n <!-- Item with an internal link and function -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with an external link and function -->\n <a\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n [href]=\"item.link\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n\n <!-- Item with a no link and no function -->\n <div\n class=\"nice-vertical-navigation-item\"\n *ngIf=\"!item.link && !item.function && !item.disabled\"\n [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n <!-- Item is disabled -->\n <div\n class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n *ngIf=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n <!-- Icon -->\n <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n *ngIf=\"item.icon && item.iconType === 'material'\"\n >\n {{ item.activeIcon || item.icon }}\n </mat-icon>\n\n <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n [svgIcon]=\"item.activeIcon || item.icon\"\n *ngIf=\"item.icon && item.iconType == 'svg'\"\n ></mat-icon>\n </ng-container>\n\n <ng-template #notActive>\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n *ngIf=\"item.icon && item.iconType === 'material'\"\n >\n {{ item.icon }}\n </mat-icon>\n\n <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n [svgIcon]=\"item.icon\"\n *ngIf=\"item.icon && item.iconType == 'svg'\"\n ></mat-icon>\n </ng-template>\n\n <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n </div>\n\n <!-- Title & Subtitle -->\n <div class=\"nice-vertical-navigation-item-title-wrapper\">\n <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n <span [ngClass]=\"item.classes?.title\">\n {{ item.title | translate }}\n </span>\n\n <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n </div>\n <div\n class=\"nice-vertical-navigation-item-subtitle\"\n *ngIf=\"item.subtitle\"\n >\n <span [ngClass]=\"item.classes?.subtitle\">\n {{ item.subtitle | translate }}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n <div\n class=\"nice-vertical-navigation-item-badge\"\n *ngIf=\"item.badge\"\n >\n <div\n class=\"nice-vertical-navigation-item-badge-content\"\n [ngClass]=\"item.badge.classes\"\n >\n {{ item.badge.title | translate }}\n </div>\n </div>\n </ng-container>\n</ng-template>\n" }]
|
|
7058
7241
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$6.ActivatedRoute }, { type: i1$6.Router }]; }, propDecorators: { item: [{
|
|
7059
7242
|
type: Input
|
|
7060
7243
|
}], name: [{
|
|
@@ -7375,10 +7558,10 @@ class NiceVerticalNavigationCollapsableItemComponent {
|
|
|
7375
7558
|
}
|
|
7376
7559
|
}
|
|
7377
7560
|
NiceVerticalNavigationCollapsableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$6.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7378
|
-
NiceVerticalNavigationCollapsableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div\n class=\"nice-vertical-navigation-item-wrapper\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n>\n <div\n class=\"nice-vertical-navigation-item\"\n [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n [class.child-activated]=\"hasChildActivated$ | async\"\n (click)=\"toggleCollapsable()\"\n >\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
|
|
7561
|
+
NiceVerticalNavigationCollapsableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div\n class=\"nice-vertical-navigation-item-wrapper\"\n [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n [ngClass]=\"item.classes?.wrapper\"\n>\n <div\n class=\"nice-vertical-navigation-item\"\n [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n [class.child-activated]=\"hasChildActivated$ | async\"\n (click)=\"toggleCollapsable()\"\n *ngIf=\"{ showHint: item.children ?? [] | niceShouldShowHint | async } as ctx\"\n >\n <!-- Icon -->\n <div class=\"nice-vertical-navigation-item-icon-wrapper\" style=\"position: relative\">\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n *ngIf=\"item.icon && item.iconType === 'material'\"\n >\n {{ item.icon }}\n </mat-icon>\n\n <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n <mat-icon\n class=\"nice-vertical-navigation-item-icon\"\n [ngClass]=\"item.classes?.icon\"\n [svgIcon]=\"item.icon\"\n *ngIf=\"item.icon && item.iconType == 'svg'\"\n ></mat-icon>\n\n <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n </div>\n\n <!-- Title & Subtitle -->\n <div class=\"nice-vertical-navigation-item-title-wrapper\">\n <div class=\"nice-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{ item.title | translate }}\n </span>\n\n <div *ngIf=\"ctx.showHint && isCollapsed\" class=\"nice-vertical-navigation-hint\"></div>\n </div>\n <div\n class=\"nice-vertical-navigation-item-subtitle\"\n *ngIf=\"item.subtitle\"\n >\n <span [ngClass]=\"item.classes?.subtitle\">\n {{ item.subtitle | translate }}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n <div\n class=\"nice-vertical-navigation-item-badge\"\n *ngIf=\"item.badge\">\n\n <div\n class=\"nice-vertical-navigation-item-badge-content\"\n [ngClass]=\"item.badge.classes\"\n >\n {{ item.badge.title | translate }}\n </div>\n </div>\n\n <!-- Arrow -->\n <mat-icon class=\"nice-vertical-navigation-item-arrow icon-size-4\">chevron_right</mat-icon>\n </div>\n</div>\n\n<div\n class=\"nice-vertical-navigation-item-children\"\n *ngIf=\"!isCollapsed\"\n @expandCollapse\n>\n <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n <!-- Skip the hidden items -->\n <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n <!-- Basic -->\n <nice-vertical-navigation-basic-item\n *ngIf=\"item.type === 'basic'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-vertical-navigation-basic-item>\n\n <!-- Collapsable -->\n <nice-vertical-navigation-collapsable-item\n *ngIf=\"item.type === 'collapsable'\"\n [item]=\"item\"\n [name]=\"name\"\n [autoCollapse]=\"autoCollapse\"\n ></nice-vertical-navigation-collapsable-item>\n\n <!-- Divider -->\n <nice-vertical-navigation-divider-item\n *ngIf=\"item.type === 'divider'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-vertical-navigation-divider-item>\n\n <!-- Group -->\n<!-- <nice-vertical-navigation-group-item\n *ngIf=\"item.type === 'group'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-vertical-navigation-group-item>-->\n\n <!-- Spacer -->\n <nice-vertical-navigation-spacer-item\n *ngIf=\"item.type === 'spacer'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-vertical-navigation-spacer-item>\n </ng-container>\n </ng-container>\n</div>\n", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe, "niceShouldShowHint": NiceShouldShowHintPipe, "translate": i1.TranslatePipe }, animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7379
7562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, decorators: [{
|
|
7380
7563
|
type: Component,
|
|
7381
|
-
args: [{ selector: "nice-vertical-navigation-collapsable-item", styles: [], 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 >\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
|
|
7564
|
+
args: [{ selector: "nice-vertical-navigation-collapsable-item", styles: [], 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.hidden && !item.hidden(item)) || !item.hidden\">\n <!-- Basic -->\n <nice-vertical-navigation-basic-item\n *ngIf=\"item.type === 'basic'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-vertical-navigation-basic-item>\n\n <!-- Collapsable -->\n <nice-vertical-navigation-collapsable-item\n *ngIf=\"item.type === 'collapsable'\"\n [item]=\"item\"\n [name]=\"name\"\n [autoCollapse]=\"autoCollapse\"\n ></nice-vertical-navigation-collapsable-item>\n\n <!-- Divider -->\n <nice-vertical-navigation-divider-item\n *ngIf=\"item.type === 'divider'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-vertical-navigation-divider-item>\n\n <!-- Group -->\n<!-- <nice-vertical-navigation-group-item\n *ngIf=\"item.type === 'group'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-vertical-navigation-group-item>-->\n\n <!-- Spacer -->\n <nice-vertical-navigation-spacer-item\n *ngIf=\"item.type === 'spacer'\"\n [item]=\"item\"\n [name]=\"name\"\n ></nice-vertical-navigation-spacer-item>\n </ng-container>\n </ng-container>\n</div>\n" }]
|
|
7382
7565
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$6.Router }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
|
|
7383
7566
|
type: Input
|
|
7384
7567
|
}], item: [{
|
|
@@ -8123,7 +8306,9 @@ NiceNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
|
|
|
8123
8306
|
NiceVerticalNavigationDividerItemComponent,
|
|
8124
8307
|
NiceVerticalNavigationGroupItemComponent,
|
|
8125
8308
|
NiceVerticalNavigationSpacerItemComponent,
|
|
8126
|
-
NiceVerticalNavigationComponent
|
|
8309
|
+
NiceVerticalNavigationComponent,
|
|
8310
|
+
NiceShouldShowHintPipe,
|
|
8311
|
+
NiceShowHintDirective], imports: [CommonModule,
|
|
8127
8312
|
RouterModule,
|
|
8128
8313
|
MatButtonModule,
|
|
8129
8314
|
MatDividerModule,
|
|
@@ -8171,7 +8356,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
8171
8356
|
NiceVerticalNavigationDividerItemComponent,
|
|
8172
8357
|
NiceVerticalNavigationGroupItemComponent,
|
|
8173
8358
|
NiceVerticalNavigationSpacerItemComponent,
|
|
8174
|
-
NiceVerticalNavigationComponent
|
|
8359
|
+
NiceVerticalNavigationComponent,
|
|
8360
|
+
NiceShouldShowHintPipe,
|
|
8361
|
+
NiceShowHintDirective
|
|
8175
8362
|
],
|
|
8176
8363
|
exports: [
|
|
8177
8364
|
NiceHorizontalNavigationComponent,
|