@recursyve/nice-ui-kit.v2 13.1.0-beta.90 → 13.1.0-beta.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/navigation/vertical/components/collapsable/collapsable.component.mjs +19 -4
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs +17 -2
- package/fesm2015/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs +17 -2
- package/fesm2020/recursyve-nice-ui-kit.v2.mjs.map +1 -1
- package/lib/components/navigation/vertical/components/collapsable/collapsable.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -7107,6 +7107,7 @@ class NiceVerticalNavigationCollapsableItemComponent {
|
|
|
7107
7107
|
this._unsubscribeAll = new Subject();
|
|
7108
7108
|
this.isCollapsed = true;
|
|
7109
7109
|
this.isExpanded = false;
|
|
7110
|
+
this.hasChildActivated$ = new BehaviorSubject(false);
|
|
7110
7111
|
}
|
|
7111
7112
|
// -----------------------------------------------------------------------------------------------------
|
|
7112
7113
|
// @ Accessors
|
|
@@ -7127,16 +7128,30 @@ class NiceVerticalNavigationCollapsableItemComponent {
|
|
|
7127
7128
|
* On init
|
|
7128
7129
|
*/
|
|
7129
7130
|
ngOnInit() {
|
|
7131
|
+
this._router.events
|
|
7132
|
+
.pipe(filter(event => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
|
|
7133
|
+
.subscribe((event) => {
|
|
7134
|
+
if (this._hasActiveChild(this.item, event.urlAfterRedirects)) {
|
|
7135
|
+
this.hasChildActivated$.next(true);
|
|
7136
|
+
this.expand();
|
|
7137
|
+
}
|
|
7138
|
+
else {
|
|
7139
|
+
this.hasChildActivated$.next(false);
|
|
7140
|
+
this.collapse();
|
|
7141
|
+
}
|
|
7142
|
+
});
|
|
7130
7143
|
// Get the parent navigation component
|
|
7131
7144
|
this._niceVerticalNavigationComponent = this._niceNavigationService.getComponent(this.name);
|
|
7132
7145
|
// If the item has a children that has a matching url with the current url, expand...
|
|
7133
7146
|
if (this._hasActiveChild(this.item, this._router.url)) {
|
|
7147
|
+
this.hasChildActivated$.next(true);
|
|
7134
7148
|
this.expand();
|
|
7135
7149
|
}
|
|
7136
7150
|
// Otherwise...
|
|
7137
7151
|
else {
|
|
7138
7152
|
// If the autoCollapse is on, collapse...
|
|
7139
7153
|
if (this.autoCollapse) {
|
|
7154
|
+
this.hasChildActivated$.next(false);
|
|
7140
7155
|
this.collapse();
|
|
7141
7156
|
}
|
|
7142
7157
|
}
|
|
@@ -7317,10 +7332,10 @@ class NiceVerticalNavigationCollapsableItemComponent {
|
|
|
7317
7332
|
}
|
|
7318
7333
|
}
|
|
7319
7334
|
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 });
|
|
7320
|
-
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 (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 >\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 <!-- Title & Subtitle -->\n <div class=\"nice-vertical-navigation-item-title-wrapper\">\n <div class=\"nice-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{ item.title | translate }}\n </span>\n </div>\n <div\n class=\"nice-vertical-navigation-item-subtitle\"\n *ngIf=\"item.subtitle\"\n >\n <span [ngClass]=\"item.classes?.subtitle\">\n {{ item.subtitle | translate }}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n <div\n class=\"nice-vertical-navigation-item-badge\"\n *ngIf=\"item.badge\">\n\n <div\n class=\"nice-vertical-navigation-item-badge-content\"\n [ngClass]=\"item.badge.classes\"\n >\n {{ item.badge.title | translate }}\n </div>\n </div>\n\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: { "translate": i1.TranslatePipe }, animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7335
|
+
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 >\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 <!-- Title & Subtitle -->\n <div class=\"nice-vertical-navigation-item-title-wrapper\">\n <div class=\"nice-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{ item.title | translate }}\n </span>\n </div>\n <div\n class=\"nice-vertical-navigation-item-subtitle\"\n *ngIf=\"item.subtitle\"\n >\n <span [ngClass]=\"item.classes?.subtitle\">\n {{ item.subtitle | translate }}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n <div\n class=\"nice-vertical-navigation-item-badge\"\n *ngIf=\"item.badge\">\n\n <div\n class=\"nice-vertical-navigation-item-badge-content\"\n [ngClass]=\"item.badge.classes\"\n >\n {{ item.badge.title | translate }}\n </div>\n </div>\n\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, "translate": i1.TranslatePipe }, animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7321
7336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, decorators: [{
|
|
7322
7337
|
type: Component,
|
|
7323
|
-
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 (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 >\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 <!-- Title & Subtitle -->\n <div class=\"nice-vertical-navigation-item-title-wrapper\">\n <div class=\"nice-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{ item.title | translate }}\n </span>\n </div>\n <div\n class=\"nice-vertical-navigation-item-subtitle\"\n *ngIf=\"item.subtitle\"\n >\n <span [ngClass]=\"item.classes?.subtitle\">\n {{ item.subtitle | translate }}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n <div\n class=\"nice-vertical-navigation-item-badge\"\n *ngIf=\"item.badge\">\n\n <div\n class=\"nice-vertical-navigation-item-badge-content\"\n [ngClass]=\"item.badge.classes\"\n >\n {{ item.badge.title | translate }}\n </div>\n </div>\n\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" }]
|
|
7338
|
+
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 >\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 <!-- Title & Subtitle -->\n <div class=\"nice-vertical-navigation-item-title-wrapper\">\n <div class=\"nice-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{ item.title | translate }}\n </span>\n </div>\n <div\n class=\"nice-vertical-navigation-item-subtitle\"\n *ngIf=\"item.subtitle\"\n >\n <span [ngClass]=\"item.classes?.subtitle\">\n {{ item.subtitle | translate }}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n <div\n class=\"nice-vertical-navigation-item-badge\"\n *ngIf=\"item.badge\">\n\n <div\n class=\"nice-vertical-navigation-item-badge-content\"\n [ngClass]=\"item.badge.classes\"\n >\n {{ item.badge.title | translate }}\n </div>\n </div>\n\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" }]
|
|
7324
7339
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$6.Router }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
|
|
7325
7340
|
type: Input
|
|
7326
7341
|
}], item: [{
|