@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
82 lines • 13.4 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, Input, ViewChild } from '@angular/core';
import { Utils } from '../../utils/utils.util';
import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class BreadcrumbComponent {
constructor(cdr) {
this.cdr = cdr;
/**
* Describes the navigation to screen reader users (who navigate the page using landmarks)
*
* @default "Breadcrumbs"
*/
this.ariaLabel = 'Breadcrumbs';
/**
* Accessible text alternative for the "show more" button when the breadcrumb is minified.
*
* @default "Show hidden items"
*/
this.showMoreLabel = 'Show hidden items';
}
ngAfterContentInit() {
this.isMinified = this.breadcrumbItems?.toArray()?.length > 4;
this.leftContent = this.getLeftContentToDisplay();
this.rightContent = this.getRightContentToDisplay();
}
ngAfterContentChecked() {
this.cdr.markForCheck();
}
/**
* @ignore
*/
seeAll() {
this.isMinified = false;
this.leftContent = this.getLeftContentToDisplay();
this.rightContent = this.getRightContentToDisplay();
this.cdr.markForCheck();
// Focus first revealed item
setTimeout(() => {
this.olRef.nativeElement.childNodes[2]?.querySelector('a')?.focus();
});
}
/**
* @ignore
*/
getLeftContentToDisplay() {
const breadcrumbItemsArray = this.breadcrumbItems?.toArray();
if (Utils.isUndefinedOrNull(breadcrumbItemsArray)) {
return;
}
return this.isMinified ? breadcrumbItemsArray.splice(0, 1) : breadcrumbItemsArray;
}
/**
* @ignore
*/
getRightContentToDisplay() {
if (!this.isMinified) {
return;
}
const breadcrumbItemsArray = this.breadcrumbItems?.toArray();
const breadcrumbItemsLength = breadcrumbItemsArray?.length;
return breadcrumbItemsArray[breadcrumbItemsLength - 1];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadcrumbComponent, isStandalone: true, selector: "nj-breadcrumb", inputs: { ariaLabel: "ariaLabel", showMoreLabel: "showMoreLabel" }, queries: [{ propertyName: "breadcrumbItems", predicate: BreadcrumbItemComponent }], viewQueries: [{ propertyName: "olRef", first: true, predicate: ["olRef"], descendants: true }], ngImport: i0, template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel\">\n <ol class=\"nj-breadcrumb\" #olRef>\n <ng-container *ngIf=\"leftContent\">\n <li class=\"nj-breadcrumb__item\" *ngFor=\"let item of leftContent\">\n <ng-container *ngTemplateOutlet=\"item?.itemTemplate\"></ng-container>\n </li>\n </ng-container>\n <li class=\"nj-breadcrumb__see-more\" *ngIf=\"isMinified\">\n <button (click)=\"seeAll()\" (keydown.enter)=\"seeAll()\">\n <span class=\"nj-sr-only\">{{showMoreLabel}}</span>\n </button>\n </li>\n <li class=\"nj-breadcrumb__item\" *ngIf=\"isMinified && rightContent\">\n <ng-container *ngTemplateOutlet=\"rightContent.itemTemplate\"></ng-container>\n </li>\n </ol>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [BreadcrumbItemComponent, CommonModule], template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel\">\n <ol class=\"nj-breadcrumb\" #olRef>\n <ng-container *ngIf=\"leftContent\">\n <li class=\"nj-breadcrumb__item\" *ngFor=\"let item of leftContent\">\n <ng-container *ngTemplateOutlet=\"item?.itemTemplate\"></ng-container>\n </li>\n </ng-container>\n <li class=\"nj-breadcrumb__see-more\" *ngIf=\"isMinified\">\n <button (click)=\"seeAll()\" (keydown.enter)=\"seeAll()\">\n <span class=\"nj-sr-only\">{{showMoreLabel}}</span>\n </button>\n </li>\n <li class=\"nj-breadcrumb__item\" *ngIf=\"isMinified && rightContent\">\n <ng-container *ngTemplateOutlet=\"rightContent.itemTemplate\"></ng-container>\n </li>\n </ol>\n</nav>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaLabel: [{
type: Input
}], showMoreLabel: [{
type: Input
}], breadcrumbItems: [{
type: ContentChildren,
args: [BreadcrumbItemComponent]
}], olRef: [{
type: ViewChild,
args: ['olRef']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9icmVhZGNydW1iL2JyZWFkY3J1bWIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9icmVhZGNydW1iLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBR0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxlQUFlLEVBRWYsS0FBSyxFQUVMLFNBQVMsRUFDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sOENBQThDLENBQUM7OztBQVN2RixNQUFNLE9BQU8sbUJBQW1CO0lBOEI5QixZQUFvQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQTdCMUM7Ozs7V0FJRztRQUNNLGNBQVMsR0FBVyxhQUFhLENBQUM7UUFFM0M7Ozs7V0FJRztRQUNNLGtCQUFhLEdBQVcsbUJBQW1CLENBQUM7SUFpQlIsQ0FBQztJQWE5QyxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLE9BQU8sRUFBRSxFQUFFLE1BQU0sR0FBRyxDQUFDLENBQUM7UUFDOUQsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztRQUNsRCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO0lBQ3RELENBQUM7SUFFRCxxQkFBcUI7UUFDbkIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRUQ7O09BRUc7SUFDSCxNQUFNO1FBQ0osSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7UUFDeEIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztRQUNsRCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1FBQ3BELElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7UUFFeEIsNEJBQTRCO1FBQzVCLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDYixJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFtQixFQUFFLGFBQWEsQ0FBQyxHQUFHLENBQUMsRUFBRSxLQUFLLEVBQUUsQ0FBQztRQUN6RixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7T0FFRztJQUNILHVCQUF1QjtRQUNyQixNQUFNLG9CQUFvQixHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFDN0QsSUFBSSxLQUFLLENBQUMsaUJBQWlCLENBQUMsb0JBQW9CLENBQUMsRUFBRTtZQUNqRCxPQUFPO1NBQ1I7UUFDRCxPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLG9CQUFvQixDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLG9CQUFvQixDQUFDO0lBQ3BGLENBQUM7SUFFRDs7T0FFRztJQUNILHdCQUF3QjtRQUN0QixJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNwQixPQUFPO1NBQ1I7UUFDRCxNQUFNLG9CQUFvQixHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFDN0QsTUFBTSxxQkFBcUIsR0FBRyxvQkFBb0IsRUFBRSxNQUFNLENBQUM7UUFDM0QsT0FBTyxvQkFBb0IsQ0FBQyxxQkFBcUIsR0FBRyxDQUFDLENBQUMsQ0FBQztJQUN6RCxDQUFDOytHQXpGVSxtQkFBbUI7bUdBQW5CLG1CQUFtQiw2S0FtQ2IsdUJBQXVCLDZIQzFEMUMsdXVCQWlCQSwyQ0RJcUMsWUFBWTs7NEZBRXBDLG1CQUFtQjtrQkFQL0IsU0FBUzsrQkFDRSxlQUFlLG1CQUVSLHVCQUF1QixDQUFDLE1BQU0sY0FDbkMsSUFBSSxXQUNQLENBQUMsdUJBQXVCLEVBQUUsWUFBWSxDQUFDO3dHQVF2QyxTQUFTO3NCQUFqQixLQUFLO2dCQU9HLGFBQWE7c0JBQXJCLEtBQUs7Z0JBdUJOLGVBQWU7c0JBRGQsZUFBZTt1QkFBQyx1QkFBdUI7Z0JBTXBCLEtBQUs7c0JBQXhCLFNBQVM7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBBZnRlckNvbnRlbnRDaGVja2VkLFxuICBBZnRlckNvbnRlbnRJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgUXVlcnlMaXN0LFxuICBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBVdGlscyB9IGZyb20gJy4uLy4uL3V0aWxzL3V0aWxzLnV0aWwnO1xuaW1wb3J0IHsgQnJlYWRjcnVtYkl0ZW1Db21wb25lbnQgfSBmcm9tICcuLi9icmVhZGNydW1iLWl0ZW0vYnJlYWRjcnVtYi1pdGVtLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25qLWJyZWFkY3J1bWInLFxuICB0ZW1wbGF0ZVVybDogJy4vYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQnJlYWRjcnVtYkl0ZW1Db21wb25lbnQsIENvbW1vbk1vZHVsZV1cbn0pXG5leHBvcnQgY2xhc3MgQnJlYWRjcnVtYkNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQsIEFmdGVyQ29udGVudENoZWNrZWQge1xuICAvKipcbiAgICogRGVzY3JpYmVzIHRoZSBuYXZpZ2F0aW9uIHRvIHNjcmVlbiByZWFkZXIgdXNlcnMgKHdobyBuYXZpZ2F0ZSB0aGUgcGFnZSB1c2luZyBsYW5kbWFya3MpXG4gICAqXG4gICAqIEBkZWZhdWx0IFwiQnJlYWRjcnVtYnNcIlxuICAgKi9cbiAgQElucHV0KCkgYXJpYUxhYmVsOiBzdHJpbmcgPSAnQnJlYWRjcnVtYnMnO1xuXG4gIC8qKlxuICAgKiBBY2Nlc3NpYmxlIHRleHQgYWx0ZXJuYXRpdmUgZm9yIHRoZSBcInNob3cgbW9yZVwiIGJ1dHRvbiB3aGVuIHRoZSBicmVhZGNydW1iIGlzIG1pbmlmaWVkLlxuICAgKlxuICAgKiBAZGVmYXVsdCBcIlNob3cgaGlkZGVuIGl0ZW1zXCJcbiAgICovXG4gIEBJbnB1dCgpIHNob3dNb3JlTGFiZWw6IHN0cmluZyA9ICdTaG93IGhpZGRlbiBpdGVtcyc7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGlzTWluaWZpZWQ6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGxlZnRDb250ZW50OiBCcmVhZGNydW1iSXRlbUNvbXBvbmVudFtdO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICByaWdodENvbnRlbnQ6IEJyZWFkY3J1bWJJdGVtQ29tcG9uZW50O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgQENvbnRlbnRDaGlsZHJlbihCcmVhZGNydW1iSXRlbUNvbXBvbmVudClcbiAgYnJlYWRjcnVtYkl0ZW1zOiBRdWVyeUxpc3Q8QnJlYWRjcnVtYkl0ZW1Db21wb25lbnQ+O1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBAVmlld0NoaWxkKCdvbFJlZicpIG9sUmVmOiBFbGVtZW50UmVmPEhUTUxPTGlzdEVsZW1lbnQ+O1xuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICB0aGlzLmlzTWluaWZpZWQgPSB0aGlzLmJyZWFkY3J1bWJJdGVtcz8udG9BcnJheSgpPy5sZW5ndGggPiA0O1xuICAgIHRoaXMubGVmdENvbnRlbnQgPSB0aGlzLmdldExlZnRDb250ZW50VG9EaXNwbGF5KCk7XG4gICAgdGhpcy5yaWdodENvbnRlbnQgPSB0aGlzLmdldFJpZ2h0Q29udGVudFRvRGlzcGxheSgpO1xuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRDaGVja2VkKCkge1xuICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHNlZUFsbCgpIHtcbiAgICB0aGlzLmlzTWluaWZpZWQgPSBmYWxzZTtcbiAgICB0aGlzLmxlZnRDb250ZW50ID0gdGhpcy5nZXRMZWZ0Q29udGVudFRvRGlzcGxheSgpO1xuICAgIHRoaXMucmlnaHRDb250ZW50ID0gdGhpcy5nZXRSaWdodENvbnRlbnRUb0Rpc3BsYXkoKTtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcblxuICAgIC8vIEZvY3VzIGZpcnN0IHJldmVhbGVkIGl0ZW1cbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICh0aGlzLm9sUmVmLm5hdGl2ZUVsZW1lbnQuY2hpbGROb2Rlc1syXSBhcyBIVE1MTElFbGVtZW50KT8ucXVlcnlTZWxlY3RvcignYScpPy5mb2N1cygpO1xuICAgIH0pO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGdldExlZnRDb250ZW50VG9EaXNwbGF5KCk6IEJyZWFkY3J1bWJJdGVtQ29tcG9uZW50W10ge1xuICAgIGNvbnN0IGJyZWFkY3J1bWJJdGVtc0FycmF5ID0gdGhpcy5icmVhZGNydW1iSXRlbXM/LnRvQXJyYXkoKTtcbiAgICBpZiAoVXRpbHMuaXNVbmRlZmluZWRPck51bGwoYnJlYWRjcnVtYkl0ZW1zQXJyYXkpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHJldHVybiB0aGlzLmlzTWluaWZpZWQgPyBicmVhZGNydW1iSXRlbXNBcnJheS5zcGxpY2UoMCwgMSkgOiBicmVhZGNydW1iSXRlbXNBcnJheTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBnZXRSaWdodENvbnRlbnRUb0Rpc3BsYXkoKTogQnJlYWRjcnVtYkl0ZW1Db21wb25lbnQge1xuICAgIGlmICghdGhpcy5pc01pbmlmaWVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGNvbnN0IGJyZWFkY3J1bWJJdGVtc0FycmF5ID0gdGhpcy5icmVhZGNydW1iSXRlbXM/LnRvQXJyYXkoKTtcbiAgICBjb25zdCBicmVhZGNydW1iSXRlbXNMZW5ndGggPSBicmVhZGNydW1iSXRlbXNBcnJheT8ubGVuZ3RoO1xuICAgIHJldHVybiBicmVhZGNydW1iSXRlbXNBcnJheVticmVhZGNydW1iSXRlbXNMZW5ndGggLSAxXTtcbiAgfVxufVxuIiwiPG5hdiByb2xlPVwibmF2aWdhdGlvblwiIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsXCI+XG4gIDxvbCBjbGFzcz1cIm5qLWJyZWFkY3J1bWJcIiAjb2xSZWY+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImxlZnRDb250ZW50XCI+XG4gICAgICA8bGkgY2xhc3M9XCJuai1icmVhZGNydW1iX19pdGVtXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgbGVmdENvbnRlbnRcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIml0ZW0/Lml0ZW1UZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPC9saT5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bGkgY2xhc3M9XCJuai1icmVhZGNydW1iX19zZWUtbW9yZVwiICpuZ0lmPVwiaXNNaW5pZmllZFwiPlxuICAgICAgPGJ1dHRvbiAoY2xpY2spPVwic2VlQWxsKClcIiAoa2V5ZG93bi5lbnRlcik9XCJzZWVBbGwoKVwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cIm5qLXNyLW9ubHlcIj57e3Nob3dNb3JlTGFiZWx9fTwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvbGk+XG4gICAgPGxpIGNsYXNzPVwibmotYnJlYWRjcnVtYl9faXRlbVwiICpuZ0lmPVwiaXNNaW5pZmllZCAmJiByaWdodENvbnRlbnRcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJyaWdodENvbnRlbnQuaXRlbVRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9saT5cbiAgPC9vbD5cbjwvbmF2PlxuIl19