import { ButtonComponent } from '@agorapulse/ui-components/button';
import { NgStyle, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Input, HostBinding, ViewChild, Output, ChangeDetectionStrategy, Component, InjectionToken, HostListener, Optional, Inject, Directive, NgModule } from '@angular/core';
import * as i1 from '@angular/material/menu';
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
import { merge } from 'rxjs';

class PopmenuComponent {
    renderer;
    elementRef;
    changeDetectorRef;
    data;
    events = new EventEmitter();
    arrowTopPosition = '50%';
    arrowBottomPosition = '50%';
    arrowLeftPosition = undefined;
    arrowRightPosition = undefined;
    arrowClass = undefined;
    below = false;
    before = false;
    menuClosed = new EventEmitter();
    menuOpened = new EventEmitter();
    trigger;
    hostStyleTop = '';
    hostStyleBorderRadius = '';
    hostStyleLeft = '';
    hostStyleZIndex = 0;
    hostStyleTransition = '';
    hostStyleWidth = '';
    hostStyleMaxWidth = '';
    hostStylePointerEvents = '';
    hostClassShow = false;
    hostClassShadow = false;
    hostClassLight = false;
    viewInit = false;
    _show = false;
    get show() {
        return this._show;
    }
    set show(value) {
        if (value) {
            this.setPosition();
        }
        this._show = value;
    }
    set close(value) {
        if (value) {
            setTimeout(() => {
                this.trigger.closeMenu();
            }, 100);
        }
    }
    menuOpen = false;
    get arrow() {
        return this.data.options.arrow && this.border;
    }
    get arrowOffset() {
        return this.data.options.arrowOffset;
    }
    get arrowPosition() {
        return this.data.options.arrowPosition;
    }
    get autoPlacement() {
        return this.data.options.autoPlacement;
    }
    get background() {
        return this.data.options.apPopmenuBackground;
    }
    get border() {
        return this.data.options.apPopmenuBorder;
    }
    get element() {
        return this.data.element;
    }
    get elementPosition() {
        return this.data.elementPosition;
    }
    get hasBackdrop() {
        return this.data.options.hasBackdrop;
    }
    get backdropClass() {
        return this.data.options.backdropClass;
    }
    get isThemeLight() {
        return this.options['theme'] === 'light';
    }
    get options() {
        return this.data.options;
    }
    get panelClass() {
        return this.data.options.panelClass;
    }
    get placement() {
        return this.data.options.placement;
    }
    get rounded() {
        return this.data.options.rounded;
    }
    get shadow() {
        return this.data.options.shadow;
    }
    get tooltipOffset() {
        return Number(this.data.options.offset);
    }
    get offsetSkidding() {
        return Number(this.data.options.offsets.skidding) || 0;
    }
    get offsetDistance() {
        return Number(this.data.options.offsets.distance || 0);
    }
    get value() {
        return this.data.value;
    }
    constructor(renderer, elementRef, changeDetectorRef) {
        this.renderer = renderer;
        this.elementRef = elementRef;
        this.changeDetectorRef = changeDetectorRef;
    }
    ngAfterViewInit() {
        this.viewInit = true;
        merge(this.trigger.menuOpened, this.trigger.menuClosed).subscribe(() => {
            this.menuOpen = this.trigger.menuOpen;
        });
    }
    onMenuClosed() {
        // we set a timeout to wait for the menu to be really closed
        setTimeout(() => this.menuClosed.emit(), 200);
    }
    onMenuOpened() {
        // we set a timeout to wait for the menu to be really opened
        setTimeout(() => this.menuOpened.emit(), 100);
    }
    setHostStyle(placement) {
        const tooltip = this.elementRef.nativeElement;
        const isCustomPosition = !this.elementPosition.x;
        let elementHeight = !this.element.offsetHeight ? this.element.getBoundingClientRect().height : this.element.offsetHeight;
        let elementWidth = !this.element.offsetWidth ? this.element.getBoundingClientRect().width : this.element.offsetWidth;
        const tooltipHeight = tooltip.clientHeight;
        const tooltipWidth = tooltip.clientWidth;
        const scrollY = window.pageYOffset;
        let topStyle;
        let leftStyle;
        if (isCustomPosition) {
            if (placement && placement.split(' ')[0] === 'top') {
                this.below = false;
            }
            if (placement && placement.split(' ')[0] === 'bottom') {
                this.below = true;
            }
            elementHeight = 0;
            elementWidth = 0;
            topStyle = this.elementPosition.top;
            leftStyle = this.elementPosition.left;
            if (this.arrow && this.arrowPosition) {
                this.arrowClass = 'arrow-' + this.arrowPosition;
                switch (this.arrowPosition) {
                    case 'left':
                    case 'right':
                        this.arrowLeftPosition = undefined;
                        this.arrowRightPosition = undefined;
                        this.arrowBottomPosition = 'auto';
                        this.arrowTopPosition = this.arrowOffset + '%';
                        break;
                    case 'top':
                    case 'bottom':
                        this.arrowLeftPosition = this.arrowOffset + '%';
                        this.arrowRightPosition = 'auto';
                        this.arrowBottomPosition = undefined;
                        this.arrowTopPosition = undefined;
                        break;
                }
            }
        }
        else {
            if (placement.split(' ')[0] === 'top') {
                this.below = false;
                topStyle = this.elementPosition.top - this.tooltipOffset - this.offsetDistance;
                topStyle += 8;
            }
            if (placement.split(' ')[0] === 'bottom') {
                this.below = true;
                topStyle = this.elementPosition.bottom + this.tooltipOffset + this.offsetDistance;
                // We remove 8px due to the margin-top we put to display the arrow.
                topStyle -= 8;
            }
            if (placement.split(' ')[0] === 'left') {
                leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset - this.offsetDistance;
            }
            if (placement.split(' ')[0] === 'right') {
                leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset + this.offsetDistance;
            }
            if (placement.split(' ')[0] === 'left' || placement.split(' ')[0] === 'right') {
                topStyle = this.elementPosition.top + scrollY + elementHeight / 2 - tooltip.clientHeight / 2;
            }
            if (placement === 'right bottom') {
                this.below = true;
                this.before = false;
                this.arrowClass = 'arrow-left';
                topStyle = this.elementPosition.top + scrollY + this.offsetSkidding;
                this.arrowRightPosition = undefined;
                this.arrowLeftPosition = undefined;
                this.arrowBottomPosition = 'auto';
                this.arrowTopPosition = this.arrowOffset ? this.arrowOffset + '%' : elementHeight / 2 + 'px';
            }
            if (placement === 'left bottom') {
                this.below = true;
                this.before = true;
                this.arrowClass = 'arrow-right';
                topStyle = this.elementPosition.top + scrollY + this.offsetSkidding;
                this.arrowLeftPosition = undefined;
                this.arrowRightPosition = undefined;
                this.arrowBottomPosition = 'auto';
                this.arrowTopPosition = this.arrowOffset ? this.arrowOffset + '%' : elementHeight / 2 + 'px';
            }
            if (placement === 'right top') {
                this.below = false;
                this.before = false;
                this.arrowClass = 'arrow-left';
                topStyle = this.elementPosition.top + elementHeight + scrollY + this.offsetSkidding;
                this.arrowLeftPosition = undefined;
                this.arrowRightPosition = undefined;
                this.arrowTopPosition = 'auto';
                this.arrowBottomPosition = this.arrowOffset ? this.arrowOffset + '%' : -(tooltip.clientHeight - elementHeight / 2) + 'px';
            }
            if (placement === 'left top') {
                this.below = false;
                this.before = true;
                this.arrowClass = 'arrow-right';
                topStyle = this.elementPosition.top + elementHeight + scrollY + this.offsetSkidding;
                this.arrowRightPosition = undefined;
                this.arrowLeftPosition = undefined;
                this.arrowTopPosition = 'auto';
                this.arrowBottomPosition = this.arrowOffset ? this.arrowOffset + '%' : -(tooltip.clientHeight - elementHeight / 2) + 'px';
            }
            if (placement === 'bottom right') {
                this.before = false;
                this.below = true;
                this.arrowClass = 'arrow-top';
                leftStyle = this.elementPosition.left + this.offsetSkidding;
                this.arrowTopPosition = undefined;
                this.arrowRightPosition = 'auto';
                this.arrowLeftPosition = this.arrowOffset ? this.arrowOffset + '%' : elementWidth / 2 - 4.5 + 'px';
            }
            if (placement === 'bottom left') {
                this.before = true;
                this.below = true;
                this.arrowClass = 'arrow-top';
                leftStyle = this.elementPosition.right + this.offsetSkidding;
                this.arrowTopPosition = undefined;
                this.arrowLeftPosition = 'auto';
                this.arrowRightPosition = this.arrowOffset ? this.arrowOffset + '%' : elementWidth / 2 - 2.5 + 'px';
            }
            if (placement === 'top right') {
                this.before = false;
                this.below = false;
                this.arrowClass = 'arrow-bottom';
                leftStyle = this.elementPosition.left + this.offsetSkidding;
                this.arrowBottomPosition = undefined;
                this.arrowTopPosition = undefined;
                this.arrowRightPosition = 'auto';
                this.arrowLeftPosition = this.arrowOffset ? this.arrowOffset + '%' : elementWidth / 2 - 4.5 + 'px';
            }
            if (placement === 'top left') {
                this.before = true;
                this.below = false;
                this.arrowClass = 'arrow-bottom';
                leftStyle = this.elementPosition.right + this.offsetSkidding;
                this.arrowBottomPosition = undefined;
                this.arrowTopPosition = undefined;
                this.arrowLeftPosition = 'auto';
                this.arrowRightPosition = this.arrowOffset ? this.arrowOffset + '%' : elementWidth / 2 - 2.5 + 'px';
            }
        }
        // This line is PURE MAGIC and super important. It allows to force mat-menu
        // to reposition the menu with the new xPosition / yPosition.
        this.changeDetectorRef.detectChanges();
        const topEdge = topStyle;
        const bottomEdge = topStyle + tooltipHeight;
        const leftEdge = leftStyle;
        const rightEdge = leftStyle + tooltipWidth;
        if ((topEdge < 0 || bottomEdge > document.body.clientHeight || leftEdge < 0 || rightEdge > document.body.clientWidth) &&
            this.autoPlacement) {
            return false;
        }
        this.hostStyleTop = topStyle + 'px';
        this.hostStyleLeft = leftStyle + 'px';
        return true;
    }
    setPlacementClass(placement) {
        this.renderer.addClass(this.elementRef.nativeElement, 'tooltip-' + (placement ? placement.split(' ')[0] : placement));
        this.renderer.addClass(this.elementRef.nativeElement, 'yPosition-' + (placement && placement.split(' ').length === 2 ? placement.split(' ')[1] : 'center'));
        if (this.elementRef.nativeElement.children && this.elementRef.nativeElement.children.length > 1) {
            const tooltipArrow = Array.from(this.elementRef.nativeElement.children).filter((child) => child.getAttribute('id') === 'tooltipArrow');
            if (tooltipArrow && tooltipArrow.length === 1) {
                if (placement && placement.split(' ').length === 2 && placement.split(' ')[1] === 'bottom') {
                    this.renderer.setStyle(tooltipArrow[0], 'top', this.arrowTopPosition);
                }
                else if (placement && placement.split(' ').length === 2 && placement.split(' ')[1] === 'top') {
                    this.renderer.setStyle(tooltipArrow[0], 'top', this.arrowBottomPosition);
                }
            }
        }
    }
    setPosition() {
        if (this.setHostStyle(this.placement)) {
            this.setPlacementClass(this.placement);
            if (this.viewInit) {
                // We did this in order to reset overlayRef (multi web component needed with matmenu and cdk overlay)
                if (this.trigger['_overlayRef']) {
                    this.trigger['_overlayRef'].dispose();
                    this.trigger['_overlayRef'] = null;
                }
                this.trigger.openMenu();
            }
            return;
        }
        else {
            const placements = ['top', 'right', 'bottom', 'left'];
            for (const placement of placements) {
                if (this.setHostStyle(placement)) {
                    this.setPlacementClass(placement);
                    if (this.viewInit) {
                        this.trigger.openMenu();
                    }
                    return;
                }
            }
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PopmenuComponent, isStandalone: true, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button\n    id=\"menuTrigger\"\n    class=\"button-trigger\"\n    mat-button\n    [matMenuTriggerFor]=\"menu\"\n    (menuClosed)=\"onMenuClosed()\"\n    (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n    #menu=\"matMenu\"\n    [yPosition]=\"!below ? 'above' : 'below'\"\n    [xPosition]=\"!before ? 'after' : 'before'\"\n    [overlapTrigger]=\"false\"\n    [hasBackdrop]=\"hasBackdrop\"\n    [backdropClass]=\"backdropClass\"\n    class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n        border ? '' : shadow ? 'shadow-no-border' : ''\n    }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n    @if (arrow) {\n        <div\n            class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n            [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n    }\n    <div\n        class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n        (click)=\"$event.stopPropagation()\">\n        <div class=\"{{ border ? 'popover-content ' : '' }} {{ rounded ? 'rounded-component' : '' }}\">\n            <ng-container *ngTemplateOutlet=\"value; context: { menu: this }\" />\n        </div>\n    </div>\n</mat-menu>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.mat-mdc-menu-content{padding:0}.mat-mdc-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-mdc-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-mdc-menu-item:hover:not([disabled]),.mat-mdc-menu-item.cdk-program-focused:not([disabled]),.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),.mat-mdc-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-mdc-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopmenuComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', imports: [ButtonComponent, MatMenuModule, NgStyle, NgTemplateOutlet], template: "<button\n    id=\"menuTrigger\"\n    class=\"button-trigger\"\n    mat-button\n    [matMenuTriggerFor]=\"menu\"\n    (menuClosed)=\"onMenuClosed()\"\n    (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n    #menu=\"matMenu\"\n    [yPosition]=\"!below ? 'above' : 'below'\"\n    [xPosition]=\"!before ? 'after' : 'before'\"\n    [overlapTrigger]=\"false\"\n    [hasBackdrop]=\"hasBackdrop\"\n    [backdropClass]=\"backdropClass\"\n    class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n        border ? '' : shadow ? 'shadow-no-border' : ''\n    }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n    @if (arrow) {\n        <div\n            class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n            [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n    }\n    <div\n        class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n        (click)=\"$event.stopPropagation()\">\n        <div class=\"{{ border ? 'popover-content ' : '' }} {{ rounded ? 'rounded-component' : '' }}\">\n            <ng-container *ngTemplateOutlet=\"value; context: { menu: this }\" />\n        </div>\n    </div>\n</mat-menu>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.mat-mdc-menu-content{padding:0}.mat-mdc-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-mdc-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-mdc-menu-item:hover:not([disabled]),.mat-mdc-menu-item.cdk-program-focused:not([disabled]),.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),.mat-mdc-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-mdc-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"] }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
                type: Input
            }], menuClosed: [{
                type: Output
            }], menuOpened: [{
                type: Output
            }], trigger: [{
                type: ViewChild,
                args: [MatMenuTrigger]
            }], hostStyleTop: [{
                type: HostBinding,
                args: ['style.top']
            }], hostStyleBorderRadius: [{
                type: HostBinding,
                args: ['style.border-radius']
            }], hostStyleLeft: [{
                type: HostBinding,
                args: ['style.left']
            }], hostStyleZIndex: [{
                type: HostBinding,
                args: ['style.z-index']
            }], hostStyleTransition: [{
                type: HostBinding,
                args: ['style.transition']
            }], hostStyleWidth: [{
                type: HostBinding,
                args: ['style.width']
            }], hostStyleMaxWidth: [{
                type: HostBinding,
                args: ['style.max-width']
            }], hostStylePointerEvents: [{
                type: HostBinding,
                args: ['style.pointer-events']
            }], hostClassShow: [{
                type: HostBinding,
                args: ['class.tooltip-show']
            }], hostClassShadow: [{
                type: HostBinding,
                args: ['class.tooltip-shadow']
            }], hostClassLight: [{
                type: HostBinding,
                args: ['class.tooltip-light']
            }], show: [{
                type: Input
            }], close: [{
                type: Input
            }] } });

const defaultOptions = {
    apPopmenuBorder: true,
    apPopmenuDisabled: false,
    apPopmenuBackground: true,
    hasBackdrop: true,
    placement: 'top',
    rounded: true,
    showDelay: 0,
    hideDelay: 10,
    hideDelayMobile: 0,
    shadow: true,
    theme: 'dark',
    offset: 8,
    offsets: {},
    maxWidth: '600',
};

/**
 * This is not a real service, but it looks like it from the outside.
 * It's just an InjectionToken used to import the config (initOptions) object, provided from the outside
 */
const PopmenuOptionsService = new InjectionToken('PopmenuOptions');

/**
 * @deprecated This directive is deprecated and will be removed in future versions.
 * Use `ActionDropdownComponent` instead.
 */
class PopmenuDirective {
    initOptions;
    renderer;
    elementRef;
    componentFactoryResolver;
    appRef;
    injector;
    apPopmenuBorder = false;
    apPopmenuDisabled = false;
    apPopmenuBackground = true;
    arrow = false;
    arrowOffset;
    arrowPosition;
    close = false;
    hasBackdrop = true;
    backdropClass = '';
    panelClass;
    offset;
    offsets;
    placement = 'bottom';
    pointer = true;
    popMenuValue;
    position;
    rounded = false;
    shadow = false;
    menuClosed = new EventEmitter();
    menuOpened = new EventEmitter();
    componentElement;
    hideTimeoutId;
    destroyTimeoutId;
    createTimeoutId;
    showTimeoutId;
    componentRef;
    elementPosition;
    componentSubscribe;
    _defaultOptions;
    _options = {};
    get options() {
        return this._options;
    }
    set options(value) {
        if (value && defaultOptions) {
            this._options = value;
        }
    }
    get destroyDelay() {
        return Number(this.getHideDelay()) + Number(this.options['animationDuration']);
    }
    get isDisplayOnHover() {
        if (this.options['display'] === false) {
            return false;
        }
        if (this.options['displayTouchscreen'] === false) {
            return false;
        }
        if (this.options['trigger'] !== 'hover') {
            return false;
        }
        return true;
    }
    get isTooltipDestroyed() {
        return this.componentRef && this.componentRef.hostView.destroyed;
    }
    get tooltipPosition() {
        if (this.options['position']) {
            return this.options['position'];
        }
        else {
            return this.elementPosition;
        }
    }
    constructor(initOptions, renderer, elementRef, componentFactoryResolver, appRef, injector) {
        this.initOptions = initOptions;
        this.renderer = renderer;
        this.elementRef = elementRef;
        this.componentFactoryResolver = componentFactoryResolver;
        this.appRef = appRef;
        this.injector = injector;
    }
    appendComponentToBody(component) {
        this.componentRef = this.componentFactoryResolver.resolveComponentFactory(component).create(this.injector);
        this.componentRef.instance.data = {
            value: this.popMenuValue,
            element: this.elementRef.nativeElement,
            elementPosition: this.tooltipPosition,
            options: this.options,
        };
        this.appRef.attachView(this.componentRef.hostView);
        this.componentElement = this.componentRef.hostView.rootNodes[0];
        document.body.appendChild(this.componentElement);
        this.componentSubscribe = this.componentRef.instance.menuClosed.subscribe(() => {
            this.handleClose();
            this.menuOpen = this.componentRef.instance.menuOpen;
        });
        this.componentSubscribe = this.componentRef.instance.menuOpened.subscribe(() => {
            this.handleOpen();
            this.menuOpen = this.componentRef.instance.menuOpen;
        });
    }
    menuOpenChange = new EventEmitter();
    #menuOpen = false;
    get menuOpen() {
        return this.#menuOpen;
    }
    set menuOpen(menuOpen) {
        this.menuOpenChange.emit(menuOpen);
        this.#menuOpen = menuOpen;
        if (this.#menuOpen) {
            this.elementRef.nativeElement.classList.add('popmenu-open');
            this.elementRef.nativeElement.classList.remove('popmenu-close');
        }
        else {
            this.elementRef.nativeElement.classList.remove('popmenu-open');
            this.elementRef.nativeElement.classList.add('popmenu-close');
        }
    }
    handleClose() {
        this.menuClosed.emit();
    }
    handleOpen() {
        this.menuOpened.emit();
    }
    applyOptionsDefault(defaultOptions, options) {
        this.options = Object.assign({}, defaultOptions, this.initOptions || {}, options);
    }
    clearTimeouts() {
        if (this.createTimeoutId) {
            clearTimeout(this.createTimeoutId);
        }
        if (this.showTimeoutId) {
            clearTimeout(this.showTimeoutId);
        }
        if (this.hideTimeoutId) {
            clearTimeout(this.hideTimeoutId);
        }
        if (this.destroyTimeoutId) {
            clearTimeout(this.destroyTimeoutId);
        }
    }
    createPopMenu() {
        this.clearTimeouts();
        this.createTimeoutId = window.setTimeout(() => {
            this.appendComponentToBody(PopmenuComponent);
        }, this.getShowDelay());
        this.showTimeoutId = window.setTimeout(() => {
            this.showTooltipElem();
        }, this.getShowDelay());
    }
    getElementPosition() {
        this.elementPosition = this.elementRef.nativeElement.getBoundingClientRect();
    }
    getHideDelay() {
        return this.options['hideDelay'];
    }
    getProperties(changes) {
        let properties = {};
        for (const prop in changes) {
            if (prop !== 'options' && prop !== 'tooltipValue') {
                properties[prop] = changes[prop].currentValue;
            }
            if (prop === 'options') {
                properties = changes[prop].currentValue;
            }
        }
        return properties;
    }
    getShowDelay() {
        return this.options['showDelay'];
    }
    ngOnChanges(changes) {
        if (changes.pointer) {
            if (!this.pointer) {
                this.renderer.removeStyle(this.elementRef.nativeElement, 'cursor');
            }
            else {
                this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
            }
        }
        if (changes.close && changes.close.currentValue) {
            this.hideTooltipElem();
        }
        const changedOptions = this.getProperties(changes);
        this.applyOptionsDefault(this.options && Object.keys(this.options).length > 0 ? this.options : defaultOptions, changedOptions);
    }
    ngOnInit() {
        if (this.pointer) {
            this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
        }
        this.menuOpen = false;
    }
    onClick() {
        if (this.apPopmenuDisabled) {
            return;
        }
        this.show();
        this.close = false;
    }
    show() {
        this.getElementPosition();
        if (!this.componentRef || this.isTooltipDestroyed) {
            this.createPopMenu();
        }
        else if (!this.isTooltipDestroyed) {
            this.showTooltipElem();
        }
    }
    showTooltipElem() {
        this.componentRef.instance.data = {
            value: this.popMenuValue,
            element: this.elementRef.nativeElement,
            elementPosition: this.tooltipPosition,
            options: this.options,
        };
        this.clearTimeouts();
        this.componentRef.instance.show = true;
    }
    hideTooltipElem() {
        if (this.componentRef) {
            this.componentRef.instance.close = true;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopmenuDirective, deps: [{ token: PopmenuOptionsService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: PopmenuDirective, isStandalone: true, selector: "[apPopmenu]", inputs: { apPopmenuBorder: "apPopmenuBorder", apPopmenuDisabled: "apPopmenuDisabled", apPopmenuBackground: "apPopmenuBackground", arrow: "arrow", arrowOffset: "arrowOffset", arrowPosition: "arrowPosition", close: "close", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", panelClass: "panelClass", offset: "offset", offsets: "offsets", placement: "placement", pointer: "pointer", popMenuValue: ["apPopmenu", "popMenuValue"], position: "position", rounded: "rounded", shadow: "shadow", options: "options", menuOpen: "menuOpen" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", menuOpenChange: "menuOpenChange" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopmenuDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[apPopmenu]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [PopmenuOptionsService]
                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }], propDecorators: { apPopmenuBorder: [{
                type: Input
            }], apPopmenuDisabled: [{
                type: Input
            }], apPopmenuBackground: [{
                type: Input
            }], arrow: [{
                type: Input
            }], arrowOffset: [{
                type: Input
            }], arrowPosition: [{
                type: Input
            }], close: [{
                type: Input
            }], hasBackdrop: [{
                type: Input
            }], backdropClass: [{
                type: Input
            }], panelClass: [{
                type: Input
            }], offset: [{
                type: Input
            }], offsets: [{
                type: Input
            }], placement: [{
                type: Input
            }], pointer: [{
                type: Input
            }], popMenuValue: [{
                type: Input,
                args: ['apPopmenu']
            }], position: [{
                type: Input
            }], rounded: [{
                type: Input
            }], shadow: [{
                type: Input
            }], menuClosed: [{
                type: Output
            }], menuOpened: [{
                type: Output
            }], options: [{
                type: Input
            }], menuOpenChange: [{
                type: Output
            }], menuOpen: [{
                type: Input
            }], onClick: [{
                type: HostListener,
                args: ['click']
            }] } });

class PopmenuModule {
    static forRoot(initOptions) {
        return {
            ngModule: PopmenuModule,
            providers: [
                {
                    provide: PopmenuOptionsService,
                    useValue: initOptions,
                },
            ],
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: PopmenuModule, imports: [PopmenuDirective, PopmenuComponent], exports: [PopmenuDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopmenuModule, imports: [PopmenuComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PopmenuModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [PopmenuDirective, PopmenuComponent],
                    exports: [PopmenuDirective],
                }]
        }] });

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

export { PopmenuComponent, PopmenuDirective, PopmenuModule };
//# sourceMappingURL=agorapulse-ui-components-popmenu.mjs.map
