@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
39 lines • 12.6 kB
JavaScript
import { Component, Input } from '@angular/core';
import { NgIf, NgClass, NgFor } from '@angular/common';
import { IconDirective } from '../common/icon.directive';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { OutletDirective } from '../common/outlet.directive';
import { RouterLink } from '@angular/router';
import { C8yTranslatePipe } from '../i18n/c8y-translate.pipe';
import * as i0 from "@angular/core";
import * as i1 from "ngx-bootstrap/tooltip";
export class BreadcrumbOutletComponent {
constructor() {
this.showAll = false;
this.breadcrumbs = [];
}
/**
* For upgrade only. Old angularjs routes start with hash, new ones not.
*/
normalizePath(path) {
return path?.replace(/^#\/?/, '');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BreadcrumbOutletComponent, isStandalone: true, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n class=\"breadcrumbs-container\"\n [ngClass]=\"{\n multiple: breadcrumbs.length > 1,\n open: showAll\n }\"\n *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n <button\n class=\"btn-show-all-breadcrumbs pull-left\"\n type=\"button\"\n title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n *ngIf=\"breadcrumbs.length > 1\"\n (click)=\"showAll = !showAll\"\n >\n <i\n *ngIf=\"!showAll\"\n [c8yIcon]=\"'caret-right'\"\n tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n container=\"body\"\n placement=\"top\"\n ></i>\n <i\n *ngIf=\"showAll\"\n [c8yIcon]=\"'caret-down'\"\n tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n container=\"body\"\n placement=\"top\"\n ></i>\n </button>\n\n <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n <ng-container *ngIf=\"first || showAll\">\n <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n <span *ngIf=\"!firstItem\">></span>\n <ng-container\n *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n ></ng-container>\n <ng-container *ngIf=\"item.label && item.path\">\n <a\n [routerLink]=\"normalizePath(item.path)\"\n class=\"word-break\"\n title=\"{{ item.label | translate }}\"\n >\n <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n <span>{{ item.label | translate }}</span>\n </a>\n </ng-container>\n <ng-container *ngIf=\"item.label && !item.path\">\n <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n </ng-container>\n </li>\n </ng-container>\n </ul>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbOutletComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-breadcrumb-outlet', standalone: true, imports: [
NgIf,
NgClass,
IconDirective,
TooltipModule,
NgFor,
OutletDirective,
RouterLink,
C8yTranslatePipe
], template: "<div\n class=\"breadcrumbs-container\"\n [ngClass]=\"{\n multiple: breadcrumbs.length > 1,\n open: showAll\n }\"\n *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n <button\n class=\"btn-show-all-breadcrumbs pull-left\"\n type=\"button\"\n title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n *ngIf=\"breadcrumbs.length > 1\"\n (click)=\"showAll = !showAll\"\n >\n <i\n *ngIf=\"!showAll\"\n [c8yIcon]=\"'caret-right'\"\n tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n container=\"body\"\n placement=\"top\"\n ></i>\n <i\n *ngIf=\"showAll\"\n [c8yIcon]=\"'caret-down'\"\n tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n container=\"body\"\n placement=\"top\"\n ></i>\n </button>\n\n <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n <ng-container *ngIf=\"first || showAll\">\n <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n <span *ngIf=\"!firstItem\">></span>\n <ng-container\n *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n ></ng-container>\n <ng-container *ngIf=\"item.label && item.path\">\n <a\n [routerLink]=\"normalizePath(item.path)\"\n class=\"word-break\"\n title=\"{{ item.label | translate }}\"\n >\n <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n <span>{{ item.label | translate }}</span>\n </a>\n </ng-container>\n <ng-container *ngIf=\"item.label && !item.path\">\n <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n </ng-container>\n </li>\n </ng-container>\n </ul>\n</div>\n" }]
}], propDecorators: { breadcrumbs: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi1vdXRsZXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29yZS9icmVhZGNydW1iL2JyZWFkY3J1bWItb3V0bGV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL2NvcmUvYnJlYWRjcnVtYi9icmVhZGNydW1iLW91dGxldC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVqRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDekQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3RELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7OztBQWlCOUQsTUFBTSxPQUFPLHlCQUF5QjtJQWZ0QztRQWdCRSxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ1AsZ0JBQVcsR0FBaUIsRUFBRSxDQUFDO0tBUXpDO0lBTkM7O09BRUc7SUFDSCxhQUFhLENBQUMsSUFBSTtRQUNoQixPQUFPLElBQUksRUFBRSxPQUFPLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7K0dBVFUseUJBQXlCO21HQUF6Qix5QkFBeUIseUhDeEJ0QyxnNURBd0RBLDRDRDFDSSxJQUFJLDZGQUNKLE9BQU8sb0ZBQ1AsYUFBYSwwRUFDYixhQUFhLGtrQkFDYixLQUFLLG1IQUNMLGVBQWUsMkhBQ2YsVUFBVSwrTkFDVixnQkFBZ0I7OzRGQUdQLHlCQUF5QjtrQkFmckMsU0FBUzsrQkFDRSx1QkFBdUIsY0FFckIsSUFBSSxXQUNQO3dCQUNQLElBQUk7d0JBQ0osT0FBTzt3QkFDUCxhQUFhO3dCQUNiLGFBQWE7d0JBQ2IsS0FBSzt3QkFDTCxlQUFlO3dCQUNmLFVBQVU7d0JBQ1YsZ0JBQWdCO3FCQUNqQjs4QkFJUSxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnJlYWRjcnVtYiB9IGZyb20gJy4vYnJlYWRjcnVtYi5tb2RlbCc7XG5pbXBvcnQgeyBOZ0lmLCBOZ0NsYXNzLCBOZ0ZvciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBJY29uRGlyZWN0aXZlIH0gZnJvbSAnLi4vY29tbW9uL2ljb24uZGlyZWN0aXZlJztcbmltcG9ydCB7IFRvb2x0aXBNb2R1bGUgfSBmcm9tICduZ3gtYm9vdHN0cmFwL3Rvb2x0aXAnO1xuaW1wb3J0IHsgT3V0bGV0RGlyZWN0aXZlIH0gZnJvbSAnLi4vY29tbW9uL291dGxldC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgUm91dGVyTGluayB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBDOHlUcmFuc2xhdGVQaXBlIH0gZnJvbSAnLi4vaTE4bi9jOHktdHJhbnNsYXRlLnBpcGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjOHktYnJlYWRjcnVtYi1vdXRsZXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vYnJlYWRjcnVtYi1vdXRsZXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdJZixcbiAgICBOZ0NsYXNzLFxuICAgIEljb25EaXJlY3RpdmUsXG4gICAgVG9vbHRpcE1vZHVsZSxcbiAgICBOZ0ZvcixcbiAgICBPdXRsZXREaXJlY3RpdmUsXG4gICAgUm91dGVyTGluayxcbiAgICBDOHlUcmFuc2xhdGVQaXBlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQnJlYWRjcnVtYk91dGxldENvbXBvbmVudCB7XG4gIHNob3dBbGwgPSBmYWxzZTtcbiAgQElucHV0KCkgYnJlYWRjcnVtYnM6IEJyZWFkY3J1bWJbXSA9IFtdO1xuXG4gIC8qKlxuICAgKiBGb3IgdXBncmFkZSBvbmx5LiBPbGQgYW5ndWxhcmpzIHJvdXRlcyBzdGFydCB3aXRoIGhhc2gsIG5ldyBvbmVzIG5vdC5cbiAgICovXG4gIG5vcm1hbGl6ZVBhdGgocGF0aCkge1xuICAgIHJldHVybiBwYXRoPy5yZXBsYWNlKC9eI1xcLz8vLCAnJyk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJicmVhZGNydW1icy1jb250YWluZXJcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgbXVsdGlwbGU6IGJyZWFkY3J1bWJzLmxlbmd0aCA+IDEsXG4gICAgb3Blbjogc2hvd0FsbFxuICB9XCJcbiAgKm5nSWY9XCJicmVhZGNydW1icyAmJiBicmVhZGNydW1icy5sZW5ndGggPiAwXCJcbj5cbiAgPGJ1dHRvblxuICAgIGNsYXNzPVwiYnRuLXNob3ctYWxsLWJyZWFkY3J1bWJzIHB1bGwtbGVmdFwiXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgdGl0bGU9XCJ7eyAnRXhwYW5kL2NvbGxhcHNlIGFsbCBicmVhZGNydW1icycgfCB0cmFuc2xhdGUgfX1cIlxuICAgICpuZ0lmPVwiYnJlYWRjcnVtYnMubGVuZ3RoID4gMVwiXG4gICAgKGNsaWNrKT1cInNob3dBbGwgPSAhc2hvd0FsbFwiXG4gID5cbiAgICA8aVxuICAgICAgKm5nSWY9XCIhc2hvd0FsbFwiXG4gICAgICBbYzh5SWNvbl09XCInY2FyZXQtcmlnaHQnXCJcbiAgICAgIHRvb2x0aXA9XCJ7eyAnU2hvdyBhbGwgYnJlYWRjcnVtYnMnIHwgdHJhbnNsYXRlIH19XCJcbiAgICAgIGNvbnRhaW5lcj1cImJvZHlcIlxuICAgICAgcGxhY2VtZW50PVwidG9wXCJcbiAgICA+PC9pPlxuICAgIDxpXG4gICAgICAqbmdJZj1cInNob3dBbGxcIlxuICAgICAgW2M4eUljb25dPVwiJ2NhcmV0LWRvd24nXCJcbiAgICAgIHRvb2x0aXA9XCJ7eyAnRXhwYW5kIGJyZWFkY3J1bWJzJyB8IHRyYW5zbGF0ZSB9fVwiXG4gICAgICBjb250YWluZXI9XCJib2R5XCJcbiAgICAgIHBsYWNlbWVudD1cInRvcFwiXG4gICAgPjwvaT5cbiAgPC9idXR0b24+XG5cbiAgPHVsIGNsYXNzPVwiYnJlYWRjcnVtYnMgdGV4dC1tdXRlZFwiICpuZ0Zvcj1cImxldCBicmVhZGNydW1iIG9mIGJyZWFkY3J1bWJzOyBsZXQgZmlyc3QgPSBmaXJzdFwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJmaXJzdCB8fCBzaG93QWxsXCI+XG4gICAgICA8bGkgY2xhc3M9XCJ0ZXh0LW11dGVkXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgYnJlYWRjcnVtYi5pdGVtczsgbGV0IGZpcnN0SXRlbSA9IGZpcnN0XCI+XG4gICAgICAgIDxzcGFuICpuZ0lmPVwiIWZpcnN0SXRlbVwiPj48L3NwYW4+XG4gICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAqYzh5T3V0bGV0PVwiaXRlbS5jb21wb25lbnQgfHwgaXRlbS50ZW1wbGF0ZTsgaW5qZWN0b3I6IGJyZWFkY3J1bWIuaW5qZWN0b3JcIlxuICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpdGVtLmxhYmVsICYmIGl0ZW0ucGF0aFwiPlxuICAgICAgICAgIDxhXG4gICAgICAgICAgICBbcm91dGVyTGlua109XCJub3JtYWxpemVQYXRoKGl0ZW0ucGF0aClcIlxuICAgICAgICAgICAgY2xhc3M9XCJ3b3JkLWJyZWFrXCJcbiAgICAgICAgICAgIHRpdGxlPVwie3sgaXRlbS5sYWJlbCB8IHRyYW5zbGF0ZSB9fVwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPGkgW2M4eUljb25dPVwiaXRlbS5pY29uXCIgKm5nSWY9XCJmaXJzdEl0ZW1cIiBjbGFzcz1cIm0tci00XCI+PC9pPlxuICAgICAgICAgICAgPHNwYW4+e3sgaXRlbS5sYWJlbCB8IHRyYW5zbGF0ZSB9fTwvc3Bhbj5cbiAgICAgICAgICA8L2E+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXRlbS5sYWJlbCAmJiAhaXRlbS5wYXRoXCI+XG4gICAgICAgICAgPGkgW2M4eUljb25dPVwiaXRlbS5pY29uXCIgKm5nSWY9XCJmaXJzdEl0ZW1cIiBjbGFzcz1cIm0tci00XCI+PC9pPlxuICAgICAgICAgIDxzcGFuIHRpdGxlPVwie3sgaXRlbS5sYWJlbCB8IHRyYW5zbGF0ZSB9fVwiPnt7IGl0ZW0ubGFiZWwgfCB0cmFuc2xhdGUgfX08L3NwYW4+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC9saT5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC91bD5cbjwvZGl2PlxuIl19