carbon-components-angular
Version:
Next generation components
153 lines • 12.7 kB
JavaScript
import { Component, Input, Optional, Output, EventEmitter, TemplateRef } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular/i18n";
import * as i2 from "@angular/platform-browser";
import * as i3 from "@angular/router";
import * as i4 from "@angular/common";
/**
* A fixed header and navigation.
* Header may contain a Hamburger menu to toggle the side navigation, navigation actions,
* and global actions (generally in the form of `Panel`s).
*
* [See demo](../../?path=/story/components-ui-shell--header)
*/
export class Header {
constructor(i18n, domSanitizer, router) {
this.i18n = i18n;
this.domSanitizer = domSanitizer;
this.router = router;
/**
* Top level branding. Defaults to "IBM"
*/
this.brand = "IBM";
/**
* 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 = "#";
}
/**
* Optional link for the header
*/
set href(v) {
this._href = v;
}
get href() {
return this.domSanitizer.bypassSecurityTrustUrl(this._href);
}
isTemplate(value) {
return value instanceof TemplateRef;
}
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();
}
}
}
Header.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Header, deps: [{ token: i1.I18n }, { token: i2.DomSanitizer }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
Header.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Header, selector: "cds-header, ibm-header", inputs: { skipTo: "skipTo", name: "name", brand: "brand", href: "href", route: "route", routeExtras: "routeExtras", useRouter: "useRouter" }, outputs: { navigation: "navigation" }, ngImport: i0, template: `
<header
class="cds--header"
[attr.aria-label]="brand + ' ' + name">
<a
*ngIf="skipTo"
class="cds--skip-to-content"
[href]="skipTo"
tabindex="0">
{{ i18n.get("UI_SHELL.SKIP_TO") | async }}
</a>
<ng-content select="cds-hamburger,ibm-hamburger"></ng-content>
<ng-template
*ngIf="isTemplate(brand)"
[ngTemplateOutlet]="brand">
</ng-template>
<ng-container *ngIf="!isTemplate(brand)" [ngSwitch]="useRouter">
<a
*ngSwitchCase="false"
class="cds--header__name"
[href]="href"
(click)="navigate($event)">
<span class="cds--header__name--prefix">{{brand}} </span>
{{name}}
</a>
<a
*ngSwitchCase="true"
class="cds--header__name"
[routerLink]="route">
<span class="cds--header__name--prefix">{{brand}} </span>
{{name}}
</a>
</ng-container>
<ng-content></ng-content>
</header>
`, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Header, decorators: [{
type: Component,
args: [{
selector: "cds-header, ibm-header",
template: `
<header
class="cds--header"
[attr.aria-label]="brand + ' ' + name">
<a
*ngIf="skipTo"
class="cds--skip-to-content"
[href]="skipTo"
tabindex="0">
{{ i18n.get("UI_SHELL.SKIP_TO") | async }}
</a>
<ng-content select="cds-hamburger,ibm-hamburger"></ng-content>
<ng-template
*ngIf="isTemplate(brand)"
[ngTemplateOutlet]="brand">
</ng-template>
<ng-container *ngIf="!isTemplate(brand)" [ngSwitch]="useRouter">
<a
*ngSwitchCase="false"
class="cds--header__name"
[href]="href"
(click)="navigate($event)">
<span class="cds--header__name--prefix">{{brand}} </span>
{{name}}
</a>
<a
*ngSwitchCase="true"
class="cds--header__name"
[routerLink]="route">
<span class="cds--header__name--prefix">{{brand}} </span>
{{name}}
</a>
</ng-container>
<ng-content></ng-content>
</header>
`
}]
}], ctorParameters: function () { return [{ type: i1.I18n }, { type: i2.DomSanitizer }, { type: i3.Router, decorators: [{
type: Optional
}] }]; }, propDecorators: { skipTo: [{
type: Input
}], name: [{
type: Input
}], brand: [{
type: Input
}], href: [{
type: Input
}], route: [{
type: Input
}], routeExtras: [{
type: Input
}], useRouter: [{
type: Input
}], navigation: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy91aS1zaGVsbC9oZWFkZXIvaGVhZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxRQUFRLEVBQ1IsTUFBTSxFQUNOLFlBQVksRUFDWixXQUFXLEVBQ1gsTUFBTSxlQUFlLENBQUM7Ozs7OztBQUt2Qjs7Ozs7O0dBTUc7QUF3Q0gsTUFBTSxPQUFPLE1BQU07SUFnRGxCLFlBQ1EsSUFBVSxFQUNQLFlBQTBCLEVBQ2QsTUFBYztRQUY3QixTQUFJLEdBQUosSUFBSSxDQUFNO1FBQ1AsaUJBQVksR0FBWixZQUFZLENBQWM7UUFDZCxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBMUNyQzs7V0FFRztRQUNNLFVBQUssR0FBOEIsS0FBSyxDQUFDO1FBd0JsRDs7V0FFRztRQUNNLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFFM0I7O1dBRUc7UUFDTyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7UUFFbEQsVUFBSyxHQUFHLEdBQUcsQ0FBQztJQUttQixDQUFDO0lBdEMxQzs7T0FFRztJQUNILElBQWEsSUFBSSxDQUFDLENBQVM7UUFDMUIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDaEIsQ0FBQztJQUVELElBQUksSUFBSTtRQUNQLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFXLENBQUM7SUFDdkUsQ0FBQztJQStCTSxVQUFVLENBQUMsS0FBSztRQUN0QixPQUFPLEtBQUssWUFBWSxXQUFXLENBQUM7SUFDckMsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFLO1FBQ2IsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDOUIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ2xFLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQzdCO2FBQU0sSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLEdBQUcsRUFBRTtZQUM5QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7U0FDdkI7SUFDRixDQUFDOzttR0FqRVcsTUFBTTt1RkFBTixNQUFNLG1QQXJDUjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFtQ1Q7MkZBRVcsTUFBTTtrQkF2Q2xCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdCQUF3QjtvQkFDbEMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQW1DVDtpQkFDRDs7MEJBb0RFLFFBQVE7NENBL0NELE1BQU07c0JBQWQsS0FBSztnQkFJRyxJQUFJO3NCQUFaLEtBQUs7Z0JBSUcsS0FBSztzQkFBYixLQUFLO2dCQUlPLElBQUk7c0JBQWhCLEtBQUs7Z0JBWUcsS0FBSztzQkFBYixLQUFLO2dCQU1HLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0csU0FBUztzQkFBakIsS0FBSztnQkFLSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRJbnB1dCxcblx0T3B0aW9uYWwsXG5cdE91dHB1dCxcblx0RXZlbnRFbWl0dGVyLFxuXHRUZW1wbGF0ZVJlZlxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyIH0gZnJvbSBcIkBhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXJcIjtcbmltcG9ydCB7IFJvdXRlciB9IGZyb20gXCJAYW5ndWxhci9yb3V0ZXJcIjtcbmltcG9ydCB7IEkxOG4gfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci9pMThuXCI7XG5cbi8qKlxuICogQSBmaXhlZCBoZWFkZXIgYW5kIG5hdmlnYXRpb24uXG4gKiBIZWFkZXIgbWF5IGNvbnRhaW4gYSBIYW1idXJnZXIgbWVudSB0byB0b2dnbGUgdGhlIHNpZGUgbmF2aWdhdGlvbiwgbmF2aWdhdGlvbiBhY3Rpb25zLFxuICogYW5kIGdsb2JhbCBhY3Rpb25zIChnZW5lcmFsbHkgaW4gdGhlIGZvcm0gb2YgYFBhbmVsYHMpLlxuICpcbiAqIFtTZWUgZGVtb10oLi4vLi4vP3BhdGg9L3N0b3J5L2NvbXBvbmVudHMtdWktc2hlbGwtLWhlYWRlcilcbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy1oZWFkZXIsIGlibS1oZWFkZXJcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8aGVhZGVyXG5cdFx0XHRjbGFzcz1cImNkcy0taGVhZGVyXCJcblx0XHRcdFthdHRyLmFyaWEtbGFiZWxdPVwiYnJhbmQgKyAnICcgKyBuYW1lXCI+XG5cdFx0XHQ8YVxuXHRcdFx0XHQqbmdJZj1cInNraXBUb1wiXG5cdFx0XHRcdGNsYXNzPVwiY2RzLS1za2lwLXRvLWNvbnRlbnRcIlxuXHRcdFx0XHRbaHJlZl09XCJza2lwVG9cIlxuXHRcdFx0XHR0YWJpbmRleD1cIjBcIj5cblx0XHRcdFx0e3sgaTE4bi5nZXQoXCJVSV9TSEVMTC5TS0lQX1RPXCIpIHwgYXN5bmMgfX1cblx0XHRcdDwvYT5cblx0XHRcdDxuZy1jb250ZW50IHNlbGVjdD1cImNkcy1oYW1idXJnZXIsaWJtLWhhbWJ1cmdlclwiPjwvbmctY29udGVudD5cblx0XHRcdDxuZy10ZW1wbGF0ZVxuXHRcdFx0XHQqbmdJZj1cImlzVGVtcGxhdGUoYnJhbmQpXCJcblx0XHRcdFx0W25nVGVtcGxhdGVPdXRsZXRdPVwiYnJhbmRcIj5cblx0XHRcdDwvbmctdGVtcGxhdGU+XG5cdFx0XHQ8bmctY29udGFpbmVyICpuZ0lmPVwiIWlzVGVtcGxhdGUoYnJhbmQpXCIgW25nU3dpdGNoXT1cInVzZVJvdXRlclwiPlxuXHRcdFx0XHQ8YVxuXHRcdFx0XHRcdCpuZ1N3aXRjaENhc2U9XCJmYWxzZVwiXG5cdFx0XHRcdFx0Y2xhc3M9XCJjZHMtLWhlYWRlcl9fbmFtZVwiXG5cdFx0XHRcdFx0W2hyZWZdPVwiaHJlZlwiXG5cdFx0XHRcdFx0KGNsaWNrKT1cIm5hdmlnYXRlKCRldmVudClcIj5cblx0XHRcdFx0XHQ8c3BhbiBjbGFzcz1cImNkcy0taGVhZGVyX19uYW1lLS1wcmVmaXhcIj57e2JyYW5kfX0mbmJzcDs8L3NwYW4+XG5cdFx0XHRcdFx0e3tuYW1lfX1cblx0XHRcdFx0PC9hPlxuXHRcdFx0XHQ8YVxuXHRcdFx0XHRcdCpuZ1N3aXRjaENhc2U9XCJ0cnVlXCJcblx0XHRcdFx0XHRjbGFzcz1cImNkcy0taGVhZGVyX19uYW1lXCJcblx0XHRcdFx0XHRbcm91dGVyTGlua109XCJyb3V0ZVwiPlxuXHRcdFx0XHRcdDxzcGFuIGNsYXNzPVwiY2RzLS1oZWFkZXJfX25hbWUtLXByZWZpeFwiPnt7YnJhbmR9fSZuYnNwOzwvc3Bhbj5cblx0XHRcdFx0XHR7e25hbWV9fVxuXHRcdFx0XHQ8L2E+XG5cdFx0XHQ8L25nLWNvbnRhaW5lcj5cblx0XHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHQ8L2hlYWRlcj5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBIZWFkZXIge1xuXHQvKipcblx0ICogSUQgaW4gdGhlIG1haW4gYm9keSBjb250ZW50IHRvIGp1bXAgdG8uIFVzZWQgYnkga2V5Ym9hcmQgYW5kIHNjcmVlbiByZWFkZXIgdXNlcnMgdG8gc2tpcCB0aGUgaGVhZGVyIGNvbnRlbnQuXG5cdCAqL1xuXHRASW5wdXQoKSBza2lwVG86IHN0cmluZztcblx0LyoqXG5cdCAqIExhYmVsIHRoYXQgc2hvd3MgdG8gdGhlIHJpZ2h0IG9mIHRoZSBgYnJhbmRgIHRleHQuIEdlbmVyYWxseSBhIHByb2R1Y3QgbmFtZS5cblx0ICovXG5cdEBJbnB1dCgpIG5hbWU6IHN0cmluZztcblx0LyoqXG5cdCAqIFRvcCBsZXZlbCBicmFuZGluZy4gRGVmYXVsdHMgdG8gXCJJQk1cIlxuXHQgKi9cblx0QElucHV0KCkgYnJhbmQ6IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT4gPSBcIklCTVwiO1xuXHQvKipcblx0ICogT3B0aW9uYWwgbGluayBmb3IgdGhlIGhlYWRlclxuXHQgKi9cblx0QElucHV0KCkgc2V0IGhyZWYodjogc3RyaW5nKSB7XG5cdFx0dGhpcy5faHJlZiA9IHY7XG5cdH1cblxuXHRnZXQgaHJlZigpIHtcblx0XHRyZXR1cm4gdGhpcy5kb21TYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFVybCh0aGlzLl9ocmVmKSBhcyBzdHJpbmc7XG5cdH1cblxuXHQvKipcblx0ICogQXJyYXkgb2YgY29tbWFuZHMgdG8gc2VuZCB0byB0aGUgcm91dGVyIHdoZW4gdGhlIGxpbmsgaXMgYWN0aXZhdGVkXG5cdCAqIFNlZTogaHR0cHM6Ly9hbmd1bGFyLmlvL2FwaS9yb3V0ZXIvUm91dGVyI25hdmlnYXRlXG5cdCAqL1xuXHRASW5wdXQoKSByb3V0ZTogYW55W107XG5cblx0LyoqXG5cdCAqIFJvdXRlciBvcHRpb25zLiBVc2VkIGluIGNvbmp1bmN0aW9uIHdpdGggYHJvdXRlYFxuXHQgKiBTZWU6IGh0dHBzOi8vYW5ndWxhci5pby9hcGkvcm91dGVyL1JvdXRlciNuYXZpZ2F0ZVxuXHQgKi9cblx0QElucHV0KCkgcm91dGVFeHRyYXM6IGFueTtcblxuXHQvKipcblx0ICogVXNlIHRoZSByb3V0ZXJMaW5rIGF0dHJpYnV0ZSBvbiA8YT4gdGFnIGZvciBuYXZpZ2F0aW9uIGluc3RlYWQgb2YgdXNpbmcgZXZlbnQgaGFuZGxlcnNcblx0ICovXG5cdEBJbnB1dCgpIHVzZVJvdXRlciA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBFbWl0cyB0aGUgbmF2aWdhdGlvbiBzdGF0dXMgcHJvbWlzZSB3aGVuIHRoZSBsaW5rIGlzIGFjdGl2YXRlZFxuXHQgKi9cblx0QE91dHB1dCgpIG5hdmlnYXRpb24gPSBuZXcgRXZlbnRFbWl0dGVyPFByb21pc2U8Ym9vbGVhbj4+KCk7XG5cblx0cHJvdGVjdGVkIF9ocmVmID0gXCIjXCI7XG5cblx0Y29uc3RydWN0b3IoXG5cdFx0cHVibGljIGkxOG46IEkxOG4sXG5cdFx0cHJvdGVjdGVkIGRvbVNhbml0aXplcjogRG9tU2FuaXRpemVyLFxuXHRcdEBPcHRpb25hbCgpIHByb3RlY3RlZCByb3V0ZXI6IFJvdXRlcikgeyB9XG5cblx0cHVibGljIGlzVGVtcGxhdGUodmFsdWUpIHtcblx0XHRyZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZjtcblx0fVxuXG5cdG5hdmlnYXRlKGV2ZW50KSB7XG5cdFx0aWYgKHRoaXMucm91dGVyICYmIHRoaXMucm91dGUpIHtcblx0XHRcdGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG5cdFx0XHRjb25zdCBzdGF0dXMgPSB0aGlzLnJvdXRlci5uYXZpZ2F0ZSh0aGlzLnJvdXRlLCB0aGlzLnJvdXRlRXh0cmFzKTtcblx0XHRcdHRoaXMubmF2aWdhdGlvbi5lbWl0KHN0YXR1cyk7XG5cdFx0fSBlbHNlIGlmICh0aGlzLl9ocmVmID09PSBcIiNcIikge1xuXHRcdFx0ZXZlbnQucHJldmVudERlZmF1bHQoKTtcblx0XHR9XG5cdH1cbn1cbiJdfQ==