carbon-components-angular
Version:
Next generation components
116 lines • 11.6 kB
JavaScript
import { Component, Input, Optional, EventEmitter, Output, HostBinding } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
/**
* Individual item in the header. May be used a direct child of `HeaderNavigation` or `HeaderMenu`
*/
export class HeaderItem {
constructor(domSanitizer, router) {
this.domSanitizer = domSanitizer;
this.router = router;
this.role = "listitem";
/**
* Use the routerLink attribute on <a> tag for navigation instead of using event handlers
*/
this.useRouter = false;
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new EventEmitter();
this._href = "#";
}
set href(v) {
// Needed when component is created dynamically with a model.
if (v === undefined) {
return;
}
this._href = v;
}
get href() {
return this.domSanitizer.bypassSecurityTrustUrl(this._href);
}
navigate(event) {
if (this.router && this.route) {
event.preventDefault();
const status = this.router.navigate(this.route, this.routeExtras);
this.navigation.emit(status);
}
else if (this._href === "#") {
event.preventDefault();
}
}
}
HeaderItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderItem, deps: [{ token: i1.DomSanitizer }, { token: i2.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
HeaderItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeaderItem, selector: "cds-header-item, ibm-header-item", inputs: { href: "href", useRouter: "useRouter", activeLinkClass: "activeLinkClass", isCurrentPage: "isCurrentPage", route: "route", routeExtras: "routeExtras" }, outputs: { navigation: "navigation" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0, template: `
<ng-container [ngSwitch]="useRouter">
<ng-template #content><ng-content></ng-content></ng-template>
<a
*ngSwitchCase="false"
class="cds--header__menu-item"
tabindex="0"
[ngClass]="{'cds--header__menu-item--current' : isCurrentPage}"
[href]="href"
(click)="navigate($event)">
<ng-container *ngTemplateOutlet="content"></ng-container>
</a>
<a
*ngSwitchCase="true"
class="cds--header__menu-item"
[routerLinkActive]="['cds--header__menu-item--current']"
tabindex="0"
[ngClass]="{'cds--header__menu-item--current' : isCurrentPage}"
[routerLink]="route"
[routerLinkActive]="activeLinkClass">
<ng-container *ngTemplateOutlet="content"></ng-container>
</a>
</ng-container>
`, isInline: true, styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderItem, decorators: [{
type: Component,
args: [{ selector: "cds-header-item, ibm-header-item", template: `
<ng-container [ngSwitch]="useRouter">
<ng-template #content><ng-content></ng-content></ng-template>
<a
*ngSwitchCase="false"
class="cds--header__menu-item"
tabindex="0"
[ngClass]="{'cds--header__menu-item--current' : isCurrentPage}"
[href]="href"
(click)="navigate($event)">
<ng-container *ngTemplateOutlet="content"></ng-container>
</a>
<a
*ngSwitchCase="true"
class="cds--header__menu-item"
[routerLinkActive]="['cds--header__menu-item--current']"
tabindex="0"
[ngClass]="{'cds--header__menu-item--current' : isCurrentPage}"
[routerLink]="route"
[routerLinkActive]="activeLinkClass">
<ng-container *ngTemplateOutlet="content"></ng-container>
</a>
</ng-container>
`, styles: [":host{display:list-item}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i2.Router, decorators: [{
type: Optional
}] }]; }, propDecorators: { role: [{
type: HostBinding,
args: ["attr.role"]
}], href: [{
type: Input
}], useRouter: [{
type: Input
}], activeLinkClass: [{
type: Input
}], isCurrentPage: [{
type: Input
}], route: [{
type: Input
}], routeExtras: [{
type: Input
}], navigation: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3VpLXNoZWxsL2hlYWRlci9oZWFkZXItaXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxFQUNSLFlBQVksRUFDWixNQUFNLEVBQ04sV0FBVyxFQUNYLE1BQU0sZUFBZSxDQUFDOzs7OztBQUl2Qjs7R0FFRztBQWlDSCxNQUFNLE9BQU8sVUFBVTtJQWdEdEIsWUFBc0IsWUFBMEIsRUFBd0IsTUFBYztRQUFoRSxpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUF3QixXQUFNLEdBQU4sTUFBTSxDQUFRO1FBL0M1RCxTQUFJLEdBQUcsVUFBVSxDQUFDO1FBYTVDOztXQUVHO1FBQ00sY0FBUyxHQUFHLEtBQUssQ0FBQztRQXdCM0I7O1dBRUc7UUFDTyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7UUFFbEQsVUFBSyxHQUFHLEdBQUcsQ0FBQztJQUVvRSxDQUFDO0lBOUMzRixJQUFhLElBQUksQ0FBQyxDQUFTO1FBQzFCLDZEQUE2RDtRQUM3RCxJQUFJLENBQUMsS0FBSyxTQUFTLEVBQUU7WUFDcEIsT0FBTztTQUNQO1FBQ0QsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDaEIsQ0FBQztJQUVELElBQUksSUFBSTtRQUNQLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFXLENBQUM7SUFDdkUsQ0FBQztJQXNDRCxRQUFRLENBQUMsS0FBSztRQUNiLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQzlCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztZQUNsRSxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUM3QjthQUFNLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxHQUFHLEVBQUU7WUFDOUIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3ZCO0lBQ0YsQ0FBQzs7dUdBMURXLFVBQVU7MkZBQVYsVUFBVSxxVUE5Qlo7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBdUJUOzJGQU9XLFVBQVU7a0JBaEN0QixTQUFTOytCQUNDLGtDQUFrQyxZQUNsQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUF1QlQ7OzBCQXVEa0QsUUFBUTs0Q0EvQ2pDLElBQUk7c0JBQTdCLFdBQVc7dUJBQUMsV0FBVztnQkFDWCxJQUFJO3NCQUFoQixLQUFLO2dCQWVHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBS0csZUFBZTtzQkFBdkIsS0FBSztnQkFLRyxhQUFhO3NCQUFyQixLQUFLO2dCQU1HLEtBQUs7c0JBQWIsS0FBSztnQkFNRyxXQUFXO3NCQUFuQixLQUFLO2dCQUtJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDb21wb25lbnQsXG5cdElucHV0LFxuXHRPcHRpb25hbCxcblx0RXZlbnRFbWl0dGVyLFxuXHRPdXRwdXQsXG5cdEhvc3RCaW5kaW5nXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIgfSBmcm9tIFwiQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3NlclwiO1xuaW1wb3J0IHsgUm91dGVyIH0gZnJvbSBcIkBhbmd1bGFyL3JvdXRlclwiO1xuXG4vKipcbiAqIEluZGl2aWR1YWwgaXRlbSBpbiB0aGUgaGVhZGVyLiBNYXkgYmUgdXNlZCBhIGRpcmVjdCBjaGlsZCBvZiBgSGVhZGVyTmF2aWdhdGlvbmAgb3IgYEhlYWRlck1lbnVgXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtaGVhZGVyLWl0ZW0sIGlibS1oZWFkZXItaXRlbVwiLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cInVzZVJvdXRlclwiPlxuXHRcdFx0PG5nLXRlbXBsYXRlICNjb250ZW50PjxuZy1jb250ZW50PjwvbmctY29udGVudD48L25nLXRlbXBsYXRlPlxuXHRcdFx0PGFcblx0XHRcdFx0Km5nU3dpdGNoQ2FzZT1cImZhbHNlXCJcblx0XHRcdFx0Y2xhc3M9XCJjZHMtLWhlYWRlcl9fbWVudS1pdGVtXCJcblx0XHRcdFx0dGFiaW5kZXg9XCIwXCJcblx0XHRcdFx0W25nQ2xhc3NdPVwieydjZHMtLWhlYWRlcl9fbWVudS1pdGVtLS1jdXJyZW50JyA6IGlzQ3VycmVudFBhZ2V9XCJcblx0XHRcdFx0W2hyZWZdPVwiaHJlZlwiXG5cdFx0XHRcdChjbGljayk9XCJuYXZpZ2F0ZSgkZXZlbnQpXCI+XG5cdFx0XHRcdDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50XCI+PC9uZy1jb250YWluZXI+XG5cdFx0XHQ8L2E+XG5cdFx0XHQ8YVxuXHRcdFx0XHQqbmdTd2l0Y2hDYXNlPVwidHJ1ZVwiXG5cdFx0XHRcdGNsYXNzPVwiY2RzLS1oZWFkZXJfX21lbnUtaXRlbVwiXG5cdFx0XHRcdFtyb3V0ZXJMaW5rQWN0aXZlXT1cIlsnY2RzLS1oZWFkZXJfX21lbnUtaXRlbS0tY3VycmVudCddXCJcblx0XHRcdFx0dGFiaW5kZXg9XCIwXCJcblx0XHRcdFx0W25nQ2xhc3NdPVwieydjZHMtLWhlYWRlcl9fbWVudS1pdGVtLS1jdXJyZW50JyA6IGlzQ3VycmVudFBhZ2V9XCJcblx0XHRcdFx0W3JvdXRlckxpbmtdPVwicm91dGVcIlxuXHRcdFx0XHRbcm91dGVyTGlua0FjdGl2ZV09XCJhY3RpdmVMaW5rQ2xhc3NcIj5cblx0XHRcdFx0PG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cblx0XHRcdDwvYT5cblx0XHQ8L25nLWNvbnRhaW5lcj5cblx0YCxcblx0c3R5bGVzOiBbYFxuXHRcdDpob3N0IHtcblx0XHRcdGRpc3BsYXk6IGxpc3QtaXRlbTtcblx0XHR9XG5cdGBdXG59KVxuZXhwb3J0IGNsYXNzIEhlYWRlckl0ZW0ge1xuXHRASG9zdEJpbmRpbmcoXCJhdHRyLnJvbGVcIikgcm9sZSA9IFwibGlzdGl0ZW1cIjtcblx0QElucHV0KCkgc2V0IGhyZWYodjogc3RyaW5nKSB7XG5cdFx0Ly8gTmVlZGVkIHdoZW4gY29tcG9uZW50IGlzIGNyZWF0ZWQgZHluYW1pY2FsbHkgd2l0aCBhIG1vZGVsLlxuXHRcdGlmICh2ID09PSB1bmRlZmluZWQpIHtcblx0XHRcdHJldHVybjtcblx0XHR9XG5cdFx0dGhpcy5faHJlZiA9IHY7XG5cdH1cblxuXHRnZXQgaHJlZigpIHtcblx0XHRyZXR1cm4gdGhpcy5kb21TYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFVybCh0aGlzLl9ocmVmKSBhcyBzdHJpbmc7XG5cdH1cblxuXHQvKipcblx0ICogVXNlIHRoZSByb3V0ZXJMaW5rIGF0dHJpYnV0ZSBvbiA8YT4gdGFnIGZvciBuYXZpZ2F0aW9uIGluc3RlYWQgb2YgdXNpbmcgZXZlbnQgaGFuZGxlcnNcblx0ICovXG5cdEBJbnB1dCgpIHVzZVJvdXRlciA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBTdHJpbmcgb3IgYXJyYXkgb2Ygc3RyaW5nIGNsYXNzIG5hbWVzIHRvIGFwcGx5IHdoZW4gYWN0aXZlXG5cdCAqL1xuXHRASW5wdXQoKSBhY3RpdmVMaW5rQ2xhc3M6IHN0cmluZyB8IHN0cmluZ1tdO1xuXG5cdC8qKlxuXHQgKiBBcHBsaWVzIHNlbGVjdGVkIHN0eWxlcyB0byB0aGUgaXRlbSBpZiBhIHVzZXIgc2V0cyB0aGlzIHRvIHRydWUuXG5cdCAqL1xuXHRASW5wdXQoKSBpc0N1cnJlbnRQYWdlOiBib29sZWFuO1xuXG5cdC8qKlxuXHQgKiBBcnJheSBvZiBjb21tYW5kcyB0byBzZW5kIHRvIHRoZSByb3V0ZXIgd2hlbiB0aGUgbGluayBpcyBhY3RpdmF0ZWRcblx0ICogU2VlOiBodHRwczovL2FuZ3VsYXIuaW8vYXBpL3JvdXRlci9Sb3V0ZXIjbmF2aWdhdGVcblx0ICovXG5cdEBJbnB1dCgpIHJvdXRlOiBhbnlbXTtcblxuXHQvKipcblx0ICogUm91dGVyIG9wdGlvbnMuIFVzZWQgaW4gY29uanVuY3Rpb24gd2l0aCBgcm91dGVgXG5cdCAqIFNlZTogaHR0cHM6Ly9hbmd1bGFyLmlvL2FwaS9yb3V0ZXIvUm91dGVyI25hdmlnYXRlXG5cdCAqL1xuXHRASW5wdXQoKSByb3V0ZUV4dHJhczogYW55O1xuXG5cdC8qKlxuXHQgKiBFbWl0cyB0aGUgbmF2aWdhdGlvbiBzdGF0dXMgcHJvbWlzZSB3aGVuIHRoZSBsaW5rIGlzIGFjdGl2YXRlZFxuXHQgKi9cblx0QE91dHB1dCgpIG5hdmlnYXRpb24gPSBuZXcgRXZlbnRFbWl0dGVyPFByb21pc2U8Ym9vbGVhbj4+KCk7XG5cblx0cHJvdGVjdGVkIF9ocmVmID0gXCIjXCI7XG5cblx0Y29uc3RydWN0b3IocHJvdGVjdGVkIGRvbVNhbml0aXplcjogRG9tU2FuaXRpemVyLCBAT3B0aW9uYWwoKSBwcm90ZWN0ZWQgcm91dGVyOiBSb3V0ZXIpIHsgfVxuXG5cdG5hdmlnYXRlKGV2ZW50KSB7XG5cdFx0aWYgKHRoaXMucm91dGVyICYmIHRoaXMucm91dGUpIHtcblx0XHRcdGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG5cdFx0XHRjb25zdCBzdGF0dXMgPSB0aGlzLnJvdXRlci5uYXZpZ2F0ZSh0aGlzLnJvdXRlLCB0aGlzLnJvdXRlRXh0cmFzKTtcblx0XHRcdHRoaXMubmF2aWdhdGlvbi5lbWl0KHN0YXR1cyk7XG5cdFx0fSBlbHNlIGlmICh0aGlzLl9ocmVmID09PSBcIiNcIikge1xuXHRcdFx0ZXZlbnQucHJldmVudERlZmF1bHQoKTtcblx0XHR9XG5cdH1cbn1cbiJdfQ==