/*
 * Copyright (c) 2016-2025 Broadcom. All Rights Reserved.
 * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MAX_DISPLAY_ITEMS } from './breadcrumbs.constants';
import * as i0 from "@angular/core";
import * as i1 from "../../utils/i18n/common-strings.service";
import * as i2 from "@angular/common";
import * as i3 from "../../icon/icon";
import * as i4 from "@angular/router";
import * as i5 from "./breadcrumb-item";
export class ClrBreadcrumbs {
    constructor(commonStrings) {
        this.commonStrings = commonStrings;
        this.isExpanded = false;
        this.items = [];
        this.clrBreadcrumbItemClick = new EventEmitter();
        this.limit = MAX_DISPLAY_ITEMS;
        this.max = MAX_DISPLAY_ITEMS;
    }
    expand() {
        this.isExpanded = true;
        this.limit = this.items?.length;
    }
    handleItemClick(breadcrumb) {
        this.clrBreadcrumbItemClick.emit(breadcrumb);
    }
}
ClrBreadcrumbs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrBreadcrumbs, deps: [{ token: i1.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
ClrBreadcrumbs.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrBreadcrumbs, selector: "clr-breadcrumbs", inputs: { items: "items" }, outputs: { clrBreadcrumbItemClick: "clrBreadcrumbItemClick" }, host: { properties: { "attr.aria-label": "commonStrings.keys.breadcrumbsLabel", "attr.role": "\"navigation\"" }, classAttribute: "clr-breadcrumb" }, ngImport: i0, template: "<div *ngIf=\"items?.length\" role=\"list\" class=\"clr-breadcrumb-menu\">\n  <clr-breadcrumb-item *ngIf=\"items.length > max && !isExpanded\">\n    <button\n      [attr.aria-label]=\"commonStrings.keys.expandBreadcrumbsLabel\"\n      class=\"btn btn-link btn-sm clr-breadcrumb-expand\"\n      (click)=\"expand()\"\n      (keydown)=\"expand()\"\n    >\n      <cds-icon shape=\"ellipsis-horizontal\"></cds-icon>\n    </button>\n  </clr-breadcrumb-item>\n  <clr-breadcrumb-item *ngFor=\"let breadcrumb of items | slice: -limit : items.length; let isLastItem=last\">\n    <span *ngIf=\"isLastItem; else breadcrumbLinks\" aria-current=\"page\">{{ breadcrumb.label }}</span>\n\n    <ng-template #breadcrumbLinks>\n      <a\n        *ngIf=\"breadcrumb.routerLink\"\n        [routerLink]=\"breadcrumb.routerLink\"\n        [queryParams]=\"breadcrumb.queryParams\"\n        [target]=\"breadcrumb.target || '_self'\"\n        (click)=\"handleItemClick(breadcrumb)\"\n      >\n        {{ breadcrumb.label }}\n      </a>\n      <a\n        *ngIf=\"breadcrumb.href\"\n        [href]=\"breadcrumb.href\"\n        [target]=\"breadcrumb.target || '_self'\"\n        (click)=\"handleItemClick(breadcrumb)\"\n      >\n        {{ breadcrumb.label }}\n      </a>\n    </ng-template>\n  </clr-breadcrumb-item>\n</div>\n", styles: [":root,:root [clr-density]{--clr-breadcrumb-item-space: var(--clr-base-gap-s)}.clr-breadcrumb-menu{display:flex;flex-wrap:wrap;align-items:center}.clr-breadcrumb-menu .clr-breadcrumb-item{display:flex;align-items:center;height:var(--clr-base-row-height-s);color:var(--cds-alias-typography-color-400);font-size:var(--clr-base-typography-font-size-inline);font-weight:var(--cds-alias-typography-secondary-font-weight);line-height:var(--clr-base-typography-line-height-16);letter-spacing:calc(-.1 * (1rem / var(--cds-global-base)))}.clr-breadcrumb-menu .clr-breadcrumb-item a{text-decoration:none;text-align:center}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited{color:var(--clr-link-color)}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited:hover{color:var(--clr-link-hover-color)}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited:active{color:var(--clr-link-active-color)}.clr-breadcrumb-menu .clr-breadcrumb-item:not(:last-child):after{content:\"/\";margin:0 var(--clr-breadcrumb-item-space)}.clr-breadcrumb-menu .clr-breadcrumb-expand{height:var(--clr-base-icon-size-l);width:var(--clr-base-icon-size-l);min-height:var(--clr-base-icon-size-l);min-width:var(--clr-base-icon-size-l);margin:0;padding:0;gap:0}\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.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ClrBreadcrumbItem, selector: "clr-breadcrumb-item" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrBreadcrumbs, decorators: [{
            type: Component,
            args: [{ selector: 'clr-breadcrumbs', host: {
                        class: 'clr-breadcrumb',
                        '[attr.aria-label]': 'commonStrings.keys.breadcrumbsLabel',
                        '[attr.role]': '"navigation"',
                    }, template: "<div *ngIf=\"items?.length\" role=\"list\" class=\"clr-breadcrumb-menu\">\n  <clr-breadcrumb-item *ngIf=\"items.length > max && !isExpanded\">\n    <button\n      [attr.aria-label]=\"commonStrings.keys.expandBreadcrumbsLabel\"\n      class=\"btn btn-link btn-sm clr-breadcrumb-expand\"\n      (click)=\"expand()\"\n      (keydown)=\"expand()\"\n    >\n      <cds-icon shape=\"ellipsis-horizontal\"></cds-icon>\n    </button>\n  </clr-breadcrumb-item>\n  <clr-breadcrumb-item *ngFor=\"let breadcrumb of items | slice: -limit : items.length; let isLastItem=last\">\n    <span *ngIf=\"isLastItem; else breadcrumbLinks\" aria-current=\"page\">{{ breadcrumb.label }}</span>\n\n    <ng-template #breadcrumbLinks>\n      <a\n        *ngIf=\"breadcrumb.routerLink\"\n        [routerLink]=\"breadcrumb.routerLink\"\n        [queryParams]=\"breadcrumb.queryParams\"\n        [target]=\"breadcrumb.target || '_self'\"\n        (click)=\"handleItemClick(breadcrumb)\"\n      >\n        {{ breadcrumb.label }}\n      </a>\n      <a\n        *ngIf=\"breadcrumb.href\"\n        [href]=\"breadcrumb.href\"\n        [target]=\"breadcrumb.target || '_self'\"\n        (click)=\"handleItemClick(breadcrumb)\"\n      >\n        {{ breadcrumb.label }}\n      </a>\n    </ng-template>\n  </clr-breadcrumb-item>\n</div>\n", styles: [":root,:root [clr-density]{--clr-breadcrumb-item-space: var(--clr-base-gap-s)}.clr-breadcrumb-menu{display:flex;flex-wrap:wrap;align-items:center}.clr-breadcrumb-menu .clr-breadcrumb-item{display:flex;align-items:center;height:var(--clr-base-row-height-s);color:var(--cds-alias-typography-color-400);font-size:var(--clr-base-typography-font-size-inline);font-weight:var(--cds-alias-typography-secondary-font-weight);line-height:var(--clr-base-typography-line-height-16);letter-spacing:calc(-.1 * (1rem / var(--cds-global-base)))}.clr-breadcrumb-menu .clr-breadcrumb-item a{text-decoration:none;text-align:center}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited{color:var(--clr-link-color)}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited:hover{color:var(--clr-link-hover-color)}.clr-breadcrumb-menu .clr-breadcrumb-item a:visited:active{color:var(--clr-link-active-color)}.clr-breadcrumb-menu .clr-breadcrumb-item:not(:last-child):after{content:\"/\";margin:0 var(--clr-breadcrumb-item-space)}.clr-breadcrumb-menu .clr-breadcrumb-expand{height:var(--clr-base-icon-size-l);width:var(--clr-base-icon-size-l);min-height:var(--clr-base-icon-size-l);min-width:var(--clr-base-icon-size-l);margin:0;padding:0;gap:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.ClrCommonStringsService }]; }, propDecorators: { items: [{
                type: Input
            }], clrBreadcrumbItemClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 