import * as i0 from '@angular/core';
import { HostBinding, ChangeDetectionStrategy, Component, inject, booleanAttribute, Input } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/**
 * Content projection component for displaying call-to-action elements within eui-banner.
 * Provides consistent styling and positioning for action buttons or links in banner contexts.
 * Must be used as a child of eui-banner component.
 * Typically contains buttons, links, or other interactive elements that prompt user action.
 *
 * @usageNotes
 * ```html
 * <eui-banner imageUrl="image.jpg">
 *   <eui-banner-title>Join Us</eui-banner-title>
 *   <eui-banner-description>Be part of something great</eui-banner-description>
 *   <eui-banner-cta>
 *     <button euiButton euiCTAButton>Get Started</button>
 *   </eui-banner-cta>
 * </eui-banner>
 * ```
 *
 * ### Accessibility
 * - CTA buttons should have descriptive, action-oriented labels
 * - Interactive elements are keyboard accessible
 * - Ensure sufficient contrast for buttons on banner backgrounds
 *
 * ### Notes
 * - Must be direct child of eui-banner component
 * - Typically placed after title and description
 * - Can contain buttons, links, or button groups
 * - Automatically positioned according to banner layout
 * - Works with euiInverse for proper button styling on dark backgrounds
 */
class EuiBannerCtaComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-banner-cta'
         */
        this.string = 'eui-banner-cta';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerCtaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiBannerCtaComponent, isStandalone: true, selector: "eui-banner-cta", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-banner :host{margin-top:var(--eui-s-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerCtaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-banner-cta', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-banner :host{margin-top:var(--eui-s-s)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Content projection component for displaying descriptive text within eui-banner.
 * Provides consistent typography and styling for banner description content.
 * Must be used as a child of eui-banner component.
 * Accepts text, paragraphs, or inline elements through content projection.
 *
 * @usageNotes
 * ```html
 * <eui-banner imageUrl="image.jpg">
 *   <eui-banner-title>Innovation Hub</eui-banner-title>
 *   <eui-banner-description>
 *     Explore cutting-edge solutions and collaborate with experts.
 *   </eui-banner-description>
 * </eui-banner>
 * ```
 *
 * ### Accessibility
 * - Description text is readable by screen readers after title
 * - Provides additional context about banner content
 * - Ensure sufficient contrast with background images
 *
 * ### Notes
 * - Must be direct child of eui-banner component
 * - Typically placed after eui-banner-title
 * - Styled as secondary/body text
 * - Automatically adapts to banner size variants
 * - Works with euiInverse for light text on dark backgrounds
 */
class EuiBannerDescriptionComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-banner-description'
         */
        this.string = 'eui-banner-description';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiBannerDescriptionComponent, isStandalone: true, selector: "eui-banner-description", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-banner :host{font:var(--_description-font)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerDescriptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-banner-description', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-banner :host{font:var(--_description-font)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Content projection component for displaying the title within eui-banner.
 * Provides consistent typography and styling for banner title text.
 * Must be used as a child of eui-banner component.
 * Accepts text or inline elements through content projection.
 *
 * @usageNotes
 * ```html
 * <eui-banner imageUrl="image.jpg">
 *   <eui-banner-title>Welcome to Our Platform</eui-banner-title>
 *   <eui-banner-description>Start your journey today</eui-banner-description>
 * </eui-banner>
 * ```
 *
 * ### Accessibility
 * - Title text is readable by screen readers in natural order
 * - Use concise, descriptive titles that convey banner purpose
 * - Ensure sufficient contrast with background when using images
 *
 * ### Notes
 * - Must be direct child of eui-banner component
 * - Styled as prominent heading text
 * - Automatically adapts to banner size variants
 * - Works with euiInverse for light text on dark backgrounds
 */
class EuiBannerTitleComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-banner-title'
         */
        this.string = 'eui-banner-title';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiBannerTitleComponent, isStandalone: true, selector: "eui-banner-title", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-banner :host{font:var(--_title-font)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-banner-title', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-banner :host{font:var(--_title-font)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Content projection component for embedding video content within eui-banner.
 * Provides consistent styling and layout for video elements in banner contexts.
 * Must be used as a child of eui-banner component with isVideoBanner enabled.
 * Accepts any video-related content through content projection.
 *
 * @usageNotes
 * ```html
 * <eui-banner [isVideoBanner]="true" euiSizeL>
 *   <eui-banner-video>
 *     <video poster="thumbnail.jpg" autoplay loop muted>
 *       <source src="video.mp4" type="video/mp4">
 *     </video>
 *   </eui-banner-video>
 *   <eui-banner-title>Innovation in Action</eui-banner-title>
 *   <eui-banner-description>Watch our story unfold</eui-banner-description>
 * </eui-banner>
 * ```
 *
 * ### Accessibility
 * - Video should include captions for users with hearing impairments
 * - Provide poster image for video thumbnail
 * - Use muted attribute for autoplay videos to comply with accessibility guidelines
 * - Consider providing alternative text description of video content
 *
 * ### Notes
 * - Must be direct child of eui-banner component
 * - Parent banner should have isVideoBanner set to true
 * - Video element should include poster attribute for initial display
 * - Use autoplay, loop, and muted attributes for background videos
 * - Video is displayed as full-width background
 * - Content (title, description) overlays the video
 * - Consider video file size and format for performance
 */
class EuiBannerVideoComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-banner-video'
         */
        this.string = 'eui-banner-video';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiBannerVideoComponent, isStandalone: true, selector: "eui-banner-video", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-banner :host{height:100%;position:static;width:100%;margin:0}.eui-21 .eui-banner :host ::ng-deep video{aspect-ratio:4/1;display:block;height:100%;object-fit:cover;position:relative;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerVideoComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-banner-video', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-banner :host{height:100%;position:static;width:100%;margin:0}.eui-21 .eui-banner :host ::ng-deep video{aspect-ratio:4/1;display:block;height:100%;object-fit:cover;position:relative;width:100%}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Banner component for displaying prominent content sections with images or videos across the full width of a page.
 * Provides flexible positioning options (top, center, bottom) and supports inverse color schemes.
 * Can display static images or video backgrounds with content overlay.
 * Supports size variants (S, M, L) and outline styling through `BaseStatesDirective`.
 *
 * @usageNotes
 * #### Basic banner with image
 * ```html
 * <eui-banner imageUrl="https://example.com/image.jpg">
 *   <eui-banner-title>Welcome</eui-banner-title>
 *   <eui-banner-description>Discover our services</eui-banner-description>
 * </eui-banner>
 * ```
 *
 * #### Banner with CTA and positioning
 * ```html
 * <eui-banner imageUrl="image.jpg" [euiPositionCenter]="true" [euiInverse]="true">
 *   <eui-banner-title>Get Started</eui-banner-title>
 *   <eui-banner-description>Join us today</eui-banner-description>
 *   <eui-banner-cta>
 *     <button euiButton euiCTAButton>Sign Up</button>
 *   </eui-banner-cta>
 * </eui-banner>
 * ```
 *
 * #### Video banner
 * ```html
 * <eui-banner [isVideoBanner]="true" euiSizeL>
 *   <eui-banner-video>
 *     <video autoplay loop muted>
 *       <source src="video.mp4" type="video/mp4">
 *     </video>
 *   </eui-banner-video>
 *   <eui-banner-title>Innovation</eui-banner-title>
 * </eui-banner>
 * ```
 *
 * ### Accessibility
 * - No ARIA landmark role assigned; banner is a visual component
 * - Ensure banner images have meaningful content or are decorative
 * - Use euiInverse for better text contrast on dark images
 * - Video content should include captions when containing important information
 * - CTA buttons should have descriptive labels
 *
 * ### Notes
 * - Size variants: euiSizeS, euiSizeM (default), euiSizeL control banner height
 * - Position options: euiPositionTop, euiPositionCenter (default is bottom)
 * - euiInverse applies light text on dark background for better image contrast
 * - imageUrl displays static background image
 * - isVideoBanner enables video background mode, use with eui-banner-video
 * - euiOutline adds border outline styling
 * - Content is overlaid on background image/video
 * - Typically contains eui-banner-title, eui-banner-description, and optionally eui-banner-cta
 */
class EuiBannerComponent {
    constructor() {
        /**
         * Data attribute value for end-to-end testing identification.
         * Applied as data-e2e attribute on the host element.
         * @default 'eui-banner'
         */
        this.e2eAttr = 'eui-banner';
        /**
         * Positions the banner content at the top of the banner area.
         * When true, aligns content to the top with appropriate spacing.
         * @default false
         */
        this.euiPositionTop = false;
        /**
         * Positions the banner content at the center of the banner area.
         * When true, vertically centers content within the banner.
         * @default false
         */
        this.euiPositionCenter = false;
        /**
         * Applies inverse color scheme to the banner.
         * When true, uses light text on dark background for better contrast with images.
         * @default false
         */
        this.euiInverse = false;
        /**
         * Enables video banner mode for displaying video backgrounds.
         * When true, configures banner to support video content instead of static images.
         * @default false
         */
        this.isVideoBanner = false;
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-banner'),
            this.euiPositionTop ? 'eui-banner--top' : '',
            this.euiPositionCenter ? 'eui-banner--center' : '',
            this.euiInverse ? 'eui-banner--inverse' : '',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiBannerComponent, isStandalone: true, selector: "eui-banner", inputs: { e2eAttr: "e2eAttr", euiPositionTop: ["euiPositionTop", "euiPositionTop", booleanAttribute], euiPositionCenter: ["euiPositionCenter", "euiPositionCenter", booleanAttribute], euiInverse: ["euiInverse", "euiInverse", booleanAttribute], isVideoBanner: ["isVideoBanner", "isVideoBanner", booleanAttribute], imageUrl: "imageUrl" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeVariant", "euiSizeVariant", "euiOutline", "euiOutline"] }], ngImport: i0, template: "@if (imageUrl) {\n    <figure class=\"eui-banner__picture-container\" aria-hidden=\"true\">\n        <picture class=\"eui-banner__picture\">\n            <img class=\"eui-banner__image\" src=\"{{imageUrl}}\" alt=\"\">\n        </picture>\n    </figure>\n} @else {\n    <ng-content select=\"eui-banner-video\"/>\n}\n\n<div class=\"eui-banner__info\">\n    <div class=\"eui-banner__container\">\n        <ng-content select=\"eui-banner-title\"/>\n        <ng-content select=\"eui-banner-description\"/>\n        <ng-content select=\"eui-banner-cta\"/>\n    </div>\n</div>", styles: [".eui-21 :host.eui-banner{--_title-font: var(--eui-f-4xl-medium);--_description-font: var(--eui-f-2xl)}.eui-21 :host.eui-banner{display:flex;flex-direction:column;position:relative;width:100%;align-items:center}.eui-21 :host.eui-banner .eui-banner__picture-container{height:100%;position:static;width:100%;margin:0}.eui-21 :host.eui-banner .eui-banner__picture{display:block;height:100%;position:relative;margin:0}.eui-21 :host.eui-banner .eui-banner__image{aspect-ratio:4/1;background-size:100%;background-repeat:no-repeat;object-position:top;display:block;height:100%;object-fit:cover;position:relative;width:100%}.eui-21 :host.eui-banner .eui-banner__info{position:absolute;display:flex;align-items:end;bottom:var(--eui-s-xl);flex-grow:1;width:100%;height:100%;padding:var(--eui-s-5xl) var(--eui-s-3xl)}.eui-21 :host.eui-banner .eui-banner__container{border-radius:var(--eui-br-s);min-width:50%;background-color:var(--eui-c-surface-container);display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-l)}.eui-21 :host.eui-banner--top .eui-banner__info{align-items:start;top:var(--eui-s-xl)}.eui-21 :host.eui-banner--center .eui-banner__info{align-items:center;bottom:0}.eui-21 :host.eui-banner--inverse .eui-banner__container{background-color:#000c;color:#fff}.eui-21 :host.eui-banner--size-s .eui-banner__image{aspect-ratio:5/1}.eui-21 :host.eui-banner--size-l .eui-banner__image{aspect-ratio:3/1}@media screen and (max-width:995px){.eui-21 :host.eui-banner .eui-banner__info{position:relative;padding:var(--eui-s-m) 0 0 0;align-items:start}.eui-21 :host.eui-banner .eui-banner__container{background-color:transparent;padding:var(--eui-s-m) 0 0 0}.eui-21 :host.eui-banner--inverse .eui-banner__container{background-color:transparent;color:var(--eui-c-text)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBannerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-banner', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeVariant',
                                'euiOutline',
                            ],
                        },
                    ], template: "@if (imageUrl) {\n    <figure class=\"eui-banner__picture-container\" aria-hidden=\"true\">\n        <picture class=\"eui-banner__picture\">\n            <img class=\"eui-banner__image\" src=\"{{imageUrl}}\" alt=\"\">\n        </picture>\n    </figure>\n} @else {\n    <ng-content select=\"eui-banner-video\"/>\n}\n\n<div class=\"eui-banner__info\">\n    <div class=\"eui-banner__container\">\n        <ng-content select=\"eui-banner-title\"/>\n        <ng-content select=\"eui-banner-description\"/>\n        <ng-content select=\"eui-banner-cta\"/>\n    </div>\n</div>", styles: [".eui-21 :host.eui-banner{--_title-font: var(--eui-f-4xl-medium);--_description-font: var(--eui-f-2xl)}.eui-21 :host.eui-banner{display:flex;flex-direction:column;position:relative;width:100%;align-items:center}.eui-21 :host.eui-banner .eui-banner__picture-container{height:100%;position:static;width:100%;margin:0}.eui-21 :host.eui-banner .eui-banner__picture{display:block;height:100%;position:relative;margin:0}.eui-21 :host.eui-banner .eui-banner__image{aspect-ratio:4/1;background-size:100%;background-repeat:no-repeat;object-position:top;display:block;height:100%;object-fit:cover;position:relative;width:100%}.eui-21 :host.eui-banner .eui-banner__info{position:absolute;display:flex;align-items:end;bottom:var(--eui-s-xl);flex-grow:1;width:100%;height:100%;padding:var(--eui-s-5xl) var(--eui-s-3xl)}.eui-21 :host.eui-banner .eui-banner__container{border-radius:var(--eui-br-s);min-width:50%;background-color:var(--eui-c-surface-container);display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-l)}.eui-21 :host.eui-banner--top .eui-banner__info{align-items:start;top:var(--eui-s-xl)}.eui-21 :host.eui-banner--center .eui-banner__info{align-items:center;bottom:0}.eui-21 :host.eui-banner--inverse .eui-banner__container{background-color:#000c;color:#fff}.eui-21 :host.eui-banner--size-s .eui-banner__image{aspect-ratio:5/1}.eui-21 :host.eui-banner--size-l .eui-banner__image{aspect-ratio:3/1}@media screen and (max-width:995px){.eui-21 :host.eui-banner .eui-banner__info{position:relative;padding:var(--eui-s-m) 0 0 0;align-items:start}.eui-21 :host.eui-banner .eui-banner__container{background-color:transparent;padding:var(--eui-s-m) 0 0 0}.eui-21 :host.eui-banner--inverse .eui-banner__container{background-color:transparent;color:var(--eui-c-text)}}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], euiPositionTop: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiPositionCenter: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiInverse: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isVideoBanner: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], imageUrl: [{
                type: Input
            }] } });

const EUI_BANNER = [
    EuiBannerComponent,
    EuiBannerTitleComponent,
    EuiBannerDescriptionComponent,
    EuiBannerCtaComponent,
    EuiBannerVideoComponent,
];

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

export { EUI_BANNER, EuiBannerComponent, EuiBannerCtaComponent, EuiBannerDescriptionComponent, EuiBannerTitleComponent, EuiBannerVideoComponent };
//# sourceMappingURL=eui-components-eui-banner.mjs.map
