import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../providers/breadcrumb/breadcrumb.service";
import * as i2 from "@angular/common";
import * as i3 from "@clr/angular";
import * as i4 from "@angular/router";
import * as i5 from "@ngx-translate/core";
/**
 * A breadcrumbs component which reads the route config and any route that has a `data.breadcrumb` property will
 * be displayed in the breadcrumb trail.
 *
 * The `breadcrumb` property can be a string or a function. If a function, it will be passed the route's `data`
 * object (which will include all resolved keys) and any route params, and should return a BreadcrumbValue.
 *
 * See the test config to get an idea of allowable configs for breadcrumbs.
 */
export class BreadcrumbComponent {
    constructor(breadcrumbService) {
        this.breadcrumbService = breadcrumbService;
        this.destroy$ = new Subject();
        this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
        this.parentBreadcrumb$ = this.breadcrumbService.breadcrumbs$.pipe(map(breadcrumbs => (1 < breadcrumbs.length ? breadcrumbs[breadcrumbs.length - 2] : undefined)));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: BreadcrumbComponent, selector: "vdr-breadcrumb", ngImport: i0, template: "<nav role=\"navigation\">\n    <ul class=\"breadcrumbs\">\n        <li *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\" [title]=\"breadcrumb.label\">\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\n            <ng-container *ngIf=\"!isLast\"\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\n            ></ng-container>\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\n        </li>\n    </ul>\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\n        <li>\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\n        </li>\n    </ul>\n</nav>\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-breadcrumb', template: "<nav role=\"navigation\">\n    <ul class=\"breadcrumbs\">\n        <li *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\" [title]=\"breadcrumb.label\">\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\n            <ng-container *ngIf=\"!isLast\"\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\n            ></ng-container>\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\n        </li>\n    </ul>\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\n        <li>\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\n        </li>\n    </ul>\n</nav>\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.BreadcrumbService }]; } });
//# sourceMappingURL=data:application/json;base64, 