@clr/angular
Version:
Angular components for Clarity
46 lines • 13.3 kB
JavaScript
/*
* 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: [":where(:root,:host),:where(:root,:host) [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: [":where(:root,:host),:where(:root,:host) [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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyL3NyYy9sYXlvdXQvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyL3NyYy9sYXlvdXQvYnJlYWRjcnVtYnMvYnJlYWRjcnVtYnMuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7R0FLRztBQUVILE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHdkUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUM7Ozs7Ozs7QUFhNUQsTUFBTSxPQUFPLGNBQWM7SUFRekIsWUFBc0IsYUFBc0M7UUFBdEMsa0JBQWEsR0FBYixhQUFhLENBQXlCO1FBUDVELGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDVixVQUFLLEdBQXFCLEVBQUUsQ0FBQztRQUM1QiwyQkFBc0IsR0FBaUMsSUFBSSxZQUFZLEVBQWtCLENBQUM7UUFFMUYsVUFBSyxHQUFXLGlCQUFpQixDQUFDO1FBQ2xDLFFBQUcsR0FBVyxpQkFBaUIsQ0FBQztJQUVxQixDQUFDO0lBRXRELE1BQU07UUFDZCxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztRQUN2QixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsTUFBTSxDQUFDO0lBQ2xDLENBQUM7SUFFUyxlQUFlLENBQUMsVUFBMEI7UUFDbEQsSUFBSSxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUMvQyxDQUFDOzsyR0FqQlUsY0FBYzsrRkFBZCxjQUFjLHVTQ3ZCM0Isb3hDQW1DQTsyRkRaYSxjQUFjO2tCQVYxQixTQUFTOytCQUNFLGlCQUFpQixRQUdyQjt3QkFDSixLQUFLLEVBQUUsZ0JBQWdCO3dCQUN2QixtQkFBbUIsRUFBRSxxQ0FBcUM7d0JBQzFELGFBQWEsRUFBRSxjQUFjO3FCQUM5Qjs4R0FJUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0ksc0JBQXNCO3NCQUEvQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAxNi0yMDI1IEJyb2FkY29tLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICogVGhlIHRlcm0gXCJCcm9hZGNvbVwiIHJlZmVycyB0byBCcm9hZGNvbSBJbmMuIGFuZC9vciBpdHMgc3Vic2lkaWFyaWVzLlxuICogVGhpcyBzb2Z0d2FyZSBpcyByZWxlYXNlZCB1bmRlciBNSVQgbGljZW5zZS5cbiAqIFRoZSBmdWxsIGxpY2Vuc2UgaW5mb3JtYXRpb24gY2FuIGJlIGZvdW5kIGluIExJQ0VOU0UgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgcHJvamVjdC5cbiAqL1xuXG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDbHJDb21tb25TdHJpbmdzU2VydmljZSB9IGZyb20gJy4uLy4uL3V0aWxzL2kxOG4vY29tbW9uLXN0cmluZ3Muc2VydmljZSc7XG5pbXBvcnQgeyBNQVhfRElTUExBWV9JVEVNUyB9IGZyb20gJy4vYnJlYWRjcnVtYnMuY29uc3RhbnRzJztcbmltcG9ydCB7IEJyZWFkY3J1bWJJdGVtIH0gZnJvbSAnLi9tb2RlbC9icmVhZGNydW1icy5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Nsci1icmVhZGNydW1icycsXG4gIHRlbXBsYXRlVXJsOiAnLi9icmVhZGNydW1icy5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vX2JyZWFkY3J1bWJzLmNsYXJpdHkuc2NzcyddLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdjbHItYnJlYWRjcnVtYicsXG4gICAgJ1thdHRyLmFyaWEtbGFiZWxdJzogJ2NvbW1vblN0cmluZ3Mua2V5cy5icmVhZGNydW1ic0xhYmVsJyxcbiAgICAnW2F0dHIucm9sZV0nOiAnXCJuYXZpZ2F0aW9uXCInLFxuICB9LFxufSlcbmV4cG9ydCBjbGFzcyBDbHJCcmVhZGNydW1icyB7XG4gIGlzRXhwYW5kZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgaXRlbXM6IEJyZWFkY3J1bWJJdGVtW10gPSBbXTtcbiAgQE91dHB1dCgpIGNsckJyZWFkY3J1bWJJdGVtQ2xpY2s6IEV2ZW50RW1pdHRlcjxCcmVhZGNydW1iSXRlbT4gPSBuZXcgRXZlbnRFbWl0dGVyPEJyZWFkY3J1bWJJdGVtPigpO1xuXG4gIHByb3RlY3RlZCBsaW1pdDogbnVtYmVyID0gTUFYX0RJU1BMQVlfSVRFTVM7XG4gIHByb3RlY3RlZCBtYXg6IG51bWJlciA9IE1BWF9ESVNQTEFZX0lURU1TO1xuXG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBjb21tb25TdHJpbmdzOiBDbHJDb21tb25TdHJpbmdzU2VydmljZSkge31cblxuICBwcm90ZWN0ZWQgZXhwYW5kKCkge1xuICAgIHRoaXMuaXNFeHBhbmRlZCA9IHRydWU7XG4gICAgdGhpcy5saW1pdCA9IHRoaXMuaXRlbXM/Lmxlbmd0aDtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVJdGVtQ2xpY2soYnJlYWRjcnVtYjogQnJlYWRjcnVtYkl0ZW0pIHtcbiAgICB0aGlzLmNsckJyZWFkY3J1bWJJdGVtQ2xpY2suZW1pdChicmVhZGNydW1iKTtcbiAgfVxufVxuIiwiPGRpdiAqbmdJZj1cIml0ZW1zPy5sZW5ndGhcIiByb2xlPVwibGlzdFwiIGNsYXNzPVwiY2xyLWJyZWFkY3J1bWItbWVudVwiPlxuICA8Y2xyLWJyZWFkY3J1bWItaXRlbSAqbmdJZj1cIml0ZW1zLmxlbmd0aCA+IG1heCAmJiAhaXNFeHBhbmRlZFwiPlxuICAgIDxidXR0b25cbiAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiY29tbW9uU3RyaW5ncy5rZXlzLmV4cGFuZEJyZWFkY3J1bWJzTGFiZWxcIlxuICAgICAgY2xhc3M9XCJidG4gYnRuLWxpbmsgYnRuLXNtIGNsci1icmVhZGNydW1iLWV4cGFuZFwiXG4gICAgICAoY2xpY2spPVwiZXhwYW5kKClcIlxuICAgICAgKGtleWRvd24pPVwiZXhwYW5kKClcIlxuICAgID5cbiAgICAgIDxjZHMtaWNvbiBzaGFwZT1cImVsbGlwc2lzLWhvcml6b250YWxcIj48L2Nkcy1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L2Nsci1icmVhZGNydW1iLWl0ZW0+XG4gIDxjbHItYnJlYWRjcnVtYi1pdGVtICpuZ0Zvcj1cImxldCBicmVhZGNydW1iIG9mIGl0ZW1zIHwgc2xpY2U6IC1saW1pdCA6IGl0ZW1zLmxlbmd0aDsgbGV0IGlzTGFzdEl0ZW09bGFzdFwiPlxuICAgIDxzcGFuICpuZ0lmPVwiaXNMYXN0SXRlbTsgZWxzZSBicmVhZGNydW1iTGlua3NcIiBhcmlhLWN1cnJlbnQ9XCJwYWdlXCI+e3sgYnJlYWRjcnVtYi5sYWJlbCB9fTwvc3Bhbj5cblxuICAgIDxuZy10ZW1wbGF0ZSAjYnJlYWRjcnVtYkxpbmtzPlxuICAgICAgPGFcbiAgICAgICAgKm5nSWY9XCJicmVhZGNydW1iLnJvdXRlckxpbmtcIlxuICAgICAgICBbcm91dGVyTGlua109XCJicmVhZGNydW1iLnJvdXRlckxpbmtcIlxuICAgICAgICBbcXVlcnlQYXJhbXNdPVwiYnJlYWRjcnVtYi5xdWVyeVBhcmFtc1wiXG4gICAgICAgIFt0YXJnZXRdPVwiYnJlYWRjcnVtYi50YXJnZXQgfHwgJ19zZWxmJ1wiXG4gICAgICAgIChjbGljayk9XCJoYW5kbGVJdGVtQ2xpY2soYnJlYWRjcnVtYilcIlxuICAgICAgPlxuICAgICAgICB7eyBicmVhZGNydW1iLmxhYmVsIH19XG4gICAgICA8L2E+XG4gICAgICA8YVxuICAgICAgICAqbmdJZj1cImJyZWFkY3J1bWIuaHJlZlwiXG4gICAgICAgIFtocmVmXT1cImJyZWFkY3J1bWIuaHJlZlwiXG4gICAgICAgIFt0YXJnZXRdPVwiYnJlYWRjcnVtYi50YXJnZXQgfHwgJ19zZWxmJ1wiXG4gICAgICAgIChjbGljayk9XCJoYW5kbGVJdGVtQ2xpY2soYnJlYWRjcnVtYilcIlxuICAgICAgPlxuICAgICAgICB7eyBicmVhZGNydW1iLmxhYmVsIH19XG4gICAgICA8L2E+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgPC9jbHItYnJlYWRjcnVtYi1pdGVtPlxuPC9kaXY+XG4iXX0=