import * as i0 from '@angular/core';
import { booleanAttribute, Input, ChangeDetectionStrategy, Component, inject, forwardRef, ContentChild, HostBinding } from '@angular/core';
import * as i1 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i1$1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/**
 * Component representing an avatar badge.
 * This badge can be positioned at the top or bottom of the avatar and is used
 * to display additional information or status indicators.
 *
 * The component uses content projection to allow any content to be displayed inside the badge.
 *
 * @usageNotes
 * ```html
 * <eui-avatar>
 *     <eui-avatar-text>eUI</eui-avatar-text>
 *     <eui-avatar-badge>
 *         <eui-badge euiDanger euiSizeS>7</eui-badge>
 *     </eui-avatar-badge>
 * </eui-avatar>
 * ```
 */
class EuiAvatarBadgeComponent {
    constructor() {
        /**
         * Whether the avatar should have a shadow effect
         * @default false
         */
        this.isPositionBottom = false;
    }
    /**
     * Gets the CSS classes to be applied to the host element.
     * Combines the base class with a modifier class based on the position.
     * @returns {string} The combined CSS classes.
     */
    cssClasses() {
        return [
            'eui-avatar-badge',
            this.isPositionBottom ? 'eui-avatar-badge--bottom' : 'eui-avatar-badge--top',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.16", type: EuiAvatarBadgeComponent, isStandalone: true, selector: "eui-avatar-badge", inputs: { isPositionBottom: ["isPositionBottom", "isPositionBottom", booleanAttribute] }, host: { properties: { "class": "cssClasses()" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-avatar :host{position:absolute}.eui-21 .eui-avatar :host,.eui-21 .eui-avatar--size-m :host{left:75%;top:65%}.eui-21 .eui-avatar--size-s :host{left:70%;top:60%}.eui-21 .eui-avatar--size-xs :host{left:70%;top:55%}.eui-21 .eui-avatar--size-l :host{left:70%;top:70%}.eui-21 .eui-avatar--size-xl :host{left:70%;top:75%}.eui-21 .eui-avatar--size-2xl :host{left:70%;top:80%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarBadgeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-badge', template: '<ng-content/>', host: {
                        '[class]': 'cssClasses()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-avatar :host{position:absolute}.eui-21 .eui-avatar :host,.eui-21 .eui-avatar--size-m :host{left:75%;top:65%}.eui-21 .eui-avatar--size-s :host{left:70%;top:60%}.eui-21 .eui-avatar--size-xs :host{left:70%;top:55%}.eui-21 .eui-avatar--size-l :host{left:70%;top:70%}.eui-21 .eui-avatar--size-xl :host{left:70%;top:75%}.eui-21 .eui-avatar--size-2xl :host{left:70%;top:80%}\n"] }]
        }], propDecorators: { isPositionBottom: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * @description
 * Component representing an avatar icon.
 * This component serves as a container for icons within an avatar.
 * It applies the appropriate styling and structure needed for avatar icons.
 *
 * The component simply wraps its content with the 'eui-avatar-icon' class styling.
 * Used for displaying icons as avatar content instead of images or text.
 *
 * @usageNotes
 * ```html
 * <eui-avatar>
 *     <eui-avatar-icon>
 *         <eui-icon-svg icon="eui-user" />
 *     </eui-avatar-icon>
 * </eui-avatar>
 * ```
 */
class EuiAvatarIconComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiAvatarIconComponent, isStandalone: true, selector: "eui-avatar-icon", host: { classAttribute: "eui-avatar-icon" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-avatar :host.eui-avatar-icon{display:inline-flex;color:var(--_color)}.eui-21 .eui-avatar :host.eui-avatar-icon ::ng-deep .eui-icon-svg svg{height:var(--_icon-size)!important;width:var(--_icon-size)!important;fill:var(--_color)!important;color:var(--_color)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-icon', template: '<ng-content/>', host: {
                        class: 'eui-avatar-icon',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-avatar :host.eui-avatar-icon{display:inline-flex;color:var(--_color)}.eui-21 .eui-avatar :host.eui-avatar-icon ::ng-deep .eui-icon-svg svg{height:var(--_icon-size)!important;width:var(--_icon-size)!important;fill:var(--_color)!important;color:var(--_color)!important}\n"] }]
        }] });

/**
 * @description
 * Component representing an avatar image.
 * Displays an image for an avatar with fallback to a default image when none is provided.
 * Uses the application's configured assets base URL for the default image path.
 *
 * @usageNotes
 * ```html
 * <eui-avatar>
 *    <eui-avatar-image imageUrl="assets/images/profile-avatar.png"></eui-avatar-image>
 * </eui-avatar>
 * ```
 */
class EuiAvatarImageComponent {
    constructor() {
        /**
         * The final image URL to be used in the template.
         * This will be either the provided imageUrl or a default image URL.
         */
        this.imageUrlGenerated = 'assets';
    }
    /** CSS class applied to the host element */
    get cssClasses() {
        return [
            'eui-avatar-image',
            !this.imageUrl ? 'eui-avatar-image--default' : '',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiAvatarImageComponent, isStandalone: true, selector: "eui-avatar-image", inputs: { imageUrl: "imageUrl" }, host: { properties: { "class": "cssClasses" } }, ngImport: i0, template: "@if (imageUrl) {\n    <div class=\"eui-avatar-image-wrapper\">\n        <img [src]=\"imageUrl\" alt=\"Avatar\"/>\n    </div>\n} @else {\n    <eui-icon-svg icon=\"eui-user-circle\" fillColor=\"secondary\"/>\n    <!-- <ng-content /> -->\n}\n", styles: [".eui-21 .eui-avatar :host.eui-avatar-image .eui-avatar-image-wrapper{background-size:cover;height:var(--_size);width:var(--_size)}.eui-21 .eui-avatar :host.eui-avatar-image .eui-avatar-image-wrapper img{border-radius:var(--eui-br-max);height:var(--_size);width:var(--_size)}.eui-21 .eui-avatar :host.eui-avatar-image ::ng-deep .eui-icon-svg svg{height:var(--_size);width:var(--_size)}.eui-21 .eui-avatar :host.eui-avatar-image--default{display:flex;align-items:center;justify-content:center}.eui-21 .eui-avatar .eui-avatar--no-background :host img{border-radius:0;background-color:var(--eui-c-surface-container)}.eui-21 .eui-avatar .eui-avatar--shape-square :host img{border-radius:var(--eui-br-s)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarImageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-image', imports: [
                        ...EUI_ICON,
                    ], host: {
                        '[class]': 'cssClasses',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (imageUrl) {\n    <div class=\"eui-avatar-image-wrapper\">\n        <img [src]=\"imageUrl\" alt=\"Avatar\"/>\n    </div>\n} @else {\n    <eui-icon-svg icon=\"eui-user-circle\" fillColor=\"secondary\"/>\n    <!-- <ng-content /> -->\n}\n", styles: [".eui-21 .eui-avatar :host.eui-avatar-image .eui-avatar-image-wrapper{background-size:cover;height:var(--_size);width:var(--_size)}.eui-21 .eui-avatar :host.eui-avatar-image .eui-avatar-image-wrapper img{border-radius:var(--eui-br-max);height:var(--_size);width:var(--_size)}.eui-21 .eui-avatar :host.eui-avatar-image ::ng-deep .eui-icon-svg svg{height:var(--_size);width:var(--_size)}.eui-21 .eui-avatar :host.eui-avatar-image--default{display:flex;align-items:center;justify-content:center}.eui-21 .eui-avatar .eui-avatar--no-background :host img{border-radius:0;background-color:var(--eui-c-surface-container)}.eui-21 .eui-avatar .eui-avatar--shape-square :host img{border-radius:var(--eui-br-s)}\n"] }]
        }], propDecorators: { imageUrl: [{
                type: Input
            }] } });

/**
 * @description
 * Component for displaying textual content alongside an avatar.
 * Serves as a container for avatar-content-label and avatar-content-sublabel subcomponents.
 * Typically used to show user name and additional information like email or role.
 * Content is projected via ng-content and styled to align properly with the avatar.
 * Must be used within an eui-avatar parent component for proper layout.
 *
 * @usageNotes
 * ```html
 * <eui-avatar>
 *   <eui-avatar-image src="user.jpg"></eui-avatar-image>
 *   <eui-avatar-content>
 *     <eui-avatar-content-label>John Doe</eui-avatar-content-label>
 *     <eui-avatar-content-sublabel>john.doe@ec.europa.eu</eui-avatar-content-sublabel>
 *   </eui-avatar-content>
 * </eui-avatar>
 * ```
 *
 * ### Accessibility
 * - Content is readable by screen readers in natural reading order
 * - Label and sublabel are semantically grouped for context
 * - Use meaningful text that identifies the user or entity
 *
 * ### Notes
 * - Must be direct child of eui-avatar component
 * - Typically contains eui-avatar-content-label and eui-avatar-content-sublabel
 * - Layout can be reversed using isReverse on parent eui-avatar
 * - Automatically styled to align with avatar size variants
 */
class EuiAvatarContentComponent {
    /**
     * Binds the CSS class 'eui-avatar-list' to the host element.
     * This class provides the styling necessary for arranging avatars in a list.
     * @returns {string} The CSS class name
     */
    cssClasses() {
        return 'eui-avatar-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiAvatarContentComponent, isStandalone: true, selector: "eui-avatar-content", host: { properties: { "class": "cssClasses()" } }, ngImport: i0, template: "<ng-content select=\"eui-avatar-content-label\"/>\n<ng-content select=\"eui-avatar-content-sublabel\"/>", styles: [".eui-21 .eui-avatar :host{display:flex;flex-direction:column}.eui-21 .eui-avatar--reverse :host{align-items:end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-content', host: {
                        '[class]': 'cssClasses()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"eui-avatar-content-label\"/>\n<ng-content select=\"eui-avatar-content-sublabel\"/>", styles: [".eui-21 .eui-avatar :host{display:flex;flex-direction:column}.eui-21 .eui-avatar--reverse :host{align-items:end}\n"] }]
        }] });

/**
 * @description
 * Component for displaying a list of avatars.
 * This component serves as a container that arranges multiple avatars in a visually
 * coherent group, typically with slight overlapping to save space.
 *
 * The component uses content projection to allow placing multiple avatar components
 * within it and applies appropriate styling via the 'eui-avatar-list' CSS class.
 *
 * @usageNotes
 * ```html
 * <eui-avatar-list>
 *     <eui-avatar euiSizeS>
 *         <eui-avatar-image imageUrl="assets/images/avatars/small/panda.png"></eui-avatar-image>
 *     </eui-avatar>
 *     <eui-avatar euiSizeS>
 *         <eui-avatar-image imageUrl="assets/images/avatars/small/cat.png"></eui-avatar-image>
 *     </eui-avatar>
 *     <eui-avatar euiSizeS>
 *         <eui-avatar-image imageUrl="assets/images/avatars/small/bear.png"></eui-avatar-image>
 *     </eui-avatar>
 * </eui-avatar-list>
 */
class EuiAvatarListComponent {
    /**
     * Binds the CSS class 'eui-avatar-list' to the host element.
     * This class provides the styling necessary for arranging avatars in a list.
     * @returns {string} The CSS class name
     */
    cssClasses() {
        return 'eui-avatar-list';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiAvatarListComponent, isStandalone: true, selector: "eui-avatar-list", host: { properties: { "class": "cssClasses()" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host.eui-avatar-list{display:inline-flex}.eui-21 :host.eui-avatar-list ::ng-deep .eui-avatar:not(:first-child){margin-left:-1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-list', template: '<ng-content/>', host: {
                        '[class]': 'cssClasses()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host.eui-avatar-list{display:inline-flex}.eui-21 :host.eui-avatar-list ::ng-deep .eui-avatar:not(:first-child){margin-left:-1rem}\n"] }]
        }] });

/**
 * @description
 * Component for displaying text content within an avatar.
 * This component serves as a container for text that appears inside an avatar,
 * such as initials or short text identifiers.
 *
 * The component applies the 'eui-avatar-text' class to provide appropriate styling
 * for text displayed within an avatar context. It uses content projection to allow
 * any text content to be displayed inside.
 *
 * @usageNotes
 * ```html
 * <eui-avatar euiSizeS>
 *     <eui-avatar-text>eUI</eui-avatar-text>
 *     <eui-avatar-badge>
 *         <eui-badge euiDanger euiSizeS>7</eui-badge>
 *     </eui-avatar-badge>
 * </eui-avatar>
 * ```
 */
class EuiAvatarTextComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiAvatarTextComponent, isStandalone: true, selector: "eui-avatar-text", host: { properties: { "class": "\"eui-avatar-text\"" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-avatar :host.eui-avatar-text{color:var(--_color);font-weight:var(--_font-weight);font-size:var(--_font-size)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarTextComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-text', template: '<ng-content/>', host: {
                        '[class]': '"eui-avatar-text"',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-avatar :host.eui-avatar-text{color:var(--_color);font-weight:var(--_font-weight);font-size:var(--_font-size)}\n"] }]
        }] });

/**
 * @description
 * Component for displaying avatars in the EUI design system.
 *
 * An avatar is a visual representation of a user or entity and can contain
 * an image, text, or an icon. This component serves as the container for
 * various avatar subcomponents, such as EuiAvatarImage, EuiAvatarText,
 * EuiAvatarIcon, and EuiAvatarBadge.
 *
 * The component supports various customizations, including colors (via state directives),
 * sizes, shapes, and appearance modifiers.
 *
 * @usageNotes
 * #### Text avatar
 * ```html
 * <eui-avatar euiPrimary>
 *   <eui-avatar-text>JD</eui-avatar-text>
 * </eui-avatar>
 * ```
 *
 * #### Image avatar with badge
 * ```html
 * <eui-avatar euiSizeL>
 *   <eui-avatar-image src="user.jpg" alt="John Doe"></eui-avatar-image>
 *   <eui-avatar-badge euiSuccess></eui-avatar-badge>
 * </eui-avatar>
 * ```
 *
 * #### Icon avatar with square shape
 * ```html
 * <eui-avatar euiInfo [isShapeSquare]="true">
 *   <eui-avatar-icon iconSvgName="user:outline"></eui-avatar-icon>
 * </eui-avatar>
 * ```
 *
 * #### Avatar with content (name and email)
 * ```html
 * <eui-avatar>
 *   <eui-avatar-image src="user.jpg"></eui-avatar-image>
 *   <eui-avatar-content>
 *     <eui-avatar-content-label>John Doe</eui-avatar-content-label>
 *     <eui-avatar-content-sublabel>john.doe@example.com</eui-avatar-content-sublabel>
 *   </eui-avatar-content>
 * </eui-avatar>
 * ```
 *
 * ### Accessibility
 * - Uses role="status" for screen reader announcements
 * - aria-label provides context about the avatar (defaults to "avatar")
 * - Image avatars should include alt text via eui-avatar-image
 * - Text avatars are automatically readable by screen readers
 * - Badge status changes are announced when present
 *
 * ### Notes
 * - Default shape is circular, use isShapeSquare for square avatars
 * - Size variants: euiSizeXS, euiSizeS (default), euiSizeL, euiSizeXL, euiSize2XL
 * - Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
 * - Use hasNoBackground to remove background color (useful for image avatars)
 * - isReverse flips the layout when used with eui-avatar-content
 * - colorPalette accepts custom color palette names for extended theming
 * - hasShadow adds depth with shadow effect
 * - euiOutline adds border outline styling
 */
class EuiAvatarComponent {
    constructor() {
        /**
         * Data attribute for E2E testing
         * @default 'eui-avatar'
         */
        this.e2eAttr = 'eui-avatar';
        /**
         * ARIA role for accessibility
         * @default 'status'
         */
        this.role = 'status';
        /**
         * ARIA label for accessibility
         * @default 'avatar'
         */
        this.ariaLabel = 'avatar';
        /**
         * Whether the avatar should have a shadow effect
         * @default false
         */
        this.hasShadow = false;
        /**
         * Whether the avatar shape should be square instead of circular
         * @default false
         */
        this.isShapeSquare = false;
        /**
         * Whether the avatar should have no background color
         * @default false
         */
        this.hasNoBackground = false;
        /**
         * Whether the avatar reverse layout with content
         * @default false
         */
        this.isReverse = false;
        /**
         * Reference to the BaseStatesDirective providing state-based styling
         * @internal
         */
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * Gets the CSS classes to be applied to the host element.
     * Combines base classes with modifier classes.
     * @returns {string} The combined CSS classes
     */
    cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-avatar'),
            this.isShapeSquare ? 'eui-avatar--shape-square' : '',
            this.hasNoBackground ? 'eui-avatar--no-background' : '',
            this.isReverse ? 'eui-avatar--reverse' : '',
            this.avatarImage ? 'eui-avatar--image' : '',
            this.colorPalette ? `eui-avatar--${this.colorPalette}` : '',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiAvatarComponent, isStandalone: true, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], hasShadow: ["hasShadow", "hasShadow", booleanAttribute], isShapeSquare: ["isShapeSquare", "isShapeSquare", booleanAttribute], hasNoBackground: ["hasNoBackground", "hasNoBackground", booleanAttribute], isReverse: ["isReverse", "isReverse", booleanAttribute], colorPalette: "colorPalette" }, host: { properties: { "class": "cssClasses()", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, queries: [{ propertyName: "avatarImage", first: true, predicate: i0.forwardRef(() => EuiAvatarImageComponent), 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", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeVariant", "euiSizeVariant", "euiOutline", "euiOutline"] }], ngImport: i0, template: "@if(hasShadow) {\n    <div class=\"eui-avatar-shadow\"></div>\n}\n\n<div class=\"eui-avatar-wrapper\">\n    <ng-content select=\"eui-avatar-icon\"/>\n    <ng-content select=\"eui-avatar-text\"/>\n    <ng-content select=\"eui-avatar-image\"/>\n    <ng-content select=\"eui-avatar-badge\"/>\n</div>\n\n<ng-content select=\"eui-avatar-content\"/>\n", styles: [".eui-21 :host.eui-avatar{--_size: 3rem;--_icon-size: 1.5rem;--_font-size: var(--eui-f-s-xl);--_font-weight: var(--eui-f-w-semi-bold);--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_border-color: var(--eui-c-secondary-border-lighter);--_content-label-font: var(--eui-f-s-semi-bold);--_content-sublabel-font: var(--eui-f-s);--_content-label-font-s: var(--eui-f-s-semi-bold);--_content-sublabel-font-s: var(--eui-f-xs);--_content-label-font-l: var(--eui-f-m-semi-bold);--_content-sublabel-font-l: var(--eui-f-m)}.eui-21 :host.eui-avatar--primary{--_bg-color: var(--eui-c-primary-surface);--_color: var(--eui-c-primary-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--primary{--_bg-color: var(--eui-c-primary-surface-light);--_color: var(--eui-c-primary-on-surface-light)}.eui-21 :host.eui-avatar--secondary{--_bg-color: var(--eui-c-secondary-surface);--_color: var(--eui-c-secondary-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--secondary{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light)}.eui-21 :host.eui-avatar--info{--_bg-color: var(--eui-c-info-surface);--_color: var(--eui-c-info-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--info{--_bg-color: var(--eui-c-info-surface-light);--_color: var(--eui-c-info-on-surface-light)}.eui-21 :host.eui-avatar--success{--_bg-color: var(--eui-c-success-surface);--_color: var(--eui-c-success-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--success{--_bg-color: var(--eui-c-success-surface-light);--_color: var(--eui-c-success-on-surface-light)}.eui-21 :host.eui-avatar--warning{--_bg-color: var(--eui-c-warning-surface);--_color: var(--eui-c-warning-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--warning{--_bg-color: var(--eui-c-warning-surface-light);--_color: var(--eui-c-warning-on-surface-light)}.eui-21 :host.eui-avatar--danger{--_bg-color: var(--eui-c-danger-surface);--_color: var(--eui-c-danger-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--danger{--_bg-color: var(--eui-c-danger-surface-light);--_color: var(--eui-c-danger-on-surface-light)}.eui-21 :host.eui-avatar--red{--_bg-color: #f87171;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--red{--_bg-color: #fee2e2;--_color: #450a0a;--_border-color: #fecaca}.eui-21 :host.eui-avatar--orange{--_bg-color: #fb923c;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--orange{--_bg-color: #ffedd5;--_color: #431407;--_border-color: #fed7aa}.eui-21 :host.eui-avatar--amber{--_bg-color: #fbbf24;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--amber{--_bg-color: #fef3c7;--_color: #451a03;--_border-color: #fde68a}.eui-21 :host.eui-avatar--yellow{--_bg-color: #facc15;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--yellow{--_bg-color: #fef9c3;--_color: #422006;--_border-color: #fef08a}.eui-21 :host.eui-avatar--lime{--_bg-color: #a3e635;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--lime{--_bg-color: #ecfccb;--_color: #1a2e05;--_border-color: #d9f99d}.eui-21 :host.eui-avatar--green{--_bg-color: #4ade80;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--green{--_bg-color: #dcfce7;--_color: #052e16;--_border-color: #bbf7d0}.eui-21 :host.eui-avatar--emerald{--_bg-color: #34d399;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--emerald{--_bg-color: #d1fae5;--_color: #022c22;--_border-color: #a7f3d0}.eui-21 :host.eui-avatar--teal{--_bg-color: #2dd4bf;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--teal{--_bg-color: #ccfbf1;--_color: #042f2e;--_border-color: #99f6e4}.eui-21 :host.eui-avatar--cyan{--_bg-color: #22d3ee;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--cyan{--_bg-color: #cffafe;--_color: #083344;--_border-color: #a5f3fc}.eui-21 :host.eui-avatar--sky{--_bg-color: #38bdf8;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--sky{--_bg-color: #e0f2fe;--_color: #082f49;--_border-color: #bae6fd}.eui-21 :host.eui-avatar--blue{--_bg-color: #60a5fa;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--blue{--_bg-color: #dbeafe;--_color: #172554;--_border-color: #bfdbfe}.eui-21 :host.eui-avatar--indigo{--_bg-color: #818cf8;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--indigo{--_bg-color: #e0e7ff;--_color: #1e1b4b;--_border-color: #c7d2fe}.eui-21 :host.eui-avatar--violet{--_bg-color: #a78bfa;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--violet{--_bg-color: #ede9fe;--_color: #2e1065;--_border-color: #ddd6fe}.eui-21 :host.eui-avatar--purple{--_bg-color: #c084fc;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--purple{--_bg-color: #f3e8ff;--_color: #3b0764;--_border-color: #e9d5ff}.eui-21 :host.eui-avatar--fuchsia{--_bg-color: #e879f9;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--fuchsia{--_bg-color: #fae8ff;--_color: #4a044e;--_border-color: #f5d0fe}.eui-21 :host.eui-avatar--pink{--_bg-color: #f472b6;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--pink{--_bg-color: #fce7f3;--_color: #500724;--_border-color: #fbcfe8}.eui-21 :host.eui-avatar--rose{--_bg-color: #fb7185;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--rose{--_bg-color: #ffe4e6;--_color: #4c0519;--_border-color: #fecdd3}.eui-21 :host.eui-avatar--ecl-blue-navy{--_bg-color: #a0a0d1;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-blue-navy{--_bg-color: #f0f0f8;--_color: rgb(0, 0, 45.08);--_border-color: #d9d9ec}.eui-21 :host.eui-avatar--ecl-blue-electric{--_bg-color: #03bbe6;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-blue-electric{--_bg-color: #d9f5fb;--_color: rgb(.95, 69.35, 84.55);--_border-color: #b1eaf7}.eui-21 :host.eui-avatar--ecl-blue-ocean{--_bg-color: #69d2c6;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-blue-ocean{--_bg-color: #dcf5f2;--_color: rgb(13.3, 106.4, 95.95);--_border-color: #b7eae4}.eui-21 :host.eui-avatar--ecl-green{--_bg-color: #5ddaa9;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-green{--_bg-color: #daf6eb;--_color: rgb(2.85, 113.05, 70.3);--_border-color: #b2edd6}.eui-21 :host.eui-avatar--ecl-green-dark{--_bg-color: #599c9c;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-green-dark{--_bg-color: #d9e8e8;--_color: rgb(0, 57.95, 57.95);--_border-color: #b0d0d0}.eui-21 :host.eui-avatar--ecl-orange{--_bg-color: #ffb16a;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-orange{--_bg-color: #ffe9d6;--_color: rgb(101.65, 55.1, 12.35);--_border-color: #ffdbba}.eui-21 :host.eui-avatar--ecl-purple{--_bg-color: #b594e6;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-purple{--_bg-color: #ebe1f8;--_color: rgb(57, 38, 86.45);--_border-color: #ddcdf3}.eui-21 :host.eui-avatar--ecl-green-lemon{--_bg-color: #ddec8d;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-green-lemon{--_bg-color: #f7fbe5;--_color: rgb(103.7, 115.6, 40.8);--_border-color: #eff6c9}.eui-21 :host.eui-avatar--ecl-green-pine{--_bg-color: #94abb1;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-green-pine{--_bg-color: #dae2e4;--_color: rgb(7.6, 44.65, 55.1);--_border-color: #ced8db}.eui-21 :host.eui-avatar--ecl-red-crayola{--_bg-color: #e95f77;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-red-crayola{--_bg-color: #f6c1ca;--_color: rgb(90.25, 21.85, 34.2);--_border-color: #f2a3b1}.eui-21 :host.eui-avatar--ecl-yellow-gold{--_bg-color: #ffd72e;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-yellow-gold{--_bg-color: #fff3c2;--_color: rgb(109.25, 88.35, 0);--_border-color: #ffea91}.eui-21 :host.eui-avatar--ecl-orange-abricot{--_bg-color: #fea439;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-orange-abricot{--_bg-color: #fff1d4;--_color: rgb(119.7, 51.3, 15.2);--_border-color: #ffdfa9}.eui-21 :host.eui-avatar--ecl-purple-violet{--_bg-color: #a28fff;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-purple-violet{--_bg-color: #dbd4ff;--_color: rgb(55.1, 45.6, 101.65);--_border-color: #cabfff}.eui-21 :host.eui-avatar--ecl-red-tomato{--_bg-color: #ff866e;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-red-tomato{--_bg-color: #ffd0c7;--_color: rgb(101.65, 41.8, 29.45);--_border-color: #ffbaac}.eui-21 :host.eui-avatar--no-background{--_bg-color: transparent;--_color: var(--eui-c-primary)}.eui-21 :host.eui-avatar--no-background.eui-avatar--secondary{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-avatar--no-background.eui-avatar--info{--_color: var(--eui-c-info)}.eui-21 :host.eui-avatar--no-background.eui-avatar--success{--_color: var(--eui-c-success)}.eui-21 :host.eui-avatar--no-background.eui-avatar--warning{--_color: var(--eui-c-warning)}.eui-21 :host.eui-avatar--no-background.eui-avatar--danger{--_color: var(--eui-c-danger)}.eui-21 :host.eui-avatar--size-xs{--_size: 1.5rem;--_font-size: var(--eui-f-s-xs);--_icon-size: var(--eui-is-xs)}.eui-21 :host.eui-avatar--size-s{--_size: 2.5rem;--_font-size: var(--eui-f-s);--_icon-size: var(--eui-is-s)}.eui-21 :host.eui-avatar--size-m{--_font-size: var(--eui-f-s-xl)}.eui-21 :host.eui-avatar--size-l{--_size: 4rem;--_font-size: var(--eui-f-s-2xl);--_icon-size: var(--eui-is-l)}.eui-21 :host.eui-avatar--size-xl{--_size: 5rem;--_font-size: var(--eui-f-s-2xl);--_icon-size: var(--eui-is-xl)}.eui-21 :host.eui-avatar--size-2xl{--_size: 6rem;--_font-size: var(--eui-f-s-3xl);--_icon-size: var(--eui-is-2xl)}.eui-21 :host.eui-avatar{display:inline-flex;position:relative;align-items:center;gap:var(--eui-s-xs)}.eui-21 :host.eui-avatar .eui-avatar-wrapper{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--_border-color);border-radius:var(--eui-br-max);background-color:var(--_bg-color);height:var(--_size);width:var(--_size);position:relative}.eui-21 :host.eui-avatar .eui-avatar-shadow{position:absolute;right:-.2rem;height:var(--_size);width:var(--_size);border:.65rem solid var(--eui-c-divider);border-radius:var(--eui-br-max)}.eui-21 :host.eui-avatar--shape-square .eui-avatar-wrapper{border-radius:var(--eui-br-s)}.eui-21 :host.eui-avatar--no-background .eui-avatar-wrapper{border-radius:var(--eui-br-none);border:none}.eui-21 :host.eui-avatar--reverse{flex-direction:row-reverse}.eui-21 .eui-chip :host.eui-avatar--size-xs{margin-left:calc(-1 * var(--eui-s-xs))}.eui-21 .eui-chip :host.eui-avatar--image .eui-avatar-wrapper{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'div[euiAvatar], span[euiAvatar], eui-avatar', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                                'euiSizeXS',
                                'euiSizeS',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiSize2XL',
                                'euiSizeVariant',
                                'euiOutline',
                            ],
                        },
                    ], host: {
                        '[class]': 'cssClasses()',
                        '[attr.data-e2e]': 'e2eAttr',
                        '[attr.role]': '"status"',
                        '[attr.aria-label]': 'ariaLabel',
                    }, template: "@if(hasShadow) {\n    <div class=\"eui-avatar-shadow\"></div>\n}\n\n<div class=\"eui-avatar-wrapper\">\n    <ng-content select=\"eui-avatar-icon\"/>\n    <ng-content select=\"eui-avatar-text\"/>\n    <ng-content select=\"eui-avatar-image\"/>\n    <ng-content select=\"eui-avatar-badge\"/>\n</div>\n\n<ng-content select=\"eui-avatar-content\"/>\n", styles: [".eui-21 :host.eui-avatar{--_size: 3rem;--_icon-size: 1.5rem;--_font-size: var(--eui-f-s-xl);--_font-weight: var(--eui-f-w-semi-bold);--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_border-color: var(--eui-c-secondary-border-lighter);--_content-label-font: var(--eui-f-s-semi-bold);--_content-sublabel-font: var(--eui-f-s);--_content-label-font-s: var(--eui-f-s-semi-bold);--_content-sublabel-font-s: var(--eui-f-xs);--_content-label-font-l: var(--eui-f-m-semi-bold);--_content-sublabel-font-l: var(--eui-f-m)}.eui-21 :host.eui-avatar--primary{--_bg-color: var(--eui-c-primary-surface);--_color: var(--eui-c-primary-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--primary{--_bg-color: var(--eui-c-primary-surface-light);--_color: var(--eui-c-primary-on-surface-light)}.eui-21 :host.eui-avatar--secondary{--_bg-color: var(--eui-c-secondary-surface);--_color: var(--eui-c-secondary-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--secondary{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light)}.eui-21 :host.eui-avatar--info{--_bg-color: var(--eui-c-info-surface);--_color: var(--eui-c-info-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--info{--_bg-color: var(--eui-c-info-surface-light);--_color: var(--eui-c-info-on-surface-light)}.eui-21 :host.eui-avatar--success{--_bg-color: var(--eui-c-success-surface);--_color: var(--eui-c-success-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--success{--_bg-color: var(--eui-c-success-surface-light);--_color: var(--eui-c-success-on-surface-light)}.eui-21 :host.eui-avatar--warning{--_bg-color: var(--eui-c-warning-surface);--_color: var(--eui-c-warning-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--warning{--_bg-color: var(--eui-c-warning-surface-light);--_color: var(--eui-c-warning-on-surface-light)}.eui-21 :host.eui-avatar--danger{--_bg-color: var(--eui-c-danger-surface);--_color: var(--eui-c-danger-on-surface)}.eui-21 :host.eui-avatar--outline.eui-avatar--danger{--_bg-color: var(--eui-c-danger-surface-light);--_color: var(--eui-c-danger-on-surface-light)}.eui-21 :host.eui-avatar--red{--_bg-color: #f87171;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--red{--_bg-color: #fee2e2;--_color: #450a0a;--_border-color: #fecaca}.eui-21 :host.eui-avatar--orange{--_bg-color: #fb923c;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--orange{--_bg-color: #ffedd5;--_color: #431407;--_border-color: #fed7aa}.eui-21 :host.eui-avatar--amber{--_bg-color: #fbbf24;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--amber{--_bg-color: #fef3c7;--_color: #451a03;--_border-color: #fde68a}.eui-21 :host.eui-avatar--yellow{--_bg-color: #facc15;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--yellow{--_bg-color: #fef9c3;--_color: #422006;--_border-color: #fef08a}.eui-21 :host.eui-avatar--lime{--_bg-color: #a3e635;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--lime{--_bg-color: #ecfccb;--_color: #1a2e05;--_border-color: #d9f99d}.eui-21 :host.eui-avatar--green{--_bg-color: #4ade80;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--green{--_bg-color: #dcfce7;--_color: #052e16;--_border-color: #bbf7d0}.eui-21 :host.eui-avatar--emerald{--_bg-color: #34d399;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--emerald{--_bg-color: #d1fae5;--_color: #022c22;--_border-color: #a7f3d0}.eui-21 :host.eui-avatar--teal{--_bg-color: #2dd4bf;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--teal{--_bg-color: #ccfbf1;--_color: #042f2e;--_border-color: #99f6e4}.eui-21 :host.eui-avatar--cyan{--_bg-color: #22d3ee;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--cyan{--_bg-color: #cffafe;--_color: #083344;--_border-color: #a5f3fc}.eui-21 :host.eui-avatar--sky{--_bg-color: #38bdf8;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--sky{--_bg-color: #e0f2fe;--_color: #082f49;--_border-color: #bae6fd}.eui-21 :host.eui-avatar--blue{--_bg-color: #60a5fa;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--blue{--_bg-color: #dbeafe;--_color: #172554;--_border-color: #bfdbfe}.eui-21 :host.eui-avatar--indigo{--_bg-color: #818cf8;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--indigo{--_bg-color: #e0e7ff;--_color: #1e1b4b;--_border-color: #c7d2fe}.eui-21 :host.eui-avatar--violet{--_bg-color: #a78bfa;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--violet{--_bg-color: #ede9fe;--_color: #2e1065;--_border-color: #ddd6fe}.eui-21 :host.eui-avatar--purple{--_bg-color: #c084fc;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--purple{--_bg-color: #f3e8ff;--_color: #3b0764;--_border-color: #e9d5ff}.eui-21 :host.eui-avatar--fuchsia{--_bg-color: #e879f9;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--fuchsia{--_bg-color: #fae8ff;--_color: #4a044e;--_border-color: #f5d0fe}.eui-21 :host.eui-avatar--pink{--_bg-color: #f472b6;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--pink{--_bg-color: #fce7f3;--_color: #500724;--_border-color: #fbcfe8}.eui-21 :host.eui-avatar--rose{--_bg-color: #fb7185;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--rose{--_bg-color: #ffe4e6;--_color: #4c0519;--_border-color: #fecdd3}.eui-21 :host.eui-avatar--ecl-blue-navy{--_bg-color: #a0a0d1;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-blue-navy{--_bg-color: #f0f0f8;--_color: rgb(0, 0, 45.08);--_border-color: #d9d9ec}.eui-21 :host.eui-avatar--ecl-blue-electric{--_bg-color: #03bbe6;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-blue-electric{--_bg-color: #d9f5fb;--_color: rgb(.95, 69.35, 84.55);--_border-color: #b1eaf7}.eui-21 :host.eui-avatar--ecl-blue-ocean{--_bg-color: #69d2c6;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-blue-ocean{--_bg-color: #dcf5f2;--_color: rgb(13.3, 106.4, 95.95);--_border-color: #b7eae4}.eui-21 :host.eui-avatar--ecl-green{--_bg-color: #5ddaa9;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-green{--_bg-color: #daf6eb;--_color: rgb(2.85, 113.05, 70.3);--_border-color: #b2edd6}.eui-21 :host.eui-avatar--ecl-green-dark{--_bg-color: #599c9c;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-green-dark{--_bg-color: #d9e8e8;--_color: rgb(0, 57.95, 57.95);--_border-color: #b0d0d0}.eui-21 :host.eui-avatar--ecl-orange{--_bg-color: #ffb16a;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-orange{--_bg-color: #ffe9d6;--_color: rgb(101.65, 55.1, 12.35);--_border-color: #ffdbba}.eui-21 :host.eui-avatar--ecl-purple{--_bg-color: #b594e6;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-purple{--_bg-color: #ebe1f8;--_color: rgb(57, 38, 86.45);--_border-color: #ddcdf3}.eui-21 :host.eui-avatar--ecl-green-lemon{--_bg-color: #ddec8d;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-green-lemon{--_bg-color: #f7fbe5;--_color: rgb(103.7, 115.6, 40.8);--_border-color: #eff6c9}.eui-21 :host.eui-avatar--ecl-green-pine{--_bg-color: #94abb1;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-green-pine{--_bg-color: #dae2e4;--_color: rgb(7.6, 44.65, 55.1);--_border-color: #ced8db}.eui-21 :host.eui-avatar--ecl-red-crayola{--_bg-color: #e95f77;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-red-crayola{--_bg-color: #f6c1ca;--_color: rgb(90.25, 21.85, 34.2);--_border-color: #f2a3b1}.eui-21 :host.eui-avatar--ecl-yellow-gold{--_bg-color: #ffd72e;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-yellow-gold{--_bg-color: #fff3c2;--_color: rgb(109.25, 88.35, 0);--_border-color: #ffea91}.eui-21 :host.eui-avatar--ecl-orange-abricot{--_bg-color: #fea439;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-orange-abricot{--_bg-color: #fff1d4;--_color: rgb(119.7, 51.3, 15.2);--_border-color: #ffdfa9}.eui-21 :host.eui-avatar--ecl-purple-violet{--_bg-color: #a28fff;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-purple-violet{--_bg-color: #dbd4ff;--_color: rgb(55.1, 45.6, 101.65);--_border-color: #cabfff}.eui-21 :host.eui-avatar--ecl-red-tomato{--_bg-color: #ff866e;--_color: #000}.eui-21 :host.eui-avatar--outline.eui-avatar--ecl-red-tomato{--_bg-color: #ffd0c7;--_color: rgb(101.65, 41.8, 29.45);--_border-color: #ffbaac}.eui-21 :host.eui-avatar--no-background{--_bg-color: transparent;--_color: var(--eui-c-primary)}.eui-21 :host.eui-avatar--no-background.eui-avatar--secondary{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-avatar--no-background.eui-avatar--info{--_color: var(--eui-c-info)}.eui-21 :host.eui-avatar--no-background.eui-avatar--success{--_color: var(--eui-c-success)}.eui-21 :host.eui-avatar--no-background.eui-avatar--warning{--_color: var(--eui-c-warning)}.eui-21 :host.eui-avatar--no-background.eui-avatar--danger{--_color: var(--eui-c-danger)}.eui-21 :host.eui-avatar--size-xs{--_size: 1.5rem;--_font-size: var(--eui-f-s-xs);--_icon-size: var(--eui-is-xs)}.eui-21 :host.eui-avatar--size-s{--_size: 2.5rem;--_font-size: var(--eui-f-s);--_icon-size: var(--eui-is-s)}.eui-21 :host.eui-avatar--size-m{--_font-size: var(--eui-f-s-xl)}.eui-21 :host.eui-avatar--size-l{--_size: 4rem;--_font-size: var(--eui-f-s-2xl);--_icon-size: var(--eui-is-l)}.eui-21 :host.eui-avatar--size-xl{--_size: 5rem;--_font-size: var(--eui-f-s-2xl);--_icon-size: var(--eui-is-xl)}.eui-21 :host.eui-avatar--size-2xl{--_size: 6rem;--_font-size: var(--eui-f-s-3xl);--_icon-size: var(--eui-is-2xl)}.eui-21 :host.eui-avatar{display:inline-flex;position:relative;align-items:center;gap:var(--eui-s-xs)}.eui-21 :host.eui-avatar .eui-avatar-wrapper{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--_border-color);border-radius:var(--eui-br-max);background-color:var(--_bg-color);height:var(--_size);width:var(--_size);position:relative}.eui-21 :host.eui-avatar .eui-avatar-shadow{position:absolute;right:-.2rem;height:var(--_size);width:var(--_size);border:.65rem solid var(--eui-c-divider);border-radius:var(--eui-br-max)}.eui-21 :host.eui-avatar--shape-square .eui-avatar-wrapper{border-radius:var(--eui-br-s)}.eui-21 :host.eui-avatar--no-background .eui-avatar-wrapper{border-radius:var(--eui-br-none);border:none}.eui-21 :host.eui-avatar--reverse{flex-direction:row-reverse}.eui-21 .eui-chip :host.eui-avatar--size-xs{margin-left:calc(-1 * var(--eui-s-xs))}.eui-21 .eui-chip :host.eui-avatar--image .eui-avatar-wrapper{display:block}\n"] }]
        }], propDecorators: { e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], ariaLabel: [{
                type: HostBinding,
                args: ['attr.aria-label']
            }, {
                type: Input,
                args: ['aria-label']
            }], hasShadow: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isShapeSquare: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasNoBackground: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isReverse: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], colorPalette: [{
                type: Input
            }], avatarImage: [{
                type: ContentChild,
                args: [forwardRef(() => EuiAvatarImageComponent)]
            }] } });

/**
 * @description
 * Component for displaying secondary label text within avatar content.
 * Typically used to show additional information like email, role, or status.
 * Content is projected via ng-content and styled as secondary/subdued text.
 * Must be used within eui-avatar-content for proper styling and layout.
 *
 * @usageNotes
 * ```html
 * <eui-avatar>
 *   <eui-avatar-text>JD</eui-avatar-text>
 *   <eui-avatar-content>
 *     <eui-avatar-content-label>John Doe</eui-avatar-content-label>
 *     <eui-avatar-content-sublabel>john.doe@ec.europa.eu</eui-avatar-content-sublabel>
 *   </eui-avatar-content>
 * </eui-avatar>
 * ```
 *
 * ### Accessibility
 * - Text content is directly readable by screen readers
 * - Appears after label in reading order
 * - Provides additional context about the user or entity
 *
 * ### Notes
 * - Must be child of eui-avatar-content component
 * - Styled as secondary/muted text
 * - Typically displays email, role, department, or status
 * - Optional - can be omitted if only primary label is needed
 */
class EuiAvatarContentSublabelComponent {
    /**
     * Binds the CSS class 'eui-avatar-list' to the host element.
     * This class provides the styling necessary for arranging avatars in a list.
     * @returns {string} The CSS class name
     */
    cssClasses() {
        return 'eui-avatar-content-sublabel';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarContentSublabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiAvatarContentSublabelComponent, isStandalone: true, selector: "eui-avatar-content-sublabel", host: { properties: { "class": "cssClasses()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 .eui-avatar :host{font:var(--_content-sublabel-font)}.eui-21 .eui-avatar--size-s :host{font:var(--_content-sublabel-font-s)}.eui-21 .eui-avatar--size-l :host{font:var(--_content-sublabel-font-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarContentSublabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-content-sublabel', template: '<ng-content />', host: {
                        '[class]': 'cssClasses()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-avatar :host{font:var(--_content-sublabel-font)}.eui-21 .eui-avatar--size-s :host{font:var(--_content-sublabel-font-s)}.eui-21 .eui-avatar--size-l :host{font:var(--_content-sublabel-font-l)}\n"] }]
        }] });

/**
 * @description
 * Component for displaying the primary label text within avatar content.
 * Typically used to show the user's name or primary identifier.
 * Content is projected via ng-content and styled as the main text line.
 * Must be used within eui-avatar-content for proper styling and layout.
 *
 * @usageNotes
 * ```html
 * <eui-avatar>
 *   <eui-avatar-image src="user.jpg"></eui-avatar-image>
 *   <eui-avatar-content>
 *     <eui-avatar-content-label>John Doe</eui-avatar-content-label>
 *     <eui-avatar-content-sublabel>Developer</eui-avatar-content-sublabel>
 *   </eui-avatar-content>
 * </eui-avatar>
 * ```
 *
 * ### Accessibility
 * - Text content is directly readable by screen readers
 * - Appears first in reading order before sublabel
 * - Use concise, meaningful text for user identification
 *
 * ### Notes
 * - Must be child of eui-avatar-content component
 * - Styled as primary/prominent text
 * - Typically displays user name or entity title
 * - Can be used alone without sublabel if needed
 */
class EuiAvatarContentLabelComponent {
    /**
     * Binds the CSS class 'eui-avatar-list' to the host element.
     * This class provides the styling necessary for arranging avatars in a list.
     * @returns {string} The CSS class name
     */
    cssClasses() {
        return 'eui-avatar-content-label';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarContentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiAvatarContentLabelComponent, isStandalone: true, selector: "eui-avatar-content-label", host: { properties: { "class": "cssClasses()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 .eui-avatar :host{font:var(--_content-label-font)}.eui-21 .eui-avatar--size-s :host{font:var(--_content-label-font-s)}.eui-21 .eui-avatar--size-l :host{font:var(--_content-label-font-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAvatarContentLabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-content-label', template: '<ng-content />', host: {
                        '[class]': 'cssClasses()',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 .eui-avatar :host{font:var(--_content-label-font)}.eui-21 .eui-avatar--size-s :host{font:var(--_content-label-font-s)}.eui-21 .eui-avatar--size-l :host{font:var(--_content-label-font-l)}\n"] }]
        }] });

const EUI_AVATAR = [
    EuiAvatarComponent,
    EuiAvatarIconComponent,
    EuiAvatarTextComponent,
    EuiAvatarImageComponent,
    EuiAvatarBadgeComponent,
    EuiAvatarListComponent,
    EuiAvatarContentComponent,
    EuiAvatarContentLabelComponent,
    EuiAvatarContentSublabelComponent,
];

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

export { EUI_AVATAR, EuiAvatarBadgeComponent, EuiAvatarComponent, EuiAvatarContentComponent, EuiAvatarContentLabelComponent, EuiAvatarContentSublabelComponent, EuiAvatarIconComponent, EuiAvatarImageComponent, EuiAvatarListComponent, EuiAvatarTextComponent };
//# sourceMappingURL=eui-components-eui-avatar.mjs.map
