@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
|
@@ -6,7 +6,7 @@ import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, Chang
|
|
|
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
8
|
import { __rest, __awaiter } from 'tslib';
|
|
9
|
-
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';
|
|
9
|
+
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';
|
|
10
10
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
11
11
|
import * as i3 from '@angular/material/icon';
|
|
12
12
|
import { MatIconModule } from '@angular/material/icon';
|
|
@@ -1683,6 +1683,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1683
1683
|
this.accept = ["image/*"];
|
|
1684
1684
|
this.customActions = [];
|
|
1685
1685
|
this.multipleUpload = false;
|
|
1686
|
+
this.visiblePreviewAsset = 4;
|
|
1686
1687
|
this.showAddAssetContainer = true;
|
|
1687
1688
|
this.activeChange = new EventEmitter();
|
|
1688
1689
|
this.removedAsset = new EventEmitter();
|
|
@@ -1734,7 +1735,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1734
1735
|
}
|
|
1735
1736
|
set activeTranslationPosition(position) {
|
|
1736
1737
|
this._activeTranslationPosition = position;
|
|
1737
|
-
this.listStyle.transform = `translateX(${position}
|
|
1738
|
+
this.listStyle.transform = `translateX(calc((var(--nice-assets-carousel-asset-width) + var(--nice-assets-carousel-asset-gap)) * ${position}))`;
|
|
1738
1739
|
}
|
|
1739
1740
|
set activeAsset(position) {
|
|
1740
1741
|
if (position < 0) {
|
|
@@ -1743,7 +1744,9 @@ class NiceAssetsCarouselComponent {
|
|
|
1743
1744
|
this._active = position;
|
|
1744
1745
|
this._activeAsset = this._assets[this._active];
|
|
1745
1746
|
this._lastAsset = this._active === this._assets.length - 1 || !this._assets.length;
|
|
1746
|
-
this._shouldTransform
|
|
1747
|
+
this._shouldTransform
|
|
1748
|
+
= ((this.edit && this.showAddAssetContainer) && this._active >= (this.visiblePreviewAsset - 1))
|
|
1749
|
+
|| this._active >= this.visiblePreviewAsset;
|
|
1747
1750
|
this.activeChange.emit(this._active);
|
|
1748
1751
|
}
|
|
1749
1752
|
writeValue(assets) {
|
|
@@ -1765,7 +1768,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1765
1768
|
this.activeAsset = this._active - 1;
|
|
1766
1769
|
}
|
|
1767
1770
|
if (this._activeTranslationPosition < 0) {
|
|
1768
|
-
this.activeTranslationPosition = this._activeTranslationPosition +
|
|
1771
|
+
this.activeTranslationPosition = this._activeTranslationPosition + 1;
|
|
1769
1772
|
}
|
|
1770
1773
|
}
|
|
1771
1774
|
clickRight() {
|
|
@@ -1774,16 +1777,16 @@ class NiceAssetsCarouselComponent {
|
|
|
1774
1777
|
}
|
|
1775
1778
|
this.activeAsset = this._active + 1;
|
|
1776
1779
|
if (this._shouldTransform) {
|
|
1777
|
-
this.activeTranslationPosition = this._activeTranslationPosition -
|
|
1780
|
+
this.activeTranslationPosition = this._activeTranslationPosition - 1;
|
|
1778
1781
|
}
|
|
1779
1782
|
}
|
|
1780
1783
|
clickAsset(index) {
|
|
1781
|
-
let visibleAssets = this.edit ? 2 :
|
|
1784
|
+
let visibleAssets = (this.edit && this.showAddAssetContainer) ? (this.visiblePreviewAsset - 2) : (this.visiblePreviewAsset - 1);
|
|
1782
1785
|
if (index < visibleAssets) {
|
|
1783
1786
|
visibleAssets = index;
|
|
1784
1787
|
}
|
|
1785
1788
|
if (index >= 0) {
|
|
1786
|
-
this.activeTranslationPosition = (index - visibleAssets) * -
|
|
1789
|
+
this.activeTranslationPosition = (index - visibleAssets) * -1;
|
|
1787
1790
|
}
|
|
1788
1791
|
this.activeAsset = index;
|
|
1789
1792
|
}
|
|
@@ -1792,7 +1795,7 @@ class NiceAssetsCarouselComponent {
|
|
|
1792
1795
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1793
1796
|
const files = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files;
|
|
1794
1797
|
yield this.onFilesDrop(files);
|
|
1795
|
-
this.inputElement.nativeElement.
|
|
1798
|
+
this.inputElement.nativeElement.value = "";
|
|
1796
1799
|
});
|
|
1797
1800
|
}
|
|
1798
1801
|
onFilesDrop(files) {
|
|
@@ -1851,13 +1854,13 @@ class NiceAssetsCarouselComponent {
|
|
|
1851
1854
|
}
|
|
1852
1855
|
}
|
|
1853
1856
|
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 });
|
|
1854
|
-
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: [
|
|
1857
|
+
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: [
|
|
1855
1858
|
{
|
|
1856
1859
|
provide: NG_VALUE_ACCESSOR,
|
|
1857
1860
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1858
1861
|
multi: true
|
|
1859
1862
|
}
|
|
1860
|
-
], 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)
|
|
1863
|
+
], 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 });
|
|
1861
1864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
|
|
1862
1865
|
type: Component,
|
|
1863
1866
|
args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
|
|
@@ -1866,7 +1869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1866
1869
|
useExisting: forwardRef(() => NiceAssetsCarouselComponent),
|
|
1867
1870
|
multi: true
|
|
1868
1871
|
}
|
|
1869
|
-
], 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)
|
|
1872
|
+
], 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"] }]
|
|
1870
1873
|
}], ctorParameters: function () {
|
|
1871
1874
|
return [{ type: undefined, decorators: [{
|
|
1872
1875
|
type: Optional
|
|
@@ -1887,6 +1890,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
1887
1890
|
type: Input
|
|
1888
1891
|
}], multipleUpload: [{
|
|
1889
1892
|
type: Input
|
|
1893
|
+
}], visiblePreviewAsset: [{
|
|
1894
|
+
type: Input
|
|
1890
1895
|
}], showAddAssetContainer: [{
|
|
1891
1896
|
type: Input
|
|
1892
1897
|
}], activeChange: [{
|
|
@@ -7013,6 +7018,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
7013
7018
|
}]
|
|
7014
7019
|
}] });
|
|
7015
7020
|
|
|
7021
|
+
class NiceShowHintDirective {
|
|
7022
|
+
constructor(_overlay, _elementRef, _viewContainerRef, _ngZone, _platform) {
|
|
7023
|
+
this._overlay = _overlay;
|
|
7024
|
+
this._elementRef = _elementRef;
|
|
7025
|
+
this._viewContainerRef = _viewContainerRef;
|
|
7026
|
+
this._ngZone = _ngZone;
|
|
7027
|
+
this._platform = _platform;
|
|
7028
|
+
this.shouldShow = false;
|
|
7029
|
+
this._pointerExitEventsInitialized = false;
|
|
7030
|
+
this._passiveListeners = [];
|
|
7031
|
+
this.unsubscribeAll$ = new Subject();
|
|
7032
|
+
}
|
|
7033
|
+
ngAfterViewInit() {
|
|
7034
|
+
this._setupPointerEnterEventsIfNeeded();
|
|
7035
|
+
if (this.item.hint) {
|
|
7036
|
+
this._portal = new ComponentPortal(this.item.hint.component, this._viewContainerRef);
|
|
7037
|
+
}
|
|
7038
|
+
}
|
|
7039
|
+
ngOnDestroy() {
|
|
7040
|
+
this.unsubscribeAll$.next();
|
|
7041
|
+
this.unsubscribeAll$.complete();
|
|
7042
|
+
}
|
|
7043
|
+
show() {
|
|
7044
|
+
if (!this.shouldShow || !this.item.hint || this._isHintVisible()) {
|
|
7045
|
+
return;
|
|
7046
|
+
}
|
|
7047
|
+
const overlayRef = this._createOverlay();
|
|
7048
|
+
this._detach();
|
|
7049
|
+
const instance = (this._hintInstance = overlayRef.attach(this._portal).instance);
|
|
7050
|
+
instance._triggerElement = this._elementRef.nativeElement;
|
|
7051
|
+
instance
|
|
7052
|
+
.afterHidden()
|
|
7053
|
+
.pipe(takeUntil(this.unsubscribeAll$))
|
|
7054
|
+
.subscribe(() => this._detach());
|
|
7055
|
+
instance.show();
|
|
7056
|
+
}
|
|
7057
|
+
hide() {
|
|
7058
|
+
const instance = this._hintInstance;
|
|
7059
|
+
if (instance) {
|
|
7060
|
+
this._detach();
|
|
7061
|
+
}
|
|
7062
|
+
}
|
|
7063
|
+
_createOverlay() {
|
|
7064
|
+
if (this._overlayRef) {
|
|
7065
|
+
const existingStrategy = this._overlayRef.getConfig()
|
|
7066
|
+
.positionStrategy;
|
|
7067
|
+
// @ts-ignore
|
|
7068
|
+
if (!origin && existingStrategy._origin instanceof ElementRef) {
|
|
7069
|
+
return this._overlayRef;
|
|
7070
|
+
}
|
|
7071
|
+
this._detach();
|
|
7072
|
+
}
|
|
7073
|
+
// Create connected position strategy that listens for scroll events to reposition.
|
|
7074
|
+
const strategy = this._overlay
|
|
7075
|
+
.position()
|
|
7076
|
+
.flexibleConnectedTo(this._elementRef)
|
|
7077
|
+
.withPositions([
|
|
7078
|
+
{
|
|
7079
|
+
originX: "center",
|
|
7080
|
+
originY: "bottom",
|
|
7081
|
+
overlayX: "start",
|
|
7082
|
+
overlayY: "top",
|
|
7083
|
+
offsetY: 8
|
|
7084
|
+
}
|
|
7085
|
+
])
|
|
7086
|
+
.withFlexibleDimensions(false);
|
|
7087
|
+
strategy.positionChanges.pipe(takeUntil(this.unsubscribeAll$)).subscribe(change => {
|
|
7088
|
+
if (this._hintInstance) {
|
|
7089
|
+
if (change.scrollableViewProperties.isOverlayClipped && this._hintInstance.isVisible()) {
|
|
7090
|
+
// After position changes occur and the overlay is clipped by
|
|
7091
|
+
// a parent scrollable then close the tooltip.
|
|
7092
|
+
this._ngZone.run(() => this.hide());
|
|
7093
|
+
}
|
|
7094
|
+
}
|
|
7095
|
+
});
|
|
7096
|
+
this._overlayRef = this._overlay.create({
|
|
7097
|
+
positionStrategy: strategy
|
|
7098
|
+
});
|
|
7099
|
+
this._overlayRef
|
|
7100
|
+
.detachments()
|
|
7101
|
+
.pipe(takeUntil(this.unsubscribeAll$))
|
|
7102
|
+
.subscribe(() => this._detach());
|
|
7103
|
+
this._overlayRef
|
|
7104
|
+
.outsidePointerEvents()
|
|
7105
|
+
.pipe(takeUntil(this.unsubscribeAll$))
|
|
7106
|
+
.subscribe(() => { var _a; return (_a = this._hintInstance) === null || _a === void 0 ? void 0 : _a._handleBodyInteraction(); });
|
|
7107
|
+
return this._overlayRef;
|
|
7108
|
+
}
|
|
7109
|
+
_detach() {
|
|
7110
|
+
if (this._overlayRef && this._overlayRef.hasAttached()) {
|
|
7111
|
+
this._overlayRef.detach();
|
|
7112
|
+
}
|
|
7113
|
+
this._hintInstance = null;
|
|
7114
|
+
}
|
|
7115
|
+
_isHintVisible() {
|
|
7116
|
+
return !!this._hintInstance && this._hintInstance.isVisible();
|
|
7117
|
+
}
|
|
7118
|
+
_setupPointerEnterEventsIfNeeded() {
|
|
7119
|
+
// Optimization: Defer hooking up events if there's no message or the tooltip is disabled.
|
|
7120
|
+
if (this._passiveListeners.length) {
|
|
7121
|
+
return;
|
|
7122
|
+
}
|
|
7123
|
+
// The mouse events shouldn't be bound on mobile devices, because they can prevent the
|
|
7124
|
+
// first tap from firing its click event or can cause the tooltip to open for clicks.
|
|
7125
|
+
if (this._platformSupportsMouseEvents()) {
|
|
7126
|
+
this._passiveListeners.push([
|
|
7127
|
+
"mouseenter",
|
|
7128
|
+
() => {
|
|
7129
|
+
this._setupPointerExitEventsIfNeeded();
|
|
7130
|
+
this.show();
|
|
7131
|
+
},
|
|
7132
|
+
]);
|
|
7133
|
+
}
|
|
7134
|
+
this._addListeners(this._passiveListeners);
|
|
7135
|
+
}
|
|
7136
|
+
_setupPointerExitEventsIfNeeded() {
|
|
7137
|
+
if (this._pointerExitEventsInitialized) {
|
|
7138
|
+
return;
|
|
7139
|
+
}
|
|
7140
|
+
this._pointerExitEventsInitialized = true;
|
|
7141
|
+
const exitListeners = [];
|
|
7142
|
+
if (this._platformSupportsMouseEvents()) {
|
|
7143
|
+
exitListeners.push([
|
|
7144
|
+
"mouseleave",
|
|
7145
|
+
event => {
|
|
7146
|
+
var _a;
|
|
7147
|
+
const newTarget = event.relatedTarget;
|
|
7148
|
+
if (!newTarget || !((_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.overlayElement.contains(newTarget))) {
|
|
7149
|
+
this.hide();
|
|
7150
|
+
}
|
|
7151
|
+
},
|
|
7152
|
+
]);
|
|
7153
|
+
}
|
|
7154
|
+
this._addListeners(exitListeners);
|
|
7155
|
+
this._passiveListeners.push(...exitListeners);
|
|
7156
|
+
}
|
|
7157
|
+
_platformSupportsMouseEvents() {
|
|
7158
|
+
return !this._platform.IOS && !this._platform.ANDROID;
|
|
7159
|
+
}
|
|
7160
|
+
_addListeners(listeners) {
|
|
7161
|
+
listeners.forEach(([event, listener]) => {
|
|
7162
|
+
this._elementRef.nativeElement.addEventListener(event, listener);
|
|
7163
|
+
});
|
|
7164
|
+
}
|
|
7165
|
+
}
|
|
7166
|
+
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 });
|
|
7167
|
+
NiceShowHintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: { shouldShow: "shouldShow", item: "item" }, ngImport: i0 });
|
|
7168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShowHintDirective, decorators: [{
|
|
7169
|
+
type: Directive,
|
|
7170
|
+
args: [{ selector: "[niceShowHint]" }]
|
|
7171
|
+
}], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i1$a.Platform }]; }, propDecorators: { shouldShow: [{
|
|
7172
|
+
type: Input
|
|
7173
|
+
}], item: [{
|
|
7174
|
+
type: Input
|
|
7175
|
+
}] } });
|
|
7176
|
+
|
|
7177
|
+
class NiceShouldShowHintPipe {
|
|
7178
|
+
constructor(injector) {
|
|
7179
|
+
this.injector = injector;
|
|
7180
|
+
}
|
|
7181
|
+
transform(value) {
|
|
7182
|
+
if (!Array.isArray(value)) {
|
|
7183
|
+
value = [value];
|
|
7184
|
+
}
|
|
7185
|
+
return combineLatest(value.map(x => this.transformHint(x))).pipe(map(res => res.some(x => x)));
|
|
7186
|
+
}
|
|
7187
|
+
transformHint(value) {
|
|
7188
|
+
if (!value.hint) {
|
|
7189
|
+
return of(false);
|
|
7190
|
+
}
|
|
7191
|
+
const resolver = this.injector.get(value.hint.resolver);
|
|
7192
|
+
if (!resolver) {
|
|
7193
|
+
return of(false);
|
|
7194
|
+
}
|
|
7195
|
+
return resolver.shouldShowHint();
|
|
7196
|
+
}
|
|
7197
|
+
}
|
|
7198
|
+
NiceShouldShowHintPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShouldShowHintPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
7199
|
+
NiceShouldShowHintPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShouldShowHintPipe, name: "niceShouldShowHint" });
|
|
7200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShouldShowHintPipe, decorators: [{
|
|
7201
|
+
type: Pipe,
|
|
7202
|
+
args: [{ name: "niceShouldShowHint" }]
|
|
7203
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
|
|
7204
|
+
|
|
7016
7205
|
class NiceVerticalNavigationBasicItemComponent {
|
|
7017
7206
|
/**
|
|
7018
7207
|
* Constructor
|
|
@@ -7057,10 +7246,10 @@ class NiceVerticalNavigationBasicItemComponent {
|
|
|
7057
7246
|
}
|
|
7058
7247
|
}
|
|
7059
7248
|
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 });
|
|
7060
|
-
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
|
|
7249
|
+
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 });
|
|
7061
7250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, decorators: [{
|
|
7062
7251
|
type: Component,
|
|
7063
|
-
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
|
|
7252
|
+
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" }]
|
|
7064
7253
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$6.ActivatedRoute }, { type: i1$6.Router }]; }, propDecorators: { item: [{
|
|
7065
7254
|
type: Input
|
|
7066
7255
|
}], name: [{
|
|
@@ -7381,10 +7570,10 @@ class NiceVerticalNavigationCollapsableItemComponent {
|
|
|
7381
7570
|
}
|
|
7382
7571
|
}
|
|
7383
7572
|
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 });
|
|
7384
|
-
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
|
|
7573
|
+
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 });
|
|
7385
7574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, decorators: [{
|
|
7386
7575
|
type: Component,
|
|
7387
|
-
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
|
|
7576
|
+
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" }]
|
|
7388
7577
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$6.Router }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
|
|
7389
7578
|
type: Input
|
|
7390
7579
|
}], item: [{
|
|
@@ -8129,7 +8318,9 @@ NiceNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
|
|
|
8129
8318
|
NiceVerticalNavigationDividerItemComponent,
|
|
8130
8319
|
NiceVerticalNavigationGroupItemComponent,
|
|
8131
8320
|
NiceVerticalNavigationSpacerItemComponent,
|
|
8132
|
-
NiceVerticalNavigationComponent
|
|
8321
|
+
NiceVerticalNavigationComponent,
|
|
8322
|
+
NiceShouldShowHintPipe,
|
|
8323
|
+
NiceShowHintDirective], imports: [CommonModule,
|
|
8133
8324
|
RouterModule,
|
|
8134
8325
|
MatButtonModule,
|
|
8135
8326
|
MatDividerModule,
|
|
@@ -8177,7 +8368,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
|
|
|
8177
8368
|
NiceVerticalNavigationDividerItemComponent,
|
|
8178
8369
|
NiceVerticalNavigationGroupItemComponent,
|
|
8179
8370
|
NiceVerticalNavigationSpacerItemComponent,
|
|
8180
|
-
NiceVerticalNavigationComponent
|
|
8371
|
+
NiceVerticalNavigationComponent,
|
|
8372
|
+
NiceShouldShowHintPipe,
|
|
8373
|
+
NiceShowHintDirective
|
|
8181
8374
|
],
|
|
8182
8375
|
exports: [
|
|
8183
8376
|
NiceHorizontalNavigationComponent,
|