@ux-aspects/ux-aspects/esm2022/components/page-header/icon-menu/icon-menu.component.mjs

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

import { ENTER, SPACE } from '@angular/cdk/keycodes';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { getIconType } from '../../../common/index';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../icon/icon.component";
import * as i3 from "../../menu/menu/menu.component";
import * as i4 from "../../menu/menu-trigger/menu-trigger.directive";
import * as i5 from "../../menu/menu-item/menu-item.component";
import * as i6 from "../../menu/menu-divider/menu-divider.component";
export class PageHeaderIconMenuComponent {
    select(item) {
        if (item.select) {
            item.select.call(item, item);
        }
    }
    keydownHandler(item, event) {
        switch (event.keyCode) {
            case ENTER:
            case SPACE:
                this.select(item);
                event.preventDefault();
                event.stopPropagation();
                break;
        }
    }
    _getIconType(identifier) {
        return identifier ? getIconType(identifier) : '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderIconMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: PageHeaderIconMenuComponent, selector: "ux-page-header-icon-menu", inputs: { menu: "menu" }, ngImport: i0, template: "<div class=\"page-header-icon-menu\">\n  <button\n    type=\"button\"\n    class=\"page-header-icon-menu-button\"\n    [attr.aria-label]=\"menu.label\"\n    [uxMenuTriggerFor]=\"iconMenu\"\n    (click)=\"select(menu)\">\n\n    <!-- Support all icon types -->\n    @if (_getIconType(menu.icon) !== 'component') {\n      <i\n        [ngClass]=\"[_getIconType(menu.icon), menu.icon]\">\n      </i>\n    }\n\n    @if (_getIconType(menu.icon) === 'component') {\n      <ux-icon\n        [name]=\"menu.icon\">\n      </ux-icon>\n    }\n\n    @if (menu?.badge) {\n      <span class=\"label label-primary\" aria-hidden=\"true\">{{ menu.badge }}</span>\n    }\n  </button>\n\n  <ux-menu #iconMenu alignment=\"end\" menuClass=\"ux-page-header-icon-menu\">\n    @for (dropdown of menu?.dropdown; track dropdown) {\n      @if (dropdown.header) {\n        <div class=\"dropdown-header\">\n          <span class=\"font-bold\">{{ dropdown.title }}</span>\n        </div>\n      }\n      @if (!dropdown.header) {\n        <button\n          type=\"button\"\n          uxMenuItem\n          (click)=\"select(dropdown)\"\n          (keydown)=\"keydownHandler(dropdown, $event)\">\n          <span class=\"dropdown-item-title\">\n            <!-- Support all icon types -->\n            @if (_getIconType(dropdown.icon) !== 'component') {\n              <i\n                class=\"ux-fw\"\n                [ngClass]=\"[_getIconType(dropdown.icon) || 'ux-icon', dropdown.icon || '']\">\n              </i>\n            }\n            @if (_getIconType(dropdown.icon) === 'component') {\n              <ux-icon\n                class=\"m-r-xs\"\n                [name]=\"dropdown.icon\">\n              </ux-icon>\n            }\n            {{ dropdown.title }}\n          </span>\n          @if (dropdown.subtitle) {\n            <span class=\"dropdown-item-subtitle\">{{ dropdown.subtitle }}</span>\n          }\n        </button>\n      }\n      @if (dropdown.divider) {\n        <ux-menu-divider></ux-menu-divider>\n      }\n    }\n  </ux-menu>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "ux-icon", inputs: ["name", "size", "rotate", "flipHorizontal", "flipVertical"] }, { kind: "component", type: i3.MenuComponent, selector: "ux-menu", inputs: ["id", "placement", "alignment", "animate", "menuClass"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[uxMenuTriggerFor]", inputs: ["uxMenuTriggerFor", "disabled", "uxMenuParent", "closeOnBlur"], outputs: ["closed"], exportAs: ["ux-menu-trigger"] }, { kind: "component", type: i5.MenuItemComponent, selector: "[uxMenuItem]", inputs: ["disabled", "closeOnSelect", "role"], outputs: ["activate"] }, { kind: "component", type: i6.MenuDividerComponent, selector: "ux-menu-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PageHeaderIconMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ux-page-header-icon-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"page-header-icon-menu\">\n  <button\n    type=\"button\"\n    class=\"page-header-icon-menu-button\"\n    [attr.aria-label]=\"menu.label\"\n    [uxMenuTriggerFor]=\"iconMenu\"\n    (click)=\"select(menu)\">\n\n    <!-- Support all icon types -->\n    @if (_getIconType(menu.icon) !== 'component') {\n      <i\n        [ngClass]=\"[_getIconType(menu.icon), menu.icon]\">\n      </i>\n    }\n\n    @if (_getIconType(menu.icon) === 'component') {\n      <ux-icon\n        [name]=\"menu.icon\">\n      </ux-icon>\n    }\n\n    @if (menu?.badge) {\n      <span class=\"label label-primary\" aria-hidden=\"true\">{{ menu.badge }}</span>\n    }\n  </button>\n\n  <ux-menu #iconMenu alignment=\"end\" menuClass=\"ux-page-header-icon-menu\">\n    @for (dropdown of menu?.dropdown; track dropdown) {\n      @if (dropdown.header) {\n        <div class=\"dropdown-header\">\n          <span class=\"font-bold\">{{ dropdown.title }}</span>\n        </div>\n      }\n      @if (!dropdown.header) {\n        <button\n          type=\"button\"\n          uxMenuItem\n          (click)=\"select(dropdown)\"\n          (keydown)=\"keydownHandler(dropdown, $event)\">\n          <span class=\"dropdown-item-title\">\n            <!-- Support all icon types -->\n            @if (_getIconType(dropdown.icon) !== 'component') {\n              <i\n                class=\"ux-fw\"\n                [ngClass]=\"[_getIconType(dropdown.icon) || 'ux-icon', dropdown.icon || '']\">\n              </i>\n            }\n            @if (_getIconType(dropdown.icon) === 'component') {\n              <ux-icon\n                class=\"m-r-xs\"\n                [name]=\"dropdown.icon\">\n              </ux-icon>\n            }\n            {{ dropdown.title }}\n          </span>\n          @if (dropdown.subtitle) {\n            <span class=\"dropdown-item-subtitle\">{{ dropdown.subtitle }}</span>\n          }\n        </button>\n      }\n      @if (dropdown.divider) {\n        <ux-menu-divider></ux-menu-divider>\n      }\n    }\n  </ux-menu>\n</div>\n" }]
        }], propDecorators: { menu: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3BhZ2UtaGVhZGVyL2ljb24tbWVudS9pY29uLW1lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcGFnZS1oZWFkZXIvaWNvbi1tZW51L2ljb24tbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3JELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7Ozs7Ozs7QUFRcEQsTUFBTSxPQUFPLDJCQUEyQjtJQUtwQyxNQUFNLENBQUMsSUFBeUQ7UUFDNUQsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDZCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDakMsQ0FBQztJQUNMLENBQUM7SUFFRCxjQUFjLENBQUMsSUFBeUQsRUFBRSxLQUFvQjtRQUMxRixRQUFRLEtBQUssQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNwQixLQUFLLEtBQUssQ0FBQztZQUNYLEtBQUssS0FBSztnQkFDTixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUNsQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7Z0JBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztnQkFDeEIsTUFBTTtRQUNkLENBQUM7SUFDTCxDQUFDO0lBRUQsWUFBWSxDQUFDLFVBQWtCO1FBQzNCLE9BQU8sVUFBVSxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUNyRCxDQUFDOytHQXhCUSwyQkFBMkI7bUdBQTNCLDJCQUEyQiwwRkNWeEMseS9EQWtFQTs7NEZEeERhLDJCQUEyQjtrQkFMdkMsU0FBUzsrQkFDSSwwQkFBMEIsbUJBRW5CLHVCQUF1QixDQUFDLE1BQU07OEJBS3RDLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEVOVEVSLCBTUEFDRSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9rZXljb2Rlcyc7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgZ2V0SWNvblR5cGUgfSBmcm9tICcuLi8uLi8uLi9jb21tb24vaW5kZXgnO1xuaW1wb3J0IHsgUGFnZUhlYWRlckljb25NZW51LCBQYWdlSGVhZGVySWNvbk1lbnVEcm9wZG93bkl0ZW0gfSBmcm9tICcuLi9pbnRlcmZhY2VzJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd1eC1wYWdlLWhlYWRlci1pY29uLW1lbnUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9pY29uLW1lbnUuY29tcG9uZW50Lmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2VIZWFkZXJJY29uTWVudUNvbXBvbmVudCB7XG5cbiAgICAvKiogR2V0IHRoZSBkYXRhIGZvciB0aGlzIGljb24gbWVudSAqL1xuICAgIEBJbnB1dCgpIG1lbnU6IFBhZ2VIZWFkZXJJY29uTWVudTtcblxuICAgIHNlbGVjdChpdGVtOiBQYWdlSGVhZGVySWNvbk1lbnUgfCBQYWdlSGVhZGVySWNvbk1lbnVEcm9wZG93bkl0ZW0pOiB2b2lkIHtcbiAgICAgICAgaWYgKGl0ZW0uc2VsZWN0KSB7XG4gICAgICAgICAgICBpdGVtLnNlbGVjdC5jYWxsKGl0ZW0sIGl0ZW0pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAga2V5ZG93bkhhbmRsZXIoaXRlbTogUGFnZUhlYWRlckljb25NZW51IHwgUGFnZUhlYWRlckljb25NZW51RHJvcGRvd25JdGVtLCBldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgICAgICBzd2l0Y2ggKGV2ZW50LmtleUNvZGUpIHtcbiAgICAgICAgICAgIGNhc2UgRU5URVI6XG4gICAgICAgICAgICBjYXNlIFNQQUNFOlxuICAgICAgICAgICAgICAgIHRoaXMuc2VsZWN0KGl0ZW0pO1xuICAgICAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBfZ2V0SWNvblR5cGUoaWRlbnRpZmllcjogc3RyaW5nKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIGlkZW50aWZpZXIgPyBnZXRJY29uVHlwZShpZGVudGlmaWVyKSA6ICcnO1xuICAgIH1cbn0iLCI8ZGl2IGNsYXNzPVwicGFnZS1oZWFkZXItaWNvbi1tZW51XCI+XG4gIDxidXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBjbGFzcz1cInBhZ2UtaGVhZGVyLWljb24tbWVudS1idXR0b25cIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwibWVudS5sYWJlbFwiXG4gICAgW3V4TWVudVRyaWdnZXJGb3JdPVwiaWNvbk1lbnVcIlxuICAgIChjbGljayk9XCJzZWxlY3QobWVudSlcIj5cblxuICAgIDwhLS0gU3VwcG9ydCBhbGwgaWNvbiB0eXBlcyAtLT5cbiAgICBAaWYgKF9nZXRJY29uVHlwZShtZW51Lmljb24pICE9PSAnY29tcG9uZW50Jykge1xuICAgICAgPGlcbiAgICAgICAgW25nQ2xhc3NdPVwiW19nZXRJY29uVHlwZShtZW51Lmljb24pLCBtZW51Lmljb25dXCI+XG4gICAgICA8L2k+XG4gICAgfVxuXG4gICAgQGlmIChfZ2V0SWNvblR5cGUobWVudS5pY29uKSA9PT0gJ2NvbXBvbmVudCcpIHtcbiAgICAgIDx1eC1pY29uXG4gICAgICAgIFtuYW1lXT1cIm1lbnUuaWNvblwiPlxuICAgICAgPC91eC1pY29uPlxuICAgIH1cblxuICAgIEBpZiAobWVudT8uYmFkZ2UpIHtcbiAgICAgIDxzcGFuIGNsYXNzPVwibGFiZWwgbGFiZWwtcHJpbWFyeVwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPnt7IG1lbnUuYmFkZ2UgfX08L3NwYW4+XG4gICAgfVxuICA8L2J1dHRvbj5cblxuICA8dXgtbWVudSAjaWNvbk1lbnUgYWxpZ25tZW50PVwiZW5kXCIgbWVudUNsYXNzPVwidXgtcGFnZS1oZWFkZXItaWNvbi1tZW51XCI+XG4gICAgQGZvciAoZHJvcGRvd24gb2YgbWVudT8uZHJvcGRvd247IHRyYWNrIGRyb3Bkb3duKSB7XG4gICAgICBAaWYgKGRyb3Bkb3duLmhlYWRlcikge1xuICAgICAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd24taGVhZGVyXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJmb250LWJvbGRcIj57eyBkcm9wZG93bi50aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICB9XG4gICAgICBAaWYgKCFkcm9wZG93bi5oZWFkZXIpIHtcbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgIHV4TWVudUl0ZW1cbiAgICAgICAgICAoY2xpY2spPVwic2VsZWN0KGRyb3Bkb3duKVwiXG4gICAgICAgICAgKGtleWRvd24pPVwia2V5ZG93bkhhbmRsZXIoZHJvcGRvd24sICRldmVudClcIj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImRyb3Bkb3duLWl0ZW0tdGl0bGVcIj5cbiAgICAgICAgICAgIDwhLS0gU3VwcG9ydCBhbGwgaWNvbiB0eXBlcyAtLT5cbiAgICAgICAgICAgIEBpZiAoX2dldEljb25UeXBlKGRyb3Bkb3duLmljb24pICE9PSAnY29tcG9uZW50Jykge1xuICAgICAgICAgICAgICA8aVxuICAgICAgICAgICAgICAgIGNsYXNzPVwidXgtZndcIlxuICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cIltfZ2V0SWNvblR5cGUoZHJvcGRvd24uaWNvbikgfHwgJ3V4LWljb24nLCBkcm9wZG93bi5pY29uIHx8ICcnXVwiPlxuICAgICAgICAgICAgICA8L2k+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBAaWYgKF9nZXRJY29uVHlwZShkcm9wZG93bi5pY29uKSA9PT0gJ2NvbXBvbmVudCcpIHtcbiAgICAgICAgICAgICAgPHV4LWljb25cbiAgICAgICAgICAgICAgICBjbGFzcz1cIm0tci14c1wiXG4gICAgICAgICAgICAgICAgW25hbWVdPVwiZHJvcGRvd24uaWNvblwiPlxuICAgICAgICAgICAgICA8L3V4LWljb24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICB7eyBkcm9wZG93bi50aXRsZSB9fVxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICBAaWYgKGRyb3Bkb3duLnN1YnRpdGxlKSB7XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImRyb3Bkb3duLWl0ZW0tc3VidGl0bGVcIj57eyBkcm9wZG93bi5zdWJ0aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgfVxuICAgICAgQGlmIChkcm9wZG93bi5kaXZpZGVyKSB7XG4gICAgICAgIDx1eC1tZW51LWRpdmlkZXI+PC91eC1tZW51LWRpdmlkZXI+XG4gICAgICB9XG4gICAgfVxuICA8L3V4LW1lbnU+XG48L2Rpdj5cbiJdfQ==