@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
29 lines • 10.8 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "../common/icon.directive";
import * as i3 from "../common/outlet.directive";
import * as i4 from "@angular/common";
import * as i5 from "ngx-bootstrap/tooltip";
import * as i6 from "../i18n/c8y-translate.pipe";
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, 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: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: "pipe", type: i6.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', 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi1vdXRsZXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29yZS9icmVhZGNydW1iL2JyZWFkY3J1bWItb3V0bGV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL2NvcmUvYnJlYWRjcnVtYi9icmVhZGNydW1iLW91dGxldC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7Ozs7QUFPakQsTUFBTSxPQUFPLHlCQUF5QjtJQUp0QztRQUtFLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDUCxnQkFBVyxHQUFpQixFQUFFLENBQUM7S0FRekM7SUFOQzs7T0FFRztJQUNILGFBQWEsQ0FBQyxJQUFJO1FBQ2hCLE9BQU8sSUFBSSxFQUFFLE9BQU8sQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDcEMsQ0FBQzsrR0FUVSx5QkFBeUI7bUdBQXpCLHlCQUF5QixxR0NQdEMsZzVEQXdEQTs7NEZEakRhLHlCQUF5QjtrQkFKckMsU0FBUzsrQkFDRSx1QkFBdUI7OEJBS3hCLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCcmVhZGNydW1iIH0gZnJvbSAnLi9icmVhZGNydW1iLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWJyZWFkY3J1bWItb3V0bGV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JyZWFkY3J1bWItb3V0bGV0LmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBCcmVhZGNydW1iT3V0bGV0Q29tcG9uZW50IHtcbiAgc2hvd0FsbCA9IGZhbHNlO1xuICBASW5wdXQoKSBicmVhZGNydW1iczogQnJlYWRjcnVtYltdID0gW107XG5cbiAgLyoqXG4gICAqIEZvciB1cGdyYWRlIG9ubHkuIE9sZCBhbmd1bGFyanMgcm91dGVzIHN0YXJ0IHdpdGggaGFzaCwgbmV3IG9uZXMgbm90LlxuICAgKi9cbiAgbm9ybWFsaXplUGF0aChwYXRoKSB7XG4gICAgcmV0dXJuIHBhdGg/LnJlcGxhY2UoL14jXFwvPy8sICcnKTtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImJyZWFkY3J1bWJzLWNvbnRhaW5lclwiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICBtdWx0aXBsZTogYnJlYWRjcnVtYnMubGVuZ3RoID4gMSxcbiAgICBvcGVuOiBzaG93QWxsXG4gIH1cIlxuICAqbmdJZj1cImJyZWFkY3J1bWJzICYmIGJyZWFkY3J1bWJzLmxlbmd0aCA+IDBcIlxuPlxuICA8YnV0dG9uXG4gICAgY2xhc3M9XCJidG4tc2hvdy1hbGwtYnJlYWRjcnVtYnMgcHVsbC1sZWZ0XCJcbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICB0aXRsZT1cInt7ICdFeHBhbmQvY29sbGFwc2UgYWxsIGJyZWFkY3J1bWJzJyB8IHRyYW5zbGF0ZSB9fVwiXG4gICAgKm5nSWY9XCJicmVhZGNydW1icy5sZW5ndGggPiAxXCJcbiAgICAoY2xpY2spPVwic2hvd0FsbCA9ICFzaG93QWxsXCJcbiAgPlxuICAgIDxpXG4gICAgICAqbmdJZj1cIiFzaG93QWxsXCJcbiAgICAgIFtjOHlJY29uXT1cIidjYXJldC1yaWdodCdcIlxuICAgICAgdG9vbHRpcD1cInt7ICdTaG93IGFsbCBicmVhZGNydW1icycgfCB0cmFuc2xhdGUgfX1cIlxuICAgICAgY29udGFpbmVyPVwiYm9keVwiXG4gICAgICBwbGFjZW1lbnQ9XCJ0b3BcIlxuICAgID48L2k+XG4gICAgPGlcbiAgICAgICpuZ0lmPVwic2hvd0FsbFwiXG4gICAgICBbYzh5SWNvbl09XCInY2FyZXQtZG93bidcIlxuICAgICAgdG9vbHRpcD1cInt7ICdFeHBhbmQgYnJlYWRjcnVtYnMnIHwgdHJhbnNsYXRlIH19XCJcbiAgICAgIGNvbnRhaW5lcj1cImJvZHlcIlxuICAgICAgcGxhY2VtZW50PVwidG9wXCJcbiAgICA+PC9pPlxuICA8L2J1dHRvbj5cblxuICA8dWwgY2xhc3M9XCJicmVhZGNydW1icyB0ZXh0LW11dGVkXCIgKm5nRm9yPVwibGV0IGJyZWFkY3J1bWIgb2YgYnJlYWRjcnVtYnM7IGxldCBmaXJzdCA9IGZpcnN0XCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpcnN0IHx8IHNob3dBbGxcIj5cbiAgICAgIDxsaSBjbGFzcz1cInRleHQtbXV0ZWRcIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBicmVhZGNydW1iLml0ZW1zOyBsZXQgZmlyc3RJdGVtID0gZmlyc3RcIj5cbiAgICAgICAgPHNwYW4gKm5nSWY9XCIhZmlyc3RJdGVtXCI+Pjwvc3Bhbj5cbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgICpjOHlPdXRsZXQ9XCJpdGVtLmNvbXBvbmVudCB8fCBpdGVtLnRlbXBsYXRlOyBpbmplY3RvcjogYnJlYWRjcnVtYi5pbmplY3RvclwiXG4gICAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIml0ZW0ubGFiZWwgJiYgaXRlbS5wYXRoXCI+XG4gICAgICAgICAgPGFcbiAgICAgICAgICAgIFtyb3V0ZXJMaW5rXT1cIm5vcm1hbGl6ZVBhdGgoaXRlbS5wYXRoKVwiXG4gICAgICAgICAgICBjbGFzcz1cIndvcmQtYnJlYWtcIlxuICAgICAgICAgICAgdGl0bGU9XCJ7eyBpdGVtLmxhYmVsIHwgdHJhbnNsYXRlIH19XCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8aSBbYzh5SWNvbl09XCJpdGVtLmljb25cIiAqbmdJZj1cImZpcnN0SXRlbVwiIGNsYXNzPVwibS1yLTRcIj48L2k+XG4gICAgICAgICAgICA8c3Bhbj57eyBpdGVtLmxhYmVsIHwgdHJhbnNsYXRlIH19PC9zcGFuPlxuICAgICAgICAgIDwvYT5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJpdGVtLmxhYmVsICYmICFpdGVtLnBhdGhcIj5cbiAgICAgICAgICA8aSBbYzh5SWNvbl09XCJpdGVtLmljb25cIiAqbmdJZj1cImZpcnN0SXRlbVwiIGNsYXNzPVwibS1yLTRcIj48L2k+XG4gICAgICAgICAgPHNwYW4gdGl0bGU9XCJ7eyBpdGVtLmxhYmVsIHwgdHJhbnNsYXRlIH19XCI+e3sgaXRlbS5sYWJlbCB8IHRyYW5zbGF0ZSB9fTwvc3Bhbj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L2xpPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L3VsPlxuPC9kaXY+XG4iXX0=