xng-breadcrumb/bundles/xng-breadcrumb.umd.min.js

A declarative and reactive breadcrumb approach for Angular 6 and beyond https://www.npmjs.com/package/xng-breadcrumb

!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("rxjs"),require("rxjs/operators"),require("@angular/common"),require("@angular/router"),require("@angular/core")):"function"==typeof define&&define.amd?define("xng-breadcrumb",["exports","rxjs","rxjs/operators","@angular/common","@angular/router","@angular/core"],r):r(e["xng-breadcrumb"]={},e.rxjs,e.rxjs.operators,e.ng.common,e.ng.router,e.ng.core)}(this,function(e,t,a,r,n,i){"use strict";var o=(s.decorators=[{type:i.Directive,args:[{selector:"[xngBreadcrumbItem]"}]}],s.ctorParameters=function(){return[]},s);function s(){}var u=function(){return(u=Object.assign||function(e){for(var r,t=1,a=arguments.length;t<a;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e}).apply(this,arguments)};function c(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var a,n,i=t.call(e),o=[];try{for(;(void 0===r||0<r--)&&!(a=i.next()).done;)o.push(a.value)}catch(s){n={error:s}}finally{try{a&&!a.done&&(t=i["return"])&&t.call(i)}finally{if(n)throw n.error}}return o}var d=(l.prototype.set=function(e,r){if(this.validateArguments(e,r))if("string"==typeof r&&(r={label:r}),e.startsWith("@"))this.updateStore(u({},r,{alias:e.slice(1)}));else{var t=this.buildRouteRegExp(e);this.updateStore(u({},r,t))}},l.prototype.setBaseBreadcrumb=function(){var e=this.router.config.find(function(e){return""===e.path});if(e&&e.data){var r=this.getBreadcrumbOptions(e.data),t=r.label,a=r.alias,n=r.skip,i=void 0!==n&&n,o=r.info,s=!1;"string"==typeof t||t||(s=!(t="")),this.baseBreadcrumb={label:t,alias:a,skip:i,info:o,routeLink:this.baseHref,isAutoGeneratedLabel:s}}},l.prototype.detectRouteChanges=function(){var r=this;this.router.events.pipe(a.filter(function(e){return e instanceof n.NavigationEnd}),a.distinctUntilChanged()).subscribe(function(e){r.currentBreadcrumbs=r.baseBreadcrumb?[r.baseBreadcrumb]:[],r.prepareBreadcrumbList(r.activatedRoute.root,r.baseHref)})},l.prototype.prepareBreadcrumbList=function(e,r){if(e.routeConfig&&e.routeConfig.path){var t=this.prepareBreadcrumbItem(e,r);if(this.currentBreadcrumbs.push(t),e.firstChild)return this.prepareBreadcrumbList(e.firstChild,t.routeLink+"/")}else if(e.firstChild)return this.prepareBreadcrumbList(e.firstChild,r);var a=this.currentBreadcrumbs.filter(function(e){return!e.skip});this.breadcrumbs.next(a)},l.prototype.prepareBreadcrumbItem=function(e,r){var t=this.parseRouteData(e.routeConfig),a=t.path,n=t.breadcrumb,i=this.resolvePathParam(a,e),o=""+r+i,s=this.getFromStore(n.alias,o),u=s.label,c=s.alias,d=s.skip,l=s.info,p=!1;return"string"!=typeof u&&("string"==typeof n.label?u=n.label:(u=i,p=!0)),{label:u,alias:c||n.alias,skip:d||n.skip,info:l||n.info,routeLink:o,isAutoGeneratedLabel:p}},l.prototype.parseRouteData=function(e){var r=e.path,t=e.data,a=void 0===t?{}:t;return{path:r,breadcrumb:this.mergeWithBaseChildData(e,u({},a))}},l.prototype.getFromStore=function(r,t){var e;return r&&(e=this.dynamicBreadcrumbStore.find(function(e){return e.alias===r})),!e&&t&&(e=this.dynamicBreadcrumbStore.find(function(e){return e.routeLink&&e.routeLink===t||e.routeRegex&&new RegExp(e.routeRegex).test(t+"/")})),e||{}},l.prototype.buildRouteRegExp=function(e){return e.startsWith("/")||(e="/"+e),e.includes(this.pathParamPrefix)?{routeRegex:e.replace(new RegExp(this.pathParamRegexIdentifier,"g"),this.pathParamRegexReplacer)}:{routeLink:e}},l.prototype.updateStore=function(e){var r=this.getBreadcrumbIndexes(e),t=r.breadcrumbItemIndex,a=r.storeItemIndex;if(-1<t){this.currentBreadcrumbs[t]=u({},this.currentBreadcrumbs[t],e);var n=this.currentBreadcrumbs.filter(function(e){return!e.skip});this.breadcrumbs.next(function i(){for(var e=[],r=0;r<arguments.length;r++)e=e.concat(c(arguments[r]));return e}(n))}-1<a?this.dynamicBreadcrumbStore[a]=u({},this.dynamicBreadcrumbStore[a],e):this.dynamicBreadcrumbStore.push(e)},l.prototype.getBreadcrumbIndexes=function(e){var r=e.alias,t=e.routeLink,a=e.routeRegex,n={};return r?n=this.getBreadcrumbIndexesByType("alias",r):t?n=this.getBreadcrumbIndexesByType("routeLink",t):a&&(n=this.getBreadcrumbIndexesByType("routeRegex",a)),n},l.prototype.getBreadcrumbIndexesByType=function(r,t){return{breadcrumbItemIndex:this.currentBreadcrumbs.findIndex(function(e){return t===e[r]}),storeItemIndex:this.dynamicBreadcrumbStore.findIndex(function(e){return t===e[r]})}},l.prototype.resolvePathParam=function(e,r){return e.startsWith(this.pathParamPrefix)?r.snapshot.params[e.slice(1)]:e},l.prototype.mergeWithBaseChildData=function(e,r){return e?(e.loadChildren?t=e._loadedConfig.routes.find(function(e){return""===e.path}):e.children&&(t=e.children.find(function(e){return""===e.path})),t&&t.data?this.mergeWithBaseChildData(t,u({},this.getBreadcrumbOptions(r),this.getBreadcrumbOptions(t.data))):this.getBreadcrumbOptions(r)):this.getBreadcrumbOptions(r);var t},l.prototype.validateArguments=function(e,r){return null===e||e===undefined?(console.error("Invalid first argument. Please pass a route path or a breadcrumb alias."),!1):null!==r&&r!==undefined||(console.error("Invalid second argument. Please pass a string or an Object with breadcrumb options."),!1)},l.prototype.getBreadcrumbOptions=function(e){var r=e.breadcrumb;return"string"!=typeof r&&r||(r={label:r}),r},l.decorators=[{type:i.Injectable,args:[{providedIn:"root"}]}],l.ctorParameters=function(){return[{type:n.ActivatedRoute},{type:n.Router}]},l.ngInjectableDef=i.ɵɵdefineInjectable({factory:function(){return new l(i.ɵɵinject(n.ActivatedRoute),i.ɵɵinject(n.Router))},token:l,providedIn:"root"}),l);function l(e,r){this.activatedRoute=e,this.router=r,this.baseHref="/",this.dynamicBreadcrumbStore=[],this.currentBreadcrumbs=[],this.breadcrumbs=new t.BehaviorSubject([]),this.breadcrumbs$=this.breadcrumbs.asObservable(),this.pathParamPrefix=":",this.pathParamRegexIdentifier="/:[^/]+",this.pathParamRegexReplacer="/[^/]+",this.setBaseBreadcrumb(),this.detectRouteChanges()}var p=(Object.defineProperty(b.prototype,"separator",{get:function(){return this._separator},set:function(e){e instanceof i.TemplateRef?(this.separatorTemplate=e,this._separator=undefined):(this.separatorTemplate=undefined,this._separator=e||"/")},enumerable:!0,configurable:!0}),b.prototype.ngOnInit=function(){this.breadcrumbs$=this.breadcrumbService.breadcrumbs$},b.decorators=[{type:i.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:i.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}"]}]}],b.ctorParameters=function(){return[{type:d}]},b.propDecorators={itemTemplate:[{type:i.ContentChild,args:[o,{"static":!1,read:i.TemplateRef}]}],autoGenerate:[{type:i.Input}],"class":[{type:i.Input}],separator:[{type:i.Input,args:["separator"]}]},b);function b(e){this.breadcrumbService=e,this._separator="/",this.autoGenerate=!0,this["class"]=""}var m=(f.prototype.transform=function(e,r){for(var t=[],a=2;a<arguments.length;a++)t[a-2]=arguments[a];return r?e:e.filter(function(e){return!e.isAutoGeneratedLabel})},f.decorators=[{type:i.Pipe,args:[{name:"autoLabel"}]}],f);function f(){}var g=(h.decorators=[{type:i.NgModule,args:[{declarations:[p,o,m],imports:[r.CommonModule,n.RouterModule],exports:[p,o]}]}],h);function h(){}e.BreadcrumbItemDirective=o,e.BreadcrumbComponent=p,e.BreadcrumbModule=g,e.BreadcrumbService=d,e.ɵa=m,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=xng-breadcrumb.umd.min.js.map