@ux-aspects/ux-aspects/esm2022/components/page-header/navigation/navigation-dropdown-item/navigation-dropdown-item.component.mjs

Open source user interface framework for building modern, responsive, mobile big data applications

import { ENTER, SPACE } from '@angular/cdk/keycodes';
import { Component, inject, Input } from '@angular/core';
import { PageHeaderService } from '../../page-header.service';
import * as i0 from "@angular/core";
import * as i1 from "../../../icon/icon.component";
import * as i2 from "../../../menu/menu/menu.component";
import * as i3 from "../../../menu/menu-trigger/menu-trigger.directive";
import * as i4 from "../../../menu/menu-item/menu-item.component";
export class PageHeaderNavigationDropdownItemComponent {
    constructor() {
        this._pageHeaderService = inject(PageHeaderService);
    }
    select(item) {
        // clicking on an item that is disabled or with children then return
        if (item.disabled || item.children) {
            return;
        }
        // emit the selected item in an event
        this._pageHeaderService.select(item);
    }
    keydownHandler(event, item) {
        switch (event.keyCode) {
            case ENTER:
            case SPACE:
                this.select(item);
                event.preventDefault();
                event.stopPropagation();
                break;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderNavigationDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: PageHeaderNavigationDropdownItemComponent, selector: "ux-page-header-horizontal-navigation-dropdown-item", inputs: { item: "item" }, exportAs: ["ux-page-header-horizontal-navigation-dropdown-item"], ngImport: i0, template: "@if (item.children && item.children.length > 0) {\n  <div>\n    <button\n      type=\"button\"\n      uxMenuItem\n      [attr.id]=\"item.id\"\n      [disabled]=\"item.disabled\"\n      [class.selected]=\"item.selected\"\n      [attr.aria-selected]=\"item.selected\"\n      [uxMenuTriggerFor]=\"menu\">\n      <span class=\"dropdown-item-title\">{{ item.title }}</span>\n      <ux-icon class=\"dropdown-item-icon\" name=\"next\"></ux-icon>\n    </button>\n    <ux-menu #menu placement=\"right\" menuClass=\"horizontal-navigation-dropdown-submenu\">\n      @for (subItem of item.children; track subItem) {\n        <button\n          type=\"button\"\n          uxMenuItem\n          [attr.id]=\"subItem.id\"\n          [disabled]=\"subItem.disabled\"\n          [class.selected]=\"subItem.selected\"\n          [attr.aria-selected]=\"subItem.selected\"\n          (click)=\"select(subItem)\"\n          (keydown)=\"keydownHandler($event, subItem)\">\n          <span class=\"dropdown-item-title\">{{ subItem.title }}</span>\n        </button>\n      }\n    </ux-menu>\n  </div>\n}\n\n@if (!item.children || item.children.length === 0) {\n  <div>\n    <button\n      type=\"button\"\n      uxMenuItem\n      [attr.id]=\"item.id\"\n      [disabled]=\"item.disabled\"\n      [class.selected]=\"item.selected\"\n      [attr.aria-selected]=\"item.selected\"\n      (click)=\"select(item)\"\n      (keydown)=\"keydownHandler($event, item)\">\n      <span class=\"dropdown-item-title\">{{ item.title }}</span>\n    </button>\n  </div>\n}", dependencies: [{ kind: "component", type: i1.IconComponent, selector: "ux-icon", inputs: ["name", "size", "rotate", "flipHorizontal", "flipVertical"] }, { kind: "component", type: i2.MenuComponent, selector: "ux-menu", inputs: ["id", "placement", "alignment", "animate", "menuClass"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[uxMenuTriggerFor]", inputs: ["uxMenuTriggerFor", "disabled", "uxMenuParent", "closeOnBlur"], outputs: ["closed"], exportAs: ["ux-menu-trigger"] }, { kind: "component", type: i4.MenuItemComponent, selector: "[uxMenuItem]", inputs: ["disabled", "closeOnSelect", "role"], outputs: ["activate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderNavigationDropdownItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ux-page-header-horizontal-navigation-dropdown-item', exportAs: 'ux-page-header-horizontal-navigation-dropdown-item', template: "@if (item.children && item.children.length > 0) {\n  <div>\n    <button\n      type=\"button\"\n      uxMenuItem\n      [attr.id]=\"item.id\"\n      [disabled]=\"item.disabled\"\n      [class.selected]=\"item.selected\"\n      [attr.aria-selected]=\"item.selected\"\n      [uxMenuTriggerFor]=\"menu\">\n      <span class=\"dropdown-item-title\">{{ item.title }}</span>\n      <ux-icon class=\"dropdown-item-icon\" name=\"next\"></ux-icon>\n    </button>\n    <ux-menu #menu placement=\"right\" menuClass=\"horizontal-navigation-dropdown-submenu\">\n      @for (subItem of item.children; track subItem) {\n        <button\n          type=\"button\"\n          uxMenuItem\n          [attr.id]=\"subItem.id\"\n          [disabled]=\"subItem.disabled\"\n          [class.selected]=\"subItem.selected\"\n          [attr.aria-selected]=\"subItem.selected\"\n          (click)=\"select(subItem)\"\n          (keydown)=\"keydownHandler($event, subItem)\">\n          <span class=\"dropdown-item-title\">{{ subItem.title }}</span>\n        </button>\n      }\n    </ux-menu>\n  </div>\n}\n\n@if (!item.children || item.children.length === 0) {\n  <div>\n    <button\n      type=\"button\"\n      uxMenuItem\n      [attr.id]=\"item.id\"\n      [disabled]=\"item.disabled\"\n      [class.selected]=\"item.selected\"\n      [attr.aria-selected]=\"item.selected\"\n      (click)=\"select(item)\"\n      (keydown)=\"keydownHandler($event, item)\">\n      <span class=\"dropdown-item-title\">{{ item.title }}</span>\n    </button>\n  </div>\n}" }]
        }], propDecorators: { item: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi1kcm9wZG93bi1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3BhZ2UtaGVhZGVyL25hdmlnYXRpb24vbmF2aWdhdGlvbi1kcm9wZG93bi1pdGVtL25hdmlnYXRpb24tZHJvcGRvd24taXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9wYWdlLWhlYWRlci9uYXZpZ2F0aW9uL25hdmlnYXRpb24tZHJvcGRvd24taXRlbS9uYXZpZ2F0aW9uLWRyb3Bkb3duLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7OztBQVE5RCxNQUFNLE9BQU8seUNBQXlDO0lBTHREO1FBTXFCLHVCQUFrQixHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0tBMkJuRTtJQXRCRyxNQUFNLENBQUMsSUFBc0M7UUFFekMsb0VBQW9FO1FBQ3BFLElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDakMsT0FBTztRQUNYLENBQUM7UUFFRCxxQ0FBcUM7UUFDckMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQW9CLEVBQUUsSUFBc0M7UUFFdkUsUUFBUSxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDcEIsS0FBSyxLQUFLLENBQUM7WUFDWCxLQUFLLEtBQUs7Z0JBQ04sSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDbEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO2dCQUN2QixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7Z0JBQ3hCLE1BQU07UUFDZCxDQUFDO0lBQ0wsQ0FBQzsrR0EzQlEseUNBQXlDO21HQUF6Qyx5Q0FBeUMsc0xDVnRELDAvQ0E2Q0M7OzRGRG5DWSx5Q0FBeUM7a0JBTHJELFNBQVM7K0JBQ0ksb0RBQW9ELFlBQ3BELG9EQUFvRDs4QkFPckQsSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRU5URVIsIFNQQUNFIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2tleWNvZGVzJztcbmltcG9ydCB7IENvbXBvbmVudCwgaW5qZWN0LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUGFnZUhlYWRlclNlcnZpY2UgfSBmcm9tICcuLi8uLi9wYWdlLWhlYWRlci5zZXJ2aWNlJztcbmltcG9ydCB0eXBlIHsgUGFnZUhlYWRlck5hdmlnYXRpb25Ecm9wZG93bkl0ZW0gfSBmcm9tICcuLi9uYXZpZ2F0aW9uLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndXgtcGFnZS1oZWFkZXItaG9yaXpvbnRhbC1uYXZpZ2F0aW9uLWRyb3Bkb3duLWl0ZW0nLFxuICAgIGV4cG9ydEFzOiAndXgtcGFnZS1oZWFkZXItaG9yaXpvbnRhbC1uYXZpZ2F0aW9uLWRyb3Bkb3duLWl0ZW0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9uYXZpZ2F0aW9uLWRyb3Bkb3duLWl0ZW0uY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2VIZWFkZXJOYXZpZ2F0aW9uRHJvcGRvd25JdGVtQ29tcG9uZW50IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9wYWdlSGVhZGVyU2VydmljZSA9IGluamVjdChQYWdlSGVhZGVyU2VydmljZSk7XG5cbiAgICAvKiogQWNjZXNzIHRoZSBkYXRhIGZvciB0aGlzIGl0ZW0gKi9cbiAgICBASW5wdXQoKSBpdGVtOiBQYWdlSGVhZGVyTmF2aWdhdGlvbkRyb3Bkb3duSXRlbTtcblxuICAgIHNlbGVjdChpdGVtOiBQYWdlSGVhZGVyTmF2aWdhdGlvbkRyb3Bkb3duSXRlbSk6IHZvaWQge1xuXG4gICAgICAgIC8vIGNsaWNraW5nIG9uIGFuIGl0ZW0gdGhhdCBpcyBkaXNhYmxlZCBvciB3aXRoIGNoaWxkcmVuIHRoZW4gcmV0dXJuXG4gICAgICAgIGlmIChpdGVtLmRpc2FibGVkIHx8IGl0ZW0uY2hpbGRyZW4pIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIGVtaXQgdGhlIHNlbGVjdGVkIGl0ZW0gaW4gYW4gZXZlbnRcbiAgICAgICAgdGhpcy5fcGFnZUhlYWRlclNlcnZpY2Uuc2VsZWN0KGl0ZW0pO1xuICAgIH1cblxuICAgIGtleWRvd25IYW5kbGVyKGV2ZW50OiBLZXlib2FyZEV2ZW50LCBpdGVtOiBQYWdlSGVhZGVyTmF2aWdhdGlvbkRyb3Bkb3duSXRlbSk6IHZvaWQge1xuXG4gICAgICAgIHN3aXRjaCAoZXZlbnQua2V5Q29kZSkge1xuICAgICAgICAgICAgY2FzZSBFTlRFUjpcbiAgICAgICAgICAgIGNhc2UgU1BBQ0U6XG4gICAgICAgICAgICAgICAgdGhpcy5zZWxlY3QoaXRlbSk7XG4gICAgICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgfVxuICAgIH1cbn1cbiIsIkBpZiAoaXRlbS5jaGlsZHJlbiAmJiBpdGVtLmNoaWxkcmVuLmxlbmd0aCA+IDApIHtcbiAgPGRpdj5cbiAgICA8YnV0dG9uXG4gICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgIHV4TWVudUl0ZW1cbiAgICAgIFthdHRyLmlkXT1cIml0ZW0uaWRcIlxuICAgICAgW2Rpc2FibGVkXT1cIml0ZW0uZGlzYWJsZWRcIlxuICAgICAgW2NsYXNzLnNlbGVjdGVkXT1cIml0ZW0uc2VsZWN0ZWRcIlxuICAgICAgW2F0dHIuYXJpYS1zZWxlY3RlZF09XCJpdGVtLnNlbGVjdGVkXCJcbiAgICAgIFt1eE1lbnVUcmlnZ2VyRm9yXT1cIm1lbnVcIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwiZHJvcGRvd24taXRlbS10aXRsZVwiPnt7IGl0ZW0udGl0bGUgfX08L3NwYW4+XG4gICAgICA8dXgtaWNvbiBjbGFzcz1cImRyb3Bkb3duLWl0ZW0taWNvblwiIG5hbWU9XCJuZXh0XCI+PC91eC1pY29uPlxuICAgIDwvYnV0dG9uPlxuICAgIDx1eC1tZW51ICNtZW51IHBsYWNlbWVudD1cInJpZ2h0XCIgbWVudUNsYXNzPVwiaG9yaXpvbnRhbC1uYXZpZ2F0aW9uLWRyb3Bkb3duLXN1Ym1lbnVcIj5cbiAgICAgIEBmb3IgKHN1Ykl0ZW0gb2YgaXRlbS5jaGlsZHJlbjsgdHJhY2sgc3ViSXRlbSkge1xuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgdXhNZW51SXRlbVxuICAgICAgICAgIFthdHRyLmlkXT1cInN1Ykl0ZW0uaWRcIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCJzdWJJdGVtLmRpc2FibGVkXCJcbiAgICAgICAgICBbY2xhc3Muc2VsZWN0ZWRdPVwic3ViSXRlbS5zZWxlY3RlZFwiXG4gICAgICAgICAgW2F0dHIuYXJpYS1zZWxlY3RlZF09XCJzdWJJdGVtLnNlbGVjdGVkXCJcbiAgICAgICAgICAoY2xpY2spPVwic2VsZWN0KHN1Ykl0ZW0pXCJcbiAgICAgICAgICAoa2V5ZG93bik9XCJrZXlkb3duSGFuZGxlcigkZXZlbnQsIHN1Ykl0ZW0pXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJkcm9wZG93bi1pdGVtLXRpdGxlXCI+e3sgc3ViSXRlbS50aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICB9XG4gICAgPC91eC1tZW51PlxuICA8L2Rpdj5cbn1cblxuQGlmICghaXRlbS5jaGlsZHJlbiB8fCBpdGVtLmNoaWxkcmVuLmxlbmd0aCA9PT0gMCkge1xuICA8ZGl2PlxuICAgIDxidXR0b25cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgdXhNZW51SXRlbVxuICAgICAgW2F0dHIuaWRdPVwiaXRlbS5pZFwiXG4gICAgICBbZGlzYWJsZWRdPVwiaXRlbS5kaXNhYmxlZFwiXG4gICAgICBbY2xhc3Muc2VsZWN0ZWRdPVwiaXRlbS5zZWxlY3RlZFwiXG4gICAgICBbYXR0ci5hcmlhLXNlbGVjdGVkXT1cIml0ZW0uc2VsZWN0ZWRcIlxuICAgICAgKGNsaWNrKT1cInNlbGVjdChpdGVtKVwiXG4gICAgICAoa2V5ZG93bik9XCJrZXlkb3duSGFuZGxlcigkZXZlbnQsIGl0ZW0pXCI+XG4gICAgICA8c3BhbiBjbGFzcz1cImRyb3Bkb3duLWl0ZW0tdGl0bGVcIj57eyBpdGVtLnRpdGxlIH19PC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbn0iXX0=