import * as i0 from '@angular/core';
import { HostBinding, ChangeDetectionStrategy, Component, EventEmitter, inject, booleanAttribute, Output, Input, forwardRef, ContentChild } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from '@eui/components/eui-input-checkbox';
import { EUI_INPUT_CHECKBOX } from '@eui/components/eui-input-checkbox';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import * as i1$1 from '@eui/components/eui-icon-toggle';
import { EUI_ICON_TOGGLE } from '@eui/components/eui-icon-toggle';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i1$2 from '@eui/components/eui-icon-button-expander';
import { EUI_ICON_BUTTON_EXPANDER } from '@eui/components/eui-icon-button-expander';
import { NgTemplateOutlet } from '@angular/common';

/**
 * @description
 * Container for content at the top of the card body. Used for highlighted information, alerts, or content that needs visual separation from the main body.
 *
 * @usageNotes
 * ### Alert Message
 * ```html
 * <eui-content-card-body-top>
 *     <div class="eui-u-bg-warning-light eui-u-p-s">
 *         <strong>Notice:</strong> This item requires attention
 *     </div>
 * </eui-content-card-body-top>
 * ```
 *
 * ### Summary Information
 * ```html
 * <eui-content-card-body-top>
 *     <dl class="eui-u-flex eui-u-flex-gap-m">
 *         <div><dt>Status:</dt><dd>Active</dd></div>
 *         <div><dt>Progress:</dt><dd>75%</dd></div>
 *     </dl>
 * </eui-content-card-body-top>
 * ```
 *
 * ### Accessibility
 * - Use appropriate semantic elements for content type
 * - Ensure alerts have proper ARIA roles when needed
 * - Maintain color contrast for all content
 *
 * ### Notes
 * - Positioned at the top of the body with visual separation
 * - Optional component - only use when content needs emphasis
 * - Commonly used for alerts, summaries, or key metrics
 * - Automatically styled with appropriate spacing
 */
class EuiContentCardBodyTopComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-body-top'
         */
        this.string = 'eui-content-card-body-top';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardBodyTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardBodyTopComponent, isStandalone: true, selector: "eui-content-card-body-top", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-content-card :host{display:flex;padding-top:var(--eui-s-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardBodyTopComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-body-top', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-content-card :host{display:flex;padding-top:var(--eui-s-s)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Container for the main content area of the card. Supports optional top section for highlighted content.
 * Content is hidden when the card is collapsed.
 *
 * @usageNotes
 * ### Basic Body
 * ```html
 * <eui-content-card-body>
 *     <p>Main card content goes here</p>
 * </eui-content-card-body>
 * ```
 *
 * ### With Top Section
 * ```html
 * <eui-content-card-body>
 *     <eui-content-card-body-top>
 *         <div class="eui-u-bg-info-light eui-u-p-s">
 *             Important notice or highlighted content
 *         </div>
 *     </eui-content-card-body-top>
 *     <p>Regular card content follows</p>
 * </eui-content-card-body>
 * ```
 *
 * ### Accessibility
 * - Use semantic HTML elements for content structure
 * - Ensure proper heading hierarchy within body content
 * - Maintain sufficient color contrast for all text
 * - Make interactive elements keyboard accessible
 *
 * ### Notes
 * - Primary content container for the card
 * - Automatically hidden when parent card is collapsed
 * - Can contain any HTML content or components
 * - Use body-top for content that needs visual separation
 */
class EuiContentCardBodyComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-body'
         */
        this.string = 'eui-content-card-body';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardBodyComponent, isStandalone: true, selector: "eui-content-card-body", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<hr class=\"eui-u-hr\"/>\n\n<ng-content select=\"eui-content-card-body-top\" />\n\n<div class=\"eui-content-card-body-wrapper\">\n    <ng-content />\n</div>", styles: [".eui-21 .eui-content-card :host{display:flex;flex-direction:column;width:100%;padding-top:0}.eui-21 .eui-content-card :host .eui-content-card-body-wrapper{padding-top:var(--eui-s-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardBodyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr class=\"eui-u-hr\"/>\n\n<ng-content select=\"eui-content-card-body-top\" />\n\n<div class=\"eui-content-card-body-wrapper\">\n    <ng-content />\n</div>", styles: [".eui-21 .eui-content-card :host{display:flex;flex-direction:column;width:100%;padding-top:0}.eui-21 .eui-content-card :host .eui-content-card-body-wrapper{padding-top:var(--eui-s-s)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Container for footer content at the bottom of the card. Typically used for actions, links, or supplementary information.
 *
 * @usageNotes
 * ### Action Buttons
 * ```html
 * <eui-content-card-footer>
 *     <eui-button>View Details</eui-button>
 *     <eui-button euiSecondary>Cancel</eui-button>
 * </eui-content-card-footer>
 * ```
 *
 * ### Links
 * ```html
 * <eui-content-card-footer>
 *     <a href="/details" class="eui-u-text-link">Read more</a>
 * </eui-content-card-footer>
 * ```
 *
 * ### Mixed Content
 * ```html
 * <eui-content-card-footer>
 *     <div class="eui-u-flex eui-u-flex-justify-between">
 *         <span class="eui-u-text-muted">Last updated: 2 hours ago</span>
 *         <eui-button euiSizeS>Edit</eui-button>
 *     </div>
 * </eui-content-card-footer>
 * ```
 *
 * ### Accessibility
 * - Ensure all interactive elements are keyboard accessible
 * - Provide clear labels for all actions
 * - Use appropriate button types (button vs link)
 * - Maintain logical tab order
 *
 * ### Notes
 * - Positioned at the bottom of the card with visual separation
 * - Optional component - only include when actions or additional info needed
 * - Commonly used for primary/secondary actions
 * - Automatically styled with appropriate spacing and borders
 */
class EuiContentCardFooterComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-footer'
         */
        this.string = 'eui-content-card-footer';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardFooterComponent, isStandalone: true, selector: "eui-content-card-footer", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-content-card :host{display:flex;border-top:1px solid var(--eui-c-divider);padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-m) var(--eui-s-m)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardFooterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-footer', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-content-card :host{display:flex;border-top:1px solid var(--eui-c-divider);padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-m) var(--eui-s-m)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Container for content placed at the start (left side) of the card header. Typically used for status indicators, badges, or icons.
 *
 * @usageNotes
 * ### With Status Chip
 * ```html
 * <eui-content-card-header-start>
 *     <eui-chip euiSizeS>Active</eui-chip>
 * </eui-content-card-header-start>
 * ```
 *
 * ### With Icon
 * ```html
 * <eui-content-card-header-start>
 *     <eui-icon-svg icon="document" size="m"/>
 * </eui-content-card-header-start>
 * ```
 *
 * ### Accessibility
 * - Ensure status indicators have appropriate text or ARIA labels
 * - Icons should have descriptive labels when conveying important information
 *
 * ### Notes
 * - Positioned at the start of the header before the title
 * - Commonly used for visual status indicators or categorization
 * - Content is automatically aligned and spaced
 */
class EuiContentCardHeaderStartComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-header-start'
         */
        this.string = 'eui-content-card-header-start';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderStartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardHeaderStartComponent, isStandalone: true, selector: "eui-content-card-header-start", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-content-card :host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderStartComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-header-start', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-content-card :host{display:flex}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * The eui-content-card component is based on Material Design and provides a content container for text, photos and actions in the context of a single subject.
 * Supports selection, collapsing, and bookmarking functionality.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-content-card>
 *     <eui-content-card-header>
 *         <eui-content-card-header-title>Card Title</eui-content-card-header-title>
 *     </eui-content-card-header>
 *     <eui-content-card-body>Card content goes here</eui-content-card-body>
 * </eui-content-card>
 * ```
 *
 * ### With Selection and Collapse
 * ```html
 * <eui-content-card
 *     [isSelectable]="true"
 *     [isCollapsible]="true"
 *     (cardSelect)="onCardSelect($event)"
 *     (cardCollapse)="onCardCollapse($event)">
 *     <eui-content-card-header>
 *         <eui-content-card-header-title>Collapsible Card</eui-content-card-header-title>
 *     </eui-content-card-header>
 *     <eui-content-card-body>This content can be collapsed</eui-content-card-body>
 * </eui-content-card>
 * ```
 *
 * ### Accessibility
 * - Use semantic heading levels within card titles for proper document structure
 * - Ensure interactive elements (checkboxes, buttons) have appropriate labels
 * - When using selection, the checkbox is automatically managed with proper ARIA attributes
 * - Collapsible cards use icon buttons with appropriate accessibility labels
 *
 * ### Notes
 * - Cards can be made selectable with `isSelectable` input
 * - Cards can be made collapsible with `isCollapsible` input
 * - Bookmarking functionality is available via `isBookmarkable` input
 * - All interactive features emit events for state changes
 * - Use with child components for structured content layout
 */
class EuiContentCardComponent {
    constructor() {
        /**
         * Sets the `data-e2e` attribute at the host element.
         *
         * @default 'eui-card'
         */
        this.e2eAttr = 'eui-content-card';
        /**
         * Sets the `isSelected` attribute in order to show the card header as selected.
         *
         * @default false
         */
        this.isSelected = false;
        /**
         * Sets the `isSelectable` attribute in order to show the card header checkbox for selection
         *
         * @default false
         */
        this.isSelectable = false;
        /**
         * Sets the `isCollapsible` attribute which shows the collapsible toggle in the header.
         *
         * @default false
         */
        this.isCollapsible = false;
        /**
         * Sets the `isCollapsed` attribute which collapses the card content.
         *
         * @default false
         */
        this.isCollapsed = false;
        /**
         * Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.
         *
         * @default false
         */
        this.isBookmarkable = false;
        /**
         * Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.
         *
         * @default false
         */
        this.isBookmarked = false;
        /**
         * Event emitted when the card is selected.
         */
        this.cardSelect = new EventEmitter();
        /**
         * Event emitted when the card is bookmarked.
         */
        this.cardBookmark = new EventEmitter();
        /**
         * Event emitted when the card is bookmarked.
         */
        this.cardCollapse = new EventEmitter();
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-content-card'),
            this.isCollapsible ? 'eui-content-card--collapsible' : '',
            this.isCollapsed ? 'eui-content-card--collapsed' : '',
            this.isSelectable ? 'eui-content-card--selectable' : '',
            this.isSelected ? 'eui-content-card--selected' : '',
        ]
            .join(' ')
            .trim();
    }
    toggleCollapse() {
        this.isCollapsed = !this.isCollapsed;
        this.cardCollapse.emit(this.isCollapsed);
    }
    toggleBookmark() {
        this.isBookmarked = !this.isBookmarked;
        this.cardBookmark.emit(this.isBookmarked);
    }
    onSelect(event) {
        this.cardSelect.emit(this.isSelected);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiContentCardComponent, isStandalone: true, selector: "eui-content-card", inputs: { e2eAttr: "e2eAttr", isSelected: ["isSelected", "isSelected", booleanAttribute], isSelectable: ["isSelectable", "isSelectable", booleanAttribute], isCollapsible: ["isCollapsible", "isCollapsible", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], isBookmarkable: ["isBookmarkable", "isBookmarkable", booleanAttribute], isBookmarked: ["isBookmarked", "isBookmarked", booleanAttribute] }, outputs: { cardSelect: "cardSelect", cardBookmark: "cardBookmark", cardCollapse: "cardCollapse" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective }], ngImport: i0, template: "<div class=\"eui-content-card-wrapper\">\n    @if (isSelectable) {\n        <div class=\"eui-content-card-selectable-wrapper\">\n            <input euiInputCheckBox [(ngModel)]=\"isSelected\" (change)=\"onSelect($event)\"/>\n        </div>\n    }\n\n    <ng-content select=\"eui-content-card-media\"/>\n\n    <div class=\"eui-content-card-header-body-wrapper\">\n        <ng-content select=\"eui-content-card-header\"/>\n\n        <div class=\"eui-content-card-body-wrapper\">\n            <ng-content select=\"eui-content-card-body\"/>\n        </div>\n    </div>\n</div>\n\n<ng-content select=\"eui-content-card-footer\"/>\n", styles: [".eui-21 :host.eui-content-card{--_body-font: var(--eui-f-m);--_title-font: var(--eui-f-l-semi-bold);--_subtitle-font: var(--eui-f-m-medium)}.eui-21 :host.eui-content-card{border:var(--eui-bw-xs) solid var(--eui-c-divider);background-color:var(--eui-c-surface-container);border-radius:var(--eui-br-s);box-shadow:var(--eui-sh-1);display:flex;flex-direction:column;height:auto;padding:0;position:relative;width:100%;font:var(--_content-font)}.eui-21 :host.eui-content-card .eui-content-card-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m);gap:var(--eui-s-m)}.eui-21 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-selectable-wrapper ::ng-deep .eui-input-checkbox{margin-right:0}.eui-21 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-header-body-wrapper{display:flex;flex-direction:column;width:100%}.eui-21 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-body-wrapper{display:flex;width:100%}.eui-21 :host.eui-content-card.eui-content-card--selected{border-color:var(--eui-c-primary-border)}.eui-21 :host.eui-content-card.eui-content-card--collapsed .eui-content-card-body-wrapper{display:none!important}@media screen and (min-width:768px)and (max-width:995px){.eui-21 :host.eui-content-card .eui-content-card-wrapper{flex-direction:column}.eui-21 :host.eui-content-card .eui-content-card-selectable-wrapper{position:absolute;top:var(--eui-s-s);right:var(--eui-s-s)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                        },
                    ], imports: [
                        FormsModule,
                        ...EUI_INPUT_CHECKBOX,
                    ], template: "<div class=\"eui-content-card-wrapper\">\n    @if (isSelectable) {\n        <div class=\"eui-content-card-selectable-wrapper\">\n            <input euiInputCheckBox [(ngModel)]=\"isSelected\" (change)=\"onSelect($event)\"/>\n        </div>\n    }\n\n    <ng-content select=\"eui-content-card-media\"/>\n\n    <div class=\"eui-content-card-header-body-wrapper\">\n        <ng-content select=\"eui-content-card-header\"/>\n\n        <div class=\"eui-content-card-body-wrapper\">\n            <ng-content select=\"eui-content-card-body\"/>\n        </div>\n    </div>\n</div>\n\n<ng-content select=\"eui-content-card-footer\"/>\n", styles: [".eui-21 :host.eui-content-card{--_body-font: var(--eui-f-m);--_title-font: var(--eui-f-l-semi-bold);--_subtitle-font: var(--eui-f-m-medium)}.eui-21 :host.eui-content-card{border:var(--eui-bw-xs) solid var(--eui-c-divider);background-color:var(--eui-c-surface-container);border-radius:var(--eui-br-s);box-shadow:var(--eui-sh-1);display:flex;flex-direction:column;height:auto;padding:0;position:relative;width:100%;font:var(--_content-font)}.eui-21 :host.eui-content-card .eui-content-card-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m);gap:var(--eui-s-m)}.eui-21 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-selectable-wrapper ::ng-deep .eui-input-checkbox{margin-right:0}.eui-21 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-header-body-wrapper{display:flex;flex-direction:column;width:100%}.eui-21 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-body-wrapper{display:flex;width:100%}.eui-21 :host.eui-content-card.eui-content-card--selected{border-color:var(--eui-c-primary-border)}.eui-21 :host.eui-content-card.eui-content-card--collapsed .eui-content-card-body-wrapper{display:none!important}@media screen and (min-width:768px)and (max-width:995px){.eui-21 :host.eui-content-card .eui-content-card-wrapper{flex-direction:column}.eui-21 :host.eui-content-card .eui-content-card-selectable-wrapper{position:absolute;top:var(--eui-s-s);right:var(--eui-s-s)}}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], isSelected: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isSelectable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isCollapsible: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isCollapsed: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isBookmarkable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isBookmarked: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], cardSelect: [{
                type: Output
            }], cardBookmark: [{
                type: Output
            }], cardCollapse: [{
                type: Output
            }] } });

/**
 * @description
 * Container for content placed at the end (right side) of the card header. Typically used for action buttons or menus.
 * Automatically integrates bookmark toggle when parent card has `isBookmarkable` enabled.
 *
 * @usageNotes
 * ### With Action Button
 * ```html
 * <eui-content-card-header-end>
 *     <eui-icon-button icon="eui-ellipsis-vertical" size="s"/>
 * </eui-content-card-header-end>
 * ```
 *
 * ### With Multiple Actions
 * ```html
 * <eui-content-card-header-end>
 *     <eui-icon-button icon="edit" size="s"/>
 *     <eui-icon-button icon="delete" size="s"/>
 * </eui-content-card-header-end>
 * ```
 *
 * ### Accessibility
 * - All action buttons must have accessible labels
 * - Use `aria-label` or visible text for icon buttons
 * - Group related actions logically
 *
 * ### Notes
 * - Positioned at the end of the header after all other content
 * - Automatically includes bookmark toggle when parent card is bookmarkable
 * - Actions are automatically aligned and spaced
 * - Commonly used for contextual menus or quick actions
 */
class EuiContentCardHeaderEndComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-header-end'
         */
        this.string = 'eui-content-card-header-end';
        this.euiContentCardParent = inject(forwardRef(() => EuiContentCardComponent), { optional: true, host: true });
    }
    onToggle(event) {
        this.euiContentCardParent.toggleBookmark();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderEndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiContentCardHeaderEndComponent, isStandalone: true, selector: "eui-content-card-header-end", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content/>\n\n@if (euiContentCardParent.isBookmarkable) {\n    <div class=\"eui-content-card-header-end-bookmarkable-wrapper\">\n        <eui-icon-toggle\n            iconSvgFillColorOff=\"primary\" \n            iconSvgFillColorOn=\"primary\" \n            iconSvgNameOn=\"bookmark-simple:fill\" \n            iconSvgNameOff=\"bookmark-simple:regular\"\n            [isChecked]=\"euiContentCardParent.isBookmarked\" \n            (toggle)=\"onToggle($event)\"/>\n    </div>\n}", styles: [".eui-21 .eui-content-card :host{display:flex;margin-left:auto;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$1.EuiIconToggleComponent, selector: "eui-icon-toggle", inputs: ["keyboardAccessKey", "isChecked", "isReadOnly", "e2eAttr", "id", "tabindex", "ariaLabel", "iconSvgSize", "iconSvgNameOn", "iconSvgNameOff", "iconSvgFillColorOn", "iconSvgFillColorOff"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderEndComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-header-end', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON_TOGGLE,
                        ...EUI_BUTTON,
                    ], template: "<ng-content/>\n\n@if (euiContentCardParent.isBookmarkable) {\n    <div class=\"eui-content-card-header-end-bookmarkable-wrapper\">\n        <eui-icon-toggle\n            iconSvgFillColorOff=\"primary\" \n            iconSvgFillColorOn=\"primary\" \n            iconSvgNameOn=\"bookmark-simple:fill\" \n            iconSvgNameOff=\"bookmark-simple:regular\"\n            [isChecked]=\"euiContentCardParent.isBookmarked\" \n            (toggle)=\"onToggle($event)\"/>\n    </div>\n}", styles: [".eui-21 .eui-content-card :host{display:flex;margin-left:auto;align-items:center}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Container for primary metadata information displayed below the subtitle. Used for key details like dates, authors, or categories.
 *
 * @usageNotes
 * ### Simple Metadata
 * ```html
 * <eui-content-card-header-metadata>
 *     Created: January 26, 2024
 * </eui-content-card-header-metadata>
 * ```
 *
 * ### Multiple Metadata Items
 * ```html
 * <eui-content-card-header-metadata>
 *     Author: John Doe | Category: Research | Status: Published
 * </eui-content-card-header-metadata>
 * ```
 *
 * ### With Semantic Markup
 * ```html
 * <eui-content-card-header-metadata>
 *     <time datetime="2024-01-26">January 26, 2024</time> |
 *     <span>5 min read</span>
 * </eui-content-card-header-metadata>
 * ```
 *
 * ### Accessibility
 * - Use semantic HTML elements like `<time>` for dates
 * - Ensure metadata is meaningful and not purely decorative
 * - Maintain sufficient color contrast
 *
 * ### Notes
 * - Displayed below subtitle with reduced visual weight
 * - Use for factual information about the card content
 * - Separate multiple items with visual dividers (e.g., pipes)
 * - Keep concise to maintain scannability
 */
class EuiContentCardHeaderMetadataComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-header-metadata'
         */
        this.string = 'eui-content-card-header-metadata';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardHeaderMetadataComponent, isStandalone: true, selector: "eui-content-card-header-metadata", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-content-card :host{display:flex;width:100%;font:var(--eui-f-s);color:var(--eui-c-text-light);padding-top:var(--eui-s-3xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderMetadataComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-header-metadata', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-content-card :host{display:flex;width:100%;font:var(--eui-f-s);color:var(--eui-c-text-light);padding-top:var(--eui-s-3xs)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Container for secondary metadata information displayed below the primary metadata. Used for supplementary details like ratings, statistics, or additional context.
 *
 * @usageNotes
 * ### Rating Display
 * ```html
 * <eui-content-card-header-submetadata>
 *     <span class="eui-u-flex eui-u-flex-gap-2xs">
 *         <eui-icon-svg icon="star:fill" fillColor="primary" size="s"/>
 *         <strong>4.8</strong> (156 reviews)
 *     </span>
 * </eui-content-card-header-submetadata>
 * ```
 *
 * ### Statistics
 * ```html
 * <eui-content-card-header-submetadata>
 *     1.2K views • 45 comments
 * </eui-content-card-header-submetadata>
 * ```
 *
 * ### Accessibility
 * - Provide text alternatives for icon-only information
 * - Use `aria-label` when icons convey meaning
 * - Ensure color is not the only means of conveying information
 *
 * ### Notes
 * - Displayed below primary metadata with minimal visual weight
 * - Use for less critical but useful information
 * - Often includes icons or visual indicators
 * - Should not duplicate information from other header sections
 */
class EuiContentCardHeaderSubmetadataComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-header-submetadata'
         */
        this.string = 'eui-card-header-content-submetadata';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderSubmetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardHeaderSubmetadataComponent, isStandalone: true, selector: "eui-content-card-header-submetadata", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-content-card :host{display:flex;width:100%;font:var(--eui-f-s);color:var(--eui-c-text-light);padding-top:var(--eui-s-3xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderSubmetadataComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-header-submetadata', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-content-card :host{display:flex;width:100%;font:var(--eui-f-s);color:var(--eui-c-text-light);padding-top:var(--eui-s-3xs)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Container for secondary title text displayed below the main title. Used for additional context or description.
 *
 * @usageNotes
 * ### Basic Subtitle
 * ```html
 * <eui-content-card-header-subtitle>
 *     Additional information about the card
 * </eui-content-card-header-subtitle>
 * ```
 *
 * ### With Formatting
 * ```html
 * <eui-content-card-header-subtitle>
 *     <span class="eui-u-text-muted">Last updated: 2 hours ago</span>
 * </eui-content-card-header-subtitle>
 * ```
 *
 * ### Accessibility
 * - Keep subtitle text concise and relevant
 * - Ensure sufficient color contrast for readability
 * - Use semantic markup when appropriate
 *
 * ### Notes
 * - Displayed directly below the title with reduced visual prominence
 * - Optional component - only include when additional context is needed
 * - Styled with secondary typography for visual hierarchy
 * - Should complement, not duplicate, the title
 */
class EuiContentCardHeaderSubtitleComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-header-subtitle'
         */
        this.string = 'eui-content-card-header-subtitle';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardHeaderSubtitleComponent, isStandalone: true, selector: "eui-content-card-header-subtitle", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-content-card :host{display:flex;width:100%;font:var(--_subtitle-font);padding-top:var(--eui-s-3xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderSubtitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-header-subtitle', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-content-card :host{display:flex;width:100%;font:var(--_subtitle-font);padding-top:var(--eui-s-3xs)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Container for the main title text of the card. Supports plain text, links, or custom HTML content.
 *
 * @usageNotes
 * ### Plain Text Title
 * ```html
 * <eui-content-card-header-title>
 *     Card Title
 * </eui-content-card-header-title>
 * ```
 *
 * ### Linked Title
 * ```html
 * <eui-content-card-header-title>
 *     <a href="/details" class="eui-u-text-link">Clickable Card Title</a>
 * </eui-content-card-header-title>
 * ```
 *
 * ### With Semantic Heading
 * ```html
 * <eui-content-card-header-title>
 *     <h3>Semantic Title</h3>
 * </eui-content-card-header-title>
 * ```
 *
 * ### Accessibility
 * - Use appropriate heading levels (h2-h6) based on document structure
 * - Ensure titles are descriptive and meaningful
 * - Links should clearly indicate their destination
 * - Avoid generic text like "Click here"
 *
 * ### Notes
 * - Primary heading for the card content
 * - Styled with appropriate typography for prominence
 * - Can contain interactive elements like links
 * - Should be concise and descriptive
 */
class EuiContentCardHeaderTitleComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-header-title'
         */
        this.string = 'eui-content-card-header-title';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardHeaderTitleComponent, isStandalone: true, selector: "eui-content-card-header-title", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-content-card :host{display:flex;width:100%}.eui-21 .eui-content-card :host ::ng-deep a{font:var(--_title-font);color:var(--eui-c-link);text-decoration:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-header-title', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-content-card :host{display:flex;width:100%}.eui-21 .eui-content-card :host ::ng-deep a{font:var(--_title-font);color:var(--eui-c-link);text-decoration:none}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Container component for the card header section. Supports title, subtitle, metadata, and action areas.
 * Automatically integrates with parent card's collapsible functionality.
 *
 * @usageNotes
 * ### Basic Header
 * ```html
 * <eui-content-card-header>
 *     <eui-content-card-header-title>Card Title</eui-content-card-header-title>
 *     <eui-content-card-header-subtitle>Subtitle text</eui-content-card-header-subtitle>
 * </eui-content-card-header>
 * ```
 *
 * ### Complete Header with All Sections
 * ```html
 * <eui-content-card-header>
 *     <eui-content-card-header-start>
 *         <eui-chip euiSizeS>Status</eui-chip>
 *     </eui-content-card-header-start>
 *     <eui-content-card-header-title>
 *         <a href="#" class="eui-u-text-link">Linked Title</a>
 *     </eui-content-card-header-title>
 *     <eui-content-card-header-subtitle>Secondary information</eui-content-card-header-subtitle>
 *     <eui-content-card-header-metadata>Created: 2024-01-26</eui-content-card-header-metadata>
 *     <eui-content-card-header-end>
 *         <eui-icon-button icon="eui-ellipsis-vertical" size="s"/>
 *     </eui-content-card-header-end>
 * </eui-content-card-header>
 * ```
 *
 * ### Accessibility
 * - Use semantic heading elements within title component for proper document outline
 * - Ensure links in titles have descriptive text
 * - Action buttons should have accessible labels
 * - Metadata should be marked up appropriately (e.g., `<time>` for dates)
 *
 * ### Notes
 * - Header layout is flexible and adapts to included child components
 * - Start and end sections are optional for additional content placement
 * - Automatically handles collapse toggle when parent card is collapsible
 * - Supports multiple metadata lines for complex information display
 */
class EuiContentCardHeaderComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-header'
         */
        this.string = 'eui-content-card-header';
        this.euiCardContentParent = inject(forwardRef(() => EuiContentCardComponent), { optional: true, host: true });
    }
    onToggle() {
        this.euiCardContentParent.toggleCollapse();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiContentCardHeaderComponent, isStandalone: true, selector: "eui-content-card-header", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "headerStartComponent", first: true, predicate: i0.forwardRef(() => EuiContentCardHeaderStartComponent), descendants: true }], ngImport: i0, template: "@if (headerStartComponent) {\n    <div class=\"eui-content-card-header-top-wrapper\">\n        <ng-content select=\"eui-content-card-header-start\"/>\n\n        @if (euiCardContentParent?.isCollapsible) {\n            <ng-content *ngTemplateOutlet=\"expander\"/>\n        } @else {\n            <ng-content *ngTemplateOutlet=\"headerEnd\"/>\n        }\n    </div>\n    <ng-content *ngTemplateOutlet=\"headerTitle\"/>\n} @else {\n    <div class=\"eui-content-card-header-top-wrapper\">\n        <ng-content *ngTemplateOutlet=\"headerTitle\"/>\n        \n        @if (euiCardContentParent?.isCollapsible) {\n            <ng-content *ngTemplateOutlet=\"expander\"/>\n        } @else {\n            <ng-content *ngTemplateOutlet=\"headerEnd\"/>\n        }        \n    </div>\n}\n<ng-content select=\"eui-content-card-header-subtitle\"/>\n<ng-content select=\"eui-content-card-header-metadata\"/>\n<ng-content select=\"eui-content-card-header-submetadata\"/>\n\n\n<ng-template #headerEnd>\n    <ng-content select=\"eui-content-card-header-end\"/>\n</ng-template>\n<ng-template #headerTitle>\n    <ng-content select=\"eui-content-card-header-title\"/>\n</ng-template>\n<ng-template #expander>\n    <div class=\"eui-content-card-header-expander-wrapper\">\n        <eui-icon-button-expander [isExpanded]=\"!euiCardContentParent?.isCollapsed\" (buttonClick)=\"onToggle()\" fillColor=\"secondary\"/>\n    </div>\n</ng-template>", styles: [".eui-21 .eui-content-card :host.eui-content-card-header{display:flex;width:100%;flex-direction:column}.eui-21 .eui-content-card :host.eui-content-card-header .eui-content-card-header-top-wrapper{display:flex;align-items:center;width:100%}.eui-21 .eui-content-card :host.eui-content-card-header .eui-content-card-header-expander-wrapper{display:flex;margin-left:auto}@media screen and (min-width:768px)and (max-width:995px){.eui-21 .eui-content-card :host.eui-content-card-header .eui-content-card-expander-wrapper{position:absolute;top:var(--eui-s-s);right:var(--eui-s-s)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgTemplateOutlet,
                        ...EUI_ICON_BUTTON_EXPANDER,
                    ], template: "@if (headerStartComponent) {\n    <div class=\"eui-content-card-header-top-wrapper\">\n        <ng-content select=\"eui-content-card-header-start\"/>\n\n        @if (euiCardContentParent?.isCollapsible) {\n            <ng-content *ngTemplateOutlet=\"expander\"/>\n        } @else {\n            <ng-content *ngTemplateOutlet=\"headerEnd\"/>\n        }\n    </div>\n    <ng-content *ngTemplateOutlet=\"headerTitle\"/>\n} @else {\n    <div class=\"eui-content-card-header-top-wrapper\">\n        <ng-content *ngTemplateOutlet=\"headerTitle\"/>\n        \n        @if (euiCardContentParent?.isCollapsible) {\n            <ng-content *ngTemplateOutlet=\"expander\"/>\n        } @else {\n            <ng-content *ngTemplateOutlet=\"headerEnd\"/>\n        }        \n    </div>\n}\n<ng-content select=\"eui-content-card-header-subtitle\"/>\n<ng-content select=\"eui-content-card-header-metadata\"/>\n<ng-content select=\"eui-content-card-header-submetadata\"/>\n\n\n<ng-template #headerEnd>\n    <ng-content select=\"eui-content-card-header-end\"/>\n</ng-template>\n<ng-template #headerTitle>\n    <ng-content select=\"eui-content-card-header-title\"/>\n</ng-template>\n<ng-template #expander>\n    <div class=\"eui-content-card-header-expander-wrapper\">\n        <eui-icon-button-expander [isExpanded]=\"!euiCardContentParent?.isCollapsed\" (buttonClick)=\"onToggle()\" fillColor=\"secondary\"/>\n    </div>\n</ng-template>", styles: [".eui-21 .eui-content-card :host.eui-content-card-header{display:flex;width:100%;flex-direction:column}.eui-21 .eui-content-card :host.eui-content-card-header .eui-content-card-header-top-wrapper{display:flex;align-items:center;width:100%}.eui-21 .eui-content-card :host.eui-content-card-header .eui-content-card-header-expander-wrapper{display:flex;margin-left:auto}@media screen and (min-width:768px)and (max-width:995px){.eui-21 .eui-content-card :host.eui-content-card-header .eui-content-card-expander-wrapper{position:absolute;top:var(--eui-s-s);right:var(--eui-s-s)}}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }], headerStartComponent: [{
                type: ContentChild,
                args: [forwardRef(() => EuiContentCardHeaderStartComponent), { static: false }]
            }] } });

/**
 * @description
 * Container for media content (images, videos, or graphics) displayed at the start of the card. Provides a visual anchor for the card content.
 *
 * @usageNotes
 * ### Image
 * ```html
 * <eui-content-card-media>
 *     <img src="/assets/card-image.jpg" alt="Descriptive text"/>
 * </eui-content-card-media>
 * ```
 *
 * ### Icon or Graphic
 * ```html
 * <eui-content-card-media>
 *     <eui-icon-svg icon="document" size="xl"/>
 * </eui-content-card-media>
 * ```
 *
 * ### Avatar
 * ```html
 * <eui-content-card-media>
 *     <eui-avatar src="/user.jpg" size="l"/>
 * </eui-content-card-media>
 * ```
 *
 * ### Accessibility
 * - Always provide alt text for images
 * - Use empty alt="" for decorative images
 * - Ensure icons have appropriate labels when conveying information
 * - Consider color contrast for overlaid text
 *
 * ### Notes
 * - Positioned at the start of the card before header content
 * - Optional component - only include when visual media enhances the card
 * - Automatically sized and positioned for optimal layout
 * - Supports images, icons, avatars, or custom graphics
 */
class EuiContentCardMediaComponent {
    constructor() {
        /**
         * Binds the class to the component.
         *
         * @default 'eui-content-card-media'
         */
        this.string = 'eui-content-card-media';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiContentCardMediaComponent, isStandalone: true, selector: "eui-content-card-media", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-content-card :host{display:flex;align-items:baseline}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiContentCardMediaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-content-card-media', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-content-card :host{display:flex;align-items:baseline}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

const EUI_CONTENT_CARD = [
    EuiContentCardComponent,
    EuiContentCardBodyTopComponent,
    EuiContentCardBodyComponent,
    EuiContentCardFooterComponent,
    EuiContentCardHeaderComponent,
    EuiContentCardHeaderEndComponent,
    EuiContentCardHeaderMetadataComponent,
    EuiContentCardHeaderStartComponent,
    EuiContentCardHeaderSubmetadataComponent,
    EuiContentCardHeaderSubtitleComponent,
    EuiContentCardHeaderTitleComponent,
    EuiContentCardMediaComponent,
];

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

export { EUI_CONTENT_CARD, EuiContentCardBodyComponent, EuiContentCardBodyTopComponent, EuiContentCardComponent, EuiContentCardFooterComponent, EuiContentCardHeaderComponent, EuiContentCardHeaderEndComponent, EuiContentCardHeaderMetadataComponent, EuiContentCardHeaderStartComponent, EuiContentCardHeaderSubmetadataComponent, EuiContentCardHeaderSubtitleComponent, EuiContentCardHeaderTitleComponent, EuiContentCardMediaComponent };
//# sourceMappingURL=eui-components-eui-content-card.mjs.map
