import * as i0 from '@angular/core';
import { HostBinding, Component, Input, EventEmitter, inject, booleanAttribute, HostListener, forwardRef, ContentChild, Output, ChangeDetectionStrategy } from '@angular/core';
import * as i1 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i2 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i1$1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import * as i3 from '@eui/components/eui-avatar';
import { EUI_AVATAR } from '@eui/components/eui-avatar';
import * as i4 from '@eui/components/eui-label';
import { EUI_LABEL } from '@eui/components/eui-label';
import { NgClass, NgTemplateOutlet } from '@angular/common';

/**
 * @description
 * Custom content container for EuiDashboardCard that enables fully customized card layouts.
 * Use this when the default card structure doesn't meet your needs and you want complete control
 * over the card's internal structure with header, body, and footer sections.
 *
 * @usageNotes
 * ### Complete Custom Card
 * ```html
 * <eui-dashboard-card>
 *   <eui-dashboard-card-content>
 *     <eui-dashboard-card-content-header>
 *       <eui-dashboard-card-content-header-icon icon="chart-line:regular"/>
 *       <eui-dashboard-card-content-header-title>
 *         Sales Overview
 *       </eui-dashboard-card-content-header-title>
 *       <eui-dashboard-card-content-header-action>
 *         <eui-icon-button icon="eui-ellipsis-vertical" size="s"/>
 *       </eui-dashboard-card-content-header-action>
 *     </eui-dashboard-card-content-header>
 *     <eui-dashboard-card-content-body>
 *       <div class="eui-u-f-2xl-bold">$24,500</div>
 *       <div class="eui-u-flex">
 *         <eui-icon-svg icon="arrow-up:regular" fillColor="success" size="xs"/>
 *         <span class="eui-u-c-s-success">+12% vs last month</span>
 *       </div>
 *     </eui-dashboard-card-content-body>
 *     <eui-dashboard-card-content-footer>
 *       <a class="eui-u-text-link" href="/reports">View full report</a>
 *     </eui-dashboard-card-content-footer>
 *   </eui-dashboard-card-content>
 * </eui-dashboard-card>
 * ```
 *
 * ### Accessibility
 * - Maintains semantic structure with header, body, and footer sections
 * - Ensure interactive elements within have proper labels
 * - Use heading elements in title section for proper document outline
 *
 * ### Notes
 * - Provides complete flexibility for complex dashboard card layouts
 * - Combine with sub-components for structured content organization
 * - Use when default card props (label, subLabel, etc.) are insufficient
 * - Supports all dashboard card variants and sizes via parent component
 */
class EuiDashboardCardContentComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-dashboard-card-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiDashboardCardContentComponent, isStandalone: true, selector: "eui-dashboard-card-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content select=\"eui-dashboard-card-content-header\"/>\n<ng-content select=\"eui-dashboard-card-content-body\"/>\n<ng-content select=\"eui-dashboard-card-content-footer\"/>\n\n<ng-content/>", styles: [".eui-21 :host{display:block;width:100%}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-card-content', template: "<ng-content select=\"eui-dashboard-card-content-header\"/>\n<ng-content select=\"eui-dashboard-card-content-body\"/>\n<ng-content select=\"eui-dashboard-card-content-footer\"/>\n\n<ng-content/>", styles: [".eui-21 :host{display:block;width:100%}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Main content area for custom dashboard cards, typically displaying metrics, charts, or key information.
 * Provides flexible content projection for any type of dashboard data visualization.
 *
 * @usageNotes
 * ### Metric Display
 * ```html
 * <eui-dashboard-card-content-body>
 *   <div class="eui-u-f-3xl-bold">1,247</div>
 *   <div class="eui-u-f-s eui-u-c-s-muted">Total Orders</div>
 * </eui-dashboard-card-content-body>
 * ```
 *
 * ### With Trend Indicator
 * ```html
 * <eui-dashboard-card-content-body>
 *   <div class="eui-u-f-2xl-bold">$45,231</div>
 *   <div class="eui-u-flex eui-u-gap-xs">
 *     <eui-icon-svg icon="arrow-up:regular" fillColor="success" size="xs"/>
 *     <span class="eui-u-c-s-success eui-u-f-s">+18.2% from last week</span>
 *   </div>
 * </eui-dashboard-card-content-body>
 * ```
 *
 * ### Accessibility
 * - Use semantic HTML for data presentation
 * - Provide text alternatives for visual indicators (icons, colors)
 * - Ensure metrics have descriptive labels for screen readers
 * - Use appropriate ARIA attributes for dynamic content
 *
 * ### Notes
 * - Main content area with flexible height
 * - Supports any content: text, charts, lists, or custom components
 * - Use utility classes for consistent typography and spacing
 * - Grows to fill available space between header and footer
 */
class EuiDashboardCardContentBodyComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-dashboard-card-content-body';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiDashboardCardContentBodyComponent, isStandalone: true, selector: "eui-dashboard-card-content-body", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 :host{display:flex;flex-direction:column;width:100%;padding-top:var(--eui-s-s)}.eui-21 .eui-dashboard-card--stacked :host{padding-top:0}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentBodyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-card-content-body', template: '<ng-content />', styles: [".eui-21 :host{display:flex;flex-direction:column;width:100%;padding-top:var(--eui-s-s)}.eui-21 .eui-dashboard-card--stacked :host{padding-top:0}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Footer section for custom dashboard cards, typically containing action links, buttons, or supplementary information.
 * Provides a consistent bottom section for card actions and metadata.
 *
 * @usageNotes
 * ### Action Link
 * ```html
 * <eui-dashboard-card-content-footer>
 *   <a class="eui-u-text-link" href="/details">View details</a>
 * </eui-dashboard-card-content-footer>
 * ```
 *
 * ### Multiple Actions
 * ```html
 * <eui-dashboard-card-content-footer>
 *   <div class="eui-u-flex eui-u-justify-between">
 *     <eui-icon-button icon="eui-refresh" size="s" aria-label="Refresh"/>
 *     <a class="eui-u-text-link" href="/export">Export data</a>
 *   </div>
 * </eui-dashboard-card-content-footer>
 * ```
 *
 * ### Accessibility
 * - Ensure links and buttons have descriptive text or aria-labels
 * - Maintain sufficient color contrast for footer content
 * - Use semantic elements for actions (buttons, links)
 *
 * ### Notes
 * - Optional footer section for card actions
 * - Automatically positioned at bottom of card
 * - Supports any content: links, buttons, text, or custom components
 * - Use flex utilities for multi-element layouts
 */
class EuiDashboardCardContentFooterComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-dashboard-card-content-footer';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiDashboardCardContentFooterComponent, isStandalone: true, selector: "eui-dashboard-card-content-footer", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 :host{display:flex;width:calc(100% + var(--eui-s-xl));padding:var(--eui-s-xs) var(--eui-s-s) 0 var(--eui-s-xs);margin-left:calc(-1 * var(--eui-s-s));margin-top:var(--eui-s-s);border-top:1px solid var(--eui-c-divider-light)}.eui-21 .eui-dashboard-card--stacked :host{margin-top:0}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentFooterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-card-content-footer', template: '<ng-content />', styles: [".eui-21 :host{display:flex;width:calc(100% + var(--eui-s-xl));padding:var(--eui-s-xs) var(--eui-s-s) 0 var(--eui-s-xs);margin-left:calc(-1 * var(--eui-s-s));margin-top:var(--eui-s-s);border-top:1px solid var(--eui-c-divider-light)}.eui-21 .eui-dashboard-card--stacked :host{margin-top:0}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Header section for custom dashboard card content, typically containing an icon, title, and action buttons.
 * Provides a consistent layout for card headers with flexible content projection.
 *
 * @usageNotes
 * ### Basic Header
 * ```html
 * <eui-dashboard-card-content-header>
 *   <eui-dashboard-card-content-header-icon icon="chart-bar:regular"/>
 *   <eui-dashboard-card-content-header-title>
 *     Revenue
 *   </eui-dashboard-card-content-header-title>
 * </eui-dashboard-card-content-header>
 * ```
 *
 * ### With Action Button
 * ```html
 * <eui-dashboard-card-content-header>
 *   <eui-dashboard-card-content-header-icon icon="users:regular"/>
 *   <eui-dashboard-card-content-header-title>
 *     Active Users
 *   </eui-dashboard-card-content-header-title>
 *   <eui-dashboard-card-content-header-action>
 *     <eui-icon-button icon="eui-settings" size="s" aria-label="Settings"/>
 *   </eui-dashboard-card-content-header-action>
 * </eui-dashboard-card-content-header>
 * ```
 *
 * ### Accessibility
 * - Use semantic heading elements within title component
 * - Provide aria-label for icon-only action buttons
 * - Ensure sufficient color contrast for icons and text
 *
 * ### Notes
 * - Automatically arranges icon, title, and action in a flex layout
 * - Icon and action sections are optional
 * - Title section grows to fill available space
 * - Combine with other content sub-components for complete card structure
 */
class EuiDashboardCardContentHeaderComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-dashboard-card-content-header';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiDashboardCardContentHeaderComponent, isStandalone: true, selector: "eui-dashboard-card-content-header", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div class=\"eui-dashboard-card-content-header-start\">\n    <ng-content select=\"eui-dashboard-card-content-header-icon\"/>\n    <ng-content select=\"eui-dashboard-card-content-header-title\"/>\n</div>\n<div class=\"eui-dashboard-card-content-header-end\">\n    <ng-content select=\"eui-dashboard-card-content-header-action\"/>\n</div>\n\n<ng-content/>", styles: [".eui-21 :host{display:flex;align-items:center;width:calc(100% + var(--eui-s-xl));border-bottom:1px solid var(--eui-c-divider);padding:0 var(--eui-s-s) var(--eui-s-xs) var(--eui-s-s);margin-left:calc(-1 * var(--eui-s-s));min-height:var(--eui-s-7xl)}.eui-21 :host .eui-dashboard-card-content-header-start{display:flex;align-items:center;gap:var(--eui-s-s)}.eui-21 :host .eui-dashboard-card-content-header-end{display:flex;margin-left:auto;align-items:center}.eui-21 .eui-dashboard-card--stacked :host{border:none;padding-bottom:0}.eui-21 .eui-dashboard-card--stacked :host .eui-dashboard-card-content-header-start{display:flex;align-items:start;flex-direction:column;gap:var(--eui-s-xs)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-card-content-header', template: "<div class=\"eui-dashboard-card-content-header-start\">\n    <ng-content select=\"eui-dashboard-card-content-header-icon\"/>\n    <ng-content select=\"eui-dashboard-card-content-header-title\"/>\n</div>\n<div class=\"eui-dashboard-card-content-header-end\">\n    <ng-content select=\"eui-dashboard-card-content-header-action\"/>\n</div>\n\n<ng-content/>", styles: [".eui-21 :host{display:flex;align-items:center;width:calc(100% + var(--eui-s-xl));border-bottom:1px solid var(--eui-c-divider);padding:0 var(--eui-s-s) var(--eui-s-xs) var(--eui-s-s);margin-left:calc(-1 * var(--eui-s-s));min-height:var(--eui-s-7xl)}.eui-21 :host .eui-dashboard-card-content-header-start{display:flex;align-items:center;gap:var(--eui-s-s)}.eui-21 :host .eui-dashboard-card-content-header-end{display:flex;margin-left:auto;align-items:center}.eui-21 .eui-dashboard-card--stacked :host{border:none;padding-bottom:0}.eui-21 .eui-dashboard-card--stacked :host .eui-dashboard-card-content-header-start{display:flex;align-items:start;flex-direction:column;gap:var(--eui-s-xs)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Action area for dashboard card headers, typically containing buttons or interactive elements.
 * Positioned at the end of the header for quick access to card-level actions.
 *
 * @usageNotes
 * ### Single Action Button
 * ```html
 * <eui-dashboard-card-content-header-action>
 *   <eui-icon-button icon="eui-settings" size="s" aria-label="Card settings"/>
 * </eui-dashboard-card-content-header-action>
 * ```
 *
 * ### Menu Button
 * ```html
 * <eui-dashboard-card-content-header-action>
 *   <eui-icon-button
 *     icon="eui-ellipsis-vertical"
 *     euiRounded
 *     size="s"
 *     aria-label="More options"
 *     [euiPopover]="menu"/>
 * </eui-dashboard-card-content-header-action>
 * ```
 *
 * ### Accessibility
 * - Always provide aria-label for icon-only buttons
 * - Ensure buttons have sufficient touch target size
 * - Use appropriate ARIA attributes for menus and dropdowns
 *
 * ### Notes
 * - Use within `eui-dashboard-card-content-header` component
 * - Typically contains icon buttons for space efficiency
 * - Positioned at the end of the header (right side in LTR)
 * - Supports any interactive element: buttons, dropdowns, toggles
 */
class EuiDashboardCardContentHeaderActionComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-dashboard-card-content-header-action';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentHeaderActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiDashboardCardContentHeaderActionComponent, isStandalone: true, selector: "eui-dashboard-card-content-header-action", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 :host{display:flex;width:100%}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentHeaderActionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-card-content-header-action', template: '<ng-content />', styles: [".eui-21 :host{display:flex;width:100%}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Icon component for dashboard card headers, displaying a visual indicator for the card's content type.
 * Automatically sized and styled to fit within the header layout.
 *
 * @usageNotes
 * ### Basic Icon
 * ```html
 * <eui-dashboard-card-content-header-icon icon="chart-bar:regular"/>
 * ```
 *
 * ### With Different Icons
 * ```html
 * <eui-dashboard-card-content-header-icon icon="users:regular"/>
 * <eui-dashboard-card-content-header-icon icon="shopping-cart:regular"/>
 * <eui-dashboard-card-content-header-icon icon="eui-calendar"/>
 * ```
 *
 * ### Accessibility
 * - Icon is decorative when paired with title text
 * - Inherits color from parent card variant
 * - Size is fixed at 's' for consistency
 *
 * ### Notes
 * - Use within `eui-dashboard-card-content-header` component
 * - Supports all EUI icon names and Font Awesome icons
 * - Icon color adapts to card variant automatically
 * - Fixed size ensures consistent header appearance
 */
class EuiDashboardCardContentHeaderIconComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-dashboard-card-content-header-icon';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentHeaderIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiDashboardCardContentHeaderIconComponent, isStandalone: true, selector: "eui-dashboard-card-content-header-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<eui-icon-svg [icon]="icon" size="s"/>', isInline: true, styles: [".eui-21 :host{--_bg-color: var(--eui-c-primary-surface-light);--_border-color: var(--eui-c-primary-border-light);--_icon-color: var(--eui-c-primary)}.eui-21 .eui-dashboard-card--primary :host{--_bg-color: var(--eui-c-primary-surface-light);--_border-color: var(--eui-c-primary-border-light);--_icon-color: var(--eui-c-primary)}.eui-21 .eui-dashboard-card--secondary :host{--_bg-color: var(--eui-c-secondary-surface-light);--_border-color: var(--eui-c-secondary-border-light);--_icon-color: var(--eui-c-secondary)}.eui-21 .eui-dashboard-card--info :host{--_bg-color: var(--eui-c-info-surface-light);--_border-color: var(--eui-c-info-border-light);--_icon-color: var(--eui-c-info)}.eui-21 .eui-dashboard-card--success :host{--_bg-color: var(--eui-c-success-surface-light);--_border-color: var(--eui-c-success-border-light);--_icon-color: var(--eui-c-success)}.eui-21 .eui-dashboard-card--warning :host{--_bg-color: var(--eui-c-warning-surface-light);--_border-color: var(--eui-c-warning-border-light);--_icon-color: var(--eui-c-warning)}.eui-21 .eui-dashboard-card--danger :host{--_bg-color: var(--eui-c-danger-surface-light);--_border-color: var(--eui-c-danger-border-light);--_icon-color: var(--eui-c-danger)}.eui-21 :host{display:inline-flex;padding:var(--eui-s-3xs);background-color:var(--_bg-color);border:1px solid var(--_border-color);border-radius:var(--eui-br-s)}.eui-21 :host ::ng-deep .eui-icon-svg svg{fill:var(--_icon-color);color:var(--_icon-color)}\n"], dependencies: [{ 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentHeaderIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-card-content-header-icon', template: '<eui-icon-svg [icon]="icon" size="s"/>', imports: [
                        ...EUI_ICON,
                    ], styles: [".eui-21 :host{--_bg-color: var(--eui-c-primary-surface-light);--_border-color: var(--eui-c-primary-border-light);--_icon-color: var(--eui-c-primary)}.eui-21 .eui-dashboard-card--primary :host{--_bg-color: var(--eui-c-primary-surface-light);--_border-color: var(--eui-c-primary-border-light);--_icon-color: var(--eui-c-primary)}.eui-21 .eui-dashboard-card--secondary :host{--_bg-color: var(--eui-c-secondary-surface-light);--_border-color: var(--eui-c-secondary-border-light);--_icon-color: var(--eui-c-secondary)}.eui-21 .eui-dashboard-card--info :host{--_bg-color: var(--eui-c-info-surface-light);--_border-color: var(--eui-c-info-border-light);--_icon-color: var(--eui-c-info)}.eui-21 .eui-dashboard-card--success :host{--_bg-color: var(--eui-c-success-surface-light);--_border-color: var(--eui-c-success-border-light);--_icon-color: var(--eui-c-success)}.eui-21 .eui-dashboard-card--warning :host{--_bg-color: var(--eui-c-warning-surface-light);--_border-color: var(--eui-c-warning-border-light);--_icon-color: var(--eui-c-warning)}.eui-21 .eui-dashboard-card--danger :host{--_bg-color: var(--eui-c-danger-surface-light);--_border-color: var(--eui-c-danger-border-light);--_icon-color: var(--eui-c-danger)}.eui-21 :host{display:inline-flex;padding:var(--eui-s-3xs);background-color:var(--_bg-color);border:1px solid var(--_border-color);border-radius:var(--eui-br-s)}.eui-21 :host ::ng-deep .eui-icon-svg svg{fill:var(--_icon-color);color:var(--_icon-color)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }], icon: [{
                type: Input
            }] } });

/**
 * @description
 * Title component for dashboard card headers, displaying the primary heading or label for the card.
 * Automatically styled and positioned within the header layout.
 *
 * @usageNotes
 * ### Basic Title
 * ```html
 * <eui-dashboard-card-content-header-title>
 *   Revenue Overview
 * </eui-dashboard-card-content-header-title>
 * ```
 *
 * ### With Semantic Heading
 * ```html
 * <eui-dashboard-card-content-header-title>
 *   <h3>Active Users</h3>
 * </eui-dashboard-card-content-header-title>
 * ```
 *
 * ### Accessibility
 * - Use semantic heading elements (h2, h3, etc.) for proper document structure
 * - Ensure heading level matches page hierarchy
 * - Title provides context for card content
 *
 * ### Notes
 * - Use within `eui-dashboard-card-content-header` component
 * - Grows to fill available space between icon and action
 * - Supports any content but typically contains text or headings
 * - Text automatically truncates if too long
 */
class EuiDashboardCardContentHeaderTitleComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-dashboard-card-content-header-title';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiDashboardCardContentHeaderTitleComponent, isStandalone: true, selector: "eui-dashboard-card-content-header-title", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 .eui-dashboard-card :host{display:flex;width:100%;font:var(--_content-title-font)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardContentHeaderTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-card-content-header-title', template: '<ng-content />', styles: [".eui-21 .eui-dashboard-card :host{display:flex;width:100%;font:var(--_content-title-font)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Status indicator container for dashboard cards, displaying badges, chips, or status information.
 * Positioned separately from main content to highlight important state or metadata.
 *
 * @usageNotes
 * ### Status Badge
 * ```html
 * <eui-dashboard-card-status-content>
 *   <eui-chip euiSizeS euiSuccess>Active</eui-chip>
 * </eui-dashboard-card-status-content>
 * ```
 *
 * ### Warning Status
 * ```html
 * <eui-dashboard-card-status-content>
 *   <eui-chip euiSizeS euiOutline euiWarning>Pending Review</eui-chip>
 * </eui-dashboard-card-status-content>
 * ```
 *
 * ### Multiple Indicators
 * ```html
 * <eui-dashboard-card-status-content>
 *   <eui-badge euiInfo>New</eui-badge>
 *   <eui-chip euiSizeS euiOutline>Draft</eui-chip>
 * </eui-dashboard-card-status-content>
 * ```
 *
 * ### Accessibility
 * - Status information should be conveyed through text, not color alone
 * - Use semantic elements (badges, chips) with descriptive text
 * - Ensure sufficient color contrast for status indicators
 *
 * ### Notes
 * - Use alongside `eui-dashboard-card-content` for status display
 * - Typically contains badges, chips, or status labels
 * - Positioned independently from main card content
 * - Supports multiple status indicators
 */
class EuiDashboardCardStatusContentComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-dashboard-card-status-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardStatusContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiDashboardCardStatusContentComponent, isStandalone: true, selector: "eui-dashboard-card-status-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardStatusContentComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-dashboard-card-status-content',
                    template: '<ng-content/>',
                }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Dashboard card component that can display content with various styling options, including avatar/icon, labels, and clickable behavior.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-dashboard-card
 *   label="Project Status"
 *   subLabel="Last updated today"
 *   iconSvgName="eui-folder">
 * </eui-dashboard-card>
 * ```
 *
 * ### With Navigation
 * ```typescript
 * <eui-dashboard-card
 *   label="View Details"
 *   url="/dashboard/details"
 *   iconSvgName="eui-chart">
 * </eui-dashboard-card>
 * ```
 *
 * ### Accessibility
 * - Automatically sets `tabindex="0"` when clickable or has URL for keyboard navigation
 * - Use `iconLabel` to provide accessible text for icon-only cards
 * - Card emits `cardClick` event for custom interactions
 * - Supports disabled state via `euiDisabled` directive
 *
 * ### Notes
 * - Use `isHorizontal` for side-by-side layout of avatar and content
 * - Combine with `euiVariant` and size directives for visual hierarchy
 * - `labelMaxLines` and `subLabelMaxLines` control text truncation
 * - External links automatically open in new tab with `urlExternalTarget`
 */
class EuiDashboardCardComponent {
    constructor() {
        /** Element attribute for e2e testing */
        this.e2eAttr = 'eui-dashboard-card';
        /**
         * Maximum number of lines for the primary label
         * @default 2
         */
        this.labelMaxLines = 2;
        /**
         * Maximum number of lines for the secondary label
         * @default 2
         */
        this.subLabelMaxLines = 2;
        /**
         * Size of the icon
         * @default 'm'
         */
        this.iconSvgSize = 'm';
        /** Target attribute for external URLs */
        this.urlExternalTarget = '_blank';
        /** Whether to display the card in horizontal layout */
        this.isHorizontal = false;
        /** Whether to display the avatar without elevation */
        this.isFlatAvatar = false;
        /** Whether to display the avatar without background */
        this.hasNoBackgroundAvatar = false;
        /** Whether the card is clickable */
        this.isClickeable = false;
        /** Whether to display the card without elevation */
        this.isFlat = false;
        /** Whether to display the card without elevation */
        this.isStacked = false;
        /** Event emitted when the card is clicked */
        this.cardClick = new EventEmitter();
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the dashboard card component based on its current state:
     * - Adds base dashboard card classes
     * - Adds horizontal layout class if isHorizontal is true
     * - Adds link class if the card is clickable or has a URL
     * - Adds flat class if isFlat is true
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-dashboard-card'),
            this.isHorizontal ? 'eui-dashboard-card--horizontal' : '',
            this.url || this.urlExternal || this.isClickeable ? 'eui-dashboard-card--link' : '',
            this.isFlat ? 'eui-dashboard-card--flat' : '',
            this.isStacked ? 'eui-dashboard-card--stacked' : '',
            this.colorPalette ? `eui-dashboard-card--${this.colorPalette}` : '',
        ]
            .join(' ')
            .trim();
    }
    /** Tab index for keyboard navigation */
    get tabindex() {
        if (!this.baseStatesDirective.euiDisabled) {
            if (this.url || this.urlExternal || this.isClickeable) {
                return '0';
            }
        }
        return '-1';
    }
    /** Handles card click events */
    onClick(event) {
        this.cardClick.emit(event);
    }
    /** Sets default size and variant if not provided */
    ngOnInit() {
        if (!this.baseStatesDirective.euiSizeVariant) {
            this.baseStatesDirective.euiSizeL = true;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiDashboardCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiDashboardCardComponent, isStandalone: true, selector: "eui-dashboard-card", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", labelMaxLines: "labelMaxLines", subLabelMaxLines: "subLabelMaxLines", imageUrl: "imageUrl", iconSvgName: "iconSvgName", iconSvgSize: "iconSvgSize", iconLabel: "iconLabel", url: "url", urlExternal: "urlExternal", urlExternalTarget: "urlExternalTarget", colorPalette: "colorPalette", isHorizontal: ["isHorizontal", "isHorizontal", booleanAttribute], isFlatAvatar: ["isFlatAvatar", "isFlatAvatar", booleanAttribute], hasNoBackgroundAvatar: ["hasNoBackgroundAvatar", "hasNoBackgroundAvatar", booleanAttribute], isClickeable: ["isClickeable", "isClickeable", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], isStacked: ["isStacked", "isStacked", booleanAttribute] }, outputs: { cardClick: "cardClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.tabindex": "this.tabindex" } }, queries: [{ propertyName: "customContent", first: true, predicate: i0.forwardRef(() => EuiDashboardCardContentComponent), descendants: true }], hostDirectives: [{ directive: i1$1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeVariant", "euiSizeVariant", "euiDisabled", "euiDisabled", "euiOutline", "euiOutline"] }], ngImport: i0, template: "@if (url || urlExternal) {\n    @if (urlExternal) {\n        <a href=\"{{ urlExternal }}\" target=\"{{ urlExternalTarget }}\" class=\"eui-dashboard-card__anchor-wrapper\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n    } @else {\n       <a [routerLink]=\"[url]\" class=\"eui-dashboard-card__anchor-wrapper\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n       </a>\n    }\n} @else {\n    @if (customContent) {\n        <ng-content select=\"eui-dashboard-card-content\"/>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\" />\n    }\n}\n\n<div class=\"eui-dashboard-card__status\">\n    <ng-content select=\"eui-dashboard-card-status-content\"/>\n</div>\n\n<ng-template #content>\n    @if (iconSvgName || imageUrl || iconLabel) {\n        <div class=\"eui-dashboard-card__avatar-wrapper\">\n            <eui-avatar\n                [euiVariant]=\"baseStatesDirective.euiVariant\"\n                [euiSizeVariant]=\"baseStatesDirective.euiSizeVariant\"\n                [hasNoBackground]=\"hasNoBackgroundAvatar\">\n                <eui-avatar-icon>\n                    @if (iconSvgName) {\n                        <eui-icon-svg [icon]=\"iconSvgName\" [size]=\"iconSvgSize\"></eui-icon-svg>\n                    }\n                </eui-avatar-icon>\n                @if (imageUrl) {\n                    <eui-avatar-image imageUrl=\"{{ imageUrl }}\"></eui-avatar-image>\n                }\n                @if (iconLabel) {\n                    <eui-avatar-text>{{iconLabel}}</eui-avatar-text>\n                }\n            </eui-avatar>\n        </div>\n    }\n    <div class=\"eui-dashboard-card__content-wrapper\">\n        @if (label) {\n            <div class=\"eui-dashboard-card__label-content\">\n                <eui-label>\n                    <eui-label class=\"eui-dashboard-card__label eui-dashboard-card__label--max-lines-{{labelMaxLines}}\" [ngClass]=\"subLabel ? 'eui-dashboard-card__label--with-sublabel' : ''\">\n                        {{ label }}\n                    </eui-label>\n                    @if (subLabel) {\n                        <eui-label euiSublabel class=\"eui-dashboard-card__sublabel eui-dashboard-card__sublabel--max-lines-{{subLabelMaxLines}}\">\n                            {{ subLabel }}\n                        </eui-label>\n                    }\n                </eui-label>\n            </div>\n        }\n        <div class=\"eui-dashboard-card__sub-content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-21 :host.eui-dashboard-card{--_content-title-font: var(--eui-f-card-title-m-medium)}.eui-21 :host.eui-dashboard-card{display:flex;flex-direction:column;width:100%;background-color:var(--eui-c-surface-container);border-radius:var(--eui-br-m);border:var(--eui-bw-xs) solid transparent;box-shadow:var(--eui-sh-1);padding:var(--eui-s-s);cursor:default;position:relative}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__anchor-wrapper{display:flex;width:100%;flex-direction:column}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__avatar-wrapper{padding:0 var(--eui-s-7xl)}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__avatar-wrapper,.eui-21 :host.eui-dashboard-card .eui-dashboard-card__content-wrapper{display:flex;justify-content:center;align-items:center}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__content-wrapper{display:flex;flex-direction:column;padding:var(--eui-s-s);width:100%}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content{text-align:center}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label{font:var(--eui-f-l);color:var(--eui-c-text);margin-bottom:var(--eui-s-m);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--with-sublabel{margin-bottom:0}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-1{-webkit-line-clamp:1}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-2{-webkit-line-clamp:2}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-3{-webkit-line-clamp:3}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-4{-webkit-line-clamp:4}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-5{-webkit-line-clamp:5}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel{font:var(--eui-f-m);margin-bottom:var(--eui-s-m);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-1{-webkit-line-clamp:1}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-2{-webkit-line-clamp:2}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-3{-webkit-line-clamp:3}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-4{-webkit-line-clamp:4}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-5{-webkit-line-clamp:5}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__sub-content{display:block;text-align:center}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__sub-content:empty{margin-top:calc(-1 * var(--eui-s-m))}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__status{position:absolute;top:-.75rem;right:var(--eui-s-m)}.eui-21 :host.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-dashboard-card--link:not(.eui-dashboard-card--disabled){cursor:pointer}.eui-21 :host.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):active,.eui-21 :host.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):hover{box-shadow:var(--eui-sh-2)}.eui-21 :host.eui-dashboard-card--horizontal,.eui-21 :host.eui-dashboard-card--horizontal .eui-dasbhard-card__anchor-wrapper{flex-direction:row}.eui-21 :host.eui-dashboard-card--horizontal .eui-dasbhard-card__avatar-wrapper,.eui-21 :host.eui-dashboard-card--horizontal .eui-dasbhard-card__content-wrapper{width:50%}.eui-21 :host.eui-dashboard-card--horizontal .eui-dasbhard-card__avatar-wrapper{border-right:1px solid var(--eui-c-divider);margin-right:var(--eui-s-m);padding:var(--eui-s-s) 0}.eui-21 :host.eui-dashboard-card--disabled{opacity:var(--eui-o-50);pointer-events:none}.eui-21 :host.eui-dashboard-card--flat{box-shadow:none;border-color:var(--eui-c-divider)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):active,.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):hover{box-shadow:var(--eui-sh-2)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline{background-color:var(--eui-c-surface-container)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--primary{border-color:var(--eui-c-primary-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--secondary{border-color:var(--eui-c-secondary-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--info{border-color:var(--eui-c-info-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--success{border-color:var(--eui-c-success-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--warning{border-color:var(--eui-c-warning-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--danger{border-color:var(--eui-c-danger-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--red{border-color:#ef4444}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--orange{border-color:#f97316}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--amber{border-color:#f59e0b}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--yellow{border-color:#eab308}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--lime{border-color:#84cc16}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--green{border-color:#22c55e}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--emerald{border-color:#10b981}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--teal{border-color:#14b8a6}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--cyan{border-color:#06b6d4}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--sky{border-color:#0ea5e9}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--blue{border-color:#3b82f6}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--indigo{border-color:#6366f1}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--violet{border-color:#8b5cf6}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--purple{border-color:#a855f7}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--fuchsia{border-color:#d946ef}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--pink{border-color:#ec4899}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--rose{border-color:#f43f5e}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-blue-navy{border-color:#8c8cc7}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-blue-electric{border-color:#03a8cf}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-blue-ocean{border-color:#18baa8}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-green{border-color:#05c67b}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-green-dark{border-color:#066}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-orange{border-color:#ff8a20}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-purple{border-color:#905fd9}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-green-lemon{border-color:#cbe250}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-green-pine{border-color:#809ba2}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-red-crayola{border-color:#e33755}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-yellow-gold{border-color:#ffce00}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-orange-abricot{border-color:#fc8713}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-purple-violet{border-color:#8b73ff}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-red-tomato{border-color:#ff684a}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i3.EuiAvatarIconComponent, selector: "eui-avatar-icon" }, { kind: "component", type: i3.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i3.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { 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: EuiDashboardCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgClass,
                        RouterModule,
                        NgTemplateOutlet,
                        ...EUI_AVATAR,
                        ...EUI_LABEL,
                        ...EUI_ICON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                                'euiSizeXS',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiSize2XL',
                                'euiSizeVariant',
                                'euiDisabled',
                                'euiOutline',
                            ],
                        },
                    ], template: "@if (url || urlExternal) {\n    @if (urlExternal) {\n        <a href=\"{{ urlExternal }}\" target=\"{{ urlExternalTarget }}\" class=\"eui-dashboard-card__anchor-wrapper\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n    } @else {\n       <a [routerLink]=\"[url]\" class=\"eui-dashboard-card__anchor-wrapper\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n       </a>\n    }\n} @else {\n    @if (customContent) {\n        <ng-content select=\"eui-dashboard-card-content\"/>\n    } @else {\n        <ng-container *ngTemplateOutlet=\"content\" />\n    }\n}\n\n<div class=\"eui-dashboard-card__status\">\n    <ng-content select=\"eui-dashboard-card-status-content\"/>\n</div>\n\n<ng-template #content>\n    @if (iconSvgName || imageUrl || iconLabel) {\n        <div class=\"eui-dashboard-card__avatar-wrapper\">\n            <eui-avatar\n                [euiVariant]=\"baseStatesDirective.euiVariant\"\n                [euiSizeVariant]=\"baseStatesDirective.euiSizeVariant\"\n                [hasNoBackground]=\"hasNoBackgroundAvatar\">\n                <eui-avatar-icon>\n                    @if (iconSvgName) {\n                        <eui-icon-svg [icon]=\"iconSvgName\" [size]=\"iconSvgSize\"></eui-icon-svg>\n                    }\n                </eui-avatar-icon>\n                @if (imageUrl) {\n                    <eui-avatar-image imageUrl=\"{{ imageUrl }}\"></eui-avatar-image>\n                }\n                @if (iconLabel) {\n                    <eui-avatar-text>{{iconLabel}}</eui-avatar-text>\n                }\n            </eui-avatar>\n        </div>\n    }\n    <div class=\"eui-dashboard-card__content-wrapper\">\n        @if (label) {\n            <div class=\"eui-dashboard-card__label-content\">\n                <eui-label>\n                    <eui-label class=\"eui-dashboard-card__label eui-dashboard-card__label--max-lines-{{labelMaxLines}}\" [ngClass]=\"subLabel ? 'eui-dashboard-card__label--with-sublabel' : ''\">\n                        {{ label }}\n                    </eui-label>\n                    @if (subLabel) {\n                        <eui-label euiSublabel class=\"eui-dashboard-card__sublabel eui-dashboard-card__sublabel--max-lines-{{subLabelMaxLines}}\">\n                            {{ subLabel }}\n                        </eui-label>\n                    }\n                </eui-label>\n            </div>\n        }\n        <div class=\"eui-dashboard-card__sub-content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</ng-template>\n", styles: [".eui-21 :host.eui-dashboard-card{--_content-title-font: var(--eui-f-card-title-m-medium)}.eui-21 :host.eui-dashboard-card{display:flex;flex-direction:column;width:100%;background-color:var(--eui-c-surface-container);border-radius:var(--eui-br-m);border:var(--eui-bw-xs) solid transparent;box-shadow:var(--eui-sh-1);padding:var(--eui-s-s);cursor:default;position:relative}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__anchor-wrapper{display:flex;width:100%;flex-direction:column}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__avatar-wrapper{padding:0 var(--eui-s-7xl)}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__avatar-wrapper,.eui-21 :host.eui-dashboard-card .eui-dashboard-card__content-wrapper{display:flex;justify-content:center;align-items:center}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__content-wrapper{display:flex;flex-direction:column;padding:var(--eui-s-s);width:100%}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content{text-align:center}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label{font:var(--eui-f-l);color:var(--eui-c-text);margin-bottom:var(--eui-s-m);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--with-sublabel{margin-bottom:0}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-1{-webkit-line-clamp:1}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-2{-webkit-line-clamp:2}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-3{-webkit-line-clamp:3}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-4{-webkit-line-clamp:4}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__label--max-lines-5{-webkit-line-clamp:5}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel{font:var(--eui-f-m);margin-bottom:var(--eui-s-m);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-1{-webkit-line-clamp:1}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-2{-webkit-line-clamp:2}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-3{-webkit-line-clamp:3}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-4{-webkit-line-clamp:4}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__label-content .eui-dashboard-card__sublabel--max-lines-5{-webkit-line-clamp:5}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__sub-content{display:block;text-align:center}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__sub-content:empty{margin-top:calc(-1 * var(--eui-s-m))}.eui-21 :host.eui-dashboard-card .eui-dashboard-card__status{position:absolute;top:-.75rem;right:var(--eui-s-m)}.eui-21 :host.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-dashboard-card--link:not(.eui-dashboard-card--disabled){cursor:pointer}.eui-21 :host.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):active,.eui-21 :host.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):hover{box-shadow:var(--eui-sh-2)}.eui-21 :host.eui-dashboard-card--horizontal,.eui-21 :host.eui-dashboard-card--horizontal .eui-dasbhard-card__anchor-wrapper{flex-direction:row}.eui-21 :host.eui-dashboard-card--horizontal .eui-dasbhard-card__avatar-wrapper,.eui-21 :host.eui-dashboard-card--horizontal .eui-dasbhard-card__content-wrapper{width:50%}.eui-21 :host.eui-dashboard-card--horizontal .eui-dasbhard-card__avatar-wrapper{border-right:1px solid var(--eui-c-divider);margin-right:var(--eui-s-m);padding:var(--eui-s-s) 0}.eui-21 :host.eui-dashboard-card--disabled{opacity:var(--eui-o-50);pointer-events:none}.eui-21 :host.eui-dashboard-card--flat{box-shadow:none;border-color:var(--eui-c-divider)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):active,.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--link:not(.eui-dashboard-card--disabled):hover{box-shadow:var(--eui-sh-2)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline{background-color:var(--eui-c-surface-container)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--primary{border-color:var(--eui-c-primary-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--secondary{border-color:var(--eui-c-secondary-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--info{border-color:var(--eui-c-info-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--success{border-color:var(--eui-c-success-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--warning{border-color:var(--eui-c-warning-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--danger{border-color:var(--eui-c-danger-border)}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--red{border-color:#ef4444}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--orange{border-color:#f97316}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--amber{border-color:#f59e0b}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--yellow{border-color:#eab308}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--lime{border-color:#84cc16}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--green{border-color:#22c55e}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--emerald{border-color:#10b981}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--teal{border-color:#14b8a6}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--cyan{border-color:#06b6d4}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--sky{border-color:#0ea5e9}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--blue{border-color:#3b82f6}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--indigo{border-color:#6366f1}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--violet{border-color:#8b5cf6}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--purple{border-color:#a855f7}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--fuchsia{border-color:#d946ef}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--pink{border-color:#ec4899}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--rose{border-color:#f43f5e}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-blue-navy{border-color:#8c8cc7}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-blue-electric{border-color:#03a8cf}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-blue-ocean{border-color:#18baa8}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-green{border-color:#05c67b}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-green-dark{border-color:#066}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-orange{border-color:#ff8a20}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-purple{border-color:#905fd9}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-green-lemon{border-color:#cbe250}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-green-pine{border-color:#809ba2}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-red-crayola{border-color:#e33755}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-yellow-gold{border-color:#ffce00}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-orange-abricot{border-color:#fc8713}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-purple-violet{border-color:#8b73ff}.eui-21 :host.eui-dashboard-card--flat.eui-dashboard-card--outline.eui-dashboard-card--ecl-red-tomato{border-color:#ff684a}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], label: [{
                type: Input
            }], subLabel: [{
                type: Input
            }], labelMaxLines: [{
                type: Input
            }], subLabelMaxLines: [{
                type: Input
            }], imageUrl: [{
                type: Input
            }], iconSvgName: [{
                type: Input
            }], iconSvgSize: [{
                type: Input
            }], iconLabel: [{
                type: Input
            }], url: [{
                type: Input
            }], urlExternal: [{
                type: Input
            }], urlExternalTarget: [{
                type: Input
            }], colorPalette: [{
                type: Input
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], isHorizontal: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isFlatAvatar: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasNoBackgroundAvatar: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isClickeable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isFlat: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isStacked: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], cardClick: [{
                type: Output
            }], customContent: [{
                type: ContentChild,
                args: [forwardRef(() => EuiDashboardCardContentComponent)]
            }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

const EUI_DASHBOARD_CARD = [
    EuiDashboardCardComponent,
    EuiDashboardCardContentComponent,
    EuiDashboardCardContentHeaderComponent,
    EuiDashboardCardContentHeaderIconComponent,
    EuiDashboardCardContentHeaderTitleComponent,
    EuiDashboardCardContentHeaderActionComponent,
    EuiDashboardCardContentBodyComponent,
    EuiDashboardCardContentFooterComponent,
    EuiDashboardCardStatusContentComponent,
];

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

export { EUI_DASHBOARD_CARD, EuiDashboardCardComponent, EuiDashboardCardContentBodyComponent, EuiDashboardCardContentComponent, EuiDashboardCardContentFooterComponent, EuiDashboardCardContentHeaderActionComponent, EuiDashboardCardContentHeaderComponent, EuiDashboardCardContentHeaderIconComponent, EuiDashboardCardContentHeaderTitleComponent, EuiDashboardCardStatusContentComponent };
//# sourceMappingURL=eui-components-eui-dashboard-card.mjs.map
