import * as i0 from '@angular/core';
import { inject, EventEmitter, computed, booleanAttribute, Output, Input, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, ChangeDetectorRef, forwardRef, ContentChildren, ViewChild, HostListener } from '@angular/core';
import { UserService } from '@eui/core';
import * as i4 from '@eui/components/eui-avatar';
import { EUI_AVATAR } from '@eui/components/eui-avatar';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i2 from '@eui/components/eui-dropdown';
import { EuiDropdownService, EUI_DROPDOWN } from '@eui/components/eui-dropdown';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { NgTemplateOutlet } from '@angular/common';
import * as i3 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i5 from '@eui/components/eui-badge';
import { EUI_BADGE } from '@eui/components/eui-badge';

/**
 * @description
 * User profile card component that displays detailed user information including avatar, name,
 * function, and organization. Designed for use within dropdown menus or profile panels.
 * Automatically fetches user data from UserService and supports impersonation display.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <!-- Simple profile card -->
 * <eui-user-profile-card
 *   [isShowAvatarInitials]="true"
 *   (showProfileInfo)="onShowProfile()"
 *   (closeProfileMenu)="onClose()" />
 *
 * <!-- With custom avatar -->
 * <eui-user-profile-card
 *   [avatarUrl]="user.avatarUrl"
 *   [reverseNameOrder]="true"
 *   showDetailsLabel="View Details" />
 * ```
 *
 * ```typescript
 * onShowProfile(): void {
 *   this.router.navigate(['/profile']);
 * }
 * ```
 *
 * ### Accessibility
 * - Avatar has semantic meaning with user initials or image
 * - Profile details link is keyboard accessible with tabindex
 * - User information structured with proper heading hierarchy
 * - Impersonation status clearly indicated for screen readers
 *
 * ### Notes
 * - Automatically displays user function and organization if available
 * - Impersonation mode shows both impersonated and actual user
 * - Avatar initials computed from user name (configurable order)
 * - Integrates seamlessly with eui-user-profile dropdown
 */
class EuiUserProfileCardComponent {
    constructor() {
        this.userState = inject(UserService).getSignal();
        /**
         * If true, the user is online
         * @deprecated This property is not used anymore
         */
        this.isOnline = true;
        this.impersonateLabel = 'acting as';
        this.showDetailsLabel = 'Show profile details';
        this.isShowAvatarInitials = true;
        /**
         * If true, the name will be displayed in reverse order (first name, first)
         */
        this.reverseNameOrder = false;
        this.showProfileInfo = new EventEmitter();
        this.closeProfileMenu = new EventEmitter();
    }
    get cssClasses() {
        return 'eui-user-profile-card';
    }
    ngOnInit() {
        this.avatarInitials = computed(() => {
            const firstNameInitial = this.userState().firstName?.substring(0, 1).toUpperCase();
            const lastNameInitial = this.userState().lastName?.substring(0, 1).toUpperCase();
            return this.reverseNameOrder ?
                `${firstNameInitial}${lastNameInitial}`
                : `${lastNameInitial}${firstNameInitial}`;
        }, ...(ngDevMode ? [{ debugName: "avatarInitials" }] : []));
        this.fullName = computed(() => {
            const user = this.userState();
            const impersonated = this.userState().impersonatingUser;
            const fullName = (user) => {
                return this.reverseNameOrder
                    ? `${user.firstName} ${user.lastName}`
                    : `${user.lastName} ${user.firstName}`;
            };
            return {
                user: fullName(user),
                impersonated: impersonated ? fullName(impersonated) : undefined,
            };
        }, ...(ngDevMode ? [{ debugName: "fullName" }] : []));
    }
    onShowInfoClick() {
        this.showProfileInfo.emit();
    }
    onClose() {
        this.closeProfileMenu.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiUserProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiUserProfileCardComponent, isStandalone: true, selector: "eui-user-profile-card", inputs: { impersonateLabel: "impersonateLabel", showDetailsLabel: "showDetailsLabel", avatarUrl: "avatarUrl", isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], reverseNameOrder: "reverseNameOrder" }, outputs: { showProfileInfo: "showProfileInfo", closeProfileMenu: "closeProfileMenu" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<div class=\"eui-user-profile-card__main-wrapper\">\n    <div class=\"eui-user-profile-card__avatar-wrapper\">\n        <eui-avatar euiSizeL>\n            @if (isShowAvatarInitials) {\n                <eui-avatar-text>\n                    {{ avatarInitials() }}\n                </eui-avatar-text>\n            } @else {\n                @if (!avatarUrl) {\n                    <eui-avatar-image></eui-avatar-image>\n                }\n                @if (avatarUrl) {\n                    <eui-avatar-image [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                }\n            }\n        </eui-avatar>\n    </div>\n    <div class=\"eui-user-profile-card__userInfos\">\n        <div class=\"eui-u-f-m-semi-bold\">{{ fullName().user }}</div>\n        @if (userState().function) {\n            <div class=\"eui-user-profile-card__userInfos-item eui-u-f-s\">\n                {{ userState().function }}\n            </div>\n        }\n        @if (userState().organisation && userState().organisation.code) {\n            <div class=\"eui-user-profile-card__userInfos-item eui-u-f-s\">\n                {{ userState().organisation.code }}\n            </div>\n        }\n        <a class=\"eui-u-text-link eui-u-f-s eui-u-mt-s\" tabindex=\"0\" (click)=\"onShowInfoClick()\">{{showDetailsLabel}}</a>\n    </div>\n</div>\n\n@if (userState()?.impersonatingUser) {\n    <div class=\"eui-user-profile-card__impersonateInfos\">\n        <div>{{ fullName()?.impersonated }}</div>\n        <div class=\"eui-u-mt-2xs\">{{ impersonateLabel }}</div>\n        <div class=\"eui-u-mt-2xs\">\n            <strong>{{ fullName().user }}</strong>\n        </div>\n    </div>\n}\n", dependencies: [{ kind: "component", type: i4.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i4.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i4.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiUserProfileCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-user-profile-card', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [
                        ...EUI_AVATAR,
                    ], template: "<div class=\"eui-user-profile-card__main-wrapper\">\n    <div class=\"eui-user-profile-card__avatar-wrapper\">\n        <eui-avatar euiSizeL>\n            @if (isShowAvatarInitials) {\n                <eui-avatar-text>\n                    {{ avatarInitials() }}\n                </eui-avatar-text>\n            } @else {\n                @if (!avatarUrl) {\n                    <eui-avatar-image></eui-avatar-image>\n                }\n                @if (avatarUrl) {\n                    <eui-avatar-image [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                }\n            }\n        </eui-avatar>\n    </div>\n    <div class=\"eui-user-profile-card__userInfos\">\n        <div class=\"eui-u-f-m-semi-bold\">{{ fullName().user }}</div>\n        @if (userState().function) {\n            <div class=\"eui-user-profile-card__userInfos-item eui-u-f-s\">\n                {{ userState().function }}\n            </div>\n        }\n        @if (userState().organisation && userState().organisation.code) {\n            <div class=\"eui-user-profile-card__userInfos-item eui-u-f-s\">\n                {{ userState().organisation.code }}\n            </div>\n        }\n        <a class=\"eui-u-text-link eui-u-f-s eui-u-mt-s\" tabindex=\"0\" (click)=\"onShowInfoClick()\">{{showDetailsLabel}}</a>\n    </div>\n</div>\n\n@if (userState()?.impersonatingUser) {\n    <div class=\"eui-user-profile-card__impersonateInfos\">\n        <div>{{ fullName()?.impersonated }}</div>\n        <div class=\"eui-u-mt-2xs\">{{ impersonateLabel }}</div>\n        <div class=\"eui-u-mt-2xs\">\n            <strong>{{ fullName().user }}</strong>\n        </div>\n    </div>\n}\n" }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], impersonateLabel: [{
                type: Input
            }], showDetailsLabel: [{
                type: Input
            }], avatarUrl: [{
                type: Input
            }], isShowAvatarInitials: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], reverseNameOrder: [{
                type: Input
            }], showProfileInfo: [{
                type: Output
            }], closeProfileMenu: [{
                type: Output
            }] } });

/**
 * @description
 * Individual menu item component for user profile menus. Implements FocusableOption
 * for keyboard navigation support. Used within eui-user-profile-menu to create
 * actionable menu entries.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-user-profile-menu>
 *   <eui-user-profile-menu-item (click)="viewProfile()">
 *     <eui-icon-svg icon="eui-user" size="s" />
 *     My Profile
 *   </eui-user-profile-menu-item>
 *
 *   <eui-user-profile-menu-item (click)="changePassword()">
 *     <eui-icon-svg icon="eui-lock" size="s" />
 *     Change Password
 *   </eui-user-profile-menu-item>
 *
 *   <eui-user-profile-menu-item (click)="logout()">
 *     <eui-icon-svg icon="eui-logout" size="s" />
 *     Logout
 *   </eui-user-profile-menu-item>
 * </eui-user-profile-menu>
 * ```
 *
 * ### Accessibility
 * - Implements ARIA menuitem role
 * - Keyboard focusable with proper tabindex management
 * - Supports focus() method for programmatic focus
 * - Works with parent menu's keyboard navigation
 *
 * ### Notes
 * - Must be used within eui-user-profile-menu
 * - Supports any content (text, icons, badges)
 * - Click events handled through standard Angular event binding
 * - Focus managed by parent menu's FocusKeyManager
 */
class EuiUserProfileMenuItemComponent {
    constructor() {
        this.class = 'eui-user-profile-menu-item';
        this.tabindex = '-1';
        this.role = 'menuitem';
        this.element = inject(ElementRef);
    }
    focus() {
        this.element.nativeElement.focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiUserProfileMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiUserProfileMenuItemComponent, isStandalone: true, selector: "eui-user-profile-menu-item", host: { properties: { "class": "this.class", "attr.tabindex": "this.tabindex", "attr.role": "this.role" } }, ngImport: i0, template: '<ng-content/>', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiUserProfileMenuItemComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-user-profile-menu-item',
                    template: '<ng-content/>',
                    encapsulation: ViewEncapsulation.None,
                }]
        }], propDecorators: { class: [{
                type: HostBinding,
                args: ['class']
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }] } });

/**
 * @description
 * User profile component that displays user information with avatar, name, and optional dropdown menu.
 * Integrates with UserService to display current user state and supports impersonation indicators.
 * Provides customizable layouts for header, toolbar, or standalone usage.
 * Supports avatar display with initials, status indicators, and optional menu with navigation items.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <!-- Simple user profile -->
 * <eui-user-profile
 *   [hasMenu]="true"
 *   [isShowAvatarInitials]="true">
 *   <eui-user-profile-menu>
 *     <eui-user-profile-menu-item (click)="viewProfile()">
 *       Profile
 *     </eui-user-profile-menu-item>
 *     <eui-user-profile-menu-item (click)="logout()">
 *       Logout
 *     </eui-user-profile-menu-item>
 *   </eui-user-profile-menu>
 * </eui-user-profile>
 *
 * <!-- Header user profile -->
 * <eui-user-profile
 *   [isHeaderUserProfile]="true"
 *   [avatarUrl]="user.avatarUrl"
 *   [subInfos]="user.email" />
 * ```
 *
 * ### Accessibility
 * - Avatar has appropriate alt text with user name
 * - Dropdown menu is keyboard accessible
 * - Status indicators have aria-label describing state
 * - Focus management for menu navigation
 *
 * ### Notes
 * - Automatically fetches user data from UserService
 * - Supports impersonation mode with visual indicator
 * - Avatar initials generated from user name when no image provided
 * - Status variants: success, secondary, danger
 * - Reverse layout option for right-to-left designs
 */ class EuiUserProfileComponent {
    constructor() {
        this.welcomeLabel = 'Welcome';
        this.impersonateLabel = 'acting as';
        this.statusVariant = 'success';
        this.hasMenu = false;
        this.hasWelcomeLabel = true;
        this.isShowAvatarInitials = false;
        this.hasTabNavigation = false;
        this.isReverse = false;
        this.hasToggle = false;
        this.isHeaderUserProfile = false;
        this.isToolbarUserProfile = false;
        this.isShowUserInfos = true;
        this.isMobileOnly = true;
        this.euiStatusSecondary = false;
        this.euiStatusSuccess = false;
        this.euiStatusDanger = false;
        this.dropContentWidth = '300px';
        /**
         * If true, the name will be displayed in reverse order (first name, first)
         */
        this.reverseNameOrder = false;
        this.isDropdownOpen = false;
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.$isDropdownOpen = new BehaviorSubject(false);
        this.unsubscribeSubject$ = new Subject();
        this.elRef = inject(ElementRef);
        this.cd = inject(ChangeDetectorRef);
        this.userService = inject(UserService);
    }
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-user-profile'),
            this.isReverse ? 'eui-user-profile--reverse' : '',
            this.isShowAvatarInitials ? 'eui-user-profile--initials' : '',
            this.subInfos ? 'eui-user-profile--has-subinfos' : '',
        ].join(' ').trim();
    }
    ngOnInit() {
        this.userState = this.userService.getSignal();
        this.avatarInitials = computed(() => {
            const firstNameInitial = this.userState().firstName?.substring(0, 1).toUpperCase();
            const lastNameInitial = this.userState().lastName?.substring(0, 1).toUpperCase();
            return this.reverseNameOrder ?
                `${firstNameInitial}${lastNameInitial}`
                : `${lastNameInitial}${firstNameInitial}`;
        }, ...(ngDevMode ? [{ debugName: "avatarInitials" }] : []));
    }
    ngAfterViewInit() {
        this.cd.markForCheck();
        let hasToolbarItemParent = false, toolbar;
        if (this.isToolbarUserProfile) {
            this.baseStatesDirective.euiSizeS = true;
            this.hasMenu = this.hasMenuContent.length !== 0;
        }
        else {
            try {
                hasToolbarItemParent = this.elRef.nativeElement.closest('eui-toolbar-item');
                toolbar = this.elRef.nativeElement.closest('eui-toolbar');
            }
            catch (e) {
                // do nothing
            }
            setTimeout(() => {
                if (hasToolbarItemParent) {
                    this.baseStatesDirective.euiSizeS = true;
                    if (toolbar && toolbar.classList.contains('eui--secondary') || this.baseStatesDirective.euiSecondary) {
                        this.baseStatesDirective.euiSecondary = true;
                    }
                    else {
                        this.baseStatesDirective.euiPrimary = true;
                    }
                }
                if (hasToolbarItemParent || !this.isHeaderUserProfile) {
                    this.hasMenu = this.hasMenuContent.length !== 0;
                }
                if (this.isMobileOnly) {
                    this.baseStatesDirective.euiSizeS = true;
                }
                this.cd.markForCheck();
            });
        }
    }
    ngOnDestroy() {
        this.unsubscribeSubject$.next();
        this.unsubscribeSubject$.complete();
    }
    closeDropdown() {
        this.dropdown.closeDropdown();
        this.isDropdownOpen = false;
    }
    onDropdownExpand(isOpen) {
        this.isDropdownOpen = isOpen;
    }
    onOpenChange(open) {
        this.isDropdownOpen = open;
        this.$isDropdownOpen.next(open);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiUserProfileComponent, isStandalone: true, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos", statusVariant: "statusVariant", hasMenu: ["hasMenu", "hasMenu", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], isReverse: ["isReverse", "isReverse", booleanAttribute], hasToggle: ["hasToggle", "hasToggle", booleanAttribute], isHeaderUserProfile: ["isHeaderUserProfile", "isHeaderUserProfile", booleanAttribute], isToolbarUserProfile: ["isToolbarUserProfile", "isToolbarUserProfile", booleanAttribute], isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], isMobileOnly: ["isMobileOnly", "isMobileOnly", booleanAttribute], euiStatusSecondary: ["euiStatusSecondary", "euiStatusSecondary", booleanAttribute], euiStatusSuccess: ["euiStatusSuccess", "euiStatusSuccess", booleanAttribute], euiStatusDanger: ["euiStatusDanger", "euiStatusDanger", booleanAttribute], dropContentWidth: "dropContentWidth", reverseNameOrder: "reverseNameOrder" }, host: { properties: { "class": "this.cssClasses" } }, providers: [EuiDropdownService], queries: [{ propertyName: "hasMenuContent", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent), descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiSecondary", "euiSecondary", "euiPrimary", "euiPrimary"] }], ngImport: i0, template: "@if (hasMenu) {\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\"\n                  width=\"{{dropContentWidth}}\"\n                  #dropdown\n                  (isDropdownOpen)=\"onOpenChange($event)\"\n                  (expand)=\"onDropdownExpand($event)\">\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"/>\n        <eui-dropdown-content>\n            <ng-content/>\n        </eui-dropdown-content>\n    </eui-dropdown>\n} @else {\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"/>\n}\n\n<ng-template #userProfileContent>\n    <button class=\"eui-user-profile-content\" [tabindex]=\"hasMenu ? '0' : '-1'\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n\n        @if (isShowUserInfos) {\n            <div class=\"eui-user-profile__infos\">\n                @if (userState()?.impersonatingUser) {\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        @if (hasWelcomeLabel) {\n                            <span>{{ welcomeLabel }}&nbsp;</span>\n                        }\n                        @if(reverseNameOrder) {\n                            {{ userState()?.impersonatingUser?.firstName }} <strong>{{ userState()?.impersonatingUser?.lastName}}</strong>\n                        } @else {\n                            <strong>{{ userState()?.impersonatingUser?.lastName }}</strong> {{ userState()?.impersonatingUser?.firstName }}\n                        }\n                        <span>,&nbsp;{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        @if(reverseNameOrder) {\n                            {{ userState()?.firstName }} <strong>{{ userState()?.lastName }}</strong>\n                        } @else {\n                            <strong>{{ userState()?.lastName }}</strong> {{ userState()?.firstName }}\n                        }\n                    </div>\n                    @if (subInfos) {\n                        <div class=\"eui-user-profile__infos-subinfos\">{{ subInfos }}</div>\n                    }\n                } @else {\n                    @if (hasWelcomeLabel) {\n                        <div class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    }\n                    <div class=\"eui-user-profile__infos-name\">\n                        @if(reverseNameOrder) {\n                            {{ userState()?.firstName }} <strong>{{ userState()?.lastName }}</strong>\n                        } @else {\n                            <strong>{{ userState()?.lastName }}</strong> {{ userState()?.firstName }}\n                        }\n                    </div>\n                    @if (subInfos) {\n                        <div class=\"eui-user-profile__infos-subinfos\">{{ subInfos }}</div>\n                    }\n                }\n            </div>\n        }\n\n        <eui-avatar isFlat [euiSizeS]=\"baseStatesDirective.euiSizeS\" [hasShadow]=\"!!userState()?.impersonatingUser\">\n\n            @if (isShowAvatarInitials) {\n                <eui-avatar-text>{{ avatarInitials() }}</eui-avatar-text>\n            } @else {\n                <eui-avatar-image [imageUrl]=\"avatarUrl\"/>\n            }\n\n            @if (euiStatusSecondary || euiStatusSuccess || euiStatusDanger) {\n                <eui-avatar-badge position=\"bottom\">\n                    @if (euiStatusSuccess) {\n                        <eui-badge euiSuccess euiSizeS euiIconBadge>\n                            <eui-icon-svg icon=\"eui-checkmark\" size=\"xs\"/>\n                        </eui-badge>\n                    } @else if (euiStatusDanger) {\n                        <eui-badge euiDanger euiSizeS euiIconBadge>\n                            <eui-icon-svg icon=\"eui-remove\" size=\"xs\"/>\n                        </eui-badge>\n                    } @else if (euiStatusSecondary) {\n                        <eui-badge euiSecondary euiSizeS euiIconBadge>\n                            <eui-icon-svg icon=\"eui-close\" size=\"xs\"/>\n                        </eui-badge>\n                    }\n                </eui-avatar-badge>\n            }\n        </eui-avatar>\n\n        @if (hasMenu || hasToggle) {\n            @if (isDropdownOpen) {\n                <eui-icon-svg icon=\"eui-chevron-up\" size=\"xs\" class=\"eui-user-profile__drop-indicator\"/>\n            } @else {\n                <eui-icon-svg icon=\"eui-chevron-down\" size=\"xs\" class=\"eui-user-profile__drop-indicator\"/>\n            }\n        }\n    </button>\n</ng-template>\n", styles: [".eui-21 .eui-user-profile{display:flex;position:relative}.eui-21 .eui-user-profile-content{align-items:center;background:none;border:var(--eui-bw-none);cursor:pointer;display:flex;padding:var(--eui-s-2xs) 0;gap:var(--eui-s-xs)}.eui-21 .eui-user-profile-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 .eui-user-profile-content--no-menu{cursor:default}.eui-21 .eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column}.eui-21 .eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-21 .eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-xs)}.eui-21 .eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m)}.eui-21 .eui-user-profile__infos-subinfos{color:var(--eui-c-text-light);text-align:right;font:var(--eui-f-xs)}.eui-21 .eui-user-profile__drop-indicator{margin-left:calc(-1 * var(--eui-s-xs))}.eui-21 .eui-user-profile--has-subinfos .eui-user-profile__infos-name{font-size:var(--eui-f-s-m);line-height:1rem}.eui-21 .eui--secondary .eui-user-profile__infos-name,.eui-21 .eui--secondary .eui-user-profile__infos-welcome{color:var(--eui-c-text)!important}@media screen and (max-width:767px){.eui-21 .eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-21 .eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width:768px){.eui-21 .eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.eui-21 .is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width:768px)and (max-width:995px){.eui-21 .eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-21 .eui-user-profile--primary .eui-user-profile__infos-name,.eui-21 .eui-user-profile--primary .eui-user-profile__infos-welcome,.eui-21 .eui-user-profile--primary .eui-user-profile__infos-subinfos{color:var(--eui-c-white)}.eui-21 .eui-user-profile--primary .eui-user-profile__drop-indicator svg{fill:var(--eui-c-white);color:var(--eui-c-white)}.eui-21 .eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-21 .eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-21 .eui-user-profile--initials .eui-avatar-wrapper{background-color:var(--eui-c-primary-surface-light)!important}.eui-21 .eui-user-profile--initials .eui-avatar-text{color:var(--eui-c-primary-on-surface-light)!important}.eui-21 .eui-user-profile-menu{height:auto;position:relative}.eui-21 .eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-divider);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s);gap:var(--eui-s-xs);border-left:var(--eui-bw-m) solid transparent}.eui-21 .eui-user-profile-menu-item:focus{border-left:var(--eui-bw-m) solid var(--eui-c-primary);background-color:var(--eui-c-active-bg-lighter)}.eui-21 .eui-user-profile-menu-item:last-child{border-bottom:0}.eui-21 .eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover)}.eui-21 .eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-21 .eui-user-profile-menu-item.link{cursor:pointer}.eui-21 .eui-user-profile-menu-item-right-content{margin-left:auto}.eui-21 .eui-user-profile-card{width:100%}.eui-21 .eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-21 .eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-21 .eui-user-profile-card__avatar-wrapper{display:flex}.eui-21 .eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-21 .eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-secondary-surface-light);padding:var(--eui-s-s)}.eui-21.eui-t-dark .eui-user-profile__infos-name,.eui-21.eui-t-dark .eui-user-profile__infos-welcome{color:var(--eui-c-black)!important}.eui-21.eui-t-dark .eui-user-profile__drop-indicator svg{fill:var(--eui-c-black)!important;color:var(--eui-c-black)!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i2.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i4.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i4.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i4.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["isPositionBottom"] }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiUserProfileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-user-profile', encapsulation: ViewEncapsulation.None, imports: [
                        NgTemplateOutlet,
                        ...EUI_DROPDOWN,
                        ...EUI_ICON,
                        ...EUI_AVATAR,
                        ...EUI_BADGE,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSizeS',
                                'euiSecondary',
                                'euiPrimary',
                            ],
                        },
                    ], providers: [EuiDropdownService], template: "@if (hasMenu) {\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\"\n                  width=\"{{dropContentWidth}}\"\n                  #dropdown\n                  (isDropdownOpen)=\"onOpenChange($event)\"\n                  (expand)=\"onDropdownExpand($event)\">\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"/>\n        <eui-dropdown-content>\n            <ng-content/>\n        </eui-dropdown-content>\n    </eui-dropdown>\n} @else {\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"/>\n}\n\n<ng-template #userProfileContent>\n    <button class=\"eui-user-profile-content\" [tabindex]=\"hasMenu ? '0' : '-1'\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n\n        @if (isShowUserInfos) {\n            <div class=\"eui-user-profile__infos\">\n                @if (userState()?.impersonatingUser) {\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        @if (hasWelcomeLabel) {\n                            <span>{{ welcomeLabel }}&nbsp;</span>\n                        }\n                        @if(reverseNameOrder) {\n                            {{ userState()?.impersonatingUser?.firstName }} <strong>{{ userState()?.impersonatingUser?.lastName}}</strong>\n                        } @else {\n                            <strong>{{ userState()?.impersonatingUser?.lastName }}</strong> {{ userState()?.impersonatingUser?.firstName }}\n                        }\n                        <span>,&nbsp;{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        @if(reverseNameOrder) {\n                            {{ userState()?.firstName }} <strong>{{ userState()?.lastName }}</strong>\n                        } @else {\n                            <strong>{{ userState()?.lastName }}</strong> {{ userState()?.firstName }}\n                        }\n                    </div>\n                    @if (subInfos) {\n                        <div class=\"eui-user-profile__infos-subinfos\">{{ subInfos }}</div>\n                    }\n                } @else {\n                    @if (hasWelcomeLabel) {\n                        <div class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    }\n                    <div class=\"eui-user-profile__infos-name\">\n                        @if(reverseNameOrder) {\n                            {{ userState()?.firstName }} <strong>{{ userState()?.lastName }}</strong>\n                        } @else {\n                            <strong>{{ userState()?.lastName }}</strong> {{ userState()?.firstName }}\n                        }\n                    </div>\n                    @if (subInfos) {\n                        <div class=\"eui-user-profile__infos-subinfos\">{{ subInfos }}</div>\n                    }\n                }\n            </div>\n        }\n\n        <eui-avatar isFlat [euiSizeS]=\"baseStatesDirective.euiSizeS\" [hasShadow]=\"!!userState()?.impersonatingUser\">\n\n            @if (isShowAvatarInitials) {\n                <eui-avatar-text>{{ avatarInitials() }}</eui-avatar-text>\n            } @else {\n                <eui-avatar-image [imageUrl]=\"avatarUrl\"/>\n            }\n\n            @if (euiStatusSecondary || euiStatusSuccess || euiStatusDanger) {\n                <eui-avatar-badge position=\"bottom\">\n                    @if (euiStatusSuccess) {\n                        <eui-badge euiSuccess euiSizeS euiIconBadge>\n                            <eui-icon-svg icon=\"eui-checkmark\" size=\"xs\"/>\n                        </eui-badge>\n                    } @else if (euiStatusDanger) {\n                        <eui-badge euiDanger euiSizeS euiIconBadge>\n                            <eui-icon-svg icon=\"eui-remove\" size=\"xs\"/>\n                        </eui-badge>\n                    } @else if (euiStatusSecondary) {\n                        <eui-badge euiSecondary euiSizeS euiIconBadge>\n                            <eui-icon-svg icon=\"eui-close\" size=\"xs\"/>\n                        </eui-badge>\n                    }\n                </eui-avatar-badge>\n            }\n        </eui-avatar>\n\n        @if (hasMenu || hasToggle) {\n            @if (isDropdownOpen) {\n                <eui-icon-svg icon=\"eui-chevron-up\" size=\"xs\" class=\"eui-user-profile__drop-indicator\"/>\n            } @else {\n                <eui-icon-svg icon=\"eui-chevron-down\" size=\"xs\" class=\"eui-user-profile__drop-indicator\"/>\n            }\n        }\n    </button>\n</ng-template>\n", styles: [".eui-21 .eui-user-profile{display:flex;position:relative}.eui-21 .eui-user-profile-content{align-items:center;background:none;border:var(--eui-bw-none);cursor:pointer;display:flex;padding:var(--eui-s-2xs) 0;gap:var(--eui-s-xs)}.eui-21 .eui-user-profile-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 .eui-user-profile-content--no-menu{cursor:default}.eui-21 .eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column}.eui-21 .eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-21 .eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-xs)}.eui-21 .eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m)}.eui-21 .eui-user-profile__infos-subinfos{color:var(--eui-c-text-light);text-align:right;font:var(--eui-f-xs)}.eui-21 .eui-user-profile__drop-indicator{margin-left:calc(-1 * var(--eui-s-xs))}.eui-21 .eui-user-profile--has-subinfos .eui-user-profile__infos-name{font-size:var(--eui-f-s-m);line-height:1rem}.eui-21 .eui--secondary .eui-user-profile__infos-name,.eui-21 .eui--secondary .eui-user-profile__infos-welcome{color:var(--eui-c-text)!important}@media screen and (max-width:767px){.eui-21 .eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-21 .eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width:768px){.eui-21 .eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.eui-21 .is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width:768px)and (max-width:995px){.eui-21 .eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-21 .eui-user-profile--primary .eui-user-profile__infos-name,.eui-21 .eui-user-profile--primary .eui-user-profile__infos-welcome,.eui-21 .eui-user-profile--primary .eui-user-profile__infos-subinfos{color:var(--eui-c-white)}.eui-21 .eui-user-profile--primary .eui-user-profile__drop-indicator svg{fill:var(--eui-c-white);color:var(--eui-c-white)}.eui-21 .eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-21 .eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-21 .eui-user-profile--initials .eui-avatar-wrapper{background-color:var(--eui-c-primary-surface-light)!important}.eui-21 .eui-user-profile--initials .eui-avatar-text{color:var(--eui-c-primary-on-surface-light)!important}.eui-21 .eui-user-profile-menu{height:auto;position:relative}.eui-21 .eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-divider);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s);gap:var(--eui-s-xs);border-left:var(--eui-bw-m) solid transparent}.eui-21 .eui-user-profile-menu-item:focus{border-left:var(--eui-bw-m) solid var(--eui-c-primary);background-color:var(--eui-c-active-bg-lighter)}.eui-21 .eui-user-profile-menu-item:last-child{border-bottom:0}.eui-21 .eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover)}.eui-21 .eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-21 .eui-user-profile-menu-item.link{cursor:pointer}.eui-21 .eui-user-profile-menu-item-right-content{margin-left:auto}.eui-21 .eui-user-profile-card{width:100%}.eui-21 .eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-21 .eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-21 .eui-user-profile-card__avatar-wrapper{display:flex}.eui-21 .eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-21 .eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-secondary-surface-light);padding:var(--eui-s-s)}.eui-21.eui-t-dark .eui-user-profile__infos-name,.eui-21.eui-t-dark .eui-user-profile__infos-welcome{color:var(--eui-c-black)!important}.eui-21.eui-t-dark .eui-user-profile__drop-indicator svg{fill:var(--eui-c-black)!important;color:var(--eui-c-black)!important}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], welcomeLabel: [{
                type: Input
            }], impersonateLabel: [{
                type: Input
            }], avatarUrl: [{
                type: Input
            }], subInfos: [{
                type: Input
            }], statusVariant: [{
                type: Input
            }], hasMenu: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasWelcomeLabel: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isShowAvatarInitials: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasTabNavigation: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isReverse: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasToggle: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isHeaderUserProfile: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isToolbarUserProfile: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isShowUserInfos: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isMobileOnly: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiStatusSecondary: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiStatusSuccess: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiStatusDanger: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], dropContentWidth: [{
                type: Input
            }], reverseNameOrder: [{
                type: Input
            }], dropdown: [{
                type: ViewChild,
                args: ['dropdown']
            }], hasMenuContent: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiUserProfileMenuComponent), { descendants: true }]
            }] } });

/**
 * @description
 * Container component for user profile menu items. Provides keyboard navigation
 * and focus management for menu items within a user profile dropdown.
 * Uses CDK FocusKeyManager for accessible keyboard interaction.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-user-profile [hasMenu]="true">
 *   <eui-user-profile-menu>
 *     <eui-user-profile-menu-item (click)="viewProfile()">
 *       My Profile
 *     </eui-user-profile-menu-item>
 *     <eui-user-profile-menu-item (click)="settings()">
 *       Settings
 *     </eui-user-profile-menu-item>
 *     <eui-user-profile-menu-item (click)="logout()">
 *       Logout
 *     </eui-user-profile-menu-item>
 *   </eui-user-profile-menu>
 * </eui-user-profile>
 * ```
 *
 * ### Accessibility
 * - Implements ARIA menu role for proper semantics
 * - Keyboard navigation with arrow keys (up/down)
 * - Focus wraps from last to first item
 * - Automatically focuses first item when menu opens
 * - Integrates with CDK FocusKeyManager for standard behavior
 *
 * ### Notes
 * - Must be used within eui-user-profile component
 * - Automatically manages focus state of child menu items
 * - Keyboard navigation activates on dropdown open
 * - Use eui-user-profile-menu-item for menu entries
 */
class EuiUserProfileMenuComponent {
    constructor() {
        this.class = 'eui-user-profile-menu';
        this.role = 'menu';
        this.parent = inject(forwardRef(() => EuiUserProfileComponent), { optional: true });
        this.destroy$ = new Subject();
    }
    onKeydown(event) {
        if (this.focusKeyManager) {
            this.focusKeyManager.onKeydown(event);
        }
    }
    ngAfterViewInit() {
        this.subscribeToParent();
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    subscribeToParent() {
        this.parent?.$isDropdownOpen.pipe(takeUntil(this.destroy$)).subscribe((isOpen) => {
            if (isOpen) {
                this.focusKeyManager = new FocusKeyManager(this.items).withWrap();
                this.focusKeyManager.setFirstItemActive();
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiUserProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: EuiUserProfileMenuComponent, isStandalone: true, selector: "eui-user-profile-menu", host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiUserProfileMenuItemComponent) }], ngImport: i0, template: '<ng-content/>', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiUserProfileMenuComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-user-profile-menu',
                    template: '<ng-content/>',
                    encapsulation: ViewEncapsulation.None,
                }]
        }], propDecorators: { class: [{
                type: HostBinding
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], items: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiUserProfileMenuItemComponent)]
            }], onKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

const EUI_USER_PROFILE = [
    EuiUserProfileComponent,
    EuiUserProfileMenuComponent,
    EuiUserProfileMenuItemComponent,
    EuiUserProfileCardComponent,
];

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

export { EUI_USER_PROFILE, EuiUserProfileCardComponent, EuiUserProfileComponent, EuiUserProfileMenuComponent, EuiUserProfileMenuItemComponent };
//# sourceMappingURL=eui-components-eui-user-profile.mjs.map
