ng-dynamic-breadcrumb-fragment/bundles/ng-dynamic-breadcrumb-fragment.umd.min.js

Angular 11 Dynamic Breadcrumb

!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("rxjs"),require("@angular/router"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-dynamic-breadcrumb-fragment",["exports","@angular/core","rxjs","@angular/router","rxjs/operators","@angular/common"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-dynamic-breadcrumb-fragment"]={},e.ng.core,e.rxjs,e.ng.router,e.rxjs.operators,e.ng.common)}(this,(function(e,r,t,n,a,o){"use strict";function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=i(r),c=function(){function e(){this.breadcrumbLabels=new t.BehaviorSubject([]),this.newBreadcrumb=new t.BehaviorSubject([])}return e.prototype.updateBreadcrumbLabels=function(e){this.breadcrumbLabels.next(e)},e.prototype.updateBreadcrumb=function(e){this.newBreadcrumb.next(e)},e}();c.ɵprov=u.ɵɵdefineInjectable({factory:function(){return new c},token:c,providedIn:"root"}),c.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],c.ctorParameters=function(){return[]};Object.create;function l(e){var r="function"==typeof Symbol&&Symbol.iterator,t=r&&e[r],n=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(r?"Object is not iterable.":"Symbol.iterator is not defined.")}Object.create;var s=function(){function e(e,r,t){this.activatedRoute=e,this.router=r,this.ngDynamicBreadcrumbService=t,this.breadcrumb=[],this.bgColor="#eee",this.fontSize="18px",this.fontColor="#0275d8",this.lastLinkColor="#000",this.symbol=" / ",this.breadCrumbData()}return e.prototype.ngOnInit=function(){var e=this;this.ngDynamicBreadcrumbService.breadcrumbLabels.subscribe((function(r){var t=function(t){r.hasOwnProperty(t)&&e.breadcrumb.map((function(e){var n,a,o=e.label.match(/[^{{]+(?=\}})/g);if(o)try{for(var i=(n=void 0,l(o)),u=i.next();!u.done;u=i.next()){var c=u.value,s=r[t];c===t&&(e.label=e.label.replace("{{"+c+"}}",s))}}catch(e){n={error:e}}finally{try{u&&!u.done&&(a=i.return)&&a.call(i)}finally{if(n)throw n.error}}}))};for(var n in r)t(n)})),this.ngDynamicBreadcrumbService.newBreadcrumb.subscribe((function(r){r.length>0&&e.updateData(e.activatedRoute,r)}))},e.prototype.breadCrumbData=function(){var e=this;this.router.events.pipe(a.filter((function(e){return e instanceof n.NavigationEnd}))).pipe(a.map((function(){return e.activatedRoute}))).pipe(a.map((function(e){for(;e.firstChild;)e=e.firstChild;return e}))).pipe(a.filter((function(e){return e.outlet===n.PRIMARY_OUTLET}))).subscribe((function(r){e.params=r.snapshot.params,e.updateData(r,null)}))},e.prototype.updateData=function(e,r){var t=this;if(e.snapshot.data.breadcrumb||r){var n=e.snapshot.data.breadcrumb?e.snapshot.data.breadcrumb:r,a=JSON.parse(JSON.stringify(n));a.map((function(e){var r,n,a,o,i=e.url.split("/");try{for(var u=l(i),c=u.next();!c.done;c=u.next()){var s=c.value;if(s.includes(":")){var b=s.replace(":",""),d=t.params[b];e.url=e.url.replace(":"+b,d)}}}catch(e){r={error:e}}finally{try{c&&!c.done&&(n=u.return)&&n.call(u)}finally{if(r)throw r.error}}var p=e.label.match(/[^{{]+(?=\}})/g);if(p)try{for(var f=l(p),m=f.next();!m.done;m=f.next()){var y=m.value;(d=t.params[y.trim()])&&(e.label=e.label.replace("{{"+y+"}}",d))}}catch(e){a={error:e}}finally{try{m&&!m.done&&(o=f.return)&&o.call(f)}finally{if(a)throw a.error}}})),this.breadcrumb=a}else this.breadcrumb=[]},e}();s.decorators=[{type:r.Component,args:[{selector:"app-ng-dynamic-breadcrumb",template:'<ul class="custom-bread-crumb" [ngStyle]="{\'background-color\': bgColor}">\n  <span *ngFor="let item of breadcrumb; let i = index">\n      <li [ngStyle]="{\'font-size\': fontSize}">\n          <a *ngIf="item?.url" [routerLink]="item?.url" [ngStyle]="{\'color\': fontColor}" [fragment]="item?.fragment || \'\'">{{ item.label }}</a>\n          <span *ngIf="!item?.url" [ngStyle]="{\'color\': lastLinkColor}">{{ item.label }}</span>\n          <span class="line" *ngIf="breadcrumb.length !== i+1">{{symbol}}</span>\n      </li>\n  </span>\n</ul>\n',styles:[".custom-bread-crumb{padding:10px 16px;list-style:none}.custom-bread-crumb li{display:inline}.custom-bread-crumb .line{padding-right:3px}.custom-bread-crumb li a{text-decoration:none}.custom-bread-crumb li a:hover{color:#01447e;text-decoration:underline}"]}]}],s.ctorParameters=function(){return[{type:n.ActivatedRoute},{type:n.Router},{type:c}]},s.propDecorators={bgColor:[{type:r.Input}],fontSize:[{type:r.Input}],fontColor:[{type:r.Input}],lastLinkColor:[{type:r.Input}],symbol:[{type:r.Input}]};var b=function(){};b.decorators=[{type:r.NgModule,args:[{declarations:[s],imports:[n.RouterModule,o.CommonModule],exports:[s]}]}],e.NgDynamicBreadcrumbComponent=s,e.NgDynamicBreadcrumbModule=b,e.NgDynamicBreadcrumbService=c,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-dynamic-breadcrumb-fragment.umd.min.js.map