import * as i0 from '@angular/core';
import { booleanAttribute, Input, HostBinding, Component, inject, forwardRef, ContentChild, ChangeDetectionStrategy, NgModule } 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.
 *
 */
class EuiAvatarBadgeComponent {
    constructor() {
        /**
         * Whether the avatar should have a shadow effect
         * @default false
         */
        this.isPositionBottom = false;
        /**
         * The position of the badge relative to the avatar.
         * Can be either 'top' or 'bottom'.
         * @default 'top'
         * @deprecated use isPositionBottom instead
         */
        this.position = 'top';
    }
    /**
     * 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.
     */
    get cssClasses() {
        return [
            'eui-avatar-badge',
            `eui-avatar-badge--${this.position}`,
            this.isPositionBottom || this.position === 'bottom' ? 'eui-avatar-badge--bottom' : 'eui-avatar-badge--top',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: EuiAvatarBadgeComponent, isStandalone: true, selector: "eui-avatar-badge", inputs: { isPositionBottom: ["isPositionBottom", "isPositionBottom", booleanAttribute], position: "position" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-avatar :host{position:absolute}.eui-19 .eui-avatar :host,.eui-19 .eui-avatar--size-m :host{left:75%;top:65%}.eui-19 .eui-avatar--size-s :host{left:70%;top:60%}.eui-19 .eui-avatar--size-xs :host{left:70%;top:55%}.eui-19 .eui-avatar--size-l :host{left:70%;top:70%}.eui-19 .eui-avatar--size-xl :host{left:70%;top:75%}.eui-19 .eui-avatar--size-2xl :host{left:70%;top:80%}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarBadgeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-badge', template: '<ng-content/>', styles: [".eui-19 .eui-avatar :host{position:absolute}.eui-19 .eui-avatar :host,.eui-19 .eui-avatar--size-m :host{left:75%;top:65%}.eui-19 .eui-avatar--size-s :host{left:70%;top:60%}.eui-19 .eui-avatar--size-xs :host{left:70%;top:55%}.eui-19 .eui-avatar--size-l :host{left:70%;top:70%}.eui-19 .eui-avatar--size-xl :host{left:70%;top:75%}.eui-19 .eui-avatar--size-2xl :host{left:70%;top:80%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], isPositionBottom: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], position: [{
                type: Input
            }] } });

/**
 * @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.
 */
class EuiAvatarIconComponent {
    constructor() {
        /** @internal */
        this.string = 'eui-avatar-icon';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAvatarIconComponent, isStandalone: true, selector: "eui-avatar-icon", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-avatar :host.eui-avatar-icon{display:inline-flex;color:var(--_color)}.eui-19 .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"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-icon', template: '<ng-content/>', styles: [".eui-19 .eui-avatar :host.eui-avatar-icon{display:inline-flex;color:var(--_color)}.eui-19 .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"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @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.
 */
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: "19.2.17", ngImport: i0, type: EuiAvatarImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiAvatarImageComponent, isStandalone: true, selector: "eui-avatar-image", inputs: { imageUrl: "imageUrl" }, host: { properties: { "class": "this.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=\"person-circle:outline\" fillColor=\"neutral\"/>\n    <!-- <ng-content /> -->\n}\n", styles: [".eui-19 .eui-avatar :host.eui-avatar-image .eui-avatar-image-wrapper{background-size:cover;height:100%;width:100%}.eui-19 .eui-avatar :host.eui-avatar-image .eui-avatar-image-wrapper img{border-radius:var(--eui-br-max);height:100%;width:100%}.eui-19 .eui-avatar :host.eui-avatar-image ::ng-deep .eui-icon-svg svg{height:var(--_size);width:var(--_size)}.eui-19 .eui-avatar :host.eui-avatar-image--default{display:flex;align-items:center;justify-content:center}.eui-19 .eui-avatar .eui-avatar--no-background :host img{border-radius:0;background-color:var(--eui-c-surface-container)}.eui-19 .eui-avatar .eui-avatar--shape-square :host img{border-radius:var(--eui-br-m)}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarImageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-image', imports: [
                        ...EUI_ICON,
                    ], 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=\"person-circle:outline\" fillColor=\"neutral\"/>\n    <!-- <ng-content /> -->\n}\n", styles: [".eui-19 .eui-avatar :host.eui-avatar-image .eui-avatar-image-wrapper{background-size:cover;height:100%;width:100%}.eui-19 .eui-avatar :host.eui-avatar-image .eui-avatar-image-wrapper img{border-radius:var(--eui-br-max);height:100%;width:100%}.eui-19 .eui-avatar :host.eui-avatar-image ::ng-deep .eui-icon-svg svg{height:var(--_size);width:var(--_size)}.eui-19 .eui-avatar :host.eui-avatar-image--default{display:flex;align-items:center;justify-content:center}.eui-19 .eui-avatar .eui-avatar--no-background :host img{border-radius:0;background-color:var(--eui-c-surface-container)}.eui-19 .eui-avatar .eui-avatar--shape-square :host img{border-radius:var(--eui-br-m)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], imageUrl: [{
                type: Input
            }] } });

/**
 * @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.
 */
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
     */
    get cssClasses() {
        return 'eui-avatar-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAvatarContentComponent, isStandalone: true, selector: "eui-avatar-content", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content select=\"eui-avatar-content-label\"/>\n<ng-content select=\"eui-avatar-content-sublabel\"/>", styles: [".eui-19 .eui-avatar :host{display:flex;flex-direction:column}.eui-19 .eui-avatar--reverse :host{align-items:end}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-content', template: "<ng-content select=\"eui-avatar-content-label\"/>\n<ng-content select=\"eui-avatar-content-sublabel\"/>", styles: [".eui-19 .eui-avatar :host{display:flex;flex-direction:column}.eui-19 .eui-avatar--reverse :host{align-items:end}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @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.
 */
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
     */
    get cssClasses() {
        return 'eui-avatar-list';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAvatarListComponent, isStandalone: true, selector: "eui-avatar-list", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 :host.eui-avatar-list{display:inline-flex}.eui-19 :host.eui-avatar-list ::ng-deep .eui-avatar:not(:first-child){margin-left:-1rem}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-list', template: '<ng-content/>', styles: [".eui-19 :host.eui-avatar-list{display:inline-flex}.eui-19 :host.eui-avatar-list ::ng-deep .eui-avatar:not(:first-child){margin-left:-1rem}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @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.
 *
 */
class EuiAvatarTextComponent {
    constructor() {
        /**
         * Binds the CSS class 'eui-avatar-text' to the host element.
         * This class provides the styling necessary for text content within an avatar.
         */
        this.string = 'eui-avatar-text';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAvatarTextComponent, isStandalone: true, selector: "eui-avatar-text", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-avatar :host.eui-avatar-text{color:var(--_color);font-weight:var(--_font-weight);font-size:var(--_font-size)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarTextComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-text', template: '<ng-content/>', styles: [".eui-19 .eui-avatar :host.eui-avatar-text{color:var(--_color);font-weight:var(--_font-weight);font-size:var(--_font-size)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @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.
 *
 */
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 a flat appearance
         * @default false
         */
        this.isFlat = 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
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-avatar'),
            this.isShapeSquare ? 'eui-avatar--shape-square' : '',
            this.isFlat ? 'eui-avatar--flat eui--basic' : '',
            this.hasNoBackground ? 'eui-avatar--no-background' : '',
            this.isReverse ? 'eui-avatar--reverse' : '',
            this.avatarImage ? 'eui-avatar--image' : '',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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], isFlat: ["isFlat", "isFlat", booleanAttribute], hasNoBackground: ["hasNoBackground", "hasNoBackground", booleanAttribute], isReverse: ["isReverse", "isReverse", booleanAttribute] }, host: { properties: { "class": "this.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", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeVariant", "euiSizeVariant"] }], 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-19.eui-t-ds2025 :host.eui-avatar{--_content-label-font: var(--eui-f-body-s-semi-bold);--_content-sublabel-font: var(--eui-f-body-s-regular);--_content-label-font-s: var(--eui-f-body-s-semi-bold);--_content-sublabel-font-s: var(--eui-f-microcopy-m-regular);--_content-label-font-l: var(--eui-f-body-m-semi-bold);--_content-sublabel-font-l: var(--eui-f-body-m-regular)}.eui-19 :host.eui-avatar{--_size: 3rem;--_icon-size: 1.5rem;--_font-size: var(--eui-f-size-xl);--_font-weight: var(--eui-f-weight-bold);--_bg-color: var(--eui-c-s-secondary-surface-light);--_color: var(--eui-c-s-secondary-on-surface-light);--_content-label-font: var(--eui-f-m-bold);--_content-sublabel-font: var(--eui-f-m);--_content-label-font-s: var(--eui-f-s-bold);--_content-sublabel-font-s: var(--eui-f-s);--_content-label-font-l: var(--eui-f-m-bold);--_content-sublabel-font-l: var(--eui-f-m)}.eui-19 :host.eui-avatar--primary{--_bg-color: var(--eui-c-s-primary-surface);--_color: var(--eui-c-s-primary-surface-contrast)}.eui-19 :host.eui-avatar--secondary{--_bg-color: var(--eui-c-s-secondary-surface-light);--_color: var(--eui-c-s-secondary-on-surface-light)}.eui-19 :host.eui-avatar--info{--_bg-color: var(--eui-c-s-info-surface);--_color: var(--eui-c-s-info-surface-contrast)}.eui-19 :host.eui-avatar--success{--_bg-color: var(--eui-c-s-success-surface);--_color: var(--eui-c-s-success-surface-contrast)}.eui-19 :host.eui-avatar--warning{--_bg-color: var(--eui-c-s-warning-surface);--_color: var(--eui-c-s-warning-surface-contrast)}.eui-19 :host.eui-avatar--danger{--_bg-color: var(--eui-c-s-danger-surface);--_color: var(--eui-c-s-danger-surface-contrast)}.eui-19 :host.eui-avatar--accent{--_bg-color: var(--eui-c-s-accent-surface);--_color: var(--eui-c-s-accent-surface-contrast)}.eui-19 :host.eui-avatar--flat{--_bg-color: var(--eui-c-s-secondary-surface-light);--_color: var(--eui-c-s-secondary-on-surface-light);--_border-color: var(--eui-c-s-secondary-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--primary{--_bg-color: var(--eui-c-s-primary-surface-light);--_color: var(--eui-c-s-primary-on-surface-light);--_border-color: var(--eui-c-s-primary-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--secondary{--_bg-color: var(--eui-c-s-secondary-surface-light);--_color: var(--eui-c-s-secondary-on-surface-light);--_border-color: var(--eui-c-s-secondary-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--info{--_bg-color: var(--eui-c-s-info-surface-light);--_color: var(--eui-c-s-info-on-surface-light);--_border-color: var(--eui-c-s-info-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--success{--_bg-color: var(--eui-c-s-success-surface-light);--_color: var(--eui-c-s-success-on-surface-light);--_border-color: var(--eui-c-s-success-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--warning{--_bg-color: var(--eui-c-s-warning-surface-light);--_color: var(--eui-c-s-warning-on-surface-light);--_border-color: var(--eui-c-s-warning-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--danger{--_bg-color: var(--eui-c-s-danger-surface-light);--_color: var(--eui-c-s-danger-on-surface-light);--_border-color: var(--eui-c-s-danger-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--accent{--_bg-color: var(--eui-c-s-accent-surface-light);--_color: var(--eui-c-s-accent-on-surface-light);--_border-color: var(--eui-c-s-accent-border-light)}.eui-19 :host.eui-avatar--no-background{--_bg-color: transparent;--_color: var(--eui-c-s-primary)}.eui-19 :host.eui-avatar--no-background.eui-avatar--secondary{--_color: var(--eui-c-s-secondary)}.eui-19 :host.eui-avatar--no-background.eui-avatar--info{--_color: var(--eui-c-s-info)}.eui-19 :host.eui-avatar--no-background.eui-avatar--success{--_color: var(--eui-c-s-success)}.eui-19 :host.eui-avatar--no-background.eui-avatar--warning{--_color: var(--eui-c-s-warning)}.eui-19 :host.eui-avatar--no-background.eui-avatar--danger{--_color: var(--eui-c-s-danger)}.eui-19 :host.eui-avatar--no-background.eui-avatar--accent{--_color: var(--eui-c-s-accent)}.eui-19 :host.eui-avatar--size-xs{--_size: 1.5rem;--_font-size: var(--eui-f-size-xs);--_icon-size: var(--eui-is-xs)}.eui-19 :host.eui-avatar--size-s{--_size: 2.5rem;--_font-size: var(--eui-f-s);--_icon-size: var(--eui-is-s)}.eui-19 :host.eui-avatar--size-m{--_font-size: var(--eui-f-size-xl)}.eui-19 :host.eui-avatar--size-l{--_size: 4rem;--_font-size: var(--eui-f-size-2xl);--_icon-size: var(--eui-is-l)}.eui-19 :host.eui-avatar--size-xl{--_size: 5rem;--_font-size: var(--eui-f-size-2xl);--_icon-size: var(--eui-is-xl)}.eui-19 :host.eui-avatar--size-2xl{--_size: 6rem;--_font-size: var(--eui-f-size-3xl);--_icon-size: var(--eui-is-2xl)}.eui-19 :host.eui-avatar{display:inline-flex;position:relative;align-items:center;gap:var(--eui-s-xs)}.eui-19 :host.eui-avatar .eui-avatar-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eui-br-max);background-color:var(--_bg-color);height:var(--_size);width:var(--_size);box-shadow:var(--eui-sh-1);position:relative}.eui-19 :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-19 :host.eui-avatar--shape-square .eui-avatar-wrapper{border-radius:var(--eui-br-m)}.eui-19 :host.eui-avatar--no-background .eui-avatar-wrapper{box-shadow:var(--eui-sh-none);border-radius:var(--eui-br-none)}.eui-19 :host.eui-avatar--flat .eui-avatar-wrapper{box-shadow:var(--eui-sh-none);border:1px solid var(--_border-color)}.eui-19 :host.eui-avatar--reverse{flex-direction:row-reverse}.eui-19 .eui-chip :host.eui-avatar--size-xs{margin-left:calc(-1 * var(--eui-s-xs))}.eui-19 .eui-chip :host.eui-avatar--image .eui-avatar-wrapper{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'div[euiAvatar], span[euiAvatar], eui-avatar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiAccent',
                                'euiVariant',
                                'euiSizeXS',
                                'euiSizeS',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiSize2XL',
                                'euiSizeVariant',
                            ],
                        },
                    ], 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-19.eui-t-ds2025 :host.eui-avatar{--_content-label-font: var(--eui-f-body-s-semi-bold);--_content-sublabel-font: var(--eui-f-body-s-regular);--_content-label-font-s: var(--eui-f-body-s-semi-bold);--_content-sublabel-font-s: var(--eui-f-microcopy-m-regular);--_content-label-font-l: var(--eui-f-body-m-semi-bold);--_content-sublabel-font-l: var(--eui-f-body-m-regular)}.eui-19 :host.eui-avatar{--_size: 3rem;--_icon-size: 1.5rem;--_font-size: var(--eui-f-size-xl);--_font-weight: var(--eui-f-weight-bold);--_bg-color: var(--eui-c-s-secondary-surface-light);--_color: var(--eui-c-s-secondary-on-surface-light);--_content-label-font: var(--eui-f-m-bold);--_content-sublabel-font: var(--eui-f-m);--_content-label-font-s: var(--eui-f-s-bold);--_content-sublabel-font-s: var(--eui-f-s);--_content-label-font-l: var(--eui-f-m-bold);--_content-sublabel-font-l: var(--eui-f-m)}.eui-19 :host.eui-avatar--primary{--_bg-color: var(--eui-c-s-primary-surface);--_color: var(--eui-c-s-primary-surface-contrast)}.eui-19 :host.eui-avatar--secondary{--_bg-color: var(--eui-c-s-secondary-surface-light);--_color: var(--eui-c-s-secondary-on-surface-light)}.eui-19 :host.eui-avatar--info{--_bg-color: var(--eui-c-s-info-surface);--_color: var(--eui-c-s-info-surface-contrast)}.eui-19 :host.eui-avatar--success{--_bg-color: var(--eui-c-s-success-surface);--_color: var(--eui-c-s-success-surface-contrast)}.eui-19 :host.eui-avatar--warning{--_bg-color: var(--eui-c-s-warning-surface);--_color: var(--eui-c-s-warning-surface-contrast)}.eui-19 :host.eui-avatar--danger{--_bg-color: var(--eui-c-s-danger-surface);--_color: var(--eui-c-s-danger-surface-contrast)}.eui-19 :host.eui-avatar--accent{--_bg-color: var(--eui-c-s-accent-surface);--_color: var(--eui-c-s-accent-surface-contrast)}.eui-19 :host.eui-avatar--flat{--_bg-color: var(--eui-c-s-secondary-surface-light);--_color: var(--eui-c-s-secondary-on-surface-light);--_border-color: var(--eui-c-s-secondary-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--primary{--_bg-color: var(--eui-c-s-primary-surface-light);--_color: var(--eui-c-s-primary-on-surface-light);--_border-color: var(--eui-c-s-primary-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--secondary{--_bg-color: var(--eui-c-s-secondary-surface-light);--_color: var(--eui-c-s-secondary-on-surface-light);--_border-color: var(--eui-c-s-secondary-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--info{--_bg-color: var(--eui-c-s-info-surface-light);--_color: var(--eui-c-s-info-on-surface-light);--_border-color: var(--eui-c-s-info-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--success{--_bg-color: var(--eui-c-s-success-surface-light);--_color: var(--eui-c-s-success-on-surface-light);--_border-color: var(--eui-c-s-success-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--warning{--_bg-color: var(--eui-c-s-warning-surface-light);--_color: var(--eui-c-s-warning-on-surface-light);--_border-color: var(--eui-c-s-warning-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--danger{--_bg-color: var(--eui-c-s-danger-surface-light);--_color: var(--eui-c-s-danger-on-surface-light);--_border-color: var(--eui-c-s-danger-border-lighter)}.eui-19 :host.eui-avatar--flat.eui-avatar--accent{--_bg-color: var(--eui-c-s-accent-surface-light);--_color: var(--eui-c-s-accent-on-surface-light);--_border-color: var(--eui-c-s-accent-border-light)}.eui-19 :host.eui-avatar--no-background{--_bg-color: transparent;--_color: var(--eui-c-s-primary)}.eui-19 :host.eui-avatar--no-background.eui-avatar--secondary{--_color: var(--eui-c-s-secondary)}.eui-19 :host.eui-avatar--no-background.eui-avatar--info{--_color: var(--eui-c-s-info)}.eui-19 :host.eui-avatar--no-background.eui-avatar--success{--_color: var(--eui-c-s-success)}.eui-19 :host.eui-avatar--no-background.eui-avatar--warning{--_color: var(--eui-c-s-warning)}.eui-19 :host.eui-avatar--no-background.eui-avatar--danger{--_color: var(--eui-c-s-danger)}.eui-19 :host.eui-avatar--no-background.eui-avatar--accent{--_color: var(--eui-c-s-accent)}.eui-19 :host.eui-avatar--size-xs{--_size: 1.5rem;--_font-size: var(--eui-f-size-xs);--_icon-size: var(--eui-is-xs)}.eui-19 :host.eui-avatar--size-s{--_size: 2.5rem;--_font-size: var(--eui-f-s);--_icon-size: var(--eui-is-s)}.eui-19 :host.eui-avatar--size-m{--_font-size: var(--eui-f-size-xl)}.eui-19 :host.eui-avatar--size-l{--_size: 4rem;--_font-size: var(--eui-f-size-2xl);--_icon-size: var(--eui-is-l)}.eui-19 :host.eui-avatar--size-xl{--_size: 5rem;--_font-size: var(--eui-f-size-2xl);--_icon-size: var(--eui-is-xl)}.eui-19 :host.eui-avatar--size-2xl{--_size: 6rem;--_font-size: var(--eui-f-size-3xl);--_icon-size: var(--eui-is-2xl)}.eui-19 :host.eui-avatar{display:inline-flex;position:relative;align-items:center;gap:var(--eui-s-xs)}.eui-19 :host.eui-avatar .eui-avatar-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eui-br-max);background-color:var(--_bg-color);height:var(--_size);width:var(--_size);box-shadow:var(--eui-sh-1);position:relative}.eui-19 :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-19 :host.eui-avatar--shape-square .eui-avatar-wrapper{border-radius:var(--eui-br-m)}.eui-19 :host.eui-avatar--no-background .eui-avatar-wrapper{box-shadow:var(--eui-sh-none);border-radius:var(--eui-br-none)}.eui-19 :host.eui-avatar--flat .eui-avatar-wrapper{box-shadow:var(--eui-sh-none);border:1px solid var(--_border-color)}.eui-19 :host.eui-avatar--reverse{flex-direction:row-reverse}.eui-19 .eui-chip :host.eui-avatar--size-xs{margin-left:calc(-1 * var(--eui-s-xs))}.eui-19 .eui-chip :host.eui-avatar--image .eui-avatar-wrapper{display:block}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], 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 }]
            }], isFlat: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasNoBackground: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isReverse: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], avatarImage: [{
                type: ContentChild,
                args: [forwardRef(() => EuiAvatarImageComponent)]
            }] } });

/**
 * @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.
 */
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
     */
    get cssClasses() {
        return 'eui-avatar-content-sublabel';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarContentSublabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAvatarContentSublabelComponent, isStandalone: true, selector: "eui-avatar-content-sublabel", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-19 .eui-avatar :host{font:var(--_content-sublabel-font)}.eui-19 .eui-avatar--size-s :host{font:var(--_content-sublabel-font-s)}.eui-19 .eui-avatar--size-l :host{font:var(--_content-sublabel-font-l)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarContentSublabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-content-sublabel', template: '<ng-content />', styles: [".eui-19 .eui-avatar :host{font:var(--_content-sublabel-font)}.eui-19 .eui-avatar--size-s :host{font:var(--_content-sublabel-font-s)}.eui-19 .eui-avatar--size-l :host{font:var(--_content-sublabel-font-l)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @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.
 */
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
     */
    get cssClasses() {
        return 'eui-avatar-content-label';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarContentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAvatarContentLabelComponent, isStandalone: true, selector: "eui-avatar-content-label", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-19 .eui-avatar :host{font:var(--_content-label-font)}.eui-19 .eui-avatar--size-s :host{font:var(--_content-label-font-s)}.eui-19 .eui-avatar--size-l :host{font:var(--_content-label-font-l)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarContentLabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-avatar-content-label', template: '<ng-content />', styles: [".eui-19 .eui-avatar :host{font:var(--_content-label-font)}.eui-19 .eui-avatar--size-s :host{font:var(--_content-label-font-s)}.eui-19 .eui-avatar--size-l :host{font:var(--_content-label-font-l)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Provides the complete avatar component system for the EUI design system.
 *
 * This module exports all avatar-related components and bundles them together to provide
 * a cohesive API for avatar functionality. The module includes components for displaying
 * avatars with various content types (images, text, or icons), badges, and avatar lists.
 *
 * @deprecated Use {@link EUI_AVATAR} instead.
 *
 */
class EuiAvatarModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarModule, imports: [EuiAvatarComponent,
            EuiAvatarIconComponent,
            EuiAvatarTextComponent,
            EuiAvatarImageComponent,
            EuiAvatarBadgeComponent,
            EuiAvatarListComponent,
            EuiAvatarContentComponent,
            EuiAvatarContentLabelComponent,
            EuiAvatarContentSublabelComponent], exports: [EuiAvatarComponent,
            EuiAvatarIconComponent,
            EuiAvatarTextComponent,
            EuiAvatarImageComponent,
            EuiAvatarBadgeComponent,
            EuiAvatarListComponent,
            EuiAvatarContentComponent,
            EuiAvatarContentLabelComponent,
            EuiAvatarContentSublabelComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarModule, imports: [EuiAvatarComponent,
            EuiAvatarImageComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAvatarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        EuiAvatarComponent,
                        EuiAvatarIconComponent,
                        EuiAvatarTextComponent,
                        EuiAvatarImageComponent,
                        EuiAvatarBadgeComponent,
                        EuiAvatarListComponent,
                        EuiAvatarContentComponent,
                        EuiAvatarContentLabelComponent,
                        EuiAvatarContentSublabelComponent,
                    ],
                    exports: [
                        EuiAvatarComponent,
                        EuiAvatarIconComponent,
                        EuiAvatarTextComponent,
                        EuiAvatarImageComponent,
                        EuiAvatarBadgeComponent,
                        EuiAvatarListComponent,
                        EuiAvatarContentComponent,
                        EuiAvatarContentLabelComponent,
                        EuiAvatarContentSublabelComponent,
                    ],
                }]
        }] });

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, EuiAvatarModule, EuiAvatarTextComponent };
//# sourceMappingURL=eui-components-eui-avatar.mjs.map
