design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
51 lines • 12.6 kB
JavaScript
import { ChangeDetectionStrategy, Component, ContentChildren, Input, } from '@angular/core';
import { ItBreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
import { startWith } from 'rxjs';
import { NgTemplateOutlet } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { ItIconComponent } from '../../../utils/icon/icon.component';
import { ItLinkComponent } from '../../../core/link/link.component';
import { inputToBoolean } from '../../../../utils/coercion';
import * as i0 from "@angular/core";
import * as i1 from "@ngx-translate/core";
export class ItBreadcrumbComponent {
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
/**
* The character to use as separator
* @default /
*/
this.separator = '/';
}
ngAfterViewInit() {
this.items?.changes
.pipe(
// When breadcrumb items changes (dynamic add/remove)
startWith(undefined))
.subscribe(() => {
this.itemSubscriptions?.forEach(sub => sub.unsubscribe()); // Remove old subscriptions
this.itemSubscriptions = this.items?.map(item => item.valueChanges.subscribe(() => {
this._changeDetectorRef.detectChanges(); // DetectChanges when breadcrumb item attributes changes
}));
this._changeDetectorRef.detectChanges(); // Force update html render
});
}
ngOnDestroy() {
this.itemSubscriptions?.forEach(item => item.unsubscribe());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItBreadcrumbComponent, isStandalone: true, selector: "it-breadcrumb", inputs: { separator: "separator", dark: ["dark", "dark", inputToBoolean] }, queries: [{ propertyName: "items", predicate: ItBreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n @if (items) {\n <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n @for (item of items; track item; let isLast = $last) {\n <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n @if (item.iconName) {\n <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n }\n @if (!item.active && !isLast) {\n <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </it-link>\n } @else {\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n }\n @if (!isLast) {\n <span class=\"separator\">{{ separator }}</span>\n }\n </li>\n }\n </ol>\n }\n</nav>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }, { kind: "component", type: ItLinkComponent, selector: "it-link", inputs: ["href", "externalLink", "disabled", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBreadcrumbComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent, ItLinkComponent, NgTemplateOutlet], template: "<nav class=\"breadcrumb-container\" [attr.aria-label]=\"'it.navigation.navigation-path' | translate\">\n @if (items) {\n <ol class=\"breadcrumb\" [class.dark]=\"dark\" [class.px-3]=\"dark\">\n @for (item of items; track item; let isLast = $last) {\n <li class=\"breadcrumb-item\" [class.active]=\"item.active\" [attr.aria-current]=\"item.active ? 'page' : null\">\n @if (item.iconName) {\n <it-icon [name]=\"item.iconName\" [color]=\"dark ? 'white' : 'secondary'\" size=\"sm\" svgClass=\"align-top me-1\"></it-icon>\n }\n @if (!item.active && !isLast) {\n <it-link [href]=\"item.href\" [class]=\"item.class\" [externalLink]=\"item.externalLink\" [disabled]=\"item.disabled\">\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n </it-link>\n } @else {\n <ng-container *ngTemplateOutlet=\"item.htmlContent\"></ng-container>\n }\n @if (!isLast) {\n <span class=\"separator\">{{ separator }}</span>\n }\n </li>\n }\n </ol>\n }\n</nav>\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { separator: [{
type: Input
}], dark: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], items: [{
type: ContentChildren,
args: [ItBreadcrumbItemComponent]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tYW5ndWxhci1raXQvc3JjL2xpYi9jb21wb25lbnRzL25hdmlnYXRpb24vYnJlYWRjcnVtYnMvYnJlYWRjcnVtYi9icmVhZGNydW1iLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvbmF2aWdhdGlvbi9icmVhZGNydW1icy9icmVhZGNydW1iL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLHVCQUF1QixFQUV2QixTQUFTLEVBQ1QsZUFBZSxFQUNmLEtBQUssR0FHTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUN6RixPQUFPLEVBQUUsU0FBUyxFQUFnQixNQUFNLE1BQU0sQ0FBQztBQUMvQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7OztBQVM1RCxNQUFNLE9BQU8scUJBQXFCO0lBb0JoQyxZQUE2QixrQkFBcUM7UUFBckMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFtQjtRQW5CbEU7OztXQUdHO1FBQ00sY0FBUyxHQUFXLEdBQUcsQ0FBQztJQWVvQyxDQUFDO0lBRXRFLGVBQWU7UUFDYixJQUFJLENBQUMsS0FBSyxFQUFFLE9BQU87YUFDaEIsSUFBSTtRQUNILHFEQUFxRDtRQUNyRCxTQUFTLENBQUMsU0FBUyxDQUFDLENBQ3JCO2FBQ0EsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQyxDQUFDLDJCQUEyQjtZQUN0RixJQUFJLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FDOUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO2dCQUMvQixJQUFJLENBQUMsa0JBQWtCLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQyx3REFBd0Q7WUFDbkcsQ0FBQyxDQUFDLENBQ0gsQ0FBQztZQUNGLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxhQUFhLEVBQUUsQ0FBQyxDQUFDLDJCQUEyQjtRQUN0RSxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGlCQUFpQixFQUFFLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDO0lBQzlELENBQUM7OEdBekNVLHFCQUFxQjtrR0FBckIscUJBQXFCLDBHQVdaLGNBQWMsbURBS2pCLHlCQUF5Qiw2QkN6QzVDLDhsQ0F1QkEsMkNEQVksZUFBZSw0RkFBRSxlQUFlLG9JQUFFLGVBQWUsMkdBQUUsZ0JBQWdCOzsyRkFFbEUscUJBQXFCO2tCQVBqQyxTQUFTO2lDQUNJLElBQUksWUFDTixlQUFlLG1CQUVSLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQyxlQUFlLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsQ0FBQztzRkFPckUsU0FBUztzQkFBakIsS0FBSztnQkFNZ0MsSUFBSTtzQkFBekMsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUU7Z0JBS1EsS0FBSztzQkFBaEQsZUFBZTt1QkFBQyx5QkFBeUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBRdWVyeUxpc3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSXRCcmVhZGNydW1iSXRlbUNvbXBvbmVudCB9IGZyb20gJy4uL2JyZWFkY3J1bWItaXRlbS9icmVhZGNydW1iLWl0ZW0uY29tcG9uZW50JztcbmltcG9ydCB7IHN0YXJ0V2l0aCwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgSXRJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJdExpbmtDb21wb25lbnQgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2xpbmsvbGluay5jb21wb25lbnQnO1xuaW1wb3J0IHsgaW5wdXRUb0Jvb2xlYW4gfSBmcm9tICcuLi8uLi8uLi8uLi91dGlscy9jb2VyY2lvbic7XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBzZWxlY3RvcjogJ2l0LWJyZWFkY3J1bWInLFxuICB0ZW1wbGF0ZVVybDogJy4vYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbVHJhbnNsYXRlTW9kdWxlLCBJdEljb25Db21wb25lbnQsIEl0TGlua0NvbXBvbmVudCwgTmdUZW1wbGF0ZU91dGxldF0sXG59KVxuZXhwb3J0IGNsYXNzIEl0QnJlYWRjcnVtYkNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIC8qKlxuICAgKiBUaGUgY2hhcmFjdGVyIHRvIHVzZSBhcyBzZXBhcmF0b3JcbiAgICogQGRlZmF1bHQgL1xuICAgKi9cbiAgQElucHV0KCkgc2VwYXJhdG9yOiBzdHJpbmcgPSAnLyc7XG5cbiAgLyoqXG4gICAqIERhcmsgc3R5bGVcbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogaW5wdXRUb0Jvb2xlYW4gfSkgZGFyaz86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFRoZSB0YWIgaXRlbXNcbiAgICovXG4gIEBDb250ZW50Q2hpbGRyZW4oSXRCcmVhZGNydW1iSXRlbUNvbXBvbmVudCkgaXRlbXM/OiBRdWVyeUxpc3Q8SXRCcmVhZGNydW1iSXRlbUNvbXBvbmVudD47XG5cbiAgcHJpdmF0ZSBpdGVtU3Vic2NyaXB0aW9ucz86IEFycmF5PFN1YnNjcmlwdGlvbj47XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZWFkb25seSBfY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLml0ZW1zPy5jaGFuZ2VzXG4gICAgICAucGlwZShcbiAgICAgICAgLy8gV2hlbiBicmVhZGNydW1iIGl0ZW1zIGNoYW5nZXMgKGR5bmFtaWMgYWRkL3JlbW92ZSlcbiAgICAgICAgc3RhcnRXaXRoKHVuZGVmaW5lZClcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICB0aGlzLml0ZW1TdWJzY3JpcHRpb25zPy5mb3JFYWNoKHN1YiA9PiBzdWIudW5zdWJzY3JpYmUoKSk7IC8vIFJlbW92ZSBvbGQgc3Vic2NyaXB0aW9uc1xuICAgICAgICB0aGlzLml0ZW1TdWJzY3JpcHRpb25zID0gdGhpcy5pdGVtcz8ubWFwKGl0ZW0gPT5cbiAgICAgICAgICBpdGVtLnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYuZGV0ZWN0Q2hhbmdlcygpOyAvLyBEZXRlY3RDaGFuZ2VzIHdoZW4gYnJlYWRjcnVtYiBpdGVtIGF0dHJpYnV0ZXMgY2hhbmdlc1xuICAgICAgICAgIH0pXG4gICAgICAgICk7XG4gICAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTsgLy8gRm9yY2UgdXBkYXRlIGh0bWwgcmVuZGVyXG4gICAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuaXRlbVN1YnNjcmlwdGlvbnM/LmZvckVhY2goaXRlbSA9PiBpdGVtLnVuc3Vic2NyaWJlKCkpO1xuICB9XG59XG4iLCI8bmF2IGNsYXNzPVwiYnJlYWRjcnVtYi1jb250YWluZXJcIiBbYXR0ci5hcmlhLWxhYmVsXT1cIidpdC5uYXZpZ2F0aW9uLm5hdmlnYXRpb24tcGF0aCcgfCB0cmFuc2xhdGVcIj5cbiAgQGlmIChpdGVtcykge1xuICAgIDxvbCBjbGFzcz1cImJyZWFkY3J1bWJcIiBbY2xhc3MuZGFya109XCJkYXJrXCIgW2NsYXNzLnB4LTNdPVwiZGFya1wiPlxuICAgICAgQGZvciAoaXRlbSBvZiBpdGVtczsgdHJhY2sgaXRlbTsgbGV0IGlzTGFzdCA9ICRsYXN0KSB7XG4gICAgICAgIDxsaSBjbGFzcz1cImJyZWFkY3J1bWItaXRlbVwiIFtjbGFzcy5hY3RpdmVdPVwiaXRlbS5hY3RpdmVcIiBbYXR0ci5hcmlhLWN1cnJlbnRdPVwiaXRlbS5hY3RpdmUgPyAncGFnZScgOiBudWxsXCI+XG4gICAgICAgICAgQGlmIChpdGVtLmljb25OYW1lKSB7XG4gICAgICAgICAgICA8aXQtaWNvbiBbbmFtZV09XCJpdGVtLmljb25OYW1lXCIgW2NvbG9yXT1cImRhcmsgPyAnd2hpdGUnIDogJ3NlY29uZGFyeSdcIiBzaXplPVwic21cIiBzdmdDbGFzcz1cImFsaWduLXRvcCBtZS0xXCI+PC9pdC1pY29uPlxuICAgICAgICAgIH1cbiAgICAgICAgICBAaWYgKCFpdGVtLmFjdGl2ZSAmJiAhaXNMYXN0KSB7XG4gICAgICAgICAgICA8aXQtbGluayBbaHJlZl09XCJpdGVtLmhyZWZcIiBbY2xhc3NdPVwiaXRlbS5jbGFzc1wiIFtleHRlcm5hbExpbmtdPVwiaXRlbS5leHRlcm5hbExpbmtcIiBbZGlzYWJsZWRdPVwiaXRlbS5kaXNhYmxlZFwiPlxuICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaXRlbS5odG1sQ29udGVudFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9pdC1saW5rPlxuICAgICAgICAgIH0gQGVsc2Uge1xuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIml0ZW0uaHRtbENvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICB9XG4gICAgICAgICAgQGlmICghaXNMYXN0KSB7XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cInNlcGFyYXRvclwiPnt7IHNlcGFyYXRvciB9fTwvc3Bhbj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvbGk+XG4gICAgICB9XG4gICAgPC9vbD5cbiAgfVxuPC9uYXY+XG4iXX0=