/**
 *
 * @ai-apps/angular v2.147.1-next.0 | ai-apps-angular-button-menu.js
 *
 * Copyright 2014, 2022 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { ɵɵnamespaceSVG, ɵɵelement, ɵɵnextContext, ɵɵproperty, ɵɵgetCurrentView, ɵɵelementContainerStart, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵtext, ɵɵtemplate, ɵɵelementEnd, ɵɵelementContainerEnd, ɵɵadvance, ɵɵtextInterpolate1, ɵɵtextInterpolate, EventEmitter, ɵɵdirectiveInject, ElementRef, ɵɵdefineComponent, ɵɵprojectionDef, ɵɵprojection, ɵɵpureFunction1, ɵsetClassMetadata, Component, Input, Output, HostListener, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵinject, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
import { DocumentService, Button, IconDirective, IconService, ButtonModule, IconModule, UtilsModule } from 'carbon-components-angular';
import { NgClass, NgIf, CommonModule } from '@angular/common';
import { ContextMenuComponent, ContextMenuModule } from 'carbon-components-angular/context-menu';
import ChevronUp16 from '@carbon/icons/es/chevron--up/16';

function ButtonMenuComponent_ng_container_1__svg_svg_3_Template(rf, ctx) { if (rf & 1) {
    ɵɵnamespaceSVG();
    ɵɵelement(0, "svg", 5);
} if (rf & 2) {
    const ctx_r3 = ɵɵnextContext(2);
    ɵɵproperty("ibmIcon", ctx_r3.openIcon);
} }
function ButtonMenuComponent_ng_container_1__svg_svg_4_Template(rf, ctx) { if (rf & 1) {
    ɵɵnamespaceSVG();
    ɵɵelement(0, "svg", 5);
} if (rf & 2) {
    const ctx_r4 = ɵɵnextContext(2);
    ɵɵproperty("ibmIcon", ctx_r4.closeIcon);
} }
function ButtonMenuComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    const _r6 = ɵɵgetCurrentView();
    ɵɵelementContainerStart(0);
    ɵɵelementStart(1, "button", 3);
    ɵɵlistener("click", function ButtonMenuComponent_ng_container_1_Template_button_click_1_listener() { ɵɵrestoreView(_r6); const ctx_r5 = ɵɵnextContext(); return ctx_r5.toggleMenu(); });
    ɵɵtext(2);
    ɵɵtemplate(3, ButtonMenuComponent_ng_container_1__svg_svg_3_Template, 1, 1, "svg", 4);
    ɵɵtemplate(4, ButtonMenuComponent_ng_container_1__svg_svg_4_Template, 1, 1, "svg", 4);
    ɵɵelementEnd();
    ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = ɵɵnextContext();
    ɵɵadvance(2);
    ɵɵtextInterpolate1(" ", ctx_r0.label, " ");
    ɵɵadvance(1);
    ɵɵproperty("ngIf", !ctx_r0.open);
    ɵɵadvance(1);
    ɵɵproperty("ngIf", ctx_r0.open);
} }
function ButtonMenuComponent_ng_container_2_button_1_Template(rf, ctx) { if (rf & 1) {
    const _r11 = ɵɵgetCurrentView();
    ɵɵelementStart(0, "button", 8);
    ɵɵlistener("click", function ButtonMenuComponent_ng_container_2_button_1_Template_button_click_0_listener($event) { ɵɵrestoreView(_r11); const ctx_r10 = ɵɵnextContext(2); return ctx_r10.primaryClick.emit($event); });
    ɵɵtext(1);
    ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r7 = ɵɵnextContext(2);
    ɵɵadvance(1);
    ɵɵtextInterpolate1(" ", ctx_r7.label, " ");
} }
function ButtonMenuComponent_ng_container_2__svg_svg_3_Template(rf, ctx) { if (rf & 1) {
    ɵɵnamespaceSVG();
    ɵɵelement(0, "svg", 5);
} if (rf & 2) {
    const ctx_r8 = ɵɵnextContext(2);
    ɵɵproperty("ibmIcon", ctx_r8.openIcon);
} }
function ButtonMenuComponent_ng_container_2__svg_svg_4_Template(rf, ctx) { if (rf & 1) {
    ɵɵnamespaceSVG();
    ɵɵelement(0, "svg", 5);
} if (rf & 2) {
    const ctx_r9 = ɵɵnextContext(2);
    ɵɵproperty("ibmIcon", ctx_r9.closeIcon);
} }
function ButtonMenuComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    const _r13 = ɵɵgetCurrentView();
    ɵɵelementContainerStart(0);
    ɵɵtemplate(1, ButtonMenuComponent_ng_container_2_button_1_Template, 2, 1, "button", 6);
    ɵɵelementStart(2, "button", 7);
    ɵɵlistener("click", function ButtonMenuComponent_ng_container_2_Template_button_click_2_listener() { ɵɵrestoreView(_r13); const ctx_r12 = ɵɵnextContext(); return ctx_r12.toggleMenu(); });
    ɵɵtemplate(3, ButtonMenuComponent_ng_container_2__svg_svg_3_Template, 1, 1, "svg", 4);
    ɵɵtemplate(4, ButtonMenuComponent_ng_container_2__svg_svg_4_Template, 1, 1, "svg", 4);
    ɵɵelementEnd();
    ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r1 = ɵɵnextContext();
    ɵɵadvance(1);
    ɵɵproperty("ngIf", !ctx_r1.iconOnly);
    ɵɵadvance(1);
    ɵɵproperty("iconOnly", true)("hasAssistiveText", ctx_r1.iconOnly && !!ctx_r1.label);
    ɵɵadvance(1);
    ɵɵproperty("ngIf", !ctx_r1.open);
    ɵɵadvance(1);
    ɵɵproperty("ngIf", ctx_r1.open);
} }
function ButtonMenuComponent_ng_container_3__svg_svg_2_Template(rf, ctx) { if (rf & 1) {
    ɵɵnamespaceSVG();
    ɵɵelement(0, "svg", 5);
} if (rf & 2) {
    const ctx_r14 = ɵɵnextContext(2);
    ɵɵproperty("ibmIcon", ctx_r14.openIcon);
} }
function ButtonMenuComponent_ng_container_3__svg_svg_3_Template(rf, ctx) { if (rf & 1) {
    ɵɵnamespaceSVG();
    ɵɵelement(0, "svg", 5);
} if (rf & 2) {
    const ctx_r15 = ɵɵnextContext(2);
    ɵɵproperty("ibmIcon", ctx_r15.closeIcon);
} }
function ButtonMenuComponent_ng_container_3_span_4_Template(rf, ctx) { if (rf & 1) {
    ɵɵelementStart(0, "span", 11);
    ɵɵtext(1);
    ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r16 = ɵɵnextContext(2);
    ɵɵadvance(1);
    ɵɵtextInterpolate(ctx_r16.label);
} }
function ButtonMenuComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
    const _r18 = ɵɵgetCurrentView();
    ɵɵelementContainerStart(0);
    ɵɵelementStart(1, "button", 9);
    ɵɵlistener("click", function ButtonMenuComponent_ng_container_3_Template_button_click_1_listener() { ɵɵrestoreView(_r18); const ctx_r17 = ɵɵnextContext(); return ctx_r17.toggleMenu(); });
    ɵɵtemplate(2, ButtonMenuComponent_ng_container_3__svg_svg_2_Template, 1, 1, "svg", 4);
    ɵɵtemplate(3, ButtonMenuComponent_ng_container_3__svg_svg_3_Template, 1, 1, "svg", 4);
    ɵɵtemplate(4, ButtonMenuComponent_ng_container_3_span_4_Template, 2, 1, "span", 10);
    ɵɵelementEnd();
    ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r2 = ɵɵnextContext();
    ɵɵadvance(1);
    ɵɵproperty("iconOnly", true)("hasAssistiveText", ctx_r2.iconOnly && !!ctx_r2.label);
    ɵɵadvance(1);
    ɵɵproperty("ngIf", !ctx_r2.open);
    ɵɵadvance(1);
    ɵɵproperty("ngIf", ctx_r2.open);
    ɵɵadvance(1);
    ɵɵproperty("ngIf", ctx_r2.label);
} }
const _c0 = function (a0) { return { "iot--menu-button--open": a0 }; };
const _c1 = ["*"];
class ButtonMenuComponent {
    constructor(elementRef, documentService) {
        this.elementRef = elementRef;
        this.documentService = documentService;
        this.label = '';
        this.open = false;
        this.openIcon = 'chevron--down';
        this.closeIcon = 'chevron--up';
        this.iconOnly = false;
        this.split = false;
        this.alignMenu = 'left';
        this.placeMenu = 'bottom';
        this.openChange = new EventEmitter();
        this.primaryClick = new EventEmitter();
        this.position = {
            top: 0,
            left: 0,
        };
    }
    ngAfterViewInit() {
        const { nativeElement } = this.elementRef;
        const menuElement = nativeElement.querySelector('.bx--context-menu, .bx--menu');
        const dimensions = nativeElement.getBoundingClientRect();
        const menuDimensions = menuElement.getBoundingClientRect();
        // default placement (align left, place bottom)
        let left = dimensions.left;
        let top = dimensions.top + dimensions.height;
        if (this.alignMenu === 'right') {
            left = dimensions.right - menuDimensions.width;
        }
        if (this.placeMenu === 'top') {
            top = dimensions.top - menuDimensions.height;
        }
        this.position = { top, left };
        this.documentService.handleClick((event) => {
            const { nativeElement } = this.elementRef;
            if (this.open && !nativeElement.contains(event.target)) {
                this.toggleMenu();
            }
        });
    }
    toggleMenu() {
        this.open = !this.open;
        this.openChange.emit(this.open);
    }
    handleKeys(event) {
        if (event.key === 'Escape' && this.open) {
            this.toggleMenu();
            const element = this.elementRef.nativeElement;
            let button = element.querySelector('.iot--menu-button__primary');
            if (this.split || this.iconOnly) {
                button = element.querySelector('.iot--menu-button__secondary');
            }
            button.focus();
        }
    }
}
ButtonMenuComponent.ɵfac = function ButtonMenuComponent_Factory(t) { return new (t || ButtonMenuComponent)(ɵɵdirectiveInject(ElementRef), ɵɵdirectiveInject(DocumentService)); };
ButtonMenuComponent.ɵcmp = ɵɵdefineComponent({ type: ButtonMenuComponent, selectors: [["ai-button-menu"]], hostBindings: function ButtonMenuComponent_HostBindings(rf, ctx) { if (rf & 1) {
        ɵɵlistener("keyup", function ButtonMenuComponent_keyup_HostBindingHandler($event) { return ctx.handleKeys($event); });
    } }, inputs: { label: "label", open: "open", openIcon: "openIcon", closeIcon: "closeIcon", iconOnly: "iconOnly", split: "split", alignMenu: "alignMenu", placeMenu: "placeMenu" }, outputs: { openChange: "openChange", primaryClick: "primaryClick" }, ngContentSelectors: _c1, decls: 6, vars: 8, consts: [[1, "iot--menu-button", 3, "ngClass"], [4, "ngIf"], [3, "open", "position"], ["ibmButton", "primary", 1, "iot--menu-button__primary", "iot--menu-button__trigger", 3, "click"], ["class", "bx--btn__icon", "size", "16", 3, "ibmIcon", 4, "ngIf"], ["size", "16", 1, "bx--btn__icon", 3, "ibmIcon"], ["ibmButton", "primary", "class", "iot--menu-button__primary", 3, "click", 4, "ngIf"], ["ibmButton", "primary", 1, "iot--menu-button__secondary", "iot--menu-button__trigger", 3, "iconOnly", "hasAssistiveText", "click"], ["ibmButton", "primary", 1, "iot--menu-button__primary", 3, "click"], ["ibmButton", "ghost", 1, "iot--menu-button__secondary", 3, "iconOnly", "hasAssistiveText", "click"], ["class", "bx--assistive-text", 4, "ngIf"], [1, "bx--assistive-text"]], template: function ButtonMenuComponent_Template(rf, ctx) { if (rf & 1) {
        ɵɵprojectionDef();
        ɵɵelementStart(0, "div", 0);
        ɵɵtemplate(1, ButtonMenuComponent_ng_container_1_Template, 5, 3, "ng-container", 1);
        ɵɵtemplate(2, ButtonMenuComponent_ng_container_2_Template, 5, 5, "ng-container", 1);
        ɵɵtemplate(3, ButtonMenuComponent_ng_container_3_Template, 5, 5, "ng-container", 1);
        ɵɵelementStart(4, "ibm-context-menu", 2);
        ɵɵprojection(5);
        ɵɵelementEnd();
        ɵɵelementEnd();
    } if (rf & 2) {
        ɵɵproperty("ngClass", ɵɵpureFunction1(6, _c0, ctx.open));
        ɵɵadvance(1);
        ɵɵproperty("ngIf", !ctx.split && !ctx.iconOnly);
        ɵɵadvance(1);
        ɵɵproperty("ngIf", ctx.split && !ctx.iconOnly);
        ɵɵadvance(1);
        ɵɵproperty("ngIf", ctx.iconOnly && !ctx.split);
        ɵɵadvance(1);
        ɵɵproperty("open", ctx.open)("position", ctx.position);
    } }, directives: [NgClass, NgIf, ContextMenuComponent, Button, IconDirective], styles: ["[_nghost-%COMP%] {\n        display: inline-block;\n      }\n\n      .iot--menu-button[_ngcontent-%COMP%] {\n        display: inline-block;\n      }\n\n      .bx--btn__icon[_ngcontent-%COMP%] {\n        pointer-events: none;\n      }"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ButtonMenuComponent, [{
        type: Component,
        args: [{
                selector: 'ai-button-menu',
                template: `
    <div
      [ngClass]="{
        'iot--menu-button--open': open
      }"
      class="iot--menu-button"
    >
      <ng-container *ngIf="!split && !iconOnly">
        <button
          ibmButton="primary"
          class="iot--menu-button__primary iot--menu-button__trigger"
          (click)="toggleMenu()"
        >
          {{ label }}
          <svg *ngIf="!open" class="bx--btn__icon" [ibmIcon]="openIcon" size="16"></svg>
          <svg *ngIf="open" class="bx--btn__icon" [ibmIcon]="closeIcon" size="16"></svg>
        </button>
      </ng-container>
      <ng-container *ngIf="split && !iconOnly">
        <button
          *ngIf="!iconOnly"
          ibmButton="primary"
          class="iot--menu-button__primary"
          (click)="primaryClick.emit($event)"
        >
          {{ label }}
        </button>
        <button
          ibmButton="primary"
          [iconOnly]="true"
          [hasAssistiveText]="iconOnly && !!label"
          class="iot--menu-button__secondary iot--menu-button__trigger"
          (click)="toggleMenu()"
        >
          <svg *ngIf="!open" class="bx--btn__icon" [ibmIcon]="openIcon" size="16"></svg>
          <svg *ngIf="open" class="bx--btn__icon" [ibmIcon]="closeIcon" size="16"></svg>
        </button>
      </ng-container>
      <ng-container *ngIf="iconOnly && !split">
        <button
          ibmButton="ghost"
          [iconOnly]="true"
          [hasAssistiveText]="iconOnly && !!label"
          class="iot--menu-button__secondary"
          (click)="toggleMenu()"
        >
          <svg *ngIf="!open" class="bx--btn__icon" [ibmIcon]="openIcon" size="16"></svg>
          <svg *ngIf="open" class="bx--btn__icon" [ibmIcon]="closeIcon" size="16"></svg>
          <span *ngIf="label" class="bx--assistive-text">{{ label }}</span>
        </button>
      </ng-container>
      <ibm-context-menu [open]="open" [position]="position">
        <ng-content></ng-content>
      </ibm-context-menu>
    </div>
  `,
                styles: [
                    `
      :host {
        display: inline-block;
      }

      .iot--menu-button {
        display: inline-block;
      }

      .bx--btn__icon {
        pointer-events: none;
      }
    `,
                ],
            }]
    }], function () { return [{ type: ElementRef }, { type: DocumentService }]; }, { label: [{
            type: Input
        }], open: [{
            type: Input
        }], openIcon: [{
            type: Input
        }], closeIcon: [{
            type: Input
        }], iconOnly: [{
            type: Input
        }], split: [{
            type: Input
        }], alignMenu: [{
            type: Input
        }], placeMenu: [{
            type: Input
        }], openChange: [{
            type: Output
        }], primaryClick: [{
            type: Output
        }], handleKeys: [{
            type: HostListener,
            args: ['keyup', ['$event']]
        }] }); })();

class ButtonMenuModule {
    constructor(iconService) {
        this.iconService = iconService;
        this.iconService.register(ChevronUp16);
    }
}
ButtonMenuModule.ɵmod = ɵɵdefineNgModule({ type: ButtonMenuModule });
ButtonMenuModule.ɵinj = ɵɵdefineInjector({ factory: function ButtonMenuModule_Factory(t) { return new (t || ButtonMenuModule)(ɵɵinject(IconService)); }, imports: [[CommonModule, ButtonModule, IconModule, ContextMenuModule, UtilsModule]] });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(ButtonMenuModule, { declarations: [ButtonMenuComponent], imports: [CommonModule, ButtonModule, IconModule, ContextMenuModule, UtilsModule], exports: [ButtonMenuComponent] }); })();
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵsetClassMetadata(ButtonMenuModule, [{
        type: NgModule,
        args: [{
                declarations: [ButtonMenuComponent],
                exports: [ButtonMenuComponent],
                imports: [CommonModule, ButtonModule, IconModule, ContextMenuModule, UtilsModule],
            }]
    }], function () { return [{ type: IconService }]; }, null); })();

/**
 * Generated bundle index. Do not edit.
 */

export { ButtonMenuComponent, ButtonMenuModule };
//# sourceMappingURL=ai-apps-angular-button-menu.js.map
