xng-breadcrumb
Version:
A declarative and reactive breadcrumb approach for Angular 6 and beyond https://www.npmjs.com/package/xng-breadcrumb
116 lines • 10.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';
export class BreadcrumbComponent {
/**
* @param {?} breadcrumbService
*/
constructor(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 = '';
}
/**
* 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 {?}
*/
set separator(value) {
if (value instanceof TemplateRef) {
this.separatorTemplate = value;
this._separator = undefined;
}
else {
this.separatorTemplate = undefined;
this._separator = value || '/';
}
}
/**
* @return {?}
*/
get separator() {
return this._separator;
}
/**
* @return {?}
*/
ngOnInit() {
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 = () => [
{ type: BreadcrumbService }
];
BreadcrumbComponent.propDecorators = {
itemTemplate: [{ type: ContentChild, args: [BreadcrumbItemDirective, { static: false, read: TemplateRef },] }],
autoGenerate: [{ type: Input }],
class: [{ type: Input }],
separator: [{ type: Input, args: ['separator',] }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly94bmctYnJlYWRjcnVtYi8iLCJzb3VyY2VzIjpbImxpYi9icmVhZGNydW1iLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV2RyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN0RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVN6RCxNQUFNLE9BQU8sbUJBQW1COzs7O0lBa0Q5QixZQUFvQixpQkFBb0M7UUFBcEMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQS9DaEQsZUFBVSxHQUFHLEdBQUcsQ0FBQzs7Ozs7UUFnQmhCLGlCQUFZLEdBQUcsSUFBSSxDQUFDOzs7OztRQU1wQixVQUFLLEdBQUcsRUFBRSxDQUFDO0lBeUJ1QyxDQUFDOzs7Ozs7Ozs7Ozs7SUFkNUQsSUFDSSxTQUFTLENBQUMsS0FBaUM7UUFDN0MsSUFBSSxLQUFLLFlBQVksV0FBVyxFQUFFO1lBQ2hDLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxLQUFLLENBQUM7WUFDL0IsSUFBSSxDQUFDLFVBQVUsR0FBRyxTQUFTLENBQUM7U0FDN0I7YUFBTTtZQUNMLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxTQUFTLENBQUM7WUFDbkMsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLElBQUksR0FBRyxDQUFDO1NBQ2hDO0lBQ0gsQ0FBQzs7OztJQUNELElBQUksU0FBUztRQUNYLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDOzs7O0lBSUQsUUFBUTtRQUNOLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFlBQVksQ0FBQztJQUMxRCxDQUFDOzs7WUE1REYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxnQkFBZ0I7Z0JBQzFCLDQzQ0FBMEM7Z0JBRTFDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJOzthQUN0Qzs7OztZQVJRLGlCQUFpQjs7OzJCQXNCdkIsWUFBWSxTQUFDLHVCQUF1QixFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFOzJCQU0xRSxLQUFLO29CQU1MLEtBQUs7d0JBV0wsS0FBSyxTQUFDLFdBQVc7Ozs7SUFuQ2xCLDJDQUF1Qzs7SUFDdkMsZ0RBQXFDOzs7OztJQUNyQyx5Q0FBeUI7Ozs7Ozs7Ozs7SUFVekIsMkNBQTBGOzs7Ozs7SUFNMUYsMkNBQTZCOzs7Ozs7SUFNN0Isb0NBQW9COzs7OztJQXlCUixnREFBNEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSW5wdXQsIE9uSW5pdCwgVGVtcGxhdGVSZWYsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBCcmVhZGNydW1iSXRlbURpcmVjdGl2ZSB9IGZyb20gJy4vYnJlYWRjcnVtYi1pdGVtLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBCcmVhZGNydW1iU2VydmljZSB9IGZyb20gJy4vYnJlYWRjcnVtYi5zZXJ2aWNlJztcbmltcG9ydCB7IEJyZWFkY3J1bWIgfSBmcm9tICcuL2JyZWFkY3J1bWInO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd4bmctYnJlYWRjcnVtYicsXG4gIHRlbXBsYXRlVXJsOiAnLi9icmVhZGNydW1iLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYnJlYWRjcnVtYi5jb21wb25lbnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXG59KVxuZXhwb3J0IGNsYXNzIEJyZWFkY3J1bWJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBicmVhZGNydW1icyQ6IE9ic2VydmFibGU8QnJlYWRjcnVtYltdPjtcbiAgc2VwYXJhdG9yVGVtcGxhdGU6IFRlbXBsYXRlUmVmPHZvaWQ+O1xuICBwcml2YXRlIF9zZXBhcmF0b3IgPSAnLyc7XG5cbiAgLyoqXG4gICAqIEJyZWFkY3J1bWIgaXRlbSBjYW4gYmUgY3VzdG9taXplZCB3aXRoIHRoaXMgdGVtcGxhdGVcbiAgICogVGVtcGxhdGUgY29udGV4dCBpcyBwcm92aWRlZCBsYWJlbCwgYWRkaXRpb25hbCBpbmZvLCBmaXJzdCBhbmQgbGFzdCBpbmRleGVzXG4gICAqIFVzZSBjYXNlczpcbiAgICogMSkgQWRkIGFuIGljb24gYWxvbmcgd2l0aCBsYWJlbFxuICAgKiAyKSBpMThuLiB7e2JyZWFkY3J1bWIgfCB0cmFuc2xhdGV9fSBvciB7e2JyZWFkY3J1bWIgfCB0cmFuc2xvY299fVxuICAgKiAzKSBDaGFuZ2UgdGV4dCBjYXNlIHt7YnJlYWRjcnVtYiB8IHRpdGxlY2FzZX19XG4gICAqL1xuICBAQ29udGVudENoaWxkKEJyZWFkY3J1bWJJdGVtRGlyZWN0aXZlLCB7IHN0YXRpYzogZmFsc2UsIHJlYWQ6IFRlbXBsYXRlUmVmIH0pIGl0ZW1UZW1wbGF0ZTtcblxuICAvKipcbiAgICogSWYgdHJ1ZSwgYnJlYWNydW1iIGlzIGF1dG8gZ2VuZXJhdGVkIGV2ZW4gd2l0aG91dCBhbnkgbWFwcGluZyBsYWJlbFxuICAgKiBEZWZhdWx0IGxhYmVsIGlzIHNhbWUgYXMgcm91dGUgc2VnbWVudFxuICAgKi9cbiAgQElucHV0KCkgYXV0b0dlbmVyYXRlID0gdHJ1ZTtcblxuICAvKipcbiAgICogY3VzdG9tIGNsYXNzIHByb3ZpZGVkIGJ5IGNvbnN1bWVyIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4gICAqIFRoaXMgd2lsbCBiZW5lZml0IHRvIG92ZXJyaWRlIHN0eWxlcyB0aGF0IGFyZSBjb25mbGljdGluZ1xuICAgKi9cbiAgQElucHV0KCkgY2xhc3MgPSAnJztcblxuICAvKipcbiAgICogc2VwYXJhdG9yIGJldHdlZW4gYnJlYWRjcnVtYnMsIGRlZmF1bHRzIHRvICcvJy5cbiAgICogVXNlciBjYW4gY3VzdG9taXplIHNlcGFyYXRvciBlaXRoZXIgYnkgcGFzc2luZyBhIFN0cmluZyBvciBUZW1wbGF0ZVxuICAgKlxuICAgKiBTdHJpbmcgLS0+IEV4OiA8eG5nLWJyZWFkY3J1bWIgc2VwYXJhdG9yPVwiLVwiPiA8L3huZy1icmVhZGNydW1iPlxuICAgKlxuICAgKiBUZW1wbGF0ZSAtLT4gRXg6IDx4bmctYnJlYWRjcnVtYiBbc2VwYXJhdG9yXT1cInNlcGFyYXRvclRlbXBsYXRlXCI+IDwveG5nLWJyZWFkY3J1bWI+XG4gICAqIDxuZy10ZW1wbGF0ZSAjc2VwYXJhdG9yVGVtcGxhdGU+PG1hdC1pY29uPmFycm93X3JpZ2h0PC9tYXQtaWNvbj48L25nLXRlbXBsYXRlPlxuICAgKi9cbiAgQElucHV0KCdzZXBhcmF0b3InKVxuICBzZXQgc2VwYXJhdG9yKHZhbHVlOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjx2b2lkPikge1xuICAgIGlmICh2YWx1ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmKSB7XG4gICAgICB0aGlzLnNlcGFyYXRvclRlbXBsYXRlID0gdmFsdWU7XG4gICAgICB0aGlzLl9zZXBhcmF0b3IgPSB1bmRlZmluZWQ7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuc2VwYXJhdG9yVGVtcGxhdGUgPSB1bmRlZmluZWQ7XG4gICAgICB0aGlzLl9zZXBhcmF0b3IgPSB2YWx1ZSB8fCAnLyc7XG4gICAgfVxuICB9XG4gIGdldCBzZXBhcmF0b3IoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3NlcGFyYXRvcjtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgYnJlYWRjcnVtYlNlcnZpY2U6IEJyZWFkY3J1bWJTZXJ2aWNlKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuYnJlYWRjcnVtYnMkID0gdGhpcy5icmVhZGNydW1iU2VydmljZS5icmVhZGNydW1icyQ7XG4gIH1cbn1cbiJdfQ==