import * as i0 from '@angular/core';
import { inject, Renderer2, ElementRef, Input, Directive, EventEmitter, ViewContainerRef, booleanAttribute, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { TemplatePortal } from '@angular/cdk/portal';
import { ConnectionPositionPair, Overlay, ScrollDispatcher, OverlayModule } from '@angular/cdk/overlay';
import * as i2 from '@angular/cdk/a11y';
import { A11yModule, CdkTrapFocus } from '@angular/cdk/a11y';
import * as i3 from '@angular/cdk/observers';
import { ObserversModule } from '@angular/cdk/observers';
import { Subject, takeUntil, BehaviorSubject, Subscription } from 'rxjs';
import { takeUntil as takeUntil$1, switchMap, map, distinctUntilChanged } from 'rxjs/operators';
import * as i4 from '@eui/components/eui-icon-button';
import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';

/**
 * Position configuration for a popover appearing above its origin element.
 * Centers the popover horizontally relative to the origin.
 */
const TOP = new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, 0, 0, ['eui-popover-position', 'eui-popover-position--top']);
/**
 * Position configuration for a popover appearing below its origin element.
 * Centers the popover horizontally relative to the origin.
 */
const BOTTOM = new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, 0, 0, ['eui-popover-position', 'eui-popover-position--bottom']);
/**
 * Position configuration for a popover appearing to the left of its origin element.
 * Centers the popover vertically relative to the origin.
 */
const LEFT = new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--left']);
/**
 * Position configuration for a popover appearing to the right of its origin element.
 * Centers the popover vertically relative to the origin.
 */
const RIGHT = new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }, 0, 0, ['eui-popover-position', 'eui-popover-position--right']);
/**
 * Converts a ConnectedOverlayPositionChange object to an EuiPopoverPosition string.
 * Used to determine which predefined position the overlay has settled on.
 *
 * @param connectionPair - The position change event from the CDK overlay
 * @returns The string representation of the popover position ('top', 'right', 'bottom', 'left')
 */
const getPosition = ({ connectionPair }) => {
    switch (connectionPair) {
        case TOP:
            return 'top';
        case BOTTOM:
            return 'bottom';
        case LEFT:
            return 'left';
        case RIGHT:
            return 'right';
    }
};

/**
 * @description
 * Directive that positions an arrow element for a popover relative to its origin element.
 *
 * This directive calculates and applies the appropriate positioning style to ensure
 * the arrow correctly points to the origin element regardless of the popover's position.
 * It adjusts arrow placement dynamically based on the position strategy ('top', 'bottom',
 * 'left', or 'right') and the dimensions and position of the origin element.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <div class="popover-arrow" [euiPopoverArrowPosition]="position$"></div>
 * ```
 *
 * ### In component
 * ```typescript
 * position$ = new BehaviorSubject<[EuiPopoverPosition, DOMRect]>(['bottom', originRect]);
 *
 * updatePosition(position: EuiPopoverPosition, rect: DOMRect) {
 *   this.position$.next([position, rect]);
 * }
 * ```
 *
 * ### Accessibility
 * - Arrow is purely decorative and does not affect accessibility
 * - Ensure arrow color has sufficient contrast with background
 *
 * ### Notes
 * - Automatically calculates arrow position based on origin element bounds
 * - Handles edge cases where popover is near viewport boundaries
 * - Used internally by EuiPopoverComponent
 */
class EuiPopoverArrowPositionDirective {
    constructor() {
        this.destroy$ = new Subject();
        this.renderer = inject(Renderer2);
        this.elementRef = inject(ElementRef);
        this.document = inject(DOCUMENT);
    }
    ngOnInit() {
        this.position$.pipe(takeUntil(this.destroy$)).subscribe(([position, originRect]) => {
            this.renderer.setProperty(this.elementRef.nativeElement, 'style', this.getStyle(position, originRect));
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    getStyle(position, originRect) {
        const arrowRect = this.elementRef.nativeElement.getBoundingClientRect();
        if (position === 'left' || position === 'right') {
            const verticalDiff = Math.floor(arrowRect.top + arrowRect.height / 2) - Math.floor(originRect.top + originRect.height / 2);
            if (verticalDiff > 0) {
                return `top: ${originRect.top + originRect.height / 2}px`;
            }
            else if (verticalDiff < 0) {
                return `bottom: ${this.document.body.clientHeight - originRect.bottom + originRect.height / 2 - arrowRect.height}px`;
            }
        }
        if (position === 'top' || position === 'bottom') {
            const horizontalDiff = Math.floor(arrowRect.left + arrowRect.width / 2) - Math.floor(originRect.left + originRect.width / 2);
            if (horizontalDiff > 0) {
                return `left: ${originRect.left + originRect.width / 2}px`;
            }
            else if (horizontalDiff < 0) {
                return `right: ${this.document.body.clientWidth - originRect.right + originRect.width / 2 - arrowRect.width}px`;
            }
        }
        return '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPopoverArrowPositionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: EuiPopoverArrowPositionDirective, isStandalone: true, selector: "[euiPopoverArrowPosition]", inputs: { position$: ["euiPopoverArrowPosition", "position$"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPopoverArrowPositionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[euiPopoverArrowPosition]',
                }]
        }], propDecorators: { position$: [{
                type: Input,
                args: ['euiPopoverArrowPosition']
            }] } });

/**
 * @description
 * A flexible popover component that displays content in an overlay positioned relative to an origin element.
 *
 * The popover can be positioned at four different positions (top, right, bottom, left) relative to the
 * origin element, with automatic fallback positions if the preferred position doesn't fit in the viewport.
 * It supports various visual styles, dismissal behaviors, and size variants.
 *
 * @usageNotes
 * ### Basic usage
 * ```typescript
 * @ViewChild('popover') popover: EuiPopoverComponent;
 * @ViewChild('trigger') trigger: ElementRef;
 *
 * openPopover() {
 *   this.popover.openPopover(this.trigger);
 * }
 * ```
 * ```html
 * <button #trigger (click)="openPopover()">Open</button>
 * <eui-popover #popover title="Popover Title">
 *   <p>Popover content goes here</p>
 * </eui-popover>
 * ```
 *
 * ### With positioning
 * ```html
 * <eui-popover position="top" [width]="'300px'">
 *   Content
 * </eui-popover>
 * ```
 *
 * ### With backdrop
 * ```html
 * <eui-popover [hasBackDrop]="true" [isDismissable]="true">
 *   Content
 * </eui-popover>
 * ```
 *
 * ### Accessibility
 * - Escape key closes the popover when focused
 * - Focus trap keeps keyboard navigation within popover when open
 * - Close button provides clear dismissal option
 * - Backdrop click dismissal when `isDismissable` is true
 *
 * ### Notes
 * - Popover automatically repositions if preferred position doesn't fit viewport
 * - Use `hasNoContentPadding` to remove default content padding for custom layouts
 * - Listen to `popoverOpen` and `popoverClose` events for state management
 * - Popover closes automatically when origin element scrolls out of view
 */
class EuiPopoverComponent {
    constructor() {
        /**
         * Determines the preferred placement of the popover relative to its origin element.
         * The component will attempt to use this position first, falling back to alternatives
         * if there's not enough space in the viewport.
         *
         * @default 'bottom'
         */
        this.position = 'bottom';
        /**
         * Custom width for the popover.
         * Can be specified in any valid CSS unit (px, %, em, etc).
         * When null, the popover width is determined by its content.
         *
         * @default null
         */
        this.width = null;
        /**
         * Whether to show a semi-transparent backdrop behind the popover.
         * When true, creates a visual overlay that dims the rest of the UI.
         *
         * @default false
         */
        this.hasBackDrop = false;
        /**
         * Whether to show a close button in the top-right corner of the popover.
         * When clicked, the close button will dismiss the popover.
         *
         * @default true
         */
        this.hasCloseButton = true;
        /**
         * Whether the popover can be dismissed by clicking outside its boundaries.
         * When false, the popover will remain open until explicitly closed via code
         * or by clicking the close button (if available).
         *
         * @default true
         */
        this.isDismissable = true;
        /**
         * If the content of the popover should receive a default padding
         *
         * @default false
         */
        this.hasNoContentPadding = false;
        /**
         * Event emitted when a click occurs outside the popover boundaries.
         * Only emitted when isDismissable is true.
         */
        this.outsideClick = new EventEmitter();
        /**
         * Event emitted when the popover is opened.
         * Fires after the popover content has been attached to the DOM and positioned.
         */
        this.popoverOpen = new EventEmitter();
        /**
         * Event emitted when the popover is closed.
         * Fires after the popover content has been removed from the DOM.
         */
        this.popoverClose = new EventEmitter();
        this.destroy$ = new Subject();
        this.isOpen$ = new BehaviorSubject(false);
        this.scrollDispatcherSubscription = new Subscription();
        this.preferredPositons = [BOTTOM, TOP, LEFT, RIGHT];
        this.positionStrategyUpdate$ = new Subject();
        this.overlay = inject(Overlay);
        this.viewContainerRef = inject(ViewContainerRef);
        this.scrollDispatcher = inject(ScrollDispatcher);
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    ngOnChanges(c) {
        if (this.position === 'top') {
            this.preferredPositons = [TOP, BOTTOM, LEFT, RIGHT];
        }
        else if (this.position === 'right') {
            this.preferredPositons = [RIGHT, LEFT, TOP, BOTTOM];
        }
        else if (this.position === 'left') {
            this.preferredPositons = [LEFT, RIGHT, TOP, BOTTOM];
        }
        else {
            this.preferredPositons = [BOTTOM, TOP, LEFT, RIGHT];
        }
    }
    ngOnInit() {
        this.setPositionStream();
    }
    ngAfterViewInit() {
        this.templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
        this.scrollDispatcherSubscription.unsubscribe();
        this.overlayRef?.dispose();
        this.overlayRef = null;
    }
    /**
     * Whether the eui-popover is open.
     *
     * @usageNotes
     * ```HTML
     * <eui-popover #popover>
     *     @if (popover.isOpen) {
     *          <my-component></my-component>
     *     }
     * </eui-popover>
     * ```
     * @returns A boolean with value `true` when open, otherwise `false`.
     */
    get isOpen() {
        return this.isOpen$.value;
    }
    /**
     * Updates the position strategy when content changes.
     * Recalculates and updates the overlay position to handle content size changes.
     */
    onContentChange() {
        this.positionStrategy = this.getPositionStrategy();
        this.positionStrategyUpdate$.next();
        this.overlayRef.updatePositionStrategy(this.positionStrategy);
    }
    /**
     * Opens the popover relative to the provided origin element.
     * Sets up scroll monitoring, position strategy, and attaches the popover content to the overlay.
     * Emits the popoverOpen event when complete.
     *
     * @param origin - Reference to the element that triggers the popover
     */
    openPopover(origin) {
        if (!this.isOpen) {
            this.scrollDispatcherSubscription = this.scrollDispatcher.ancestorScrolled(origin).subscribe((event) => {
                const scrollableParent = event ? event.getElementRef().nativeElement : document.querySelector('body');
                if (!this.isVisible(origin, scrollableParent)) {
                    this.closePopover();
                }
            });
            this.origin = origin;
            const positionStrategy = this.getPositionStrategy();
            const scrollStrategy = this.overlay.scrollStrategies.reposition({ scrollThrottle: 10 });
            this.overlayRef = this.overlay.create({
                positionStrategy,
                scrollStrategy,
                disposeOnNavigation: true,
                width: this.width,
                panelClass: this.baseStatesDirective.getCssClasses('eui-popover').split(' '),
            });
            this.overlayRef.attach(this.templatePortal);
            document.querySelectorAll('.cdk-overlay-container')?.forEach(el => {
                if (!el.classList.contains('eui-21')) {
                    el.classList.add('eui-21');
                }
            });
            this.positionStrategy = positionStrategy;
            this.positionStrategyUpdate$.next();
            this.overlayRef
                .outsidePointerEvents()
                .pipe(takeUntil$1(this.destroy$))
                .subscribe(() => {
                if (this.isDismissable) {
                    this.outsideClick.emit();
                    this.closePopover();
                }
            });
            this.isOpen$.next(true);
            this.popoverOpen.emit();
        }
    }
    /**
     * Closes the popover.
     * Cleans up subscriptions, disposes the overlay, and emits the popoverClose event.
     */
    closePopover() {
        this.scrollDispatcherSubscription.unsubscribe();
        this.overlayRef.dispose();
        this.overlayRef = null;
        this.isOpen$.next(false);
        this.popoverClose.emit();
    }
    /**
     * Handles keyboard events to allow closing the popover with the Escape key.
     * Can be used as an alternative to the close button or when hasCloseButton is false.
     *
     * @param event - The keyboard event
     */
    onKeyDown(event) {
        if (event.key === 'Escape') {
            this.closePopover();
        }
    }
    /**
     * Checks whether the origin element is currently visible within the scrollable parent's viewport.
     * Used to determine if the popover should remain open during scroll events.
     *
     * @param origin - The HTML element that triggers the popover
     * @param scrollableParent - The scrollable container element
     * @returns True if the origin element is visible in the viewport, otherwise false
     */
    isVisible(origin, scrollableParent) {
        const originY = origin.getBoundingClientRect().y;
        const scrollableParentY = Math.abs(scrollableParent.getBoundingClientRect().y);
        const scrollableParentHeight = scrollableParent.getBoundingClientRect().height - 50;
        return ((originY > 0 && originY < scrollableParentHeight) ||
            (originY - scrollableParentY > 0 && originY < scrollableParentY + scrollableParentHeight));
    }
    /**
     * Creates and returns a position strategy for the overlay.
     * Configures the overlay to be positioned relative to the origin element
     * with fallback positions if the preferred one doesn't fit.
     *
     * @returns A flexible connected position strategy configured for the popover
     */
    getPositionStrategy() {
        return this.overlay
            .position()
            .flexibleConnectedTo(this.origin)
            .withPositions(this.preferredPositons)
            .withFlexibleDimensions(false)
            .withLockedPosition(true);
    }
    /**
     * Sets up the position stream for the arrow positioning directive.
     * Creates an observable that emits the current popover position and the origin element's bounding rectangle
     * whenever the popover's position changes.
     */
    setPositionStream() {
        this.position$ = this.positionStrategyUpdate$.pipe(switchMap(() => this.positionStrategy.positionChanges), map(getPosition), distinctUntilChanged(), map((position) => {
            const rect = this.origin.nativeElement ?
                this.origin.nativeElement.getBoundingClientRect() :
                this.origin.getBoundingClientRect();
            return [position, rect];
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiPopoverComponent, isStandalone: true, selector: "eui-popover", inputs: { title: "title", position: "position", width: "width", hasBackDrop: ["hasBackDrop", "hasBackDrop", booleanAttribute], hasCloseButton: ["hasCloseButton", "hasCloseButton", booleanAttribute], isDismissable: ["isDismissable", "isDismissable", booleanAttribute], hasNoContentPadding: ["hasNoContentPadding", "hasNoContentPadding", booleanAttribute] }, outputs: { outsideClick: "outsideClick", popoverOpen: "popoverOpen", popoverClose: "popoverClose" }, viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeAuto", "euiSizeAuto", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<ng-template #templatePortalContent>\n    <ng-container *ngTemplateOutlet=\"template\" />\n</ng-template>\n\n<ng-template #template>\n    <div class=\"eui-popover__container\" cdkTrapFocus cdkTrapFocusAutoCapture (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        @if (title) {\n            <div class=\"eui-popover__header\">\n                <div class=\"eui-popover__header-title\">{{ title }}</div>\n                @if (hasCloseButton) {\n                <eui-icon-button class=\"eui-popover__header-close\"\n                    icon=\"eui-close\"\n                    euiRounded\n                    (buttonClick)=\"closePopover()\"\n                    fillColor=\"secondary\"\n                    ariaLabel=\"Dialog close icon\"/>                    \n                }\n            </div>\n        }\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\" [class.eui-popover__content--no-padding]=\"hasNoContentPadding\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-21 .eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;color:var(--eui-c-text-lighter);display:none;height:0;position:absolute;width:0}.eui-21 .eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-c-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-21 .eui-popover-position--top .eui-popover__arrow,.eui-21 .eui-popover-position--bottom .eui-popover__arrow,.eui-21 .eui-popover-position--left .eui-popover__arrow,.eui-21 .eui-popover-position--right .eui-popover__arrow{display:block}.eui-21 .eui-popover-position--top .eui-popover__arrow,.eui-21 .eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-21 .eui-popover-position--top .eui-popover__arrow-inner,.eui-21 .eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-21 .eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-21 .eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-21 .eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-21 .eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-21 .eui-popover-position--left .eui-popover__arrow,.eui-21 .eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-8px)}.eui-21 .eui-popover-position--left .eui-popover__arrow-inner,.eui-21 .eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-21 .eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-21 .eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-21 .eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-21 .eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-c-white);left:2px}.eui-21 .eui-popover{display:flex;width:25rem}.eui-21 .eui-popover__container{background-color:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-divider-dark);border-radius:var(--eui-br-s);box-shadow:var(--eui-sh-2);width:100%}.eui-21 .eui-popover__header{align-items:center;display:flex;justify-content:space-between;padding:var(--eui-s-s) var(--eui-s-s) 0 var(--eui-s-s)}.eui-21 .eui-popover__header-title{font:var(--eui-f-m-semi-bold)}.eui-21 .eui-popover__content{padding:var(--eui-s-s)}.eui-21 .eui-popover__content--no-padding{padding:0}.eui-21 .eui-popover--has-custom-width{width:100%!important}.eui-21 .eui-popover--size-s{max-width:12rem;width:12rem}.eui-21 .eui-popover--size-m{max-width:25rem;width:25rem}.eui-21 .eui-popover--size-l{max-width:35rem;width:35rem}.eui-21 .eui-popover--size-xl{max-width:50rem;width:50rem}.eui-21 .eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-21 .eui-popover--size-auto{max-width:none;width:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: EuiPopoverArrowPositionDirective, selector: "[euiPopoverArrowPosition]", inputs: ["euiPopoverArrowPosition"] }, { kind: "component", type: i4.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPopoverComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiSize2XL',
                                'euiSizeAuto',
                                'euiSizeVariant',
                            ],
                        },
                    ], imports: [
                        NgTemplateOutlet,
                        OverlayModule,
                        A11yModule,
                        ObserversModule,
                        EuiPopoverArrowPositionDirective,
                        CdkTrapFocus,
                        ...EUI_ICON_BUTTON,
                    ], template: "<ng-template #templatePortalContent>\n    <ng-container *ngTemplateOutlet=\"template\" />\n</ng-template>\n\n<ng-template #template>\n    <div class=\"eui-popover__container\" cdkTrapFocus cdkTrapFocusAutoCapture (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-popover__arrow\" [euiPopoverArrowPosition]=\"position$\">\n            <div class=\"eui-popover__arrow-inner\"></div>\n        </div>\n        @if (title) {\n            <div class=\"eui-popover__header\">\n                <div class=\"eui-popover__header-title\">{{ title }}</div>\n                @if (hasCloseButton) {\n                <eui-icon-button class=\"eui-popover__header-close\"\n                    icon=\"eui-close\"\n                    euiRounded\n                    (buttonClick)=\"closePopover()\"\n                    fillColor=\"secondary\"\n                    ariaLabel=\"Dialog close icon\"/>                    \n                }\n            </div>\n        }\n        <div (cdkObserveContent)=\"onContentChange()\" class=\"eui-popover__content\" [class.eui-popover__content--no-padding]=\"hasNoContentPadding\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-21 .eui-popover-position .eui-popover__arrow{border-color:inherit;border-style:solid;border-width:8px;color:var(--eui-c-text-lighter);display:none;height:0;position:absolute;width:0}.eui-21 .eui-popover-position .eui-popover__arrow-inner{border-color:var(--eui-c-white);border-style:solid;border-width:7px;content:\" \";display:block;height:0;position:absolute;width:0}.eui-21 .eui-popover-position--top .eui-popover__arrow,.eui-21 .eui-popover-position--bottom .eui-popover__arrow,.eui-21 .eui-popover-position--left .eui-popover__arrow,.eui-21 .eui-popover-position--right .eui-popover__arrow{display:block}.eui-21 .eui-popover-position--top .eui-popover__arrow,.eui-21 .eui-popover-position--bottom .eui-popover__arrow{border-left-color:transparent;border-right-color:transparent;left:50%;transform:translate(-8px)}.eui-21 .eui-popover-position--top .eui-popover__arrow-inner,.eui-21 .eui-popover-position--bottom .eui-popover__arrow-inner{border-left-color:transparent;border-right-color:transparent;margin-left:-7px}.eui-21 .eui-popover-position--top .eui-popover__arrow{border-bottom-width:0;bottom:-7px}.eui-21 .eui-popover-position--top .eui-popover__arrow-inner{border-bottom-width:0;bottom:2px}.eui-21 .eui-popover-position--bottom .eui-popover__arrow{border-top-width:0;top:-7px}.eui-21 .eui-popover-position--bottom .eui-popover__arrow-inner{border-top-width:0;top:1px}.eui-21 .eui-popover-position--left .eui-popover__arrow,.eui-21 .eui-popover-position--right .eui-popover__arrow{border-bottom-color:transparent;border-top-color:transparent;top:50%;transform:translateY(-8px)}.eui-21 .eui-popover-position--left .eui-popover__arrow-inner,.eui-21 .eui-popover-position--right .eui-popover__arrow-inner{border-bottom-color:transparent;border-top-color:transparent;top:-7px}.eui-21 .eui-popover-position--left .eui-popover__arrow{border-right-width:0;right:-7px}.eui-21 .eui-popover-position--left .eui-popover__arrow-inner{border-right-width:0;right:2px}.eui-21 .eui-popover-position--right .eui-popover__arrow{border-left-width:0;left:-7px}.eui-21 .eui-popover-position--right .eui-popover__arrow-inner{border-left-width:0;border-right-color:var(--eui-c-white);left:2px}.eui-21 .eui-popover{display:flex;width:25rem}.eui-21 .eui-popover__container{background-color:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-divider-dark);border-radius:var(--eui-br-s);box-shadow:var(--eui-sh-2);width:100%}.eui-21 .eui-popover__header{align-items:center;display:flex;justify-content:space-between;padding:var(--eui-s-s) var(--eui-s-s) 0 var(--eui-s-s)}.eui-21 .eui-popover__header-title{font:var(--eui-f-m-semi-bold)}.eui-21 .eui-popover__content{padding:var(--eui-s-s)}.eui-21 .eui-popover__content--no-padding{padding:0}.eui-21 .eui-popover--has-custom-width{width:100%!important}.eui-21 .eui-popover--size-s{max-width:12rem;width:12rem}.eui-21 .eui-popover--size-m{max-width:25rem;width:25rem}.eui-21 .eui-popover--size-l{max-width:35rem;width:35rem}.eui-21 .eui-popover--size-xl{max-width:50rem;width:50rem}.eui-21 .eui-popover--size-2xl{max-width:75rem;width:75rem}.eui-21 .eui-popover--size-auto{max-width:none;width:auto}\n"] }]
        }], propDecorators: { title: [{
                type: Input
            }], position: [{
                type: Input
            }], width: [{
                type: Input
            }], hasBackDrop: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasCloseButton: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDismissable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasNoContentPadding: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], outsideClick: [{
                type: Output
            }], popoverOpen: [{
                type: Output
            }], popoverClose: [{
                type: Output
            }], templatePortalContent: [{
                type: ViewChild,
                args: ['templatePortalContent']
            }] } });

const EUI_POPOVER = [
    EuiPopoverComponent,
];
// export { EuiPopoverComponent as EuiPopover } from './eui-popover.component';

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

export { EUI_POPOVER, EuiPopoverComponent };
//# sourceMappingURL=eui-components-eui-popover.mjs.map
