import { Component, ContentChildren, input } from '@angular/core';
import { BreadcrumbLinkComponent } from './breadcrumb-link.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/material/menu";
import * as i5 from "../link/link.component";
import * as i6 from "../icon/icon.component";
/**
 * Component to manage breadcrumbs and sub navigation.
 */
export class BreadcrumbComponent {
    constructor(router) {
        this.router = router;
        /**
         * Limit number of element displayed in the breadcrumb
         */
        this.limit = input(Infinity);
        this.hidden = [];
    }
    ngAfterContentInit() {
        this.links.forEach((item, index) => {
            // Manage separator for items
            if (index + 1 < this.links.length) {
                item.separator = true;
            }
        });
        const arr = this.links.toArray();
        if (this.limit() && this.limit() < arr.length) {
            this.before = arr.slice(0, 1);
            this.hidden = arr.slice(1, arr.length - this.limit() + 1);
            this.after = arr.slice(-this.limit() + 1);
        }
        this.links.last.active = true;
    }
    click(link) {
        if (!link.disabled()) {
            this.router.navigate([link.link]);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: BreadcrumbComponent, selector: "mic-breadcrumb", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "links", predicate: BreadcrumbLinkComponent }], ngImport: i0, template: "<nav aria-label=\"Breadcrumb\" class=\"flex flex-row flex-wrap items-center gap-x-2-5\">\n  @if (hidden.length > 0 && limit() > 1) {\n  <ol>\n    @for (link of before; track link) {\n    <ng-container [ngTemplateOutlet]=\"simpleLink\" [ngTemplateOutletContext]=\"{ link: link }\"></ng-container>\n    }\n    <button [matMenuTriggerFor]=\"menu\" class=\"mic-breadcrumb-more\">\n      <mat-icon fontIcon=\"more_horiz\" role=\"img\" aria-label=\"more breadcrumb\" aria-hidden=\"false\"></mat-icon>\n    </button>\n    <mat-icon\n      class=\"mic-breadcrumb-separator\"\n      fontIcon=\"keyboard_arrow_right\"\n      role=\"img\"\n      aria-label=\"right keyboard arrow\"\n      aria-hidden=\"false\"\n    ></mat-icon>\n    @for (link of after; track link) {\n    <ng-container [ngTemplateOutlet]=\"simpleLink\" [ngTemplateOutletContext]=\"{ link: link }\"></ng-container>\n    }\n  </ol>\n  } @else {\n  <ol>\n    @for (link of links; track link) {\n    <ng-container [ngTemplateOutlet]=\"simpleLink\" [ngTemplateOutletContext]=\"{ link: link }\"></ng-container>\n    }\n  </ol>\n  }\n</nav>\n<ng-template #simpleLink let-link=\"link\">\n  <li class=\"mic-breadcrumb-link flex flex-row items-center gap-x-1-5\">\n    <mic-link\n      [label]=\"link.label()\"\n      [ariaLabel]=\"link.ariaLabel\"\n      [icon]=\"link.icon()\"\n      iconPosition=\"left\"\n      [routerLink]=\"link.link\"\n      [disabled]=\"link.disabled()\"\n      [active]=\"link.active\"\n      [attr.aria-current]=\"link.active ? 'page' : ''\"\n    ></mic-link>\n    @if (link.separator) {\n    <mat-icon\n      class=\"mic-breadcrumb-separator\"\n      fontIcon=\"keyboard_arrow_right\"\n      role=\"img\"\n      aria-label=\"right keyboard arrow\"\n      aria-hidden=\"false\"\n    ></mat-icon>\n    }\n  </li>\n</ng-template>\n<mat-menu #menu=\"matMenu\">\n  @for (link of hidden; track link) {\n  <button [disabled]=\"link.disabled()\" (click)=\"click(link)\" mat-menu-item>\n    @if (link.icon()) {\n    <mic-icon [icon]=\"link.icon()\"></mic-icon>\n    }\n    <span>{{ link.label() }}</span>\n  </button>\n  }\n</mat-menu>\n", styles: [":host{margin:4px 0}.mic-breadcrumb-more{cursor:pointer;height:16px;padding:0 4px;border-radius:4px;border:0px;display:flex;place-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.LinkComponent, selector: "mic-link", inputs: ["id", "href", "target", "label", "ariaLabel", "color", "icon", "iconPosition", "rel", "routerLink", "disabled", "active", "titleNewWindow"] }, { kind: "component", type: i6.IconComponent, selector: "mic-icon", inputs: ["icon", "fontSet", "ariaLabel", "decorative"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BreadcrumbComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mic-breadcrumb', template: "<nav aria-label=\"Breadcrumb\" class=\"flex flex-row flex-wrap items-center gap-x-2-5\">\n  @if (hidden.length > 0 && limit() > 1) {\n  <ol>\n    @for (link of before; track link) {\n    <ng-container [ngTemplateOutlet]=\"simpleLink\" [ngTemplateOutletContext]=\"{ link: link }\"></ng-container>\n    }\n    <button [matMenuTriggerFor]=\"menu\" class=\"mic-breadcrumb-more\">\n      <mat-icon fontIcon=\"more_horiz\" role=\"img\" aria-label=\"more breadcrumb\" aria-hidden=\"false\"></mat-icon>\n    </button>\n    <mat-icon\n      class=\"mic-breadcrumb-separator\"\n      fontIcon=\"keyboard_arrow_right\"\n      role=\"img\"\n      aria-label=\"right keyboard arrow\"\n      aria-hidden=\"false\"\n    ></mat-icon>\n    @for (link of after; track link) {\n    <ng-container [ngTemplateOutlet]=\"simpleLink\" [ngTemplateOutletContext]=\"{ link: link }\"></ng-container>\n    }\n  </ol>\n  } @else {\n  <ol>\n    @for (link of links; track link) {\n    <ng-container [ngTemplateOutlet]=\"simpleLink\" [ngTemplateOutletContext]=\"{ link: link }\"></ng-container>\n    }\n  </ol>\n  }\n</nav>\n<ng-template #simpleLink let-link=\"link\">\n  <li class=\"mic-breadcrumb-link flex flex-row items-center gap-x-1-5\">\n    <mic-link\n      [label]=\"link.label()\"\n      [ariaLabel]=\"link.ariaLabel\"\n      [icon]=\"link.icon()\"\n      iconPosition=\"left\"\n      [routerLink]=\"link.link\"\n      [disabled]=\"link.disabled()\"\n      [active]=\"link.active\"\n      [attr.aria-current]=\"link.active ? 'page' : ''\"\n    ></mic-link>\n    @if (link.separator) {\n    <mat-icon\n      class=\"mic-breadcrumb-separator\"\n      fontIcon=\"keyboard_arrow_right\"\n      role=\"img\"\n      aria-label=\"right keyboard arrow\"\n      aria-hidden=\"false\"\n    ></mat-icon>\n    }\n  </li>\n</ng-template>\n<mat-menu #menu=\"matMenu\">\n  @for (link of hidden; track link) {\n  <button [disabled]=\"link.disabled()\" (click)=\"click(link)\" mat-menu-item>\n    @if (link.icon()) {\n    <mic-icon [icon]=\"link.icon()\"></mic-icon>\n    }\n    <span>{{ link.label() }}</span>\n  </button>\n  }\n</mat-menu>\n", styles: [":host{margin:4px 0}.mic-breadcrumb-more{cursor:pointer;height:16px;padding:0 4px;border-radius:4px;border:0px;display:flex;place-items:center}\n"] }]
        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { links: [{
                type: ContentChildren,
                args: [BreadcrumbLinkComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64, 