xng-breadcrumb
Version:
A declarative and reactive breadcrumb approach for Angular 6 and beyond https://www.npmjs.com/package/xng-breadcrumb
779 lines (770 loc) • 31.7 kB
JavaScript
import { __assign, __spread } from 'tslib';
import { BehaviorSubject } from 'rxjs';
import { distinctUntilChanged, filter } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router';
import { Directive, Injectable, Pipe, Component, ContentChild, Input, TemplateRef, ViewEncapsulation, NgModule, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BreadcrumbItemDirective = /** @class */ (function () {
function BreadcrumbItemDirective() {
}
BreadcrumbItemDirective.decorators = [
{ type: Directive, args: [{
selector: '[xngBreadcrumbItem]'
},] }
];
/** @nocollapse */
BreadcrumbItemDirective.ctorParameters = function () { return []; };
return BreadcrumbItemDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BreadcrumbService = /** @class */ (function () {
function BreadcrumbService(activatedRoute, router) {
this.activatedRoute = activatedRoute;
this.router = router;
this.baseHref = '/';
/**
* dynamicBreadcrumbStore holds information about dynamically updated breadcrumbs.
* Breadcrumbs can be set from anywhere (component, service) in the app.
* On every breadcrumb update check this store and use the info if available.
*/
this.dynamicBreadcrumbStore = [];
/**
* breadcrumbList for the current route
* When breadcrumb info is changed dynamically, check if the currentBreadcrumbs is effected
* If effected, update the change and emit a new stream
*/
this.currentBreadcrumbs = [];
/**
* Breadcrumbs observable to be subscribed by BreadcrumbComponent
* Emits on every route change OR dynamic update of breadcrumb
*/
this.breadcrumbs = new BehaviorSubject([]);
this.breadcrumbs$ = this.breadcrumbs.asObservable();
this.pathParamPrefix = ':';
this.pathParamRegexIdentifier = '/:[^/]+';
this.pathParamRegexReplacer = '/[^/]+';
this.setBaseBreadcrumb();
this.detectRouteChanges();
}
/**
* Update breadcrumb label or options for -
*
* route (complete route path). route can be passed the same way you define angular routes
* 1) update label Ex: set('/mentor', 'Mentor'), set('/mentor/:id', 'Mentor Details')
* 2) change visibility Ex: set('/mentor/:id/edit', { skip: true })
* 3) add info Ex: set('/mentor/:id/edit', { info: { icon: 'edit', iconColor: 'blue' } })
* ------------------------ OR -------------------------
*
* alias (prefixed with '@'). breadcrumb alias is unique for a route
* 1) update label Ex: set('@mentor', 'Enabler')
* 2) change visibility Ex: set('@mentorEdit', { skip: true })
* 3) add info Ex: set('@mentorEdit', { info: { icon: 'edit', iconColor: 'blue' } })
*/
/**
* Update breadcrumb label or options for -
*
* route (complete route path). route can be passed the same way you define angular routes
* 1) update label Ex: set('/mentor', 'Mentor'), set('/mentor/:id', 'Mentor Details')
* 2) change visibility Ex: set('/mentor/:id/edit', { skip: true })
* 3) add info Ex: set('/mentor/:id/edit', { info: { icon: 'edit', iconColor: 'blue' } })
* ------------------------ OR -------------------------
*
* alias (prefixed with '\@'). breadcrumb alias is unique for a route
* 1) update label Ex: set('\@mentor', 'Enabler')
* 2) change visibility Ex: set('\@mentorEdit', { skip: true })
* 3) add info Ex: set('\@mentorEdit', { info: { icon: 'edit', iconColor: 'blue' } })
* @param {?} pathOrAlias
* @param {?} breadcrumb
* @return {?}
*/
BreadcrumbService.prototype.set = /**
* Update breadcrumb label or options for -
*
* route (complete route path). route can be passed the same way you define angular routes
* 1) update label Ex: set('/mentor', 'Mentor'), set('/mentor/:id', 'Mentor Details')
* 2) change visibility Ex: set('/mentor/:id/edit', { skip: true })
* 3) add info Ex: set('/mentor/:id/edit', { info: { icon: 'edit', iconColor: 'blue' } })
* ------------------------ OR -------------------------
*
* alias (prefixed with '\@'). breadcrumb alias is unique for a route
* 1) update label Ex: set('\@mentor', 'Enabler')
* 2) change visibility Ex: set('\@mentorEdit', { skip: true })
* 3) add info Ex: set('\@mentorEdit', { info: { icon: 'edit', iconColor: 'blue' } })
* @param {?} pathOrAlias
* @param {?} breadcrumb
* @return {?}
*/
function (pathOrAlias, breadcrumb) {
if (!this.validateArguments(pathOrAlias, breadcrumb)) {
return;
}
if (typeof breadcrumb === 'string') {
breadcrumb = {
label: breadcrumb
};
}
if (pathOrAlias.startsWith('@')) {
this.updateStore(__assign({}, breadcrumb, { alias: pathOrAlias.slice(1) }));
}
else {
/** @type {?} */
var breadcrumbExtraProps = this.buildRouteRegExp(pathOrAlias);
this.updateStore(__assign({}, breadcrumb, breadcrumbExtraProps));
}
};
/**
* @private
* @return {?}
*/
BreadcrumbService.prototype.setBaseBreadcrumb = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var baseConfig = this.router.config.find((/**
* @param {?} pathConfig
* @return {?}
*/
function (pathConfig) { return pathConfig.path === ''; }));
if (baseConfig && baseConfig.data) {
var _a = this.getBreadcrumbOptions(baseConfig.data), label = _a.label, alias = _a.alias, _b = _a.skip, skip = _b === void 0 ? false : _b, info = _a.info;
/** @type {?} */
var isAutoGeneratedLabel = false;
if (typeof label !== 'string' && !label) {
label = '';
isAutoGeneratedLabel = true;
}
this.baseBreadcrumb = {
label: label,
alias: alias,
skip: skip,
info: info,
routeLink: this.baseHref,
isAutoGeneratedLabel: isAutoGeneratedLabel
};
}
};
/**
* Whenever route changes build breadcrumb list again
*/
/**
* Whenever route changes build breadcrumb list again
* @private
* @return {?}
*/
BreadcrumbService.prototype.detectRouteChanges = /**
* Whenever route changes build breadcrumb list again
* @private
* @return {?}
*/
function () {
var _this = this;
this.router.events
.pipe(filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event instanceof NavigationEnd; })), distinctUntilChanged())
.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
_this.currentBreadcrumbs = _this.baseBreadcrumb ? [_this.baseBreadcrumb] : [];
_this.prepareBreadcrumbList(_this.activatedRoute.root, _this.baseHref);
}));
};
/**
* @private
* @param {?} activatedRoute
* @param {?} routeLinkPrefix
* @return {?}
*/
BreadcrumbService.prototype.prepareBreadcrumbList = /**
* @private
* @param {?} activatedRoute
* @param {?} routeLinkPrefix
* @return {?}
*/
function (activatedRoute, routeLinkPrefix) {
if (activatedRoute.routeConfig && activatedRoute.routeConfig.path) {
/** @type {?} */
var breadcrumbItem = this.prepareBreadcrumbItem(activatedRoute, routeLinkPrefix);
this.currentBreadcrumbs.push(breadcrumbItem);
if (activatedRoute.firstChild) {
return this.prepareBreadcrumbList(activatedRoute.firstChild, breadcrumbItem.routeLink + '/');
}
}
else if (activatedRoute.firstChild) {
return this.prepareBreadcrumbList(activatedRoute.firstChild, routeLinkPrefix);
}
// remove breadcrumb items that needs to be hidden or don't have a label
/** @type {?} */
var breacrumbsToShow = this.currentBreadcrumbs.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return !item.skip; }));
this.breadcrumbs.next(breacrumbsToShow);
};
/**
* @private
* @param {?} activatedRoute
* @param {?} routeLinkPrefix
* @return {?}
*/
BreadcrumbService.prototype.prepareBreadcrumbItem = /**
* @private
* @param {?} activatedRoute
* @param {?} routeLinkPrefix
* @return {?}
*/
function (activatedRoute, routeLinkPrefix) {
var _a = this.parseRouteData(activatedRoute.routeConfig), path = _a.path, breadcrumb = _a.breadcrumb;
// in case of path param get the resolved for param
/** @type {?} */
var resolvedPath = this.resolvePathParam(path, activatedRoute);
/** @type {?} */
var routeLink = "" + routeLinkPrefix + resolvedPath;
var _b = this.getFromStore(breadcrumb.alias, routeLink), label = _b.label, alias = _b.alias, skip = _b.skip, info = _b.info;
/** @type {?} */
var isAutoGeneratedLabel = false;
if (typeof label !== 'string') {
if (typeof breadcrumb.label === 'string') {
label = breadcrumb.label;
}
else {
label = resolvedPath;
isAutoGeneratedLabel = true;
}
}
return {
label: label,
alias: alias || breadcrumb.alias,
skip: skip || breadcrumb.skip,
info: info || breadcrumb.info,
routeLink: routeLink,
isAutoGeneratedLabel: isAutoGeneratedLabel
};
};
/**
* For a specific route, breadcrumb can be defined either on parent data OR it's child(which has empty path) data
* When both are defined, child takes precedence
*
* Ex: Below we are setting breadcrumb on both parent and child.
* So, child takes precedence and "Defined On Child" is displayed for the route 'home'
* { path: 'home', loadChildren: './home/home.module#HomeModule' , data: {breadcrumb: "Defined On Module"}}
* AND
* children: [
* { path: '', component: ShowUserComponent, data: {breadcrumb: "Defined On Child" }
* ]
*/
/**
* For a specific route, breadcrumb can be defined either on parent data OR it's child(which has empty path) data
* When both are defined, child takes precedence
*
* Ex: Below we are setting breadcrumb on both parent and child.
* So, child takes precedence and "Defined On Child" is displayed for the route 'home'
* { path: 'home', loadChildren: './home/home.module#HomeModule' , data: {breadcrumb: "Defined On Module"}}
* AND
* children: [
* { path: '', component: ShowUserComponent, data: {breadcrumb: "Defined On Child" }
* ]
* @private
* @param {?} routeConfig
* @return {?}
*/
BreadcrumbService.prototype.parseRouteData = /**
* For a specific route, breadcrumb can be defined either on parent data OR it's child(which has empty path) data
* When both are defined, child takes precedence
*
* Ex: Below we are setting breadcrumb on both parent and child.
* So, child takes precedence and "Defined On Child" is displayed for the route 'home'
* { path: 'home', loadChildren: './home/home.module#HomeModule' , data: {breadcrumb: "Defined On Module"}}
* AND
* children: [
* { path: '', component: ShowUserComponent, data: {breadcrumb: "Defined On Child" }
* ]
* @private
* @param {?} routeConfig
* @return {?}
*/
function (routeConfig) {
var path = routeConfig.path, _a = routeConfig.data, data = _a === void 0 ? {} : _a;
/** @type {?} */
var breadcrumb = this.mergeWithBaseChildData(routeConfig, __assign({}, data));
return { path: path, breadcrumb: breadcrumb };
};
/**
* @private
* @param {?} breadcrumbAlias
* @param {?} routeLink
* @return {?}
*/
BreadcrumbService.prototype.getFromStore = /**
* @private
* @param {?} breadcrumbAlias
* @param {?} routeLink
* @return {?}
*/
function (breadcrumbAlias, routeLink) {
/** @type {?} */
var matchingItem;
if (breadcrumbAlias) {
matchingItem = this.dynamicBreadcrumbStore.find((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.alias === breadcrumbAlias; }));
}
if (!matchingItem && routeLink) {
matchingItem = this.dynamicBreadcrumbStore.find((/**
* @param {?} item
* @return {?}
*/
function (item) {
return (item.routeLink && item.routeLink === routeLink) || (item.routeRegex && new RegExp(item.routeRegex).test(routeLink + '/'));
}));
}
return matchingItem || {};
};
/**
* To update breadcrumb label for a route with path param, we need regex that matches route.
* Instead of user providing regex, we help in preparing regex dynamically
*
* Ex: route declaration - path: '/mentor/:id'
* breadcrumbService.set('/mentor/:id', 'Uday');
* '/mentor/2' OR 'mentor/adasd' we should use 'Uday' as label
*
* regex string is built, if route has path params(contains with ':')
*/
/**
* To update breadcrumb label for a route with path param, we need regex that matches route.
* Instead of user providing regex, we help in preparing regex dynamically
*
* Ex: route declaration - path: '/mentor/:id'
* breadcrumbService.set('/mentor/:id', 'Uday');
* '/mentor/2' OR 'mentor/adasd' we should use 'Uday' as label
*
* regex string is built, if route has path params(contains with ':')
* @private
* @param {?} path
* @return {?}
*/
BreadcrumbService.prototype.buildRouteRegExp = /**
* To update breadcrumb label for a route with path param, we need regex that matches route.
* Instead of user providing regex, we help in preparing regex dynamically
*
* Ex: route declaration - path: '/mentor/:id'
* breadcrumbService.set('/mentor/:id', 'Uday');
* '/mentor/2' OR 'mentor/adasd' we should use 'Uday' as label
*
* regex string is built, if route has path params(contains with ':')
* @private
* @param {?} path
* @return {?}
*/
function (path) {
// ensure leading slash is provided in the path
if (!path.startsWith('/')) {
path = '/' + path;
}
if (path.includes(this.pathParamPrefix)) {
// replace mathing path param with a regex
// '/mentor/:id' becomes '/mentor/[^/]', which further will be matched in updateStore
/** @type {?} */
var routeRegex = path.replace(new RegExp(this.pathParamRegexIdentifier, 'g'), this.pathParamRegexReplacer);
return { routeRegex: routeRegex };
}
else {
return { routeLink: path };
}
};
/**
* Update current breadcrumb definition and emit a new stream of breadcrumbs
* Also update the store to reuse dynamic declarations
*/
/**
* Update current breadcrumb definition and emit a new stream of breadcrumbs
* Also update the store to reuse dynamic declarations
* @private
* @param {?} breadcrumb
* @return {?}
*/
BreadcrumbService.prototype.updateStore = /**
* Update current breadcrumb definition and emit a new stream of breadcrumbs
* Also update the store to reuse dynamic declarations
* @private
* @param {?} breadcrumb
* @return {?}
*/
function (breadcrumb) {
var _a = this.getBreadcrumbIndexes(breadcrumb), breadcrumbItemIndex = _a.breadcrumbItemIndex, storeItemIndex = _a.storeItemIndex;
// if breadcrumb is present in current breadcrumbs update it and emit new stream
if (breadcrumbItemIndex > -1) {
this.currentBreadcrumbs[breadcrumbItemIndex] = __assign({}, this.currentBreadcrumbs[breadcrumbItemIndex], breadcrumb);
/** @type {?} */
var breacrumbsToShow = this.currentBreadcrumbs.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return !item.skip; }));
this.breadcrumbs.next(__spread(breacrumbsToShow));
}
// If the store already has this route definition update it, else add
if (storeItemIndex > -1) {
this.dynamicBreadcrumbStore[storeItemIndex] = __assign({}, this.dynamicBreadcrumbStore[storeItemIndex], breadcrumb);
}
else {
this.dynamicBreadcrumbStore.push(breadcrumb);
}
};
/**
* @private
* @param {?} breadcrumb
* @return {?}
*/
BreadcrumbService.prototype.getBreadcrumbIndexes = /**
* @private
* @param {?} breadcrumb
* @return {?}
*/
function (breadcrumb) {
var alias = breadcrumb.alias, routeLink = breadcrumb.routeLink, routeRegex = breadcrumb.routeRegex;
/** @type {?} */
var indexMap = {};
// identify macthing breadcrumb and store item
if (alias) {
indexMap = this.getBreadcrumbIndexesByType('alias', alias);
}
else if (routeLink) {
indexMap = this.getBreadcrumbIndexesByType('routeLink', routeLink);
}
else if (routeRegex) {
indexMap = this.getBreadcrumbIndexesByType('routeRegex', routeRegex);
}
return indexMap;
};
/**
* @private
* @param {?} key
* @param {?} value
* @return {?}
*/
BreadcrumbService.prototype.getBreadcrumbIndexesByType = /**
* @private
* @param {?} key
* @param {?} value
* @return {?}
*/
function (key, value) {
/** @type {?} */
var breadcrumbItemIndex = this.currentBreadcrumbs.findIndex((/**
* @param {?} item
* @return {?}
*/
function (item) { return value === item[key]; }));
/** @type {?} */
var storeItemIndex = this.dynamicBreadcrumbStore.findIndex((/**
* @param {?} item
* @return {?}
*/
function (item) { return value === item[key]; }));
return { breadcrumbItemIndex: breadcrumbItemIndex, storeItemIndex: storeItemIndex };
};
/**
* @private
* @param {?} path
* @param {?} activatedRoute
* @return {?}
*/
BreadcrumbService.prototype.resolvePathParam = /**
* @private
* @param {?} path
* @param {?} activatedRoute
* @return {?}
*/
function (path, activatedRoute) {
// if the path segment is a route param, read the param value from url
if (path.startsWith(this.pathParamPrefix)) {
return activatedRoute.snapshot.params[path.slice(1)];
}
return path;
};
/**
* get empty children of a module or Component. Empty child is the one with path: ''
* When parent and it's children (that has empty route path) define data
* merge them both with child taking precedence
*/
/**
* get empty children of a module or Component. Empty child is the one with path: ''
* When parent and it's children (that has empty route path) define data
* merge them both with child taking precedence
* @private
* @param {?} routeConfig
* @param {?} data
* @return {?}
*/
BreadcrumbService.prototype.mergeWithBaseChildData = /**
* get empty children of a module or Component. Empty child is the one with path: ''
* When parent and it's children (that has empty route path) define data
* merge them both with child taking precedence
* @private
* @param {?} routeConfig
* @param {?} data
* @return {?}
*/
function (routeConfig, data) {
if (!routeConfig) {
return this.getBreadcrumbOptions(data);
}
/** @type {?} */
var baseChild;
if (routeConfig.loadChildren) {
// To handle a module with empty child route
baseChild = routeConfig._loadedConfig.routes.find((/**
* @param {?} route
* @return {?}
*/
function (route) { return route.path === ''; }));
}
else if (routeConfig.children) {
// To handle a component with empty child route
baseChild = routeConfig.children.find((/**
* @param {?} route
* @return {?}
*/
function (route) { return route.path === ''; }));
}
return baseChild && baseChild.data
? this.mergeWithBaseChildData(baseChild, __assign({}, this.getBreadcrumbOptions(data), this.getBreadcrumbOptions(baseChild.data)))
: this.getBreadcrumbOptions(data);
};
/**
* @private
* @param {?} pathOrAlias
* @param {?} breadcrumb
* @return {?}
*/
BreadcrumbService.prototype.validateArguments = /**
* @private
* @param {?} pathOrAlias
* @param {?} breadcrumb
* @return {?}
*/
function (pathOrAlias, breadcrumb) {
if (pathOrAlias === null || pathOrAlias === undefined) {
console.error('Invalid first argument. Please pass a route path or a breadcrumb alias.');
return false;
}
else if (breadcrumb === null || breadcrumb === undefined) {
console.error('Invalid second argument. Please pass a string or an Object with breadcrumb options.');
return false;
}
return true;
};
/**
* breadcrumb can be passed a label or an options object
* If passed as a string convert to breadcrumb options object
*/
/**
* breadcrumb can be passed a label or an options object
* If passed as a string convert to breadcrumb options object
* @private
* @param {?} data
* @return {?}
*/
BreadcrumbService.prototype.getBreadcrumbOptions = /**
* breadcrumb can be passed a label or an options object
* If passed as a string convert to breadcrumb options object
* @private
* @param {?} data
* @return {?}
*/
function (data) {
var breadcrumb = data.breadcrumb;
if (typeof breadcrumb === 'string' || !breadcrumb) {
breadcrumb = {
label: breadcrumb
};
}
return breadcrumb;
};
BreadcrumbService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
BreadcrumbService.ctorParameters = function () { return [
{ type: ActivatedRoute },
{ type: Router }
]; };
/** @nocollapse */ BreadcrumbService.ngInjectableDef = ɵɵdefineInjectable({ factory: function BreadcrumbService_Factory() { return new BreadcrumbService(ɵɵinject(ActivatedRoute), ɵɵinject(Router)); }, token: BreadcrumbService, providedIn: "root" });
return BreadcrumbService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BreadcrumbComponent = /** @class */ (function () {
function BreadcrumbComponent(breadcrumbService) {
this.breadcrumbService = breadcrumbService;
this._separator = '/';
/**
* If true, breacrumb is auto generated even without any mapping label
* Default label is same as route segment
*/
this.autoGenerate = true;
/**
* custom class provided by consumer to increase specificity
* This will benefit to override styles that are conflicting
*/
this.class = '';
}
Object.defineProperty(BreadcrumbComponent.prototype, "separator", {
get: /**
* @return {?}
*/
function () {
return this._separator;
},
/**
* separator between breadcrumbs, defaults to '/'.
* User can customize separator either by passing a String or Template
*
* String --> Ex: <xng-breadcrumb separator="-"> </xng-breadcrumb>
*
* Template --> Ex: <xng-breadcrumb [separator]="separatorTemplate"> </xng-breadcrumb>
* <ng-template #separatorTemplate><mat-icon>arrow_right</mat-icon></ng-template>
*/
set: /**
* separator between breadcrumbs, defaults to '/'.
* User can customize separator either by passing a String or Template
*
* String --> Ex: <xng-breadcrumb separator="-"> </xng-breadcrumb>
*
* Template --> Ex: <xng-breadcrumb [separator]="separatorTemplate"> </xng-breadcrumb>
* <ng-template #separatorTemplate><mat-icon>arrow_right</mat-icon></ng-template>
* @param {?} value
* @return {?}
*/
function (value) {
if (value instanceof TemplateRef) {
this.separatorTemplate = value;
this._separator = undefined;
}
else {
this.separatorTemplate = undefined;
this._separator = value || '/';
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
BreadcrumbComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
};
BreadcrumbComponent.decorators = [
{ type: Component, args: [{
selector: 'xng-breadcrumb',
template: "<nav aria-label=\"breadcrumb\" class=\"xng-breadcrumb-root\" [ngClass]=\"class\">\n <ol class=\"xng-breadcrumb-list\">\n <ng-container *ngFor=\"let breadcrumb of breadcrumbs$ | async | autoLabel: autoGenerate; last as isLast; first as isFirst\">\n <li class=\"xng-breadcrumb-item\">\n <a *ngIf=\"!isLast\" [routerLink]=\"[breadcrumb.routeLink]\" class=\"xng-breadcrumb-link\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst }\"\n ></ng-container>\n <ng-container *ngIf=\"!itemTemplate\">{{ breadcrumb.label }}</ng-container>\n </a>\n\n <label *ngIf=\"isLast\" class=\"xng-breadcrumb-trail\">\n <ng-container\n *ngTemplateOutlet=\"itemTemplate; context: { $implicit: breadcrumb.label, info: breadcrumb.info, last: isLast, first: isFirst }\"\n ></ng-container>\n <ng-container *ngIf=\"!itemTemplate\">{{ breadcrumb.label }}</ng-container>\n </label>\n </li>\n\n <li *ngIf=\"!isLast\" class=\"xng-breadcrumb-separator\" aria-hidden=\"true\" role=\"separator\">\n <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\n <ng-container *ngIf=\"!separatorTemplate\">{{ separator }}</ng-container>\n </li>\n </ng-container>\n </ol>\n</nav>\n",
encapsulation: ViewEncapsulation.None,
styles: [".xng-breadcrumb-root{margin:0;color:rgba(0,0,0,.6)}.xng-breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0}.xng-breadcrumb-item{list-style:none}.xng-breadcrumb-trail{display:flex;align-items:center;color:rgba(0,0,0,.9)}.xng-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;transition:text-decoration .3s,-webkit-text-decoration .3s}.xng-breadcrumb-link:hover{text-decoration:underline}.xng-breadcrumb-separator{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:8px;margin-right:8px}"]
}] }
];
/** @nocollapse */
BreadcrumbComponent.ctorParameters = function () { return [
{ type: BreadcrumbService }
]; };
BreadcrumbComponent.propDecorators = {
itemTemplate: [{ type: ContentChild, args: [BreadcrumbItemDirective, { static: false, read: TemplateRef },] }],
autoGenerate: [{ type: Input }],
class: [{ type: Input }],
separator: [{ type: Input, args: ['separator',] }]
};
return BreadcrumbComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AutoLabelPipe = /** @class */ (function () {
function AutoLabelPipe() {
}
/**
* @param {?} breadcrumbList
* @param {?} shouldautoGenerate
* @param {...?} args
* @return {?}
*/
AutoLabelPipe.prototype.transform = /**
* @param {?} breadcrumbList
* @param {?} shouldautoGenerate
* @param {...?} args
* @return {?}
*/
function (breadcrumbList, shouldautoGenerate) {
var args = [];
for (var _i = 2; _i < arguments.length; _i++) {
args[_i - 2] = arguments[_i];
}
if (shouldautoGenerate) {
return breadcrumbList;
}
else {
return breadcrumbList.filter((/**
* @param {?} breadcrumb
* @return {?}
*/
function (breadcrumb) { return !breadcrumb.isAutoGeneratedLabel; }));
}
return null;
};
AutoLabelPipe.decorators = [
{ type: Pipe, args: [{
name: 'autoLabel'
},] }
];
return AutoLabelPipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BreadcrumbModule = /** @class */ (function () {
function BreadcrumbModule() {
}
BreadcrumbModule.decorators = [
{ type: NgModule, args: [{
declarations: [BreadcrumbComponent, BreadcrumbItemDirective, AutoLabelPipe],
imports: [CommonModule, RouterModule],
exports: [BreadcrumbComponent, BreadcrumbItemDirective]
},] }
];
return BreadcrumbModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { BreadcrumbItemDirective, BreadcrumbComponent, BreadcrumbModule, BreadcrumbService, AutoLabelPipe as ɵa };
//# sourceMappingURL=xng-breadcrumb.js.map