@agorapulse/ui-components 15.1.29 → 16.0.0-rc.0

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

@@ -1,698 +0,0 @@
-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/legacy-menu';
-import { MatLegacyMenuTrigger, MatLegacyMenuModule } from '@angular/material/legacy-menu';
-import { merge } from 'rxjs';
-import { ButtonComponent } from '@agorapulse/ui-components/button';
-import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
-
-class PopmenuComponent {
-    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);
-        }
-    }
-    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;
-        this.events = new EventEmitter();
-        this.arrowTopPosition = '50%';
-        this.arrowBottomPosition = '50%';
-        this.menuClosed = new EventEmitter();
-        this.menuOpened = new EventEmitter();
-        this.viewInit = false;
-        this._show = false;
-    }
-    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;
-                }
-            }
-        }
-    }
-}
-PopmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PopmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", 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: MatLegacyMenuTrigger, descendants: true }], ngImport: i0, template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n        [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n          [hasBackdrop]=\"hasBackdrop\"\n          [backdropClass]=\"backdropClass\"\n          class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}} {{panelClass}}\">\n\n    <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n    <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n        <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n            <ng-container *ngTemplateOutlet=\"value;context:{menu:this}\"></ng-container>\n        </div>\n    </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-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 .rounded-component .mat-menu-content{border-radius:10px}::ng-deep .rounded-component{border-radius:10px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], dependencies: [{ kind: "ngmodule", type: MatLegacyMenuModule }, { kind: "component", type: i1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatLegacyMenuTrigger, 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: "15.1.2", ngImport: i0, type: PopmenuComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', standalone: true, imports: [ButtonComponent, MatLegacyMenuModule, NgStyle, NgTemplateOutlet, NgIf], template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n        [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n          [hasBackdrop]=\"hasBackdrop\"\n          [backdropClass]=\"backdropClass\"\n          class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}} {{panelClass}}\">\n\n    <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n    <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n        <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n            <ng-container *ngTemplateOutlet=\"value;context:{menu:this}\"></ng-container>\n        </div>\n    </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[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-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-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 .rounded-component .mat-menu-content{border-radius:10px}::ng-deep .rounded-component{border-radius:10px}::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: [MatLegacyMenuTrigger]
-            }], 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');
-
-var _PopmenuDirective_menuOpen;
-class PopmenuDirective {
-    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;
-        this.apPopmenuBackground = true;
-        this.close = false;
-        this.hasBackdrop = true;
-        this.pointer = true;
-        this.menuClosed = new EventEmitter();
-        this.menuOpened = new EventEmitter();
-        this._options = {};
-        this.menuOpenChange = new EventEmitter();
-        _PopmenuDirective_menuOpen.set(this, void 0);
-    }
-    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;
-        });
-    }
-    get menuOpen() {
-        return __classPrivateFieldGet(this, _PopmenuDirective_menuOpen, "f");
-    }
-    set menuOpen(menuOpen) {
-        this.menuOpenChange.emit(menuOpen);
-        __classPrivateFieldSet(this, _PopmenuDirective_menuOpen, menuOpen, "f");
-        if (__classPrivateFieldGet(this, _PopmenuDirective_menuOpen, "f")) {
-            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;
-        }
-    }
-}
-_PopmenuDirective_menuOpen = new WeakMap();
-PopmenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", 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 });
-PopmenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.2", 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: "15.1.2", 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
-                }
-            ]
-        };
-    }
-}
-PopmenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PopmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PopmenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.2", ngImport: i0, type: PopmenuModule, imports: [PopmenuDirective,
-        PopmenuComponent], exports: [PopmenuDirective] });
-PopmenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: PopmenuModule, imports: [PopmenuComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", 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