ngx-dynamic-breadcrumb
Version:
175 lines (168 loc) • 10.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/router';
import { NavigationEnd, RouterModule } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
class NgxBreadcrumbService {
constructor(router, activatedRoute) {
this.router = router;
this.activatedRoute = activatedRoute;
this.breadcrumbs = [];
this._breadcrumbChanges = new BehaviorSubject([]);
this.breadcrumbChanges = this._breadcrumbChanges.asObservable();
this._subscribeToRouteEvent();
}
/**
* Recursively build breadcrumb according to activated route.
*
* @param route activate route object
* @param url parent url
* @param breadcrumbs array of current breadcrumbs
*/
buildBreadCrumb(route, url = '', breadcrumbs = []) {
var _a, _b, _c, _d, _e, _f;
// If no routeConfig is available we are on the root path
let label, key, tooltip;
let isClickable = true;
const currentBreadcrumb = (_b = (_a = route.routeConfig) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.breadcrumb;
if (typeof currentBreadcrumb === 'object') {
key = currentBreadcrumb.key;
label = currentBreadcrumb.label;
isClickable = (_c = currentBreadcrumb.isClickable) !== null && _c !== void 0 ? _c : isClickable;
tooltip = (_d = currentBreadcrumb.tooltip) !== null && _d !== void 0 ? _d : label;
}
else if (typeof currentBreadcrumb === 'string') {
key = label = tooltip = currentBreadcrumb;
}
let path = (_f = (_e = route.routeConfig) === null || _e === void 0 ? void 0 : _e.path) !== null && _f !== void 0 ? _f : '';
// If the route is dynamic route such as ':id', replace it with actual param values
const dynamicRoutes = path.split('/').filter((el) => el.startsWith(':'));
if (dynamicRoutes.length && !!route.snapshot) {
dynamicRoutes.forEach((item) => {
const paramName = item.split(':')[1];
path = path.replace(item, route.snapshot.params[paramName]);
});
}
// In the routeConfig the complete path is not available,
//so we rebuild it each time
const nextUrl = path ? `${url}/${path}` : url;
const newBreadcrumbs = [...breadcrumbs];
if (key) {
const breadcrumb = {
key,
label,
tooltip,
url: nextUrl,
isClickable,
};
// Only adding route with non-empty label
newBreadcrumbs.push(breadcrumb);
}
if (route.firstChild) {
//If we are not on our current path yet,
//there will be more children to look after, to build our breadcrumb
return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs);
}
return newBreadcrumbs;
}
/**
* Returns the latest array of breadcrumbs.
*
* @returns Array of breadcrumbs
*/
getBreadcrumbs() {
return this._breadcrumbChanges.getValue();
}
/**
* Edit the breadcrumb label and url dynamically.
* If the label is null while editing, it will act
* as delete breadcrumb from UI.
*
* @param crumbs IReplaceBreadcrumb[]
*/
editBreadcrumbs(crumbs) {
crumbs.forEach((item) => {
var _a, _b;
const data = this.breadcrumbs.find((breadcrumb) => breadcrumb.key === item.key);
if (data) {
data.label = item.newLabel;
data.url = Array.isArray(item.newUrl)
? item.newUrl.join('/')
: (_a = item.newUrl) !== null && _a !== void 0 ? _a : data.url;
data.tooltip = (_b = item.tooltip) !== null && _b !== void 0 ? _b : data.tooltip;
}
});
this._breadcrumbChanges.next([...this.breadcrumbs]);
}
// private functions
_subscribeToRouteEvent() {
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe(() => {
this.breadcrumbs = this.buildBreadCrumb(this.activatedRoute.root);
this._breadcrumbChanges.next(this.breadcrumbs);
});
}
}
NgxBreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbService, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
NgxBreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }]; } });
class NgxBreadcrumbComponent {
constructor(router, service) {
this.router = router;
this.service = service;
this.breadcrumbTemplate = null;
this.breadcrumbs$ = null;
}
ngOnInit() {
this.breadcrumbs$ = this.service.breadcrumbChanges;
}
navigateTo(path) {
this.router.navigate([path]);
}
}
NgxBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbComponent, deps: [{ token: i1.Router }, { token: NgxBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
NgxBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NgxBreadcrumbComponent, selector: "ngx-breadcrumb", inputs: { breadcrumbTemplate: "breadcrumbTemplate" }, ngImport: i0, template: "<div\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"space-between center\"\r\n class=\"ngx-breadcrumb-container\"\r\n>\r\n <nav aria-label=\"breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <ng-container *ngIf=\"breadcrumbs$ | async as breadcrumbs\">\r\n <ng-container\r\n *ngFor=\"\r\n let breadcrumb of breadcrumbs;\r\n last as isLast;\r\n first as isFirst\r\n \"\r\n >\r\n <li *ngIf=\"breadcrumb.label\" class=\"breadcrumb-item\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"breadcrumbTemplate || defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n breadcrumbArr: breadcrumbs,\r\n breadcrumb: breadcrumb,\r\n isLast: isLast,\r\n isFirst: isFirst\r\n }\"\r\n ></ng-container>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ol>\r\n </nav>\r\n</div>\r\n\r\n<ng-template #defaultTemplate let-breadcrumb=\"breadcrumb\" let-isLast=\"isLast\">\r\n <a\r\n href=\"javascript:void(0)\"\r\n *ngIf=\"breadcrumb.isClickable\"\r\n (click)=\"navigateTo(breadcrumb.url)\"\r\n title=\"{{breadcrumb.tooltip}}\"\r\n >\r\n {{ breadcrumb.label }}\r\n </a>\r\n <span *ngIf=\"!isLast\" class=\"breadcrumb-separator\">/</span>\r\n</ng-template>\r\n", styles: [".breadcrumb{display:flex;flex-wrap:wrap;padding:0;list-style:none;margin:0}.breadcrumb-item{cursor:pointer;font-weight:500;font-size:16px;line-height:16px}.breadcrumb-item a{text-decoration:none;color:#ff008c}.breadcrumb-item span{color:#333!important}.breadcrumb-separator{margin:0 8px}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-breadcrumb',
templateUrl: './ngx-breadcrumb.component.html',
styleUrls: ['./ngx-breadcrumb.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i1.Router }, { type: NgxBreadcrumbService }]; }, propDecorators: { breadcrumbTemplate: [{
type: Input
}] } });
class NgxBreadcrumbModule {
static forRoot() {
return {
ngModule: NgxBreadcrumbModule,
providers: [NgxBreadcrumbService],
};
}
}
NgxBreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxBreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbModule, declarations: [NgxBreadcrumbComponent], imports: [CommonModule, RouterModule], exports: [NgxBreadcrumbComponent] });
NgxBreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbModule, imports: [[CommonModule, RouterModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxBreadcrumbModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgxBreadcrumbComponent],
imports: [CommonModule, RouterModule],
exports: [NgxBreadcrumbComponent],
}]
}] });
/*
* Public API Surface of ngx-breadcrumb
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxBreadcrumbComponent, NgxBreadcrumbModule, NgxBreadcrumbService };
//# sourceMappingURL=ngx-dynamic-breadcrumb.js.map