carbon-components-angular
Version:
Next generation components
143 lines • 12.4 kB
JavaScript
import { Component, Input, HostListener, HostBinding } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "@angular/common";
import * as i3 from "./header-item.component";
/**
* Dropdown menu container for navigation items.
*/
export class HeaderMenu {
constructor(domSanitizer, elementRef) {
this.domSanitizer = domSanitizer;
this.elementRef = elementRef;
this.subMenu = true;
this.role = "listitem";
this.trigger = "click";
this.expanded = false;
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);
}
onClick() {
if (this.trigger === "click") {
this.expanded = !this.expanded;
}
}
onMouseOver() {
if (this.trigger === "mouseover") {
this.expanded = true;
}
}
onMouseOut() {
if (this.trigger === "mouseover") {
this.expanded = false;
}
}
onFocusOut(event) {
if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
this.expanded = false;
}
}
navigate(event) {
if (this._href === "#") {
event.preventDefault();
}
}
}
HeaderMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderMenu, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
HeaderMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeaderMenu, selector: "cds-header-menu, ibm-header-menu", inputs: { title: "title", href: "href", trigger: "trigger", headerItems: "headerItems", icon: "icon" }, host: { listeners: { "click": "onClick()", "mouseover": "onMouseOver()", "mouseout": "onMouseOut()", "focusout": "onFocusOut($event)" }, properties: { "class.cds--header__submenu": "this.subMenu", "attr.role": "this.role" } }, ngImport: i0, template: `
<a
class="cds--header__menu-item cds--header__menu-title"
[href]="href"
tabindex="0"
aria-haspopup="menu"
[attr.aria-expanded]="expanded"
(click)="navigate($event)">
{{title}}
<ng-template *ngIf="icon; else defaultIcon" [ngTemplateOutlet]="icon"></ng-template>
<ng-template #defaultIcon>
<svg class="cds--header__menu-arrow" width="12" height="7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
</svg>
</ng-template>
</a>
<div class="cds--header__menu" [attr.aria-label]="title">
<ng-content></ng-content>
<ng-container *ngFor="let headerItem of headerItems">
<cds-header-item
[href]="headerItem.href"
[route]="headerItem.route"
[routeExtras]="headerItem.routeExtras">
{{ headerItem.content }}
</cds-header-item>
</ng-container>
</div>
`, isInline: true, styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.HeaderItem, selector: "cds-header-item, ibm-header-item", inputs: ["href", "useRouter", "activeLinkClass", "isCurrentPage", "route", "routeExtras"], outputs: ["navigation"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderMenu, decorators: [{
type: Component,
args: [{ selector: "cds-header-menu, ibm-header-menu", template: `
<a
class="cds--header__menu-item cds--header__menu-title"
[href]="href"
tabindex="0"
aria-haspopup="menu"
[attr.aria-expanded]="expanded"
(click)="navigate($event)">
{{title}}
<ng-template *ngIf="icon; else defaultIcon" [ngTemplateOutlet]="icon"></ng-template>
<ng-template #defaultIcon>
<svg class="cds--header__menu-arrow" width="12" height="7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
</svg>
</ng-template>
</a>
<div class="cds--header__menu" [attr.aria-label]="title">
<ng-content></ng-content>
<ng-container *ngFor="let headerItem of headerItems">
<cds-header-item
[href]="headerItem.href"
[route]="headerItem.route"
[routeExtras]="headerItem.routeExtras">
{{ headerItem.content }}
</cds-header-item>
</ng-container>
</div>
`, styles: [":host{display:list-item}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ElementRef }]; }, propDecorators: { subMenu: [{
type: HostBinding,
args: ["class.cds--header__submenu"]
}], role: [{
type: HostBinding,
args: ["attr.role"]
}], title: [{
type: Input
}], href: [{
type: Input
}], trigger: [{
type: Input
}], headerItems: [{
type: Input
}], icon: [{
type: Input
}], onClick: [{
type: HostListener,
args: ["click"]
}], onMouseOver: [{
type: HostListener,
args: ["mouseover"]
}], onMouseOut: [{
type: HostListener,
args: ["mouseout"]
}], onFocusOut: [{
type: HostListener,
args: ["focusout", ["$event"]]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3VpLXNoZWxsL2hlYWRlci9oZWFkZXItbWVudS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxLQUFLLEVBQ0wsWUFBWSxFQUdaLFdBQVcsRUFDWCxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFJdkI7O0dBRUc7QUFxQ0gsTUFBTSxPQUFPLFVBQVU7SUFnQ3RCLFlBQXNCLFlBQTBCLEVBQVksVUFBc0I7UUFBNUQsaUJBQVksR0FBWixZQUFZLENBQWM7UUFBWSxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBL0J2QyxZQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ2hDLFNBQUksR0FBRyxVQUFVLENBQUM7UUFjbkMsWUFBTyxHQUEwQixPQUFPLENBQUM7UUFZM0MsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVkLFVBQUssR0FBRyxHQUFHLENBQUM7SUFFZ0UsQ0FBQztJQTNCdkYsSUFBYSxJQUFJLENBQUMsQ0FBUztRQUMxQiw2REFBNkQ7UUFDN0QsSUFBSSxDQUFDLEtBQUssU0FBUyxFQUFFO1lBQ3BCLE9BQU87U0FDUDtRQUNELElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO0lBQ2hCLENBQUM7SUFFRCxJQUFJLElBQUk7UUFDUCxPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsc0JBQXNCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBVyxDQUFDO0lBQ3ZFLENBQUM7SUFvQkQsT0FBTztRQUNOLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxPQUFPLEVBQUU7WUFDN0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7U0FDL0I7SUFDRixDQUFDO0lBR0QsV0FBVztRQUNWLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxXQUFXLEVBQUU7WUFDakMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7U0FDckI7SUFDRixDQUFDO0lBR0QsVUFBVTtRQUNULElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxXQUFXLEVBQUU7WUFDakMsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7U0FDdEI7SUFDRixDQUFDO0lBR0QsVUFBVSxDQUFDLEtBQUs7UUFDZixJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsRUFBRTtZQUNqRSxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztTQUN0QjtJQUNGLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBSztRQUNiLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxHQUFHLEVBQUU7WUFDdkIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3ZCO0lBQ0YsQ0FBQzs7dUdBbEVXLFVBQVU7MkZBQVYsVUFBVSxtWkFsQ1o7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQTJCVDsyRkFPVyxVQUFVO2tCQXBDdEIsU0FBUzsrQkFDQyxrQ0FBa0MsWUFDbEM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQTJCVDs0SEFRMEMsT0FBTztzQkFBakQsV0FBVzt1QkFBQyw0QkFBNEI7Z0JBQ2YsSUFBSTtzQkFBN0IsV0FBVzt1QkFBQyxXQUFXO2dCQUVmLEtBQUs7c0JBQWIsS0FBSztnQkFDTyxJQUFJO3NCQUFoQixLQUFLO2dCQVdHLE9BQU87c0JBQWYsS0FBSztnQkFLRyxXQUFXO3NCQUFuQixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFTTixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTztnQkFRckIsV0FBVztzQkFEVixZQUFZO3VCQUFDLFdBQVc7Z0JBUXpCLFVBQVU7c0JBRFQsWUFBWTt1QkFBQyxVQUFVO2dCQVF4QixVQUFVO3NCQURULFlBQVk7dUJBQUMsVUFBVSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRJbnB1dCxcblx0SG9zdExpc3RlbmVyLFxuXHRFbGVtZW50UmVmLFxuXHRUZW1wbGF0ZVJlZixcblx0SG9zdEJpbmRpbmdcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IERvbVNhbml0aXplciB9IGZyb20gXCJAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyXCI7XG5pbXBvcnQgeyBIZWFkZXJJdGVtSW50ZXJmYWNlIH0gZnJvbSBcIi4vaGVhZGVyLW5hdmlnYXRpb24taXRlbXMuaW50ZXJmYWNlXCI7XG5cbi8qKlxuICogRHJvcGRvd24gbWVudSBjb250YWluZXIgZm9yIG5hdmlnYXRpb24gaXRlbXMuXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtaGVhZGVyLW1lbnUsIGlibS1oZWFkZXItbWVudVwiLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxhXG5cdFx0XHRjbGFzcz1cImNkcy0taGVhZGVyX19tZW51LWl0ZW0gY2RzLS1oZWFkZXJfX21lbnUtdGl0bGVcIlxuXHRcdFx0W2hyZWZdPVwiaHJlZlwiXG5cdFx0XHR0YWJpbmRleD1cIjBcIlxuXHRcdFx0YXJpYS1oYXNwb3B1cD1cIm1lbnVcIlxuXHRcdFx0W2F0dHIuYXJpYS1leHBhbmRlZF09XCJleHBhbmRlZFwiXG5cdFx0XHQoY2xpY2spPVwibmF2aWdhdGUoJGV2ZW50KVwiPlxuXHRcdFx0e3t0aXRsZX19XG5cdFx0XHQ8bmctdGVtcGxhdGUgKm5nSWY9XCJpY29uOyBlbHNlIGRlZmF1bHRJY29uXCIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaWNvblwiPjwvbmctdGVtcGxhdGU+XG5cdFx0XHQ8bmctdGVtcGxhdGUgI2RlZmF1bHRJY29uPlxuXHRcdFx0XHQ8c3ZnIGNsYXNzPVwiY2RzLS1oZWFkZXJfX21lbnUtYXJyb3dcIiB3aWR0aD1cIjEyXCIgaGVpZ2h0PVwiN1wiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuXHRcdFx0XHRcdDxwYXRoIGQ9XCJNNi4wMDIgNS41NUwxMS4yNyAwbC43MjYuNjg1TDYuMDAzIDcgMCAuNjg1LjcyNiAwelwiIC8+XG5cdFx0XHRcdDwvc3ZnPlxuXHRcdFx0PC9uZy10ZW1wbGF0ZT5cblx0XHQ8L2E+XG5cdFx0PGRpdiBjbGFzcz1cImNkcy0taGVhZGVyX19tZW51XCIgW2F0dHIuYXJpYS1sYWJlbF09XCJ0aXRsZVwiPlxuXHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdFx0PG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaGVhZGVySXRlbSBvZiBoZWFkZXJJdGVtc1wiPlxuXHRcdFx0XHQ8Y2RzLWhlYWRlci1pdGVtXG5cdFx0XHRcdFx0W2hyZWZdPVwiaGVhZGVySXRlbS5ocmVmXCJcblx0XHRcdFx0XHRbcm91dGVdPVwiaGVhZGVySXRlbS5yb3V0ZVwiXG5cdFx0XHRcdFx0W3JvdXRlRXh0cmFzXT1cImhlYWRlckl0ZW0ucm91dGVFeHRyYXNcIj5cblx0XHRcdFx0XHR7eyBoZWFkZXJJdGVtLmNvbnRlbnQgfX1cblx0XHRcdFx0PC9jZHMtaGVhZGVyLWl0ZW0+XG5cdFx0XHQ8L25nLWNvbnRhaW5lcj5cblx0XHQ8L2Rpdj5cblx0YCxcblx0c3R5bGVzOiBbYFxuXHRcdDpob3N0IHtcblx0XHRcdGRpc3BsYXk6IGxpc3QtaXRlbTtcblx0XHR9XG5cdGBdXG59KVxuZXhwb3J0IGNsYXNzIEhlYWRlck1lbnUge1xuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWhlYWRlcl9fc3VibWVudVwiKSBzdWJNZW51ID0gdHJ1ZTtcblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5yb2xlXCIpIHJvbGUgPSBcImxpc3RpdGVtXCI7XG5cblx0QElucHV0KCkgdGl0bGU6IHN0cmluZztcblx0QElucHV0KCkgc2V0IGhyZWYodjogc3RyaW5nKSB7XG5cdFx0Ly8gTmVlZGVkIHdoZW4gY29tcG9uZW50IGlzIGNyZWF0ZWQgZHluYW1pY2FsbHkgd2l0aCBhIG1vZGVsLlxuXHRcdGlmICh2ID09PSB1bmRlZmluZWQpIHtcblx0XHRcdHJldHVybjtcblx0XHR9XG5cdFx0dGhpcy5faHJlZiA9IHY7XG5cdH1cblxuXHRnZXQgaHJlZigpIHtcblx0XHRyZXR1cm4gdGhpcy5kb21TYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFVybCh0aGlzLl9ocmVmKSBhcyBzdHJpbmc7XG5cdH1cblx0QElucHV0KCkgdHJpZ2dlcjogXCJjbGlja1wiIHwgXCJtb3VzZW92ZXJcIiA9IFwiY2xpY2tcIjtcblxuXHQvKipcblx0ICogVXNlZCB0byBjcmVhdGUgaGVhZGVyIGl0ZW1zIHRocm91Z2ggYSBtb2RlbC5cblx0ICovXG5cdEBJbnB1dCgpIGhlYWRlckl0ZW1zOiBIZWFkZXJJdGVtSW50ZXJmYWNlW107XG5cblx0LyoqXG5cdCAqIE9wdGlvbmFsIGljb25cblx0ICovXG5cdEBJbnB1dCgpIGljb246IFRlbXBsYXRlUmVmPGFueT47XG5cblx0cHVibGljIGV4cGFuZGVkID0gZmFsc2U7XG5cblx0cHJvdGVjdGVkIF9ocmVmID0gXCIjXCI7XG5cblx0Y29uc3RydWN0b3IocHJvdGVjdGVkIGRvbVNhbml0aXplcjogRG9tU2FuaXRpemVyLCBwcm90ZWN0ZWQgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XG5cblx0QEhvc3RMaXN0ZW5lcihcImNsaWNrXCIpXG5cdG9uQ2xpY2soKSB7XG5cdFx0aWYgKHRoaXMudHJpZ2dlciA9PT0gXCJjbGlja1wiKSB7XG5cdFx0XHR0aGlzLmV4cGFuZGVkID0gIXRoaXMuZXhwYW5kZWQ7XG5cdFx0fVxuXHR9XG5cblx0QEhvc3RMaXN0ZW5lcihcIm1vdXNlb3ZlclwiKVxuXHRvbk1vdXNlT3ZlcigpIHtcblx0XHRpZiAodGhpcy50cmlnZ2VyID09PSBcIm1vdXNlb3ZlclwiKSB7XG5cdFx0XHR0aGlzLmV4cGFuZGVkID0gdHJ1ZTtcblx0XHR9XG5cdH1cblxuXHRASG9zdExpc3RlbmVyKFwibW91c2VvdXRcIilcblx0b25Nb3VzZU91dCgpIHtcblx0XHRpZiAodGhpcy50cmlnZ2VyID09PSBcIm1vdXNlb3ZlclwiKSB7XG5cdFx0XHR0aGlzLmV4cGFuZGVkID0gZmFsc2U7XG5cdFx0fVxuXHR9XG5cblx0QEhvc3RMaXN0ZW5lcihcImZvY3Vzb3V0XCIsIFtcIiRldmVudFwiXSlcblx0b25Gb2N1c091dChldmVudCkge1xuXHRcdGlmICghdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY29udGFpbnMoZXZlbnQucmVsYXRlZFRhcmdldCkpIHtcblx0XHRcdHRoaXMuZXhwYW5kZWQgPSBmYWxzZTtcblx0XHR9XG5cdH1cblxuXHRuYXZpZ2F0ZShldmVudCkge1xuXHRcdGlmICh0aGlzLl9ocmVmID09PSBcIiNcIikge1xuXHRcdFx0ZXZlbnQucHJldmVudERlZmF1bHQoKTtcblx0XHR9XG5cdH1cbn1cbiJdfQ==