@nova-ui/bits
Version:
SolarWinds Nova Framework
57 lines • 13 kB
JavaScript
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import { Component, EventEmitter, Input, Output, ViewEncapsulation, } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../icon/icon.component";
// <example-url>./../examples/index.html#/breadcrumb</example-url>
export class BreadcrumbComponent {
constructor() {
this.ariaLabel = "Breadcrumb";
this.navigation = new EventEmitter();
}
handleClick(event, item) {
event.preventDefault();
// We want to only handle the CRTL + Click event separately because Middle Mouse click
// requires a different way of handling it, and so it doesn't conflict with the regular click event.
if (event.ctrlKey) {
if (item?.url) {
// This opens the url link in a new browser tab
window.open(item?.url, "_blank");
}
return;
}
// We only navigate the angular router on regular clicks
this.navigation.emit(item.routerState);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BreadcrumbComponent, selector: "nui-breadcrumb", inputs: { items: "items", ariaLabel: "ariaLabel" }, outputs: { navigation: "navigation" }, host: { properties: { "attr.aria-label": "ariaLabel" } }, ngImport: i0, template: "<div\n [attr.aria-label]=\"ariaLabel\"\n class=\"nui-breadcrumb\"\n *ngIf=\"items?.length > 1\"\n>\n <span\n class=\"nui-breadcrumb__wrapper\"\n *ngFor=\"let item of items; let isLast = last\"\n >\n <ng-container *ngIf=\"!isLast\">\n <a\n [attr.href]=\"item?.url\"\n class=\"nui-breadcrumb__crumb nui-breadcrumb__crumb__link\"\n (click)=\"handleClick($event, item)\"\n >{{ item.title }}</a\n >\n <nui-icon\n class=\"nui-breadcrumb__caret-icon\"\n icon=\"caret-right\"\n iconColor=\"disabled-gray\"\n iconSize=\"small\"\n ></nui-icon>\n </ng-container>\n <span\n *ngIf=\"isLast\"\n aria-current=\"page\"\n class=\"nui-breadcrumb__crumb nui-breadcrumb__crumb-current-level\"\n >{{ item.title }}</span\n >\n </span>\n</div>\n", styles: [".nui .nui-breadcrumb{align-items:center;display:flex;flex-direction:row;font-size:11px;line-height:14px;overflow:hidden;padding:5px 0}.nui .nui-breadcrumb__crumb{white-space:nowrap}.nui .nui-breadcrumb__crumb__link{cursor:pointer}.nui .nui-breadcrumb__crumb-current-level{color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));cursor:default}.nui .nui-breadcrumb__caret-icon{padding:0 5px}.nui .nui-breadcrumb__wrapper{align-items:center;display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nui-icon", inputs: ["iconColor", "brushType", "iconHoverColor", "iconSize", "cssClass", "fillContainer", "status", "childStatus", "icon", "counter"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: "nui-breadcrumb", encapsulation: ViewEncapsulation.None, host: { "[attr.aria-label]": "ariaLabel" }, template: "<div\n [attr.aria-label]=\"ariaLabel\"\n class=\"nui-breadcrumb\"\n *ngIf=\"items?.length > 1\"\n>\n <span\n class=\"nui-breadcrumb__wrapper\"\n *ngFor=\"let item of items; let isLast = last\"\n >\n <ng-container *ngIf=\"!isLast\">\n <a\n [attr.href]=\"item?.url\"\n class=\"nui-breadcrumb__crumb nui-breadcrumb__crumb__link\"\n (click)=\"handleClick($event, item)\"\n >{{ item.title }}</a\n >\n <nui-icon\n class=\"nui-breadcrumb__caret-icon\"\n icon=\"caret-right\"\n iconColor=\"disabled-gray\"\n iconSize=\"small\"\n ></nui-icon>\n </ng-container>\n <span\n *ngIf=\"isLast\"\n aria-current=\"page\"\n class=\"nui-breadcrumb__crumb nui-breadcrumb__crumb-current-level\"\n >{{ item.title }}</span\n >\n </span>\n</div>\n", styles: [".nui .nui-breadcrumb{align-items:center;display:flex;flex-direction:row;font-size:11px;line-height:14px;overflow:hidden;padding:5px 0}.nui .nui-breadcrumb__crumb{white-space:nowrap}.nui .nui-breadcrumb__crumb__link{cursor:pointer}.nui .nui-breadcrumb__crumb-current-level{color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));cursor:default}.nui .nui-breadcrumb__caret-icon{padding:0 5px}.nui .nui-breadcrumb__wrapper{align-items:center;display:inline-flex}\n"] }]
}], propDecorators: { items: [{
type: Input
}], ariaLabel: [{
type: Input
}], navigation: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9zcmMvbGliL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx5REFBeUQ7QUFDekQsRUFBRTtBQUNGLCtFQUErRTtBQUMvRSw0RUFBNEU7QUFDNUUsOEVBQThFO0FBQzlFLCtFQUErRTtBQUMvRSw4RUFBOEU7QUFDOUUsNERBQTREO0FBQzVELEVBQUU7QUFDRiw2RUFBNkU7QUFDN0UsdURBQXVEO0FBQ3ZELEVBQUU7QUFDRiw2RUFBNkU7QUFDN0UsNEVBQTRFO0FBQzVFLCtFQUErRTtBQUMvRSwwRUFBMEU7QUFDMUUsaUZBQWlGO0FBQ2pGLDZFQUE2RTtBQUM3RSxpQkFBaUI7QUFFakIsT0FBTyxFQUNILFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7Ozs7QUFJdkIsa0VBQWtFO0FBU2xFLE1BQU0sT0FBTyxtQkFBbUI7SUFQaEM7UUFTYSxjQUFTLEdBQVcsWUFBWSxDQUFDO1FBQ2hDLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBa0JyRDtJQWhCVSxXQUFXLENBQUMsS0FBb0IsRUFBRSxJQUFvQjtRQUN6RCxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFFdkIsc0ZBQXNGO1FBQ3RGLG9HQUFvRztRQUNwRyxJQUFJLEtBQUssQ0FBQyxPQUFPLEVBQUU7WUFDZixJQUFJLElBQUksRUFBRSxHQUFHLEVBQUU7Z0JBQ1gsK0NBQStDO2dCQUMvQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsUUFBUSxDQUFDLENBQUM7YUFDcEM7WUFDRCxPQUFPO1NBQ1Y7UUFFRCx3REFBd0Q7UUFDeEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQzNDLENBQUM7K0dBcEJRLG1CQUFtQjttR0FBbkIsbUJBQW1CLDJNQ3ZDaEMsZytCQStCQTs7NEZEUWEsbUJBQW1CO2tCQVAvQixTQUFTOytCQUNJLGdCQUFnQixpQkFHWCxpQkFBaUIsQ0FBQyxJQUFJLFFBQy9CLEVBQUUsbUJBQW1CLEVBQUUsV0FBVyxFQUFFOzhCQUdqQyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiLy8gwqkgMjAyMiBTb2xhcldpbmRzIFdvcmxkd2lkZSwgTExDLiBBbGwgcmlnaHRzIHJlc2VydmVkLlxuLy9cbi8vIFBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHlcbi8vICBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0b1xuLy8gIGRlYWwgaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlXG4vLyAgcmlnaHRzIHRvIHVzZSwgY29weSwgbW9kaWZ5LCBtZXJnZSwgcHVibGlzaCwgZGlzdHJpYnV0ZSwgc3VibGljZW5zZSwgYW5kL29yXG4vLyAgc2VsbCBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbi8vICBmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOlxuLy9cbi8vIFRoZSBhYm92ZSBjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIHNoYWxsIGJlIGluY2x1ZGVkIGluXG4vLyAgYWxsIGNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuXG4vL1xuLy8gVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEIFwiQVMgSVNcIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUlxuLy8gIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuLy8gIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFIEFORCBOT05JTkZSSU5HRU1FTlQuIElOIE5PIEVWRU5UIFNIQUxMIFRIRVxuLy8gIEFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVJcbi8vICBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuLy8gIE9VVCBPRiBPUiBJTiBDT05ORUNUSU9OIFdJVEggVEhFIFNPRlRXQVJFIE9SIFRIRSBVU0UgT1IgT1RIRVIgREVBTElOR1MgSU5cbi8vICBUSEUgU09GVFdBUkUuXG5cbmltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmltcG9ydCB7IEJyZWFkY3J1bWJJdGVtIH0gZnJvbSBcIi4vcHVibGljLWFwaVwiO1xuXG4vLyA8ZXhhbXBsZS11cmw+Li8uLi9leGFtcGxlcy9pbmRleC5odG1sIy9icmVhZGNydW1iPC9leGFtcGxlLXVybD5cblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6IFwibnVpLWJyZWFkY3J1bWJcIixcbiAgICBzdHlsZVVybHM6IFtcIi4vYnJlYWRjcnVtYi5jb21wb25lbnQubGVzc1wiXSxcbiAgICB0ZW1wbGF0ZVVybDogXCIuL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWxcIixcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGhvc3Q6IHsgXCJbYXR0ci5hcmlhLWxhYmVsXVwiOiBcImFyaWFMYWJlbFwiIH0sXG59KVxuZXhwb3J0IGNsYXNzIEJyZWFkY3J1bWJDb21wb25lbnQge1xuICAgIEBJbnB1dCgpIGl0ZW1zOiBCcmVhZGNydW1iSXRlbVtdO1xuICAgIEBJbnB1dCgpIGFyaWFMYWJlbDogc3RyaW5nID0gXCJCcmVhZGNydW1iXCI7XG4gICAgQE91dHB1dCgpIG5hdmlnYXRpb24gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICAgIHB1YmxpYyBoYW5kbGVDbGljayhldmVudDogS2V5Ym9hcmRFdmVudCwgaXRlbTogQnJlYWRjcnVtYkl0ZW0pOiB2b2lkIHtcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcblxuICAgICAgICAvLyBXZSB3YW50IHRvIG9ubHkgaGFuZGxlIHRoZSBDUlRMICsgQ2xpY2sgZXZlbnQgc2VwYXJhdGVseSBiZWNhdXNlIE1pZGRsZSBNb3VzZSBjbGlja1xuICAgICAgICAvLyByZXF1aXJlcyBhIGRpZmZlcmVudCB3YXkgb2YgaGFuZGxpbmcgaXQsIGFuZCBzbyBpdCBkb2Vzbid0IGNvbmZsaWN0IHdpdGggdGhlIHJlZ3VsYXIgY2xpY2sgZXZlbnQuXG4gICAgICAgIGlmIChldmVudC5jdHJsS2V5KSB7XG4gICAgICAgICAgICBpZiAoaXRlbT8udXJsKSB7XG4gICAgICAgICAgICAgICAgLy8gVGhpcyBvcGVucyB0aGUgdXJsIGxpbmsgaW4gYSBuZXcgYnJvd3NlciB0YWJcbiAgICAgICAgICAgICAgICB3aW5kb3cub3BlbihpdGVtPy51cmwsIFwiX2JsYW5rXCIpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gV2Ugb25seSBuYXZpZ2F0ZSB0aGUgYW5ndWxhciByb3V0ZXIgb24gcmVndWxhciBjbGlja3NcbiAgICAgICAgdGhpcy5uYXZpZ2F0aW9uLmVtaXQoaXRlbS5yb3V0ZXJTdGF0ZSk7XG4gICAgfVxufVxuIiwiPGRpdlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsXCJcbiAgICBjbGFzcz1cIm51aS1icmVhZGNydW1iXCJcbiAgICAqbmdJZj1cIml0ZW1zPy5sZW5ndGggPiAxXCJcbj5cbiAgICA8c3BhblxuICAgICAgICBjbGFzcz1cIm51aS1icmVhZGNydW1iX193cmFwcGVyXCJcbiAgICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXM7IGxldCBpc0xhc3QgPSBsYXN0XCJcbiAgICA+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaXNMYXN0XCI+XG4gICAgICAgICAgICA8YVxuICAgICAgICAgICAgICAgIFthdHRyLmhyZWZdPVwiaXRlbT8udXJsXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cIm51aS1icmVhZGNydW1iX19jcnVtYiBudWktYnJlYWRjcnVtYl9fY3J1bWJfX2xpbmtcIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQsIGl0ZW0pXCJcbiAgICAgICAgICAgICAgICA+e3sgaXRlbS50aXRsZSB9fTwvYVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgPG51aS1pY29uXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJudWktYnJlYWRjcnVtYl9fY2FyZXQtaWNvblwiXG4gICAgICAgICAgICAgICAgaWNvbj1cImNhcmV0LXJpZ2h0XCJcbiAgICAgICAgICAgICAgICBpY29uQ29sb3I9XCJkaXNhYmxlZC1ncmF5XCJcbiAgICAgICAgICAgICAgICBpY29uU2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgID48L251aS1pY29uPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICpuZ0lmPVwiaXNMYXN0XCJcbiAgICAgICAgICAgIGFyaWEtY3VycmVudD1cInBhZ2VcIlxuICAgICAgICAgICAgY2xhc3M9XCJudWktYnJlYWRjcnVtYl9fY3J1bWIgbnVpLWJyZWFkY3J1bWJfX2NydW1iLWN1cnJlbnQtbGV2ZWxcIlxuICAgICAgICAgICAgPnt7IGl0ZW0udGl0bGUgfX08L3NwYW5cbiAgICAgICAgPlxuICAgIDwvc3Bhbj5cbjwvZGl2PlxuIl19