@recursyve/nice-ui-kit.v2 13.2.0-beta.109 → 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/assets-carousel/assets-carousel.component.mjs +16 -11
- 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 +210 -17
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs +209 -17
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/lib/components/assets-carousel/assets-carousel.component.d.ts +2 -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/assets-carousel/assets-carousel.theme.scss +15 -7
- 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';
|
|
@@ -1686,6 +1686,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1686
1686
|
this.accept = ["image/*"];
|
|
1687
1687
|
this.customActions = [];
|
|
1688
1688
|
this.multipleUpload = false;
|
|
1689
|
+
this.visiblePreviewAsset = 4;
|
|
1689
1690
|
this.showAddAssetContainer = true;
|
|
1690
1691
|
this.activeChange = new EventEmitter();
|
|
1691
1692
|
this.removedAsset = new EventEmitter();
|
|
@@ -1737,7 +1738,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1737
1738
|
}
|
|
1738
1739
|
set activeTranslationPosition(position) {
|
|
1739
1740
|
this._activeTranslationPosition = position;
|
|
1740
|
-
this.listStyle.transform = `translateX(${position}
|
|
1741
|
+
this.listStyle.transform = `translateX(calc((var(--nice-assets-carousel-asset-width) + var(--nice-assets-carousel-asset-gap)) * ${position}))`;
|
|
1741
1742
|
}
|
|
1742
1743
|
set activeAsset(position) {
|
|
1743
1744
|
if (position < 0) {
|
|
@@ -1746,7 +1747,9 @@ class NiceAssetsCarouselComponent {
|
|
|
1746
1747
|
this._active = position;
|
|
1747
1748
|
this._activeAsset = this._assets[this._active];
|
|
1748
1749
|
this._lastAsset = this._active === this._assets.length - 1 || !this._assets.length;
|
|
1749
|
-
this._shouldTransform
|
|
1750
|
+
this._shouldTransform
|
|
1751
|
+
= ((this.edit && this.showAddAssetContainer) && this._active >= (this.visiblePreviewAsset - 1))
|
|
1752
|
+
|| this._active >= this.visiblePreviewAsset;
|
|
1750
1753
|
this.activeChange.emit(this._active);
|
|
1751
1754
|
}
|
|
1752
1755
|
writeValue(assets) {
|
|
@@ -1767,7 +1770,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1767
1770
|
this.activeAsset = this._active - 1;
|
|
1768
1771
|
}
|
|
1769
1772
|
if (this._activeTranslationPosition < 0) {
|
|
1770
|
-
this.activeTranslationPosition = this._activeTranslationPosition +
|
|
1773
|
+
this.activeTranslationPosition = this._activeTranslationPosition + 1;
|
|
1771
1774
|
}
|
|
1772
1775
|
}
|
|
1773
1776
|
clickRight() {
|
|
@@ -1776,23 +1779,23 @@ class NiceAssetsCarouselComponent {
|
|
|
1776
1779
|
}
|
|
1777
1780
|
this.activeAsset = this._active + 1;
|
|
1778
1781
|
if (this._shouldTransform) {
|
|
1779
|
-
this.activeTranslationPosition = this._activeTranslationPosition -
|
|
1782
|
+
this.activeTranslationPosition = this._activeTranslationPosition - 1;
|
|
1780
1783
|
}
|
|
1781
1784
|
}
|
|
1782
1785
|
clickAsset(index) {
|
|
1783
|
-
let visibleAssets = this.edit ? 2 :
|
|
1786
|
+
let visibleAssets = (this.edit && this.showAddAssetContainer) ? (this.visiblePreviewAsset - 2) : (this.visiblePreviewAsset - 1);
|
|
1784
1787
|
if (index < visibleAssets) {
|
|
1785
1788
|
visibleAssets = index;
|
|
1786
1789
|
}
|
|
1787
1790
|
if (index >= 0) {
|
|
1788
|
-
this.activeTranslationPosition = (index - visibleAssets) * -
|
|
1791
|
+
this.activeTranslationPosition = (index - visibleAssets) * -1;
|
|
1789
1792
|
}
|
|
1790
1793
|
this.activeAsset = index;
|
|
1791
1794
|
}
|
|
1792
1795
|
async onFilesChange(event) {
|
|
1793
1796
|
const files = event.target?.files;
|
|
1794
1797
|
await this.onFilesDrop(files);
|
|
1795
|
-
this.inputElement.nativeElement.
|
|
1798
|
+
this.inputElement.nativeElement.value = "";
|
|
1796
1799
|
}
|
|
1797
1800
|
async onFilesDrop(files) {
|
|
1798
1801
|
if (!files?.length) {
|
|
@@ -1844,13 +1847,13 @@ class NiceAssetsCarouselComponent {
|
|
|
1844
1847
|
}
|
|
1845
1848
|
}
|
|
1846
1849
|
NiceAssetsCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselComponent, deps: [{ token: NICE_ASSETS_CAROUSEL_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1847
|
-
NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAssetsCarouselComponent, selector: "nice-assets-carousel", inputs: { color: "color", edit: "edit", accept: "accept", customActions: "customActions", multipleUpload: "multipleUpload", showAddAssetContainer: "showAddAssetContainer", assets: "assets" }, outputs: { activeChange: "activeChange", removedAsset: "removedAsset" }, providers: [
|
|
1850
|
+
NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAssetsCarouselComponent, selector: "nice-assets-carousel", inputs: { color: "color", edit: "edit", accept: "accept", customActions: "customActions", multipleUpload: "multipleUpload", visiblePreviewAsset: "visiblePreviewAsset", showAddAssetContainer: "showAddAssetContainer", assets: "assets" }, outputs: { activeChange: "activeChange", removedAsset: "removedAsset" }, providers: [
|
|
1848
1851
|
{
|
|
1849
1852
|
provide: NG_VALUE_ACCESSOR,
|
|
1850
1853
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1851
1854
|
multi: true
|
|
1852
1855
|
}
|
|
1853
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "activeVideoElement", first: true, predicate: ["activeVideo"], descendants: true }, { propertyName: "assetsElement", predicate: ["assets"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n >\n <img\n *ngIf=\"_activeAsset?.type === 'image'\"\n (mouseover)=\"showOverlay=true\"\n [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n draggable=\"false\"\n class=\"relative\"\n alt=\"active-image\"\n >\n <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n\n <div class=\"text\">\n {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n </div>\n </div>\n\n <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n <div\n (mouseout)=\"showOverlay=false\"\n class=\"flex flex-col justify-center items-center w-full h-full\"\n >\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n </div>\n </div>\n\n <div *ngIf=\"edit\" class=\"active-buttons\">\n <button mat-icon-button (click)=\"fileInput.click()\">\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n </button>\n <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n </button>\n\n <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let action of customActions\"\n (click)=\"clickCustom(action)
|
|
1856
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "activeVideoElement", first: true, predicate: ["activeVideo"], descendants: true }, { propertyName: "assetsElement", predicate: ["assets"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n >\n <img\n *ngIf=\"_activeAsset?.type === 'image'\"\n (mouseover)=\"showOverlay=true\"\n [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n draggable=\"false\"\n class=\"relative\"\n alt=\"active-image\"\n >\n <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n\n <div class=\"text\">\n {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n </div>\n </div>\n\n <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n <div\n (mouseout)=\"showOverlay=false\"\n class=\"flex flex-col justify-center items-center w-full h-full\"\n >\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n </div>\n </div>\n\n <div *ngIf=\"edit\" class=\"active-buttons\">\n <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n </button>\n <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n </button>\n\n <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let action of customActions\"\n (click)=\"clickCustom(action)\"\n >\n <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n <span>{{ action.name | translate }}</span>\n </button>\n <button mat-menu-item (click)=\"clickRemove()\">\n <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n\n <div class=\"carousel\">\n <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n </button>\n <div class=\"asset-list-container\">\n <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n </div>\n </div>\n\n <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n <div #assets class=\"asset\" *ngFor=\"let asset of _assets; let i = index\" (click)=\"clickAsset(i)\" [ngClass]=\"color\" [class.active]=\"_active === i\">\n <img *ngIf=\"asset.type === 'image'\" draggable=\"false\" [src]=\"asset.url ?? asset.base64\" alt=\"add-image\">\n <video *ngIf=\"asset.type === 'video'\" draggable=\"false\" loop [src]=\"asset.url ?? asset.base64\"></video>\n </div>\n </div>\n </div>\n <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n </button>\n </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { type: i2$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1.TranslatePipe }, animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
|
|
1854
1857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
|
|
1855
1858
|
type: Component,
|
|
1856
1859
|
args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
|
|
@@ -1859,7 +1862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1859
1862
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1860
1863
|
multi: true
|
|
1861
1864
|
}
|
|
1862
|
-
], template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n >\n <img\n *ngIf=\"_activeAsset?.type === 'image'\"\n (mouseover)=\"showOverlay=true\"\n [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n draggable=\"false\"\n class=\"relative\"\n alt=\"active-image\"\n >\n <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n\n <div class=\"text\">\n {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n </div>\n </div>\n\n <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n <div\n (mouseout)=\"showOverlay=false\"\n class=\"flex flex-col justify-center items-center w-full h-full\"\n >\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n </div>\n </div>\n\n <div *ngIf=\"edit\" class=\"active-buttons\">\n <button mat-icon-button (click)=\"fileInput.click()\">\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n </button>\n <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n </button>\n\n <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let action of customActions\"\n (click)=\"clickCustom(action)
|
|
1865
|
+
], template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n <div class=\"active-image\"\n matRipple\n [class.empty-state]=\"!_activeAsset\"\n (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n >\n <img\n *ngIf=\"_activeAsset?.type === 'image'\"\n (mouseover)=\"showOverlay=true\"\n [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n draggable=\"false\"\n class=\"relative\"\n alt=\"active-image\"\n >\n <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n\n <div class=\"text\">\n {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n </div>\n </div>\n\n <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n <div\n (mouseout)=\"showOverlay=false\"\n class=\"flex flex-col justify-center items-center w-full h-full\"\n >\n <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n </div>\n </div>\n\n <div *ngIf=\"edit\" class=\"active-buttons\">\n <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n </button>\n <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n </button>\n\n <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let action of customActions\"\n (click)=\"clickCustom(action)\"\n >\n <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n <span>{{ action.name | translate }}</span>\n </button>\n <button mat-menu-item (click)=\"clickRemove()\">\n <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n\n <div class=\"carousel\">\n <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n </button>\n <div class=\"asset-list-container\">\n <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n </div>\n </div>\n\n <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n <div #assets class=\"asset\" *ngFor=\"let asset of _assets; let i = index\" (click)=\"clickAsset(i)\" [ngClass]=\"color\" [class.active]=\"_active === i\">\n <img *ngIf=\"asset.type === 'image'\" draggable=\"false\" [src]=\"asset.url ?? asset.base64\" alt=\"add-image\">\n <video *ngIf=\"asset.type === 'video'\" draggable=\"false\" loop [src]=\"asset.url ?? asset.base64\"></video>\n </div>\n </div>\n </div>\n <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n </button>\n </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\n"] }]
|
|
1863
1866
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1864
1867
|
type: Optional
|
|
1865
1868
|
}, {
|
|
@@ -1878,6 +1881,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1878
1881
|
type: Input
|
|
1879
1882
|
}], multipleUpload: [{
|
|
1880
1883
|
type: Input
|
|
1884
|
+
}], visiblePreviewAsset: [{
|
|
1885
|
+
type: Input
|
|
1881
1886
|
}], showAddAssetContainer: [{
|
|
1882
1887
|
type: Input
|
|
1883
1888
|
}], activeChange: [{
|
|
@@ -7002,6 +7007,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
7002
7007
|
}]
|
|
7003
7008
|
}] });
|
|
7004
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
|
+
|
|
7005
7193
|
class NiceVerticalNavigationBasicItemComponent {
|
|
7006
7194
|
/**
|
|
7007
7195
|
* Constructor
|
|
@@ -7046,10 +7234,10 @@ class NiceVerticalNavigationBasicItemComponent {
|
|
|
7046
7234
|
}
|
|
7047
7235
|
}
|
|
7048
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 });
|
|
7049
|
-
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 });
|
|
7050
7238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, decorators: [{
|
|
7051
7239
|
type: Component,
|
|
7052
|
-
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" }]
|
|
7053
7241
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$6.ActivatedRoute }, { type: i1$6.Router }]; }, propDecorators: { item: [{
|
|
7054
7242
|
type: Input
|
|
7055
7243
|
}], name: [{
|
|
@@ -7370,10 +7558,10 @@ class NiceVerticalNavigationCollapsableItemComponent {
|
|
|
7370
7558
|
}
|
|
7371
7559
|
}
|
|
7372
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 });
|
|
7373
|
-
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 });
|
|
7374
7562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, decorators: [{
|
|
7375
7563
|
type: Component,
|
|
7376
|
-
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" }]
|
|
7377
7565
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$6.Router }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
|
|
7378
7566
|
type: Input
|
|
7379
7567
|
}], item: [{
|
|
@@ -8118,7 +8306,9 @@ NiceNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
|
|
|
8118
8306
|
NiceVerticalNavigationDividerItemComponent,
|
|
8119
8307
|
NiceVerticalNavigationGroupItemComponent,
|
|
8120
8308
|
NiceVerticalNavigationSpacerItemComponent,
|
|
8121
|
-
NiceVerticalNavigationComponent
|
|
8309
|
+
NiceVerticalNavigationComponent,
|
|
8310
|
+
NiceShouldShowHintPipe,
|
|
8311
|
+
NiceShowHintDirective], imports: [CommonModule,
|
|
8122
8312
|
RouterModule,
|
|
8123
8313
|
MatButtonModule,
|
|
8124
8314
|
MatDividerModule,
|
|
@@ -8166,7 +8356,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
8166
8356
|
NiceVerticalNavigationDividerItemComponent,
|
|
8167
8357
|
NiceVerticalNavigationGroupItemComponent,
|
|
8168
8358
|
NiceVerticalNavigationSpacerItemComponent,
|
|
8169
|
-
NiceVerticalNavigationComponent
|
|
8359
|
+
NiceVerticalNavigationComponent,
|
|
8360
|
+
NiceShouldShowHintPipe,
|
|
8361
|
+
NiceShowHintDirective
|
|
8170
8362
|
],
|
|
8171
8363
|
exports: [
|
|
8172
8364
|
NiceHorizontalNavigationComponent,
|