import * as i0 from '@angular/core';
import { EventEmitter, inject, ElementRef, Renderer2, booleanAttribute, HostListener, Output, Input, HostBinding, ViewEncapsulation, Component, ChangeDetectionStrategy, forwardRef, ContentChild } from '@angular/core';
import { CdkTrapFocus } from '@angular/cdk/a11y';
import { BaseStatesDirective } from '@eui/components/shared';
import * as i1 from '@eui/components/eui-badge';
import { EUI_BADGE } from '@eui/components/eui-badge';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i2 from '@eui/components/eui-icon-button';
import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';

/**
 * @description
 * Modal overlay component that displays content in a layer above the main application.
 * Provides slide-in panel functionality with configurable positioning and width options.
 * Supports focus trapping, keyboard navigation, and click-outside-to-close behavior.
 * Implements ARIA dialog role for accessibility compliance.
 * Commonly used for side panels, drawers, settings menus, and contextual information displays.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-overlay [isActive]="showPanel" (activeState)="showPanel = $event">
 *   <eui-overlay-header>
 *     <h2>Panel Title</h2>
 *   </eui-overlay-header>
 *   <eui-overlay-content>
 *     <p>Panel content goes here</p>
 *   </eui-overlay-content>
 *   <eui-overlay-footer>
 *     <button euiButton (click)="showPanel = false">Close</button>
 *   </eui-overlay-footer>
 * </eui-overlay>
 * ```
 *
 * ### Right Side Panel
 * ```html
 * <eui-overlay [isActive]="true" position="right" width="medium">
 *   <eui-overlay-content>Content</eui-overlay-content>
 * </eui-overlay>
 * ```
 *
 * ### With Click Outside to Close
 * ```html
 * <eui-overlay [isActive]="true" [hasClosedOnClickOutside]="true">
 *   <eui-overlay-content>Dismissible content</eui-overlay-content>
 * </eui-overlay>
 * ```
 *
 * ### Accessibility
 * - Uses `dialog` role for screen readers
 * - Traps focus within overlay when active
 * - Escape key closes overlay
 * - Inert attribute prevents interaction when inactive
 *
 * ### Notes
 * - Position options: 'right', 'left', 'top', 'bottom'
 * - Width can be responsive or fixed
 * - Automatically handles slide-in animations
 * - Use with overlay sub-components for structured layout
 */
class EuiOverlayComponent {
    constructor() {
        this.role = 'dialog';
        this['aria-label'] = 'dialogOverlay';
        /**
         * Controls the visibility and active state of the overlay.
         * When true, displays the overlay with animation and enables interaction.
         * When false, hides the overlay and applies inert attribute to prevent interaction.
         * @default false
         */
        this.isActive = false;
        /**
         * Applies highlighted visual styling to emphasize the overlay.
         * Adds distinct background or border treatment for visual prominence.
         * @default false
         */
        this.euiHighlighted = false;
        /**
         * Enables automatic closing when user clicks outside the overlay boundaries.
         * Also applies slide-in animation from the right side.
         * Useful for dismissible panels and temporary contextual menus.
         * @default false
         */
        this.hasClosedOnClickOutside = false;
        /**
         * Screen position where the overlay appears.
         * Determines the slide-in direction and alignment of the overlay panel.
         * Common values: 'right', 'left', 'top', 'bottom'.
         * @default 'right'
         */
        this.position = 'right';
        /**
         * Emitted when the overlay's active state changes.
         * Payload: boolean indicating the requested active state (typically false for close requests).
         * Triggered by Escape key press or click outside when hasClosedOnClickOutside is enabled.
         */
        this.activeState = new EventEmitter();
        this.elementRef = inject(ElementRef);
        this.renderer = inject(Renderer2);
    }
    get cssClasses() {
        return [
            'eui-overlay',
            this.isActive ? 'eui-overlay--is-active' : '',
            this.euiHighlighted ? 'eui-overlay--highlighted' : '',
            this.position ? 'eui-overlay-offset eui-overlay-offset--position-' + this.position : '',
            this.width ? 'eui-overlay-offset eui-overlay-offset--width-' + this.width : '',
            this.fixedWidth ? 'eui-overlay-offset eui-overlay-offset--fixed-width-' + this.fixedWidth : '',
            this.hasClosedOnClickOutside ? 'eui-overlay--slideInRight' : '',
        ]
            .join(' ')
            .trim();
    }
    get inert() {
        return this.isActive ? null : '';
    }
    onKeydown(event) {
        if (event.key === 'Escape') {
            this.activeState.emit(false);
        }
    }
    onClick(event) {
        if (this.hasClosedOnClickOutside) {
            let targetElement = event.target;
            let isInsideOverlay = false;
            while (targetElement) {
                if (targetElement.classList.contains('eui-overlay')) {
                    isInsideOverlay = true;
                    break;
                }
                targetElement = targetElement.parentElement;
            }
            if (!isInsideOverlay && this.isActive) {
                this.activeState.emit(false);
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.16", type: EuiOverlayComponent, isStandalone: true, selector: "eui-overlay", inputs: { isActive: ["isActive", "isActive", booleanAttribute], euiHighlighted: ["euiHighlighted", "euiHighlighted", booleanAttribute], hasClosedOnClickOutside: ["hasClosedOnClickOutside", "hasClosedOnClickOutside", booleanAttribute], position: "position", width: "width", fixedWidth: "fixedWidth" }, outputs: { activeState: "activeState" }, host: { listeners: { "keydown": "onKeydown($event)", "document:click": "onClick($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this['aria-label']", "attr.inert": "this.inert" } }, ngImport: i0, template: "<div class=\"eui-overlay-wrapper\"\n   [cdkTrapFocus]=\"isActive\"\n   [cdkTrapFocusAutoCapture]=\"isActive\">\n    <ng-content select=\"eui-overlay-header\"></ng-content>\n    <ng-content select=\"eui-overlay-content\"></ng-content>\n    <ng-content select=\"eui-overlay-body\"></ng-content>\n    <ng-content select=\"eui-overlay-footer\"></ng-content>\n</div>\n", styles: [".eui-21 .eui-overlay{background:var(--eui-c-surface-container);border-left:1px solid var(--eui-c-secondary-border-light);border-right:1px solid var(--eui-c-secondary-border-light);height:100%;overflow-x:hidden;overflow-y:auto;position:fixed;right:-9999px;top:0;width:30%;z-index:var(--eui-zi-overlay)}.eui-21 .eui-overlay:not(.eui-overlay--slideInRight){transition:var(--eui-base-animation-transition-base)}.eui-21 .eui-overlay-wrapper{color:var(--eui-c-text);display:flex;flex-direction:column;height:100%}.eui-21 .eui-overlay-header{align-items:center;border-bottom:1px solid var(--eui-c-divider);cursor:default;display:flex;flex:0 0 auto;padding:var(--eui-s-m)}.eui-21 .eui-overlay-header:not(.eui-overlay-header--with-title){padding:var(--eui-s-m) var(--eui-s-s) var(--eui-s-m) var(--eui-s-m)}.eui-21 .eui-overlay-header-toolbar{align-items:center;display:flex;margin-left:auto;font:var(--eui-f-m-semi-bold)}.eui-21 .eui-overlay-header__close--inversed{background:transparent;color:var(--eui-c-white)}.eui-21 .eui-overlay-header__close--inversed:hover{color:var(--eui-c-danger)}.eui-21 .eui-overlay-header-title{display:flex;width:100%;flex-direction:column}.eui-21 .eui-overlay-header-title__label-wrapper{display:flex;align-items:center;flex-direction:row}.eui-21 .eui-overlay-header-title__label{display:flex;align-items:center;font:var(--eui-f-l-semi-bold)}.eui-21 .eui-overlay-header-title__label-count{margin-left:var(--eui-s-s)}.eui-21 .eui-overlay-header-title__actions{align-items:center;display:flex;margin-left:auto}.eui-21 .eui-overlay-header-title__actions-hide{align-items:center;display:flex}.eui-21 .eui-overlay-header-title__actions-hide-link{display:inline-flex}.eui-21 .eui-overlay-header-title__subactions-bar{display:flex;align-items:center}.eui-21 .eui-overlay-body{cursor:auto;flex:1 1 auto;overflow-y:auto;position:relative}.eui-21 .eui-overlay-body::-webkit-scrollbar{display:inherit;height:9px;width:9px;background-color:var(--eui-c-neutral-surface-light)}.eui-21 .eui-overlay-body::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-surface);border-radius:5rem;background-clip:padding-box;border:1px solid transparent}.eui-21 .eui-overlay-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface-dark);border:0;cursor:grab}.eui-21 .eui-overlay-body:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-overlay-body:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-overlay-body::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-21 .eui-overlay-body{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-21 .eui-overlay-body:focus,.eui-21 .eui-overlay-body:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-21 .eui-overlay-footer{background-color:var(--eui-c-surface-container);border-top:1px solid var(--eui-c-divider);flex:0 0 auto;padding:var(--eui-s-m);text-align:center}.eui-21 .eui-overlay.eui-overlay--slideInRight{transform:translateZ(0);display:inline-block;vertical-align:middle;animation-name:eui-overlay--slideInRight;animation-duration:var(--eui-base-animation-duration-fast);backface-visibility:visible}.eui-21 .eui-overlay .eui-resizable .eui-resizable-icon__container{top:50%;background-color:var(--eui-c-white);border:1px solid var(--eui-c-divider);padding:var(--eui-s-m) var(--eui-s-4xs) var(--eui-s-m) var(--eui-s-xl);display:inline-flex;align-items:center;border-radius:var(--eui-br-max);transform:translate(-1.5rem)}@keyframes eui-overlay--slideInRight{0%{transform:translate3d(50%,0,0);visibility:visible}to{transform:translateZ(0)}}.eui-21 .eui-overlay--size-full-screen{right:-100%;width:100%}.eui-21 .eui-overlay--is-active{right:0!important;box-shadow:var(--eui-sh-5)}.eui-21 .eui-overlay--highlighted{z-index:var(--eui-zi-highlighted)}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-25{width:25%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-30{width:30%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-35{width:35%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-40{width:40%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-50{width:50%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-75{width:75%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-25{width:25rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-30{width:30rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-35{width:35rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-40{width:40rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-50{width:50rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-75{width:75rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--position-right{position:fixed}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--position-top-center.eui-overlay--is-active{height:auto;left:50%;position:fixed;top:0;transform:translate(-50%)}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--position-center.eui-overlay--is-active{height:auto;left:50%;position:fixed;top:50%;transform:translate(-50%,-50%)}@media screen and (max-width:767px){.eui-21 .eui-overlay{width:75%!important}}@media screen and (min-width:768px)and (max-width:995px){.eui-21 .eui-overlay{width:45%!important}}@media screen and (min-width:1440px)and (max-width:1919px){.eui-21 .eui-overlay{width:33%!important}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-overlay', encapsulation: ViewEncapsulation.None, imports: [CdkTrapFocus], template: "<div class=\"eui-overlay-wrapper\"\n   [cdkTrapFocus]=\"isActive\"\n   [cdkTrapFocusAutoCapture]=\"isActive\">\n    <ng-content select=\"eui-overlay-header\"></ng-content>\n    <ng-content select=\"eui-overlay-content\"></ng-content>\n    <ng-content select=\"eui-overlay-body\"></ng-content>\n    <ng-content select=\"eui-overlay-footer\"></ng-content>\n</div>\n", styles: [".eui-21 .eui-overlay{background:var(--eui-c-surface-container);border-left:1px solid var(--eui-c-secondary-border-light);border-right:1px solid var(--eui-c-secondary-border-light);height:100%;overflow-x:hidden;overflow-y:auto;position:fixed;right:-9999px;top:0;width:30%;z-index:var(--eui-zi-overlay)}.eui-21 .eui-overlay:not(.eui-overlay--slideInRight){transition:var(--eui-base-animation-transition-base)}.eui-21 .eui-overlay-wrapper{color:var(--eui-c-text);display:flex;flex-direction:column;height:100%}.eui-21 .eui-overlay-header{align-items:center;border-bottom:1px solid var(--eui-c-divider);cursor:default;display:flex;flex:0 0 auto;padding:var(--eui-s-m)}.eui-21 .eui-overlay-header:not(.eui-overlay-header--with-title){padding:var(--eui-s-m) var(--eui-s-s) var(--eui-s-m) var(--eui-s-m)}.eui-21 .eui-overlay-header-toolbar{align-items:center;display:flex;margin-left:auto;font:var(--eui-f-m-semi-bold)}.eui-21 .eui-overlay-header__close--inversed{background:transparent;color:var(--eui-c-white)}.eui-21 .eui-overlay-header__close--inversed:hover{color:var(--eui-c-danger)}.eui-21 .eui-overlay-header-title{display:flex;width:100%;flex-direction:column}.eui-21 .eui-overlay-header-title__label-wrapper{display:flex;align-items:center;flex-direction:row}.eui-21 .eui-overlay-header-title__label{display:flex;align-items:center;font:var(--eui-f-l-semi-bold)}.eui-21 .eui-overlay-header-title__label-count{margin-left:var(--eui-s-s)}.eui-21 .eui-overlay-header-title__actions{align-items:center;display:flex;margin-left:auto}.eui-21 .eui-overlay-header-title__actions-hide{align-items:center;display:flex}.eui-21 .eui-overlay-header-title__actions-hide-link{display:inline-flex}.eui-21 .eui-overlay-header-title__subactions-bar{display:flex;align-items:center}.eui-21 .eui-overlay-body{cursor:auto;flex:1 1 auto;overflow-y:auto;position:relative}.eui-21 .eui-overlay-body::-webkit-scrollbar{display:inherit;height:9px;width:9px;background-color:var(--eui-c-neutral-surface-light)}.eui-21 .eui-overlay-body::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-surface);border-radius:5rem;background-clip:padding-box;border:1px solid transparent}.eui-21 .eui-overlay-body::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface-dark);border:0;cursor:grab}.eui-21 .eui-overlay-body:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-overlay-body:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-overlay-body::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-21 .eui-overlay-body{scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-21 .eui-overlay-body:focus,.eui-21 .eui-overlay-body:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-21 .eui-overlay-footer{background-color:var(--eui-c-surface-container);border-top:1px solid var(--eui-c-divider);flex:0 0 auto;padding:var(--eui-s-m);text-align:center}.eui-21 .eui-overlay.eui-overlay--slideInRight{transform:translateZ(0);display:inline-block;vertical-align:middle;animation-name:eui-overlay--slideInRight;animation-duration:var(--eui-base-animation-duration-fast);backface-visibility:visible}.eui-21 .eui-overlay .eui-resizable .eui-resizable-icon__container{top:50%;background-color:var(--eui-c-white);border:1px solid var(--eui-c-divider);padding:var(--eui-s-m) var(--eui-s-4xs) var(--eui-s-m) var(--eui-s-xl);display:inline-flex;align-items:center;border-radius:var(--eui-br-max);transform:translate(-1.5rem)}@keyframes eui-overlay--slideInRight{0%{transform:translate3d(50%,0,0);visibility:visible}to{transform:translateZ(0)}}.eui-21 .eui-overlay--size-full-screen{right:-100%;width:100%}.eui-21 .eui-overlay--is-active{right:0!important;box-shadow:var(--eui-sh-5)}.eui-21 .eui-overlay--highlighted{z-index:var(--eui-zi-highlighted)}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-25{width:25%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-30{width:30%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-35{width:35%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-40{width:40%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-50{width:50%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--width-75{width:75%!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-25{width:25rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-30{width:30rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-35{width:35rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-40{width:40rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-50{width:50rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--fixed-width-75{width:75rem!important}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--position-right{position:fixed}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--position-top-center.eui-overlay--is-active{height:auto;left:50%;position:fixed;top:0;transform:translate(-50%)}.eui-21 .eui-overlay.eui-overlay-offset.eui-overlay-offset--position-center.eui-overlay--is-active{height:auto;left:50%;position:fixed;top:50%;transform:translate(-50%,-50%)}@media screen and (max-width:767px){.eui-21 .eui-overlay{width:75%!important}}@media screen and (min-width:768px)and (max-width:995px){.eui-21 .eui-overlay{width:45%!important}}@media screen and (min-width:1440px)and (max-width:1919px){.eui-21 .eui-overlay{width:33%!important}}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], "aria-label": [{
                type: HostBinding,
                args: ['attr.aria-label']
            }], inert: [{
                type: HostBinding,
                args: ['attr.inert']
            }], isActive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiHighlighted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasClosedOnClickOutside: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], position: [{
                type: Input
            }], width: [{
                type: Input
            }], fixedWidth: [{
                type: Input
            }], activeState: [{
                type: Output
            }], onKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }], onClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });

/**
 * @description
 * Body component for `eui-overlay` that provides a structured content container within the overlay content area.
 * Serves as a semantic wrapper for main body content with consistent padding and spacing.
 * Typically used within `eui-overlay-content` to organize content sections.
 * Must be used as a child of `eui-overlay-content` to maintain proper layout hierarchy.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-overlay [isActive]="true">
 *   <eui-overlay-content>
 *     <eui-overlay-body>
 *       <p>Body content with consistent padding</p>
 *     </eui-overlay-body>
 *   </eui-overlay-content>
 * </eui-overlay>
 * ```
 *
 * ### Accessibility
 * - Provides semantic structure for content organization
 * - Maintains proper content hierarchy
 *
 * ### Notes
 * - Used within `eui-overlay-content`
 * - Applies consistent padding to content
 */
class EuiOverlayBodyComponent {
    get cssClasses() {
        return 'eui-overlay-body';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiOverlayBodyComponent, isStandalone: true, selector: "eui-overlay-body", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayBodyComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-overlay-body',
                    template: '<ng-content/>',
                    changeDetection: ChangeDetectionStrategy.Default,
                    encapsulation: ViewEncapsulation.None,
                }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Footer component for `eui-overlay` that provides a structured bottom section.
 * Typically contains action buttons such as submit, cancel, or other footer controls.
 * Applies consistent styling and spacing for overlay footer content.
 * Must be used as a direct child of `eui-overlay` to maintain proper layout structure.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-overlay [isActive]="true">
 *   <eui-overlay-content>
 *     <p>Content</p>
 *   </eui-overlay-content>
 *   <eui-overlay-footer>
 *     <button euiButton euiPrimary>Save</button>
 *     <button euiButton euiSecondary>Cancel</button>
 *   </eui-overlay-footer>
 * </eui-overlay>
 * ```
 *
 * ### Accessibility
 * - Action buttons should have clear labels
 * - Primary action typically comes first in DOM order
 *
 * ### Notes
 * - Must be direct child of `eui-overlay`
 * - Commonly used for action buttons
 */
class EuiOverlayFooterComponent {
    get cssClasses() {
        return 'eui-overlay-footer';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiOverlayFooterComponent, isStandalone: true, selector: "eui-overlay-footer", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayFooterComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-overlay-footer',
                    template: '<ng-content/>',
                    changeDetection: ChangeDetectionStrategy.Default,
                    encapsulation: ViewEncapsulation.None,
                }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Title component for eui-overlay-header that displays a labeled heading with optional count badge and close button.
 * Provides structured title area with consistent styling and accessibility features.
 * Automatically includes a close/hide button that emits events for overlay dismissal.
 * Must be used within eui-overlay-header to maintain proper header structure.
 */
class EuiOverlayHeaderTitleComponent {
    constructor() {
        /**
         * Primary text label displayed as the overlay header title.
         * Provides the main heading text for the overlay content.
         * @default null
         */
        this.headerTitleLabel = null;
        /**
         * Accessible label for the close/hide button in the header.
         * Provides screen reader text describing the button's action.
         * @default null
         */
        this.headerTitleHideLabel = null;
        /**
         * Count value displayed as a badge next to the title.
         * Typically shows the number of items, notifications, or related content.
         * Rendered as a visual badge component when provided.
         * @default null
         */
        this.headerTitleCount = null;
        /**
         * Emitted when the close/hide button in the header is clicked.
         * Signals that the overlay should be dismissed or hidden.
         * No specific payload is provided.
         */
        // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        this.hide = new EventEmitter();
    }
    get cssClasses() {
        return 'eui-overlay-header-title';
    }
    onHide() {
        this.hide.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiOverlayHeaderTitleComponent, isStandalone: true, selector: "eui-overlay-header-title", inputs: { headerTitleLabel: "headerTitleLabel", headerTitleHideLabel: "headerTitleHideLabel", headerTitleCount: "headerTitleCount" }, outputs: { hide: "hide" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<div class=\"eui-overlay-header-title\">\n  <div class=\"eui-overlay-header-title__label-wrapper\">\n    <div class=\"eui-overlay-header-title__label\">\n      {{ headerTitleLabel }}\n      @if (headerTitleCount) {\n        <eui-badge euiSizeL class=\"eui-overlay-header-title__label-count\">\n          {{ headerTitleCount }}\n        </eui-badge>\n      }\n    </div>\n\n    <div class=\"eui-overlay-header-title__actions\">\n      @if (headerTitleHideLabel) {\n        <div class=\"eui-overlay-header-title__actions-hide\">\n          <eui-icon-button icon=\"eui-close\" (buttonClick)=\"onHide()\" size=\"l\" euiRounded ariaLabel=\"Dialog close icon\"/>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"eui-overlay-header-title__subactions-bar\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayHeaderTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-overlay-header-title', encapsulation: ViewEncapsulation.None, imports: [
                        BaseStatesDirective,
                        ...EUI_BADGE,
                        ...EUI_ICON_BUTTON,
                        ...EUI_ICON,
                    ], template: "<div class=\"eui-overlay-header-title\">\n  <div class=\"eui-overlay-header-title__label-wrapper\">\n    <div class=\"eui-overlay-header-title__label\">\n      {{ headerTitleLabel }}\n      @if (headerTitleCount) {\n        <eui-badge euiSizeL class=\"eui-overlay-header-title__label-count\">\n          {{ headerTitleCount }}\n        </eui-badge>\n      }\n    </div>\n\n    <div class=\"eui-overlay-header-title__actions\">\n      @if (headerTitleHideLabel) {\n        <div class=\"eui-overlay-header-title__actions-hide\">\n          <eui-icon-button icon=\"eui-close\" (buttonClick)=\"onHide()\" size=\"l\" euiRounded ariaLabel=\"Dialog close icon\"/>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"eui-overlay-header-title__subactions-bar\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], headerTitleLabel: [{
                type: Input
            }], headerTitleHideLabel: [{
                type: Input
            }], headerTitleCount: [{
                type: Input
            }], hide: [{
                type: Output
            }] } });

/**
 * @description
 * Header component for eui-overlay that provides a structured top section.
 * Automatically detects and styles content based on the presence of a title component.
 * Typically contains title, close button, and optional action buttons.
 * Must be used as a direct child of eui-overlay to maintain proper layout structure.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-overlay [isActive]="true">
 *   <eui-overlay-header>
 *     <h2>Overlay Title</h2>
 *   </eui-overlay-header>
 * </eui-overlay>
 * ```
 *
 * ### Accessibility
 * - Use heading elements for titles
 * - Ensure close buttons have appropriate ARIA labels
 *
 * ### Notes
 * - Must be direct child of `eui-overlay`
 * - Automatically styled based on content
 */
class EuiOverlayHeaderComponent {
    get cssClasses() {
        return [
            'eui-overlay-header',
            this.hasHeaderTitle ? 'eui-overlay-header--with-title' : '',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiOverlayHeaderComponent, isStandalone: true, selector: "eui-overlay-header", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasHeaderTitle", first: true, predicate: i0.forwardRef(() => EuiOverlayHeaderTitleComponent), descendants: true }], ngImport: i0, template: "<ng-content select=\"eui-overlay-header-title\" />\n<ng-content />\n", encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-overlay-header', encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"eui-overlay-header-title\" />\n<ng-content />\n" }]
        }], propDecorators: { hasHeaderTitle: [{
                type: ContentChild,
                args: [forwardRef(() => EuiOverlayHeaderTitleComponent), { static: false }]
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Content component for `eui-overlay` that provides a structured main content area.
 * Serves as the primary container for overlay body content between header and footer.
 * Applies consistent styling, spacing, and scrolling behavior for overlay content.
 * Must be used as a direct child of `eui-overlay` to maintain proper layout structure.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-overlay [isActive]="true">
 *   <eui-overlay-content>
 *     <p>Main content goes here</p>
 *   </eui-overlay-content>
 * </eui-overlay>
 * ```
 *
 * ### Accessibility
 * - Content is scrollable when it exceeds available space
 * - Maintains focus within overlay structure
 *
 * ### Notes
 * - Must be direct child of `eui-overlay`
 * - Automatically handles overflow scrolling
 */
class EuiOverlayContentComponent {
    get cssClasses() {
        return 'eui-overlay-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiOverlayContentComponent, isStandalone: true, selector: "eui-overlay-content", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiOverlayContentComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-overlay-content',
                    template: '<ng-content/>',
                    changeDetection: ChangeDetectionStrategy.Default,
                    encapsulation: ViewEncapsulation.None,
                }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

const EUI_OVERLAY = [
    EuiOverlayHeaderComponent,
    EuiOverlayHeaderTitleComponent,
    EuiOverlayBodyComponent,
    EuiOverlayContentComponent,
    EuiOverlayFooterComponent,
    EuiOverlayComponent,
];

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

export { EUI_OVERLAY, EuiOverlayBodyComponent, EuiOverlayComponent, EuiOverlayContentComponent, EuiOverlayFooterComponent, EuiOverlayHeaderComponent, EuiOverlayHeaderTitleComponent };
//# sourceMappingURL=eui-components-eui-overlay.mjs.map
