import * as i0 from '@angular/core';
import { inject, ElementRef, NgZone, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Output, forwardRef } from '@angular/core';
import { Subject, debounceTime, takeUntil } from 'rxjs';
import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
import * as i1 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import { EuiAppShellService } from '@eui/core';
import * as i1$1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import * as i1$2 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import { CdkScrollable } from '@angular/cdk/scrolling';

/**
 * @description
 * Container for multiple page columns that provides responsive column layouts with resize observation.
 * Automatically monitors width changes to support responsive column behavior.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <eui-page-columns>
 *   <eui-page-column label="Navigation">Nav content</eui-page-column>
 *   <eui-page-column label="Main">Main content</eui-page-column>
 * </eui-page-columns>
 * ```
 *
 * ### Prevent mobile rendering
 * ```html
 * <eui-page-columns [hasPreventMobileRendering]="true">
 *   <eui-page-column>Content</eui-page-column>
 * </eui-page-columns>
 * ```
 *
 * ### Accessibility
 * - Ensure columns have descriptive labels for screen readers
 * - Maintain logical reading order in column sequence
 * - Test keyboard navigation between columns
 *
 * ### Notes
 * - Uses ResizeObserver to track container width changes
 * - Child columns can respond to width changes for auto-collapse behavior
 * - `hasPreventMobileRendering` disables mobile-specific column stacking
 */
class EuiPageColumns {
    constructor() {
        this.hasPreventMobileRendering = false;
        this.width = new Subject;
        this.host = inject(ElementRef);
        this.zone = inject(NgZone);
    }
    get cssClasses() {
        return [
            'eui-page-columns',
            this.hasPreventMobileRendering ? 'eui-page-columns--prevent-mobile-rendering' : '',
        ].join(' ').trim();
    }
    ngOnInit() {
        this.observer = new ResizeObserver(entries => {
            this.zone.run(() => {
                this.width.next(entries[0].contentRect.width);
            });
        });
        this.observer.observe(this.host.nativeElement);
    }
    ngOnDestroy() {
        this.observer.unobserve(this.host.nativeElement);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumns, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: EuiPageColumns, isStandalone: true, selector: "eui-page-columns", inputs: { hasPreventMobileRendering: ["hasPreventMobileRendering", "hasPreventMobileRendering", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex;width:100%;height:100%;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumns, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-columns', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.Default, styles: [".eui-21 :host{display:flex;width:100%;height:100%;overflow:hidden}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], hasPreventMobileRendering: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * @description
 * Root page layout component (v2) that provides the foundational structure for application pages.
 * Automatically detects and adapts styling based on the presence of column-based layouts.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <eui-page>
 *   <eui-page-header label="Dashboard"></eui-page-header>
 *   <eui-page-content>Content</eui-page-content>
 * </eui-page>
 * ```
 *
 * ### Accessibility
 * - Use semantic HTML for proper document structure
 * - Maintain heading hierarchy within page sections
 *
 * ### Notes
 * - This is the v2 variant with updated styling
 * - Automatically detects column layouts
 */
class EuiPage {
    get cssClasses() {
        return ['eui-page', this.columns ? 'eui-page--with-columns' : ''].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPage, isStandalone: true, selector: "eui-page", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "columns", first: true, predicate: EuiPageColumns, descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"eui-page-breadcrumb\" />\n<ng-content select=\"eui-page-top-content\" />\n<!-- <ng-content select=\"eui-page-hero-header\" /> -->\n<ng-content select=\"eui-page-header\" />\n<ng-content select=\"eui-page-content\" />\n<ng-content select=\"eui-page-footer\" />\n<ng-content select=\"eui-page-columns\" />\n", styles: [".eui-21 :host.eui-page{display:flex;flex-direction:column;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPage, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"eui-page-breadcrumb\" />\n<ng-content select=\"eui-page-top-content\" />\n<!-- <ng-content select=\"eui-page-hero-header\" /> -->\n<ng-content select=\"eui-page-header\" />\n<ng-content select=\"eui-page-content\" />\n<ng-content select=\"eui-page-footer\" />\n<ng-content select=\"eui-page-columns\" />\n", styles: [".eui-21 :host.eui-page{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], columns: [{
                type: ContentChild,
                args: [EuiPageColumns, { static: true }]
            }] } });

/**
 * @description
 * Main content container for page layouts that holds the primary page content.
 *
 * @usageNotes
 * ```html
 * <eui-page-content>
 *   <p>Main page content goes here</p>
 * </eui-page-content>
 * ```
 *
 * ### Accessibility
 * - Consider using role="main" for primary content area
 * - Ensure content is keyboard accessible
 *
 * ### Notes
 * - Provides consistent padding and spacing for page content
 * - Use within eui-page for proper layout structure
 */
class EuiPageContent {
    get cssClasses() {
        return 'eui-page-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageContent, isStandalone: true, selector: "eui-page-content", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex;width:100%;flex-direction:column;padding:var(--eui-s-m)}.eui-21 .eui-page--with-columns :host{display:flex;overflow:hidden;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageContent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-content', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex;width:100%;flex-direction:column;padding:var(--eui-s-m)}.eui-21 .eui-page--with-columns :host{display:flex;overflow:hidden;height:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Body content area within the page header for additional header content.
 *
 * @usageNotes
 * ```html
 * <eui-page-header-body>
 *   <eui-tabs [items]="tabs"></eui-tabs>
 * </eui-page-header-body>
 * ```
 *
 * ### Notes
 * - Use for tabs, filters, or other header-level controls
 * - Content appears below the main header labels
 */
class EuiPageHeaderBody {
    get cssClasses() {
        return 'eui-page-header-body';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeaderBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageHeaderBody, isStandalone: true, selector: "eui-page-header-body", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeaderBody, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-page-header-body',
                    template: '<ng-content/>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Page header component that displays the page title, subtitle, and optional collapsible content.
 * Supports multi-line layouts and action items for page-level controls.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <eui-page-header label="Dashboard" subLabel="Overview"></eui-page-header>
 * ```
 *
 * ### With tooltips
 * ```html
 * <eui-page-header
 *   label="Settings"
 *   labelTooltip="Application settings"
 *   subLabel="Configuration"
 *   subLabelTooltip="Manage your preferences">
 * </eui-page-header>
 * ```
 *
 * ### Collapsible header
 * ```html
 * <eui-page-header
 *   [isCollapsible]="true"
 *   [isCollapsed]="collapsed"
 *   collapsedLabel="Expand details"
 *   expandedLabel="Collapse details"
 *   (collapse)="onCollapse($event)">
 *   <eui-page-header-body>
 *     Additional header content
 *   </eui-page-header-body>
 * </eui-page-header>
 * ```
 *
 * ### Accessibility
 * - Label should be the main page heading (h1)
 * - Collapse button has descriptive aria-label
 * - Tooltips provide additional context for screen readers
 *
 * ### Notes
 * - Use `isHeaderMultilines` for headers with wrapping content
 * - Action items can be added via eui-page-header-action-items
 * - Collapsible mode useful for hiding secondary information
 */
class EuiPageHeader {
    constructor() {
        // conventions if boolean : is / has prefix
        // new v17 usage of transform / act like coerce and included in Angular natively now
        this.isCollapsible = false;
        this.isCollapsed = false;
        this.isHeaderMultilines = false;
        this.collapsedLabel = ''; // Expand
        this.expandedLabel = ''; // Collapse
        this.collapse = new EventEmitter();
    }
    get cssClasses() {
        return [
            'eui-page-header',
            this.isCollapsible ? 'eui-page-header--collapsible' : '',
            this.isCollapsed ? 'eui-page-header--collapsed' : '',
            this.isHeaderMultilines ? 'eui-page-header--multilines' : '',
        ]
            .join(' ')
            .trim();
    }
    onToggle() {
        this.isCollapsed = !this.isCollapsed;
        this.collapse.emit(this.isCollapsed);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiPageHeader, isStandalone: true, selector: "eui-page-header", inputs: { label: "label", subLabel: "subLabel", labelTooltip: "labelTooltip", subLabelTooltip: "subLabelTooltip", isCollapsible: ["isCollapsible", "isCollapsible", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], isHeaderMultilines: ["isHeaderMultilines", "isHeaderMultilines", booleanAttribute], collapsedLabel: "collapsedLabel", expandedLabel: "expandedLabel" }, outputs: { collapse: "collapse" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "pageHeaderBodyContent", first: true, predicate: i0.forwardRef(() => EuiPageHeaderBody), descendants: true }], ngImport: i0, template: "<div class=\"eui-page-header__label-wrapper\">\n    <ng-content select=\"eui-page-header-label\"/>\n    <div class=\"eui-page-header__actions\">\n        <ng-content select=\"eui-page-header-action-items\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"eui-page-header-sub-label\"/>\n\n\n@if (isCollapsible) {\n    @if (!isCollapsed) {\n        <ng-container *ngTemplateOutlet=\"body\" />\n    }\n    <div\n        class=\"eui-button__expand-trigger\"\n        [class.eui-button__expand-trigger--collapsed]=\"isCollapsed\"\n        role=\"document\"\n        (click)=\"onToggle()\"\n        aria-label=\"Expand / Collapse trigger\">\n        @if (isCollapsed) {\n            <button type=\"button\" class=\"eui-button eui-button--expand-toggle\" aria-label=\"Expand\">\n                @if (expandedLabel) {\n                    <span class=\"eui-label eui-u-mr-xs\">{{ expandedLabel }}</span>\n                }\n                <eui-icon-svg icon=\"eui-chevron-down\" size=\"s\" fillColor=\"neutral\"></eui-icon-svg>\n            </button>\n        } @else {\n            <button type=\"button\" class=\"eui-button eui-button--expand-toggle\" aria-label=\"Collapse\">\n                @if (collapsedLabel) {\n                    <span class=\"eui-label eui-u-mr-xs\">{{ collapsedLabel }}</span>\n                }\n                <eui-icon-svg icon=\"eui-chevron-up\" size=\"s\" fillColor=\"neutral\"></eui-icon-svg>\n            </button>\n        }\n    </div>\n}\n\n@if (!isCollapsible && pageHeaderBodyContent) {\n    <ng-container *ngTemplateOutlet=\"body\" />\n}\n\n<ng-template #body>\n    <ng-content select=\"eui-page-header-body\" />\n</ng-template>\n", styles: [".eui-21 :host{display:flex;padding:var(--eui-s-m);flex-direction:column}.eui-21 :host .eui-page-header__label-wrapper{display:flex}.eui-21 :host .eui-page-header__actions{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeader, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgTemplateOutlet,
                        ...EUI_ICON,
                    ], template: "<div class=\"eui-page-header__label-wrapper\">\n    <ng-content select=\"eui-page-header-label\"/>\n    <div class=\"eui-page-header__actions\">\n        <ng-content select=\"eui-page-header-action-items\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"eui-page-header-sub-label\"/>\n\n\n@if (isCollapsible) {\n    @if (!isCollapsed) {\n        <ng-container *ngTemplateOutlet=\"body\" />\n    }\n    <div\n        class=\"eui-button__expand-trigger\"\n        [class.eui-button__expand-trigger--collapsed]=\"isCollapsed\"\n        role=\"document\"\n        (click)=\"onToggle()\"\n        aria-label=\"Expand / Collapse trigger\">\n        @if (isCollapsed) {\n            <button type=\"button\" class=\"eui-button eui-button--expand-toggle\" aria-label=\"Expand\">\n                @if (expandedLabel) {\n                    <span class=\"eui-label eui-u-mr-xs\">{{ expandedLabel }}</span>\n                }\n                <eui-icon-svg icon=\"eui-chevron-down\" size=\"s\" fillColor=\"neutral\"></eui-icon-svg>\n            </button>\n        } @else {\n            <button type=\"button\" class=\"eui-button eui-button--expand-toggle\" aria-label=\"Collapse\">\n                @if (collapsedLabel) {\n                    <span class=\"eui-label eui-u-mr-xs\">{{ collapsedLabel }}</span>\n                }\n                <eui-icon-svg icon=\"eui-chevron-up\" size=\"s\" fillColor=\"neutral\"></eui-icon-svg>\n            </button>\n        }\n    </div>\n}\n\n@if (!isCollapsible && pageHeaderBodyContent) {\n    <ng-container *ngTemplateOutlet=\"body\" />\n}\n\n<ng-template #body>\n    <ng-content select=\"eui-page-header-body\" />\n</ng-template>\n", styles: [".eui-21 :host{display:flex;padding:var(--eui-s-m);flex-direction:column}.eui-21 :host .eui-page-header__label-wrapper{display:flex}.eui-21 :host .eui-page-header__actions{display:flex;margin-left:auto}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], label: [{
                type: Input
            }], subLabel: [{
                type: Input
            }], labelTooltip: [{
                type: Input
            }], subLabelTooltip: [{
                type: Input
            }], isCollapsible: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isCollapsed: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isHeaderMultilines: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], pageHeaderBodyContent: [{
                type: ContentChild,
                args: [forwardRef(() => EuiPageHeaderBody)]
            }], collapsedLabel: [{
                type: Input
            }], expandedLabel: [{
                type: Input
            }], collapse: [{
                type: Output
            }] } });

/**
 * @description
 * Container for action buttons or controls in the page header.
 *
 * @usageNotes
 * ```html
 * <eui-page-header-action-items>
 *   <button euiButton>Save</button>
 *   <button euiButton euiSecondary>Cancel</button>
 * </eui-page-header-action-items>
 * ```
 *
 * ### Notes
 * - Use within eui-page-header for page-level actions
 * - Typically positioned on the right side of the header
 */
class EuiPageHeaderActionItems {
    get cssClasses() {
        return 'eui-page-header-action-items';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeaderActionItems, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageHeaderActionItems, isStandalone: true, selector: "eui-page-header-action-items", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex;gap:var(--eui-s-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeaderActionItems, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-header-action-items', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex;gap:var(--eui-s-s)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Primary label text for the page header.
 *
 * @usageNotes
 * ```html
 * <eui-page-header-label>Dashboard</eui-page-header-label>
 * ```
 */
class EuiPageHeaderLabel {
    get cssClasses() {
        return 'eui-page-header-label';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeaderLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageHeaderLabel, isStandalone: true, selector: "eui-page-header-label", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{font:var(--eui-f-xl-semi-bold)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeaderLabel, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-header-label', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{font:var(--eui-f-xl-semi-bold)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Secondary descriptive text for the page header.
 *
 * @usageNotes
 * ```html
 * <eui-page-header-sub-label>Overview and statistics</eui-page-header-sub-label>
 * ```
 */
class EuiPageHeaderSubLabel {
    get cssClasses() {
        return 'eui-page-header-sub-label';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeaderSubLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageHeaderSubLabel, isStandalone: true, selector: "eui-page-header-sub-label", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{font:var(--eui-f-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageHeaderSubLabel, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-header-sub-label', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{font:var(--eui-f-l)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Individual column within a page columns layout that supports collapsible behavior, headers, and responsive sizing.
 * Provides flexible column layouts with optional collapse functionality and automatic mobile handling.
 *
 * @usageNotes
 * ### Basic column
 * ```html
 * <eui-page-column label="Sidebar" euiSizeS>
 *   <eui-page-column-body>
 *     Sidebar content
 *   </eui-page-column-body>
 * </eui-page-column>
 * ```
 *
 * ### Collapsible column
 * ```html
 * <eui-page-column
 *   label="Filters"
 *   [isCollapsible]="true"
 *   [isCollapsed]="filtersCollapsed"
 *   expandAriaLabel="Expand filters"
 *   collapseAriaLabel="Collapse filters"
 *   (collapse)="onFiltersCollapse($event)">
 *   <eui-page-column-header>
 *     <eui-page-column-header-label>Filters</eui-page-column-header-label>
 *   </eui-page-column-header>
 *   <eui-page-column-body>Filter controls</eui-page-column-body>
 * </eui-page-column>
 * ```
 *
 * ### Auto-collapse on resize
 * ```html
 * <eui-page-column
 *   [isAutocloseOnContainerResize]="true"
 *   [autocloseContainerWidth]="768"
 *   [isAutocloseOnMobile]="true">
 *   Content
 * </eui-page-column>
 * ```
 *
 * ### Accessibility
 * - Provide descriptive labels for column identification
 * - Collapse buttons have proper aria-labels
 * - Ensure collapsed columns can be reopened via keyboard
 * - Maintain focus management when collapsing/expanding
 *
 * ### Notes
 * - Supports size variants: euiSizeS, euiSizeM, euiSizeL, euiSizeXL, etc.
 * - `isCollapsedWithIcons` shows icon-only view when collapsed
 * - `hasSidebarMenu` optimizes layout for sidebar menu content
 * - `hasHeaderBodyShrinkable` allows header to shrink on scroll
 * - Auto-collapse features help manage responsive layouts automatically
 */
class EuiPageColumn {
    constructor() {
        this.autocloseContainerWidth = null;
        this.isCollapsible = false;
        this.isCollapsed = false;
        this.isRightCollapsible = false;
        this.isHighlighted = false;
        this.isCollapsedWithIcons = false;
        this.hasSidebarMenu = false;
        this.hasHeaderBodyShrinkable = false;
        this.isAutocloseOnContainerResize = false;
        this.isAutocloseOnMobile = false;
        this.collapse = new EventEmitter();
        this.headerCollapse = new EventEmitter();
        this.isActive = false;
        this.isHeaderBodyShrinked = false;
        this.hasPreventMobileRendering = false;
        this.currentOffset = 0;
        this.previousOffset = 0;
        this.treshHold = 50;
        this.asService = inject(EuiAppShellService);
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.pageColumnsParent = inject(EuiPageColumns, { host: true, optional: true });
        this.destroy$ = new Subject();
    }
    get cssClasses() {
        return [
            this.isCollapsed ? 'eui-page-column eui-page-column--collapsed' : this.baseStatesDirective.getCssClasses('eui-page-column'),
            this.isCollapsedWithIcons ? 'eui-page-column__header--with-icons' : '',
            this.isHighlighted ? 'eui-page-column--highlighted' : '',
            this.isActive ? 'eui-page-column--active' : '',
            this.hasSidebarMenu ? 'eui-page-column--has-sidebar-menu' : '',
            this.isHeaderBodyShrinked ? 'eui-page-column__header--shrinked' : '',
            this.hasPreventMobileRendering ? 'eui-page-column--prevent-mobile-rendering' : '',
        ]
            .join(' ')
            .trim();
    }
    ngOnInit() {
        // this.baseStatesDirective.euiSizeS = false; // Bypass size default
        if (this.pageColumnsParent && this.isAutocloseOnContainerResize && this.autocloseContainerWidth) {
            this.pageColumnsParent.width.pipe(debounceTime(100), takeUntil(this.destroy$)).subscribe((parentWidth) => {
                if (parentWidth <= this.autocloseContainerWidth) {
                    this.isCollapsed = true;
                    this.collapse.emit(this.isCollapsed);
                }
            });
        }
        if (this.pageColumnsParent && this.pageColumnsParent.hasPreventMobileRendering) {
            this.hasPreventMobileRendering = this.pageColumnsParent.hasPreventMobileRendering;
        }
        if (this.isAutocloseOnMobile) {
            this.asService.breakpoints$.pipe(takeUntil(this.destroy$)).subscribe((bkps) => {
                if (bkps.isMobile) {
                    this.isCollapsed = true;
                }
            });
        }
        this.expandAriaLabel = `Expand ${this.label}`;
        this.collapseAriaLabel = `Collapse ${this.label}`;
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    onToggle() {
        this.isCollapsed = !this.isCollapsed;
        this.collapse.emit(this.isCollapsed);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumn, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: EuiPageColumn, isStandalone: true, selector: "eui-page-column", inputs: { label: "label", subLabel: "subLabel", autocloseContainerWidth: "autocloseContainerWidth", expandAriaLabel: "expandAriaLabel", collapseAriaLabel: "collapseAriaLabel", isCollapsible: ["isCollapsible", "isCollapsible", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], isRightCollapsible: ["isRightCollapsible", "isRightCollapsible", booleanAttribute], isHighlighted: ["isHighlighted", "isHighlighted", booleanAttribute], isCollapsedWithIcons: ["isCollapsedWithIcons", "isCollapsedWithIcons", booleanAttribute], hasSidebarMenu: ["hasSidebarMenu", "hasSidebarMenu", booleanAttribute], hasHeaderBodyShrinkable: ["hasHeaderBodyShrinkable", "hasHeaderBodyShrinkable", booleanAttribute], isAutocloseOnContainerResize: ["isAutocloseOnContainerResize", "isAutocloseOnContainerResize", booleanAttribute], isAutocloseOnMobile: ["isAutocloseOnMobile", "isAutocloseOnMobile", booleanAttribute] }, outputs: { collapse: "collapse", headerCollapse: "headerCollapse" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1$1.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSize3XL", "euiSize3XL", "euiSize4XL", "euiSize4XL", "euiSizeVariant", "euiSizeVariant", "euiHighlighted", "euiHighlighted"] }], ngImport: i0, template: "<ng-content select=\"eui-page-column-header\"/>\n<ng-content select=\"eui-page-column-body\"/>\n<ng-content select=\"eui-page-column-footer\"/>\n\n<!-- @if (label || subLabel || customHeaderLeftContent || customHeaderRightContent || isCollapsible) {\n\n    <div class=\"eui-page-column__header\" [class.eui-page-column__header--with-icons]=\"isCollapsedWithIcons\">\n        @if (!customHeaderLeftContent) {\n            <div class=\"eui-page-column__header-left-content\">\n                @if (label) {\n                    <div class=\"eui-page-column__header-left-content-label\">\n                        @if (customHeaderCollapsedContent) {\n                            <ng-content select=\"eui-page-column-header-collapsed-content\"></ng-content>\n                        }\n                        @if (!isCollapsedWithIcons) {\n                            {{ label }}\n                        }\n                    </div>\n                }\n                @if (subLabel) {\n                    <div class=\"eui-page-column__header-left-content-sub-label\">\n                        {{ subLabel }}\n                    </div>\n                }\n            </div>\n\n        } @else {\n            <div class=\"eui-page-column__header-left-content\">\n                <ng-content select=\"eui-page-column-header-left-content\"></ng-content>\n            </div>\n        }\n\n        <div class=\"eui-page-column__header-right-content\">\n            @if (customHeaderRightContent) {\n                <span class=\"eui-page-column__header-right-content-body\">\n                    <ng-content select=\"eui-page-column-header-right-content\"></ng-content>\n                </span>\n            }\n\n            @if (isCollapsible) {\n                <button euiButton euiBasicButton euiSecondary euiRounded euiIconButton euiSizeS type=\"button\"\n                    (click)=\"onToggle()\"\n                    [attr.aria-label]=\"isCollapsed ? expandAriaLabel : collapseAriaLabel\"\n                    class=\"eui-page-column__header-toggle\">\n\n                    @if (isCollapsed) {\n                        @if ((asService.state$ | async).breakpoints.isMobile && !hasPreventMobileRendering) {\n                            <eui-icon-svg icon=\"eui-chevron-down\"></eui-icon-svg>\n                        } @else {\n                            @if (isRightCollapsible) {\n                                <eui-icon-svg icon=\"eui-chevron-left\"></eui-icon-svg>\n                            } @else {\n                                <eui-icon-svg icon=\"eui-chevron-right\"></eui-icon-svg>\n                            }\n                        }\n                    } @else {\n                        @if ((asService.state$ | async).breakpoints.isMobile && !hasPreventMobileRendering) {\n                            <eui-icon-svg icon=\"eui-chevron-up\"></eui-icon-svg>\n                        } @else {\n                            @if (isRightCollapsible) {\n                                <eui-icon-svg icon=\"eui-chevron-right\"></eui-icon-svg>\n                            } @else {\n                                <eui-icon-svg icon=\"eui-chevron-left\"></eui-icon-svg>\n                            }\n                        }\n                    }\n                </button>\n            }\n        </div>\n    </div>\n}\n\n@if (customHeaderBodyContent) {\n    <div class=\"eui-page-column__header-left-content-body\">\n        <ng-content select=\"eui-page-column-header-body\"></ng-content>\n    </div>\n}\n\n<div class=\"eui-page-column__body\"\n    tabindex=\"0\"\n    [class.eui-page-column--collapsed-with-icons]=\"isCollapsedWithIcons\" cdkScrollable>\n    <ng-content *ngTemplateOutlet=\"body\"></ng-content>\n</div>\n\n@if (customFooterContent) {\n    <div class=\"eui-page-column__footer\" [class.eui-page-column__footer--highlighted]=\"isHighlighted\">\n        <ng-content select=\"eui-page-column-footer\"></ng-content>\n    </div>\n}\n\n<ng-template #body>\n    <ng-content select=\"eui-page-column-body\" />\n</ng-template> -->\n", styles: [".eui-21 :host{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;flex-basis:auto;height:auto;width:100%}.eui-21 :host:not(:last-child){border-right:1px solid var(--eui-c-divider)}.eui-21 :host.eui-page-column--size-full--size-full{flex:1 1 auto}.eui-21 :host.eui-page-column--collapsed{flex:0 0 3.5rem!important;max-width:3.5rem;min-width:3.5rem}.eui-21 :host.eui-page-column--size-s{flex:0 0 3.5rem;max-width:3.5rem;min-width:3.5rem}.eui-21 :host.eui-page-column--size-m{flex:0 0 150px;max-width:150px;min-width:150px}.eui-21 :host.eui-page-column--size-l{flex:0 0 200px;max-width:200px;min-width:200px}.eui-21 :host.eui-page-column--size-xl{flex:0 0 250px;max-width:250px;min-width:250px}.eui-21 :host.eui-page-column--size-xxl,.eui-21 :host.eui-page-column--size-2xl{flex:0 0 300px;max-width:300px;min-width:300px}.eui-21 :host.eui-page-column--size-xxxl,.eui-21 :host.eui-page-column--size-3xl{flex:0 0 350px;max-width:350px;min-width:350px}.eui-21 :host.eui-page-column--size-xxxxl,.eui-21 :host.eui-page-column--size-4xl{flex:0 0 400px;max-width:400px;min-width:400px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumn, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgTemplateOutlet,
                        CdkScrollable,
                        AsyncPipe,
                        ...EUI_ICON,
                        ...EUI_BUTTON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiSize2XL',
                                'euiSize3XL',
                                'euiSize4XL',
                                'euiSizeVariant',
                                'euiHighlighted',
                            ],
                        },
                    ], template: "<ng-content select=\"eui-page-column-header\"/>\n<ng-content select=\"eui-page-column-body\"/>\n<ng-content select=\"eui-page-column-footer\"/>\n\n<!-- @if (label || subLabel || customHeaderLeftContent || customHeaderRightContent || isCollapsible) {\n\n    <div class=\"eui-page-column__header\" [class.eui-page-column__header--with-icons]=\"isCollapsedWithIcons\">\n        @if (!customHeaderLeftContent) {\n            <div class=\"eui-page-column__header-left-content\">\n                @if (label) {\n                    <div class=\"eui-page-column__header-left-content-label\">\n                        @if (customHeaderCollapsedContent) {\n                            <ng-content select=\"eui-page-column-header-collapsed-content\"></ng-content>\n                        }\n                        @if (!isCollapsedWithIcons) {\n                            {{ label }}\n                        }\n                    </div>\n                }\n                @if (subLabel) {\n                    <div class=\"eui-page-column__header-left-content-sub-label\">\n                        {{ subLabel }}\n                    </div>\n                }\n            </div>\n\n        } @else {\n            <div class=\"eui-page-column__header-left-content\">\n                <ng-content select=\"eui-page-column-header-left-content\"></ng-content>\n            </div>\n        }\n\n        <div class=\"eui-page-column__header-right-content\">\n            @if (customHeaderRightContent) {\n                <span class=\"eui-page-column__header-right-content-body\">\n                    <ng-content select=\"eui-page-column-header-right-content\"></ng-content>\n                </span>\n            }\n\n            @if (isCollapsible) {\n                <button euiButton euiBasicButton euiSecondary euiRounded euiIconButton euiSizeS type=\"button\"\n                    (click)=\"onToggle()\"\n                    [attr.aria-label]=\"isCollapsed ? expandAriaLabel : collapseAriaLabel\"\n                    class=\"eui-page-column__header-toggle\">\n\n                    @if (isCollapsed) {\n                        @if ((asService.state$ | async).breakpoints.isMobile && !hasPreventMobileRendering) {\n                            <eui-icon-svg icon=\"eui-chevron-down\"></eui-icon-svg>\n                        } @else {\n                            @if (isRightCollapsible) {\n                                <eui-icon-svg icon=\"eui-chevron-left\"></eui-icon-svg>\n                            } @else {\n                                <eui-icon-svg icon=\"eui-chevron-right\"></eui-icon-svg>\n                            }\n                        }\n                    } @else {\n                        @if ((asService.state$ | async).breakpoints.isMobile && !hasPreventMobileRendering) {\n                            <eui-icon-svg icon=\"eui-chevron-up\"></eui-icon-svg>\n                        } @else {\n                            @if (isRightCollapsible) {\n                                <eui-icon-svg icon=\"eui-chevron-right\"></eui-icon-svg>\n                            } @else {\n                                <eui-icon-svg icon=\"eui-chevron-left\"></eui-icon-svg>\n                            }\n                        }\n                    }\n                </button>\n            }\n        </div>\n    </div>\n}\n\n@if (customHeaderBodyContent) {\n    <div class=\"eui-page-column__header-left-content-body\">\n        <ng-content select=\"eui-page-column-header-body\"></ng-content>\n    </div>\n}\n\n<div class=\"eui-page-column__body\"\n    tabindex=\"0\"\n    [class.eui-page-column--collapsed-with-icons]=\"isCollapsedWithIcons\" cdkScrollable>\n    <ng-content *ngTemplateOutlet=\"body\"></ng-content>\n</div>\n\n@if (customFooterContent) {\n    <div class=\"eui-page-column__footer\" [class.eui-page-column__footer--highlighted]=\"isHighlighted\">\n        <ng-content select=\"eui-page-column-footer\"></ng-content>\n    </div>\n}\n\n<ng-template #body>\n    <ng-content select=\"eui-page-column-body\" />\n</ng-template> -->\n", styles: [".eui-21 :host{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;flex-basis:auto;height:auto;width:100%}.eui-21 :host:not(:last-child){border-right:1px solid var(--eui-c-divider)}.eui-21 :host.eui-page-column--size-full--size-full{flex:1 1 auto}.eui-21 :host.eui-page-column--collapsed{flex:0 0 3.5rem!important;max-width:3.5rem;min-width:3.5rem}.eui-21 :host.eui-page-column--size-s{flex:0 0 3.5rem;max-width:3.5rem;min-width:3.5rem}.eui-21 :host.eui-page-column--size-m{flex:0 0 150px;max-width:150px;min-width:150px}.eui-21 :host.eui-page-column--size-l{flex:0 0 200px;max-width:200px;min-width:200px}.eui-21 :host.eui-page-column--size-xl{flex:0 0 250px;max-width:250px;min-width:250px}.eui-21 :host.eui-page-column--size-xxl,.eui-21 :host.eui-page-column--size-2xl{flex:0 0 300px;max-width:300px;min-width:300px}.eui-21 :host.eui-page-column--size-xxxl,.eui-21 :host.eui-page-column--size-3xl{flex:0 0 350px;max-width:350px;min-width:350px}.eui-21 :host.eui-page-column--size-xxxxl,.eui-21 :host.eui-page-column--size-4xl{flex:0 0 400px;max-width:400px;min-width:400px}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], label: [{
                type: Input
            }], subLabel: [{
                type: Input
            }], autocloseContainerWidth: [{
                type: Input
            }], expandAriaLabel: [{
                type: Input
            }], collapseAriaLabel: [{
                type: Input
            }], isCollapsible: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isCollapsed: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isRightCollapsible: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isHighlighted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isCollapsedWithIcons: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasSidebarMenu: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasHeaderBodyShrinkable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isAutocloseOnContainerResize: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isAutocloseOnMobile: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], collapse: [{
                type: Output
            }], headerCollapse: [{
                type: Output
            }] } });

/**
 * @description
 * Header container for page columns with collapse/expand functionality.
 *
 * @usageNotes
 * ```html
 * <eui-page-column-header>
 *   <eui-page-column-header-label>Filters</eui-page-column-header-label>
 *   <eui-page-column-header-sub-label>Active filters: 3</eui-page-column-header-sub-label>
 * </eui-page-column-header>
 * ```
 *
 * ### Accessibility
 * - Collapse button has descriptive aria-labels
 * - Keyboard accessible with Enter and Space
 *
 * ### Notes
 * - Automatically integrates with parent eui-page-column collapse state
 * - Use sub-components for structured header content
 */
class EuiPageColumnHeader {
    constructor() {
        this.string = 'eui-page-column-header';
        this.pageColumnParent = inject(EuiPageColumn, { host: true, optional: true });
    }
    onToggle() {
        this.pageColumnParent.isCollapsed = !this.pageColumnParent.isCollapsed;
        this.pageColumnParent.collapse.emit(this.pageColumnParent.isCollapsed);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiPageColumnHeader, isStandalone: true, selector: "eui-page-column-header", inputs: { expandAriaLabel: "expandAriaLabel", collapseAriaLabel: "collapseAriaLabel" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div class=\"eui-page-column-header__start-wrapper\">\n    <ng-content select=\"eui-page-column-header-start\"/>\n    \n    <div class=\"eui-page-column-header__label-wrapper\">\n        <ng-content select=\"eui-page-column-header-label\"/>\n        <ng-content select=\"eui-page-column-header-sub-label\"/>\n    </div>\n</div>\n\n<div class=\"eui-page-column-header__end-wrapper\">\n    <ng-content select=\"eui-page-column-header-end\"/>\n\n    @if (pageColumnParent.isCollapsible) {\n        <button euiButton euiBasicButton euiSecondary euiRounded euiIconButton euiSizeS type=\"button\"\n            (click)=\"onToggle()\"\n            [attr.aria-label]=\"pageColumnParent.isCollapsed ? expandAriaLabel : collapseAriaLabel\"\n            class=\"eui-page-column__header-toggle\">\n    \n            @if (pageColumnParent.isCollapsed) {\n                <!-- @if ((asService.state$ | async).breakpoints.isMobile && !hasPreventMobileRendering) { -->\n                    <!-- <eui-icon-svg icon=\"eui-chevron-down\"></eui-icon-svg> -->\n                <!-- } @else { -->\n                    @if (pageColumnParent.isRightCollapsible) {\n                        <eui-icon-svg icon=\"eui-chevron-left\"></eui-icon-svg>\n                    } @else {\n                        <eui-icon-svg icon=\"eui-chevron-right\"></eui-icon-svg>\n                    }\n                <!-- } -->\n            } @else {\n                <!-- @if ((asService.state$ | async).breakpoints.isMobile && !hasPreventMobileRendering) { -->\n                    <!-- <eui-icon-svg icon=\"eui-chevron-up\"></eui-icon-svg> -->\n                <!-- } @else { -->\n                    @if (pageColumnParent.isRightCollapsible) {\n                        <eui-icon-svg icon=\"eui-chevron-right\"></eui-icon-svg>\n                    } @else {\n                        <eui-icon-svg icon=\"eui-chevron-left\"></eui-icon-svg>\n                    }\n                <!-- } -->\n            }\n        </button>\n    }\n</div>\n\n", styles: [".eui-21 :host{display:flex;flex:0 0 auto;align-items:center;background-color:var(--eui-c-surface-shell);border-bottom:1px solid var(--eui-c-divider-light);width:100%;min-height:calc(var(--eui-s-5xl) + var(--eui-s-s));padding:var(--eui-s-s)}.eui-21 :host .eui-page-colum-header__label-wrapper{display:flex;flex-direction:column}.eui-21 :host .eui-page-colum-header__end-wrapper{display:flex;margin-left:auto}.eui-21 .eui-page-column--collapsed :host.eui-page-column-header--with-icons{flex:0 0 5.5rem;max-width:5.5rem;min-width:5.5rem}.eui-21 .eui-page-column--collapsed :host .eui-page-column-header__start-wrapper{display:none}\n"], dependencies: [{ kind: "component", type: i1$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeader, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_BUTTON,
                        ...EUI_ICON,
                    ], template: "<div class=\"eui-page-column-header__start-wrapper\">\n    <ng-content select=\"eui-page-column-header-start\"/>\n    \n    <div class=\"eui-page-column-header__label-wrapper\">\n        <ng-content select=\"eui-page-column-header-label\"/>\n        <ng-content select=\"eui-page-column-header-sub-label\"/>\n    </div>\n</div>\n\n<div class=\"eui-page-column-header__end-wrapper\">\n    <ng-content select=\"eui-page-column-header-end\"/>\n\n    @if (pageColumnParent.isCollapsible) {\n        <button euiButton euiBasicButton euiSecondary euiRounded euiIconButton euiSizeS type=\"button\"\n            (click)=\"onToggle()\"\n            [attr.aria-label]=\"pageColumnParent.isCollapsed ? expandAriaLabel : collapseAriaLabel\"\n            class=\"eui-page-column__header-toggle\">\n    \n            @if (pageColumnParent.isCollapsed) {\n                <!-- @if ((asService.state$ | async).breakpoints.isMobile && !hasPreventMobileRendering) { -->\n                    <!-- <eui-icon-svg icon=\"eui-chevron-down\"></eui-icon-svg> -->\n                <!-- } @else { -->\n                    @if (pageColumnParent.isRightCollapsible) {\n                        <eui-icon-svg icon=\"eui-chevron-left\"></eui-icon-svg>\n                    } @else {\n                        <eui-icon-svg icon=\"eui-chevron-right\"></eui-icon-svg>\n                    }\n                <!-- } -->\n            } @else {\n                <!-- @if ((asService.state$ | async).breakpoints.isMobile && !hasPreventMobileRendering) { -->\n                    <!-- <eui-icon-svg icon=\"eui-chevron-up\"></eui-icon-svg> -->\n                <!-- } @else { -->\n                    @if (pageColumnParent.isRightCollapsible) {\n                        <eui-icon-svg icon=\"eui-chevron-right\"></eui-icon-svg>\n                    } @else {\n                        <eui-icon-svg icon=\"eui-chevron-left\"></eui-icon-svg>\n                    }\n                <!-- } -->\n            }\n        </button>\n    }\n</div>\n\n", styles: [".eui-21 :host{display:flex;flex:0 0 auto;align-items:center;background-color:var(--eui-c-surface-shell);border-bottom:1px solid var(--eui-c-divider-light);width:100%;min-height:calc(var(--eui-s-5xl) + var(--eui-s-s));padding:var(--eui-s-s)}.eui-21 :host .eui-page-colum-header__label-wrapper{display:flex;flex-direction:column}.eui-21 :host .eui-page-colum-header__end-wrapper{display:flex;margin-left:auto}.eui-21 .eui-page-column--collapsed :host.eui-page-column-header--with-icons{flex:0 0 5.5rem;max-width:5.5rem;min-width:5.5rem}.eui-21 .eui-page-column--collapsed :host .eui-page-column-header__start-wrapper{display:none}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }], expandAriaLabel: [{
                type: Input
            }], collapseAriaLabel: [{
                type: Input
            }] } });

/**
 * @description
 * Leading content area in the column header for icons or controls.
 *
 * @usageNotes
 * ```html
 * <eui-page-column-header-start>
 *   <eui-icon-svg icon="filter"></eui-icon-svg>
 * </eui-page-column-header-start>
 * ```
 */
class EuiPageColumnHeaderStart {
    constructor() {
        this.string = 'eui-page-column-header-start';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderStart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageColumnHeaderStart, isStandalone: true, selector: "eui-page-column-header-start", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderStart, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column-header-start', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Trailing content area in the column header for actions or controls.
 *
 * @usageNotes
 * ```html
 * <eui-page-column-header-end>
 *   <button euiIconButton icon="settings"></button>
 * </eui-page-column-header-end>
 * ```
 */
class EuiPageColumnHeaderEnd {
    constructor() {
        this.string = 'eui-page-column-header-end';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderEnd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageColumnHeaderEnd, isStandalone: true, selector: "eui-page-column-header-end", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderEnd, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column-header-end', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Primary label text for the column header.
 *
 * @usageNotes
 * ```html
 * <eui-page-column-header-label>Navigation</eui-page-column-header-label>
 * ```
 */
class EuiPageColumnHeaderLabel {
    constructor() {
        this.string = 'eui-page-column-header-label';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageColumnHeaderLabel, isStandalone: true, selector: "eui-page-column-header-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex;font:var(--eui-f-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderLabel, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column-header-label', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex;font:var(--eui-f-l)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Secondary descriptive text for the column header.
 *
 * @usageNotes
 * ```html
 * <eui-page-column-header-sub-label>5 items</eui-page-column-header-sub-label>
 * ```
 */
class EuiPageColumnHeaderSubLabel {
    constructor() {
        this.string = 'eui-page-column-header-sub-label';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderSubLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageColumnHeaderSubLabel, isStandalone: true, selector: "eui-page-column-header-sub-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderSubLabel, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column-header-sub-label', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Body content area within the column header for additional header content.
 *
 * @usageNotes
 * ```html
 * <eui-page-column-header-body>
 *   <eui-badge>New</eui-badge>
 * </eui-page-column-header-body>
 * ```
 */
class EuiPageColumnHeaderBody {
    constructor() {
        this.string = 'eui-page-column-header-body';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageColumnHeaderBody, isStandalone: true, selector: "eui-page-column-header-body", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnHeaderBody, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column-header-body', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Body content container for page columns that holds the main content area.
 *
 * @usageNotes
 * ```html
 * <eui-page-column-body>
 *   <p>Main column content</p>
 * </eui-page-column-body>
 * ```
 *
 * ### Notes
 * - Use within eui-page-column for structured content layout
 * - Provides scrollable content area when needed
 */
class EuiPageColumnBody {
    constructor() {
        this.string = 'eui-page-column-body';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageColumnBody, isStandalone: true, selector: "eui-page-column-body", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex;flex-direction:column;flex:1 1 auto;overflow-y:auto;padding:var(--eui-s-s)}.eui-21 .eui-page-column--collapsed :host{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnBody, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column-body', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex;flex-direction:column;flex:1 1 auto;overflow-y:auto;padding:var(--eui-s-s)}.eui-21 .eui-page-column--collapsed :host{display:none}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Footer container for page columns that displays actions or information at the bottom of the column.
 *
 * @usageNotes
 * ```html
 * <eui-page-column-footer>
 *   <button euiButton>Apply</button>
 * </eui-page-column-footer>
 * ```
 *
 * ### Notes
 * - Use within eui-page-column for column-level actions
 * - Typically contains buttons or status information
 */
class EuiPageColumnFooter {
    constructor() {
        this.string = 'eui-page-column-footer';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageColumnFooter, isStandalone: true, selector: "eui-page-column-footer", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex;flex:0 0 auto;align-items:center;justify-content:center;padding:var(--eui-s-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageColumnFooter, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-column-footer', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex;flex:0 0 auto;align-items:center;justify-content:center;padding:var(--eui-s-xs)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Footer container for page layouts that displays actions or information at the bottom of the page.
 *
 * @usageNotes
 * ```html
 * <eui-page-footer>
 *   <button euiButton>Save</button>
 *   <button euiButton euiSecondary>Cancel</button>
 * </eui-page-footer>
 * ```
 *
 * ### With highlighted state
 * ```html
 * <eui-page-footer euiHighlighted>
 *   Footer content
 * </eui-page-footer>
 * ```
 *
 * ### Accessibility
 * - Use role="contentinfo" for page-level footer
 * - Ensure footer actions are keyboard accessible
 *
 * ### Notes
 * - Supports `euiHighlighted` for visual emphasis
 * - Typically contains form actions or page-level controls
 */
class EuiPageFooter {
    constructor() {
        this.e2eAttr = 'eui-page-footer';
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    get cssClasses() {
        return this.baseStatesDirective.getCssClasses('eui-page-footer');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageFooter, isStandalone: true, selector: "eui-page-footer", inputs: { e2eAttr: "e2eAttr" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1$1.BaseStatesDirective, inputs: ["euiHighlighted", "euiHighlighted"] }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageFooter, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-page-footer',
                    template: '<ng-content/>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiHighlighted',
                            ],
                        },
                    ],
                }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }] } });

/**
 * @description
 * Breadcrumb container for page navigation that displays the current location within the application hierarchy.
 *
 * @usageNotes
 * ```html
 * <eui-page-breadcrumb>
 *   <eui-breadcrumb [items]="breadcrumbItems"></eui-breadcrumb>
 * </eui-page-breadcrumb>
 * ```
 *
 * ### Accessibility
 * - Use nav element with aria-label="Breadcrumb" for screen readers
 * - Current page should be marked with aria-current="page"
 *
 * ### Notes
 * - Typically placed at the top of the page before the header
 * - Works with eui-breadcrumb component for navigation trails
 */
class EuiPageBreadcrumb {
    constructor() {
        this.class = 'eui-page-breadcrumb';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageBreadcrumb, isStandalone: true, selector: "eui-page-breadcrumb", host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{display:flex;position:relative;width:100%}.eui-21 :host+.eui-page-header{padding:0 var(--eui-s-m) var(--eui-s-m) var(--eui-s-m)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageBreadcrumb, decorators: [{
            type: Component,
            args: [{ selector: 'eui-page-breadcrumb', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{display:flex;position:relative;width:100%}.eui-21 :host+.eui-page-header{padding:0 var(--eui-s-m) var(--eui-s-m) var(--eui-s-m)!important}\n"] }]
        }], propDecorators: { class: [{
                type: HostBinding
            }] } });

/**
 * @description
 * Top content container for page layouts that displays content above the main header.
 *
 * @usageNotes
 * ```html
 * <eui-page-top-content>
 *   <eui-alert>Important notification</eui-alert>
 * </eui-page-top-content>
 * ```
 *
 * ### Notes
 * - Use for alerts, banners, or announcements above the page header
 * - Positioned at the very top of the page layout
 */
class EuiPageTopContent {
    constructor() {
        this.e2eAttr = 'eui-page-top-content';
    }
    get cssClasses() {
        return 'eui-page-top-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageTopContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiPageTopContent, isStandalone: true, selector: "eui-page-top-content", inputs: { e2eAttr: "e2eAttr" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiPageTopContent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-page-top-content',
                    template: '<ng-content/>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }] } });

// import { EuiPageBreadcrumbComponent } from './components/eui-page-breadcrumb/eui-page-breadcrumb.component';
// import { EuiPageHeroHeaderComponent } from './components/eui-page-hero-header/eui-page-hero-header.component';
// import { EuiPageTopContentComponent } from './components/eui-page-top-content/eui-page-top-content.component';
// export * from './components/eui-page-hero-header/eui-page-hero-header.component';
// export * from './components/eui-page-top-content/eui-page-top-content.component';
const EUI_PAGE = [
    EuiPage,
    EuiPageContent,
    EuiPageHeader,
    EuiPageHeaderLabel,
    EuiPageHeaderSubLabel,
    EuiPageHeaderBody,
    EuiPageHeaderActionItems,
    EuiPageColumns,
    EuiPageColumn,
    EuiPageColumnHeader,
    EuiPageColumnHeaderStart,
    EuiPageColumnHeaderEnd,
    EuiPageColumnHeaderLabel,
    EuiPageColumnHeaderSubLabel,
    EuiPageColumnHeaderBody,
    EuiPageColumnFooter,
    EuiPageColumnBody,
    EuiPageFooter,
    EuiPageBreadcrumb,
    EuiPageTopContent,
];

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

export { EUI_PAGE, EuiPage, EuiPageBreadcrumb, EuiPageColumn, EuiPageColumnBody, EuiPageColumnFooter, EuiPageColumnHeader, EuiPageColumnHeaderBody, EuiPageColumnHeaderEnd, EuiPageColumnHeaderLabel, EuiPageColumnHeaderStart, EuiPageColumnHeaderSubLabel, EuiPageColumns, EuiPageContent, EuiPageFooter, EuiPageHeader, EuiPageHeaderActionItems, EuiPageHeaderBody, EuiPageHeaderLabel, EuiPageHeaderSubLabel, EuiPageTopContent };
//# sourceMappingURL=eui-components-eui-page-v2.mjs.map
