@agorapulse/ui-components 0.0.3 → 1.0.0-SNAPSHOT

package/fesm2022/agorapulse-ui-components-popmenu.mjs

@@ -0,0 +1,725 @@
+import { NgStyle, NgTemplateOutlet, NgIf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostBinding, InjectionToken, Directive, Optional, Inject, HostListener, NgModule } from '@angular/core';
+import * as i1 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { merge } from 'rxjs';
+import { ButtonComponent } from '@agorapulse/ui-components/button';
+
+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 isSvg = this.element instanceof SVGElement;
+        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: "16.2.10", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", 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    <div\n        *ngIf=\"arrow\"\n        class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n        [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\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=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", exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: PopmenuComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', standalone: true, imports: [ButtonComponent, MatMenuModule, NgStyle, NgTemplateOutlet, NgIf], 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    <div\n        *ngIf=\"arrow\"\n        class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n        [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\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=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: function () { return [{ 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');
+
+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, data = {}) {
+        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((event) => {
+            this.handleClose(event);
+            this.menuOpen = this.componentRef.instance.menuOpen;
+        });
+        this.componentSubscribe = this.componentRef.instance.menuOpened.subscribe((event) => {
+            this.handleOpen(event);
+            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(event) {
+        this.menuClosed.emit();
+    }
+    handleOpen(event) {
+        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: "16.2.10", 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: "16.2.10", 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: "16.2.10", ngImport: i0, type: PopmenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[apPopmenu]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ 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: "16.2.10", ngImport: i0, type: PopmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.10", ngImport: i0, type: PopmenuModule, imports: [PopmenuDirective, PopmenuComponent], exports: [PopmenuDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: PopmenuModule, imports: [PopmenuComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", 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