xng-breadcrumb
Version:
A declarative and reactive breadcrumb approach for Angular 6 and beyond https://www.npmjs.com/package/xng-breadcrumb
131 lines • 11.7 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ContentChild, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
import { BreadcrumbItemDirective } from './breadcrumb-item.directive';
import { BreadcrumbService } from './breadcrumb.service';
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;
}());
export { BreadcrumbComponent };
if (false) {
/** @type {?} */
BreadcrumbComponent.prototype.breadcrumbs$;
/** @type {?} */
BreadcrumbComponent.prototype.separatorTemplate;
/**
* @type {?}
* @private
*/
BreadcrumbComponent.prototype._separator;
/**
* Breadcrumb item can be customized with this template
* Template context is provided label, additional info, first and last indexes
* Use cases:
* 1) Add an icon along with label
* 2) i18n. {{breadcrumb | translate}} or {{breadcrumb | transloco}}
* 3) Change text case {{breadcrumb | titlecase}}
* @type {?}
*/
BreadcrumbComponent.prototype.itemTemplate;
/**
* If true, breacrumb is auto generated even without any mapping label
* Default label is same as route segment
* @type {?}
*/
BreadcrumbComponent.prototype.autoGenerate;
/**
* custom class provided by consumer to increase specificity
* This will benefit to override styles that are conflicting
* @type {?}
*/
BreadcrumbComponent.prototype.class;
/**
* @type {?}
* @private
*/
BreadcrumbComponent.prototype.breadcrumbService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly94bmctYnJlYWRjcnVtYi8iLCJzb3VyY2VzIjpbImxpYi9icmVhZGNydW1iLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV2RyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN0RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUd6RDtJQXdERSw2QkFBb0IsaUJBQW9DO1FBQXBDLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUEvQ2hELGVBQVUsR0FBRyxHQUFHLENBQUM7Ozs7O1FBZ0JoQixpQkFBWSxHQUFHLElBQUksQ0FBQzs7Ozs7UUFNcEIsVUFBSyxHQUFHLEVBQUUsQ0FBQztJQXlCdUMsQ0FBQztJQWQ1RCxzQkFDSSwwQ0FBUzs7OztRQVNiO1lBQ0UsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO1FBQ3pCLENBQUM7UUFyQkQ7Ozs7Ozs7O1dBUUc7Ozs7Ozs7Ozs7OztRQUNILFVBQ2MsS0FBaUM7WUFDN0MsSUFBSSxLQUFLLFlBQVksV0FBVyxFQUFFO2dCQUNoQyxJQUFJLENBQUMsaUJBQWlCLEdBQUcsS0FBSyxDQUFDO2dCQUMvQixJQUFJLENBQUMsVUFBVSxHQUFHLFNBQVMsQ0FBQzthQUM3QjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsaUJBQWlCLEdBQUcsU0FBUyxDQUFDO2dCQUNuQyxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssSUFBSSxHQUFHLENBQUM7YUFDaEM7UUFDSCxDQUFDOzs7T0FBQTs7OztJQU9ELHNDQUFROzs7SUFBUjtRQUNFLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFlBQVksQ0FBQztJQUMxRCxDQUFDOztnQkE1REYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLDQzQ0FBMEM7b0JBRTFDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJOztpQkFDdEM7Ozs7Z0JBUlEsaUJBQWlCOzs7K0JBc0J2QixZQUFZLFNBQUMsdUJBQXVCLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUU7K0JBTTFFLEtBQUs7d0JBTUwsS0FBSzs0QkFXTCxLQUFLLFNBQUMsV0FBVzs7SUFtQnBCLDBCQUFDO0NBQUEsQUE3REQsSUE2REM7U0F2RFksbUJBQW1COzs7SUFDOUIsMkNBQXVDOztJQUN2QyxnREFBcUM7Ozs7O0lBQ3JDLHlDQUF5Qjs7Ozs7Ozs7OztJQVV6QiwyQ0FBMEY7Ozs7OztJQU0xRiwyQ0FBNkI7Ozs7OztJQU03QixvQ0FBb0I7Ozs7O0lBeUJSLGdEQUE0QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCwgT25Jbml0LCBUZW1wbGF0ZVJlZiwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IEJyZWFkY3J1bWJJdGVtRGlyZWN0aXZlIH0gZnJvbSAnLi9icmVhZGNydW1iLWl0ZW0uZGlyZWN0aXZlJztcbmltcG9ydCB7IEJyZWFkY3J1bWJTZXJ2aWNlIH0gZnJvbSAnLi9icmVhZGNydW1iLnNlcnZpY2UnO1xuaW1wb3J0IHsgQnJlYWRjcnVtYiB9IGZyb20gJy4vYnJlYWRjcnVtYic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3huZy1icmVhZGNydW1iJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9icmVhZGNydW1iLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgQnJlYWRjcnVtYkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIGJyZWFkY3J1bWJzJDogT2JzZXJ2YWJsZTxCcmVhZGNydW1iW10+O1xuICBzZXBhcmF0b3JUZW1wbGF0ZTogVGVtcGxhdGVSZWY8dm9pZD47XG4gIHByaXZhdGUgX3NlcGFyYXRvciA9ICcvJztcblxuICAvKipcbiAgICogQnJlYWRjcnVtYiBpdGVtIGNhbiBiZSBjdXN0b21pemVkIHdpdGggdGhpcyB0ZW1wbGF0ZVxuICAgKiBUZW1wbGF0ZSBjb250ZXh0IGlzIHByb3ZpZGVkIGxhYmVsLCBhZGRpdGlvbmFsIGluZm8sIGZpcnN0IGFuZCBsYXN0IGluZGV4ZXNcbiAgICogVXNlIGNhc2VzOlxuICAgKiAxKSBBZGQgYW4gaWNvbiBhbG9uZyB3aXRoIGxhYmVsXG4gICAqIDIpIGkxOG4uIHt7YnJlYWRjcnVtYiB8IHRyYW5zbGF0ZX19IG9yIHt7YnJlYWRjcnVtYiB8IHRyYW5zbG9jb319XG4gICAqIDMpIENoYW5nZSB0ZXh0IGNhc2Uge3ticmVhZGNydW1iIHwgdGl0bGVjYXNlfX1cbiAgICovXG4gIEBDb250ZW50Q2hpbGQoQnJlYWRjcnVtYkl0ZW1EaXJlY3RpdmUsIHsgc3RhdGljOiBmYWxzZSwgcmVhZDogVGVtcGxhdGVSZWYgfSkgaXRlbVRlbXBsYXRlO1xuXG4gIC8qKlxuICAgKiBJZiB0cnVlLCBicmVhY3J1bWIgaXMgYXV0byBnZW5lcmF0ZWQgZXZlbiB3aXRob3V0IGFueSBtYXBwaW5nIGxhYmVsXG4gICAqIERlZmF1bHQgbGFiZWwgaXMgc2FtZSBhcyByb3V0ZSBzZWdtZW50XG4gICAqL1xuICBASW5wdXQoKSBhdXRvR2VuZXJhdGUgPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBjdXN0b20gY2xhc3MgcHJvdmlkZWQgYnkgY29uc3VtZXIgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbiAgICogVGhpcyB3aWxsIGJlbmVmaXQgdG8gb3ZlcnJpZGUgc3R5bGVzIHRoYXQgYXJlIGNvbmZsaWN0aW5nXG4gICAqL1xuICBASW5wdXQoKSBjbGFzcyA9ICcnO1xuXG4gIC8qKlxuICAgKiBzZXBhcmF0b3IgYmV0d2VlbiBicmVhZGNydW1icywgZGVmYXVsdHMgdG8gJy8nLlxuICAgKiBVc2VyIGNhbiBjdXN0b21pemUgc2VwYXJhdG9yIGVpdGhlciBieSBwYXNzaW5nIGEgU3RyaW5nIG9yIFRlbXBsYXRlXG4gICAqXG4gICAqIFN0cmluZyAtLT4gRXg6IDx4bmctYnJlYWRjcnVtYiBzZXBhcmF0b3I9XCItXCI+IDwveG5nLWJyZWFkY3J1bWI+XG4gICAqXG4gICAqIFRlbXBsYXRlIC0tPiBFeDogPHhuZy1icmVhZGNydW1iIFtzZXBhcmF0b3JdPVwic2VwYXJhdG9yVGVtcGxhdGVcIj4gPC94bmctYnJlYWRjcnVtYj5cbiAgICogPG5nLXRlbXBsYXRlICNzZXBhcmF0b3JUZW1wbGF0ZT48bWF0LWljb24+YXJyb3dfcmlnaHQ8L21hdC1pY29uPjwvbmctdGVtcGxhdGU+XG4gICAqL1xuICBASW5wdXQoJ3NlcGFyYXRvcicpXG4gIHNldCBzZXBhcmF0b3IodmFsdWU6IHN0cmluZyB8IFRlbXBsYXRlUmVmPHZvaWQ+KSB7XG4gICAgaWYgKHZhbHVlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWYpIHtcbiAgICAgIHRoaXMuc2VwYXJhdG9yVGVtcGxhdGUgPSB2YWx1ZTtcbiAgICAgIHRoaXMuX3NlcGFyYXRvciA9IHVuZGVmaW5lZDtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zZXBhcmF0b3JUZW1wbGF0ZSA9IHVuZGVmaW5lZDtcbiAgICAgIHRoaXMuX3NlcGFyYXRvciA9IHZhbHVlIHx8ICcvJztcbiAgICB9XG4gIH1cbiAgZ2V0IHNlcGFyYXRvcigpIHtcbiAgICByZXR1cm4gdGhpcy5fc2VwYXJhdG9yO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBicmVhZGNydW1iU2VydmljZTogQnJlYWRjcnVtYlNlcnZpY2UpIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5icmVhZGNydW1icyQgPSB0aGlzLmJyZWFkY3J1bWJTZXJ2aWNlLmJyZWFkY3J1bWJzJDtcbiAgfVxufVxuIl19