@eui/components 17.3.15 → 17.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/EuiUserProfileCardComponent.html +18 -4
- package/docs/components/EuiUserProfileComponent.html +34 -3
- package/docs/dependencies.html +3 -3
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/layout/eui-user-profile/user-profile-card/user-profile-card.component.mjs +34 -27
- package/esm2022/layout/eui-user-profile/user-profile.component.mjs +31 -17
- package/fesm2022/eui-components-directives.mjs +2 -2
- package/fesm2022/eui-components-eui-alert.mjs +1 -1
- package/fesm2022/eui-components-eui-autocomplete.mjs +2 -2
- package/fesm2022/eui-components-eui-avatar.mjs +1 -1
- package/fesm2022/eui-components-eui-badge.mjs +1 -1
- package/fesm2022/eui-components-eui-block-content.mjs +1 -1
- package/fesm2022/eui-components-eui-block-document.mjs +1 -1
- package/fesm2022/eui-components-eui-button-group.mjs +1 -1
- package/fesm2022/eui-components-eui-button.mjs +1 -1
- package/fesm2022/eui-components-eui-buttons.mjs +1 -1
- package/fesm2022/eui-components-eui-card.mjs +1 -1
- package/fesm2022/eui-components-eui-chip-list.mjs +1 -1
- package/fesm2022/eui-components-eui-chip.mjs +1 -1
- package/fesm2022/eui-components-eui-dashboard-button.mjs +1 -1
- package/fesm2022/eui-components-eui-dashboard-card.mjs +1 -1
- package/fesm2022/eui-components-eui-date-range-selector.mjs +1 -1
- package/fesm2022/eui-components-eui-datepicker.mjs +1 -1
- package/fesm2022/eui-components-eui-dialog.mjs +1 -1
- package/fesm2022/eui-components-eui-dimmer.mjs +1 -1
- package/fesm2022/eui-components-eui-disable-content.mjs +1 -1
- package/fesm2022/eui-components-eui-discussion-thread.mjs +1 -1
- package/fesm2022/eui-components-eui-dropdown.mjs +2 -2
- package/fesm2022/eui-components-eui-feedback-message.mjs +1 -1
- package/fesm2022/eui-components-eui-fieldset.mjs +1 -1
- package/fesm2022/eui-components-eui-file-upload.mjs +1 -1
- package/fesm2022/eui-components-eui-growl.mjs +1 -1
- package/fesm2022/eui-components-eui-icon-toggle.mjs +1 -1
- package/fesm2022/eui-components-eui-icon.mjs +1 -1
- package/fesm2022/eui-components-eui-input-checkbox.mjs +1 -1
- package/fesm2022/eui-components-eui-input-group.mjs +1 -1
- package/fesm2022/eui-components-eui-input-number.mjs +1 -1
- package/fesm2022/eui-components-eui-input-radio.mjs +1 -1
- package/fesm2022/eui-components-eui-input-text.mjs +1 -1
- package/fesm2022/eui-components-eui-label.mjs +1 -1
- package/fesm2022/eui-components-eui-list.mjs +1 -1
- package/fesm2022/eui-components-eui-menu.mjs +1 -1
- package/fesm2022/eui-components-eui-message-box.mjs +1 -1
- package/fesm2022/eui-components-eui-overlay.mjs +1 -1
- package/fesm2022/eui-components-eui-page.mjs +1 -1
- package/fesm2022/eui-components-eui-paginator.mjs +1 -1
- package/fesm2022/eui-components-eui-popover.mjs +1 -1
- package/fesm2022/eui-components-eui-progress-bar.mjs +1 -1
- package/fesm2022/eui-components-eui-progress-circle.mjs +1 -1
- package/fesm2022/eui-components-eui-select.mjs +1 -1
- package/fesm2022/eui-components-eui-sidebar-menu.mjs +1 -1
- package/fesm2022/eui-components-eui-skeleton.mjs +1 -1
- package/fesm2022/eui-components-eui-slide-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-table.mjs +1 -1
- package/fesm2022/eui-components-eui-tabs.mjs +1 -1
- package/fesm2022/eui-components-eui-textarea.mjs +1 -1
- package/fesm2022/eui-components-eui-timebar.mjs +1 -1
- package/fesm2022/eui-components-eui-timeline.mjs +1 -1
- package/fesm2022/eui-components-eui-timepicker.mjs +1 -1
- package/fesm2022/eui-components-eui-tree-list.mjs +1 -1
- package/fesm2022/eui-components-eui-tree.mjs +1 -1
- package/fesm2022/eui-components-eui-wizard.mjs +1 -1
- package/fesm2022/eui-components-externals-charts.mjs +1 -1
- package/fesm2022/eui-components-externals-eui-editor.mjs +1 -1
- package/fesm2022/eui-components-externals-quill.mjs +1 -1
- package/fesm2022/eui-components-layout.mjs +61 -39
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/fesm2022/eui-components-shared-base.mjs +1 -1
- package/fesm2022/eui-components-shared.mjs +1 -1
- package/layout/eui-user-profile/user-profile-card/user-profile-card.component.d.ts +10 -7
- package/layout/eui-user-profile/user-profile-card/user-profile-card.component.d.ts.map +1 -1
- package/layout/eui-user-profile/user-profile.component.d.ts +13 -4
- package/layout/eui-user-profile/user-profile.component.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1$1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { booleanAttribute,
|
|
4
|
+
import { booleanAttribute, HostListener, Input, HostBinding, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, Inject, NgModule, forwardRef, ContentChild, ContentChildren, signal, computed, ViewChild, Host, inject, Directive, ElementRef, QueryList, ComponentRef, ViewContainerRef, Injectable } from '@angular/core';
|
|
5
5
|
import * as i1$3 from '@angular/router';
|
|
6
6
|
import { RouterModule } from '@angular/router';
|
|
7
7
|
import { Subscription, Subject, fromEvent, startWith, BehaviorSubject } from 'rxjs';
|
|
@@ -27,6 +27,7 @@ import { DIALOG_COMPONENT_CONFIG, EuiDialogConfig, EuiDialogModule } from '@eui/
|
|
|
27
27
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
28
28
|
import { EuiEuLanguages } from '@eui/base';
|
|
29
29
|
import { FocusKeyManager } from '@angular/cdk/a11y';
|
|
30
|
+
import { toSignal } from '@angular/core/rxjs-interop';
|
|
30
31
|
import * as i6 from '@eui/components/eui-avatar';
|
|
31
32
|
import { EuiAvatarModule } from '@eui/components/eui-avatar';
|
|
32
33
|
import * as i7 from '@eui/components/eui-badge';
|
|
@@ -886,22 +887,36 @@ class EuiUserProfileComponent {
|
|
|
886
887
|
* If true, the name will be displayed in reverse order (first name, first)
|
|
887
888
|
*/
|
|
888
889
|
this.reverseNameOrder = false;
|
|
890
|
+
this.orderSignal = signal(false);
|
|
889
891
|
this.unsubscribeSubject$ = new Subject();
|
|
890
892
|
this.toolbarItemParent = toolbarItemParent;
|
|
893
|
+
this.userState = toSignal(this.userService.getState());
|
|
894
|
+
}
|
|
895
|
+
ngOnChanges(changes) {
|
|
896
|
+
if (changes['reverseNameOrder']) {
|
|
897
|
+
this.orderSignal.set(this.reverseNameOrder);
|
|
898
|
+
}
|
|
891
899
|
}
|
|
892
900
|
ngOnInit() {
|
|
893
|
-
this.
|
|
894
|
-
.
|
|
895
|
-
.
|
|
896
|
-
.
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
901
|
+
this.avatarInitials = computed(() => {
|
|
902
|
+
const firstNameInitial = this.userState().firstName?.substring(0, 1).toUpperCase();
|
|
903
|
+
const lastNameInitial = this.userState().lastName?.substring(0, 1).toUpperCase();
|
|
904
|
+
return this.orderSignal() ?
|
|
905
|
+
`${firstNameInitial}${lastNameInitial}`
|
|
906
|
+
: `${lastNameInitial}${firstNameInitial}`;
|
|
907
|
+
});
|
|
908
|
+
this.fullName = computed(() => {
|
|
909
|
+
const user = this.userState();
|
|
910
|
+
const impersonated = this.userState().impersonatingUser;
|
|
911
|
+
const fullName = (user) => {
|
|
912
|
+
return this.orderSignal()
|
|
913
|
+
? `${user.firstName} ${user.lastName}`
|
|
914
|
+
: `${user.lastName} ${user.firstName}`;
|
|
915
|
+
};
|
|
916
|
+
return {
|
|
917
|
+
user: fullName(user),
|
|
918
|
+
impersonated: impersonated ? fullName(impersonated) : undefined,
|
|
919
|
+
};
|
|
905
920
|
});
|
|
906
921
|
}
|
|
907
922
|
ngAfterContentInit() {
|
|
@@ -927,7 +942,7 @@ class EuiUserProfileComponent {
|
|
|
927
942
|
].join(' ').trim();
|
|
928
943
|
}
|
|
929
944
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EuiUserProfileComponent, deps: [{ token: forwardRef(() => EuiToolbarItemComponent), host: true, optional: true }, { token: i1.UserService }, { token: i2$2.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
930
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.12", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos", hasMenu: ["hasMenu", "hasMenu", booleanAttribute], isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", 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], reverseNameOrder: "reverseNameOrder" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenuContent", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent), descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i2$2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiInverted", "euiInverted"] }], ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n <eui-dropdown-content>\n <ng-content></ng-content>\n </eui-dropdown-content>\n </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n <div *ngIf=\"isShowUserInfos\"\n class=\"eui-user-profile__infos\"\n [class.eui-user-profile__infos--no-subinfos]=\"subInfos && !hasWelcomeLabel\">\n <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n <div class=\"eui-user-profile__infos-welcome\">\n <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n </div>\n <div class=\"eui-user-profile__infos-name\">\n {{ userState?.fullName }}\n </div>\n <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ subInfos }}\n </div>\n </ng-container>\n\n <ng-template #notImpersonated>\n <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ subInfos }}\n </div>\n </ng-template>\n </div>\n\n <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n [hasShadow]=\"userState?.impersonatingUser\">\n <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n {{ avatarInitials }}\n </eui-avatar-text>\n <ng-template #noAvatarInitials>\n <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n </ng-template>\n <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n <eui-badge euiSecondaryLight euiSizeXS>\n <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\"></eui-icon-svg>\n </eui-badge>\n </eui-avatar-badge>\n </eui-avatar>\n </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:active:not([readonly]),.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:active:not([readonly]),.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-base-spacing-s);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);text-align:right;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-90);text-align:right}.eui-user-profile__infos--no-subinfos{display:flex}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-base-spacing-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-20);border-left:var(--eui-base-spacing-2xs) solid transparent;cursor:pointer;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);border-left:4px solid transparent}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-base-color-text);text-decoration:none}.eui-user-profile-menu-item .eui-icon{color:var(--eui-base-color-grey-75);font-size:var(--eui-base-icon-size-m);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs)}.eui-user-profile-menu-item:hover{background-color:var(--eui-base-color-grey-5);cursor:pointer}.eui-user-profile-menu-item:focus{border-left:4px solid var(--eui-base-color-accessible-focus);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-base-spacing-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-base-spacing-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "isClosedOnClickInside", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i6.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["position"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
945
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.12", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos", hasMenu: ["hasMenu", "hasMenu", booleanAttribute], isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", 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], reverseNameOrder: "reverseNameOrder" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenuContent", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent), descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i2$2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiInverted", "euiInverted"] }], ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n <eui-dropdown-content>\n <ng-content></ng-content>\n </eui-dropdown-content>\n </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n <div *ngIf=\"isShowUserInfos\"\n class=\"eui-user-profile__infos\"\n [class.eui-user-profile__infos--no-subinfos]=\"subInfos && !hasWelcomeLabel\">\n <ng-container *ngIf=\"userState()?.impersonatingUser; else notImpersonated\">\n <div class=\"eui-user-profile__infos-welcome\">\n <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n <strong>{{ fullName()?.impersonated }}</strong>\n <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n </div>\n <div class=\"eui-user-profile__infos-name\">\n {{ fullName().user }}\n </div>\n <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ subInfos }}\n </div>\n </ng-container>\n\n <ng-template #notImpersonated>\n <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n <div class=\"eui-user-profile__infos-name\">{{ fullName().user }}</div>\n <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ subInfos }}\n </div>\n </ng-template>\n </div>\n\n <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n [hasShadow]=\"userState()?.impersonatingUser\">\n <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n {{ avatarInitials() }}\n </eui-avatar-text>\n <ng-template #noAvatarInitials>\n <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n </ng-template>\n <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n <eui-badge euiSecondaryLight euiSizeXS>\n <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\"></eui-icon-svg>\n </eui-badge>\n </eui-avatar-badge>\n </eui-avatar>\n </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:active:not([readonly]),.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:active:not([readonly]),.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-base-spacing-s);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);text-align:right;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-90);text-align:right}.eui-user-profile__infos--no-subinfos{display:flex}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-base-spacing-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-20);border-left:var(--eui-base-spacing-2xs) solid transparent;cursor:pointer;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);border-left:4px solid transparent}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-base-color-text);text-decoration:none}.eui-user-profile-menu-item .eui-icon{color:var(--eui-base-color-grey-75);font-size:var(--eui-base-icon-size-m);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs)}.eui-user-profile-menu-item:hover{background-color:var(--eui-base-color-grey-5);cursor:pointer}.eui-user-profile-menu-item:focus{border-left:4px solid var(--eui-base-color-accessible-focus);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-base-spacing-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-base-spacing-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "isClosedOnClickInside", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i6.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["position"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
931
946
|
}
|
|
932
947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EuiUserProfileComponent, decorators: [{
|
|
933
948
|
type: Component,
|
|
@@ -939,7 +954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
939
954
|
'euiInverted',
|
|
940
955
|
],
|
|
941
956
|
},
|
|
942
|
-
], template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n <eui-dropdown-content>\n <ng-content></ng-content>\n </eui-dropdown-content>\n </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n <div *ngIf=\"isShowUserInfos\"\n class=\"eui-user-profile__infos\"\n [class.eui-user-profile__infos--no-subinfos]=\"subInfos && !hasWelcomeLabel\">\n <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n <div class=\"eui-user-profile__infos-welcome\">\n <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n <strong>{{
|
|
957
|
+
], template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n <eui-dropdown-content>\n <ng-content></ng-content>\n </eui-dropdown-content>\n </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n <div *ngIf=\"isShowUserInfos\"\n class=\"eui-user-profile__infos\"\n [class.eui-user-profile__infos--no-subinfos]=\"subInfos && !hasWelcomeLabel\">\n <ng-container *ngIf=\"userState()?.impersonatingUser; else notImpersonated\">\n <div class=\"eui-user-profile__infos-welcome\">\n <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n <strong>{{ fullName()?.impersonated }}</strong>\n <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n </div>\n <div class=\"eui-user-profile__infos-name\">\n {{ fullName().user }}\n </div>\n <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ subInfos }}\n </div>\n </ng-container>\n\n <ng-template #notImpersonated>\n <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n <div class=\"eui-user-profile__infos-name\">{{ fullName().user }}</div>\n <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ subInfos }}\n </div>\n </ng-template>\n </div>\n\n <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n [hasShadow]=\"userState()?.impersonatingUser\">\n <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n {{ avatarInitials() }}\n </eui-avatar-text>\n <ng-template #noAvatarInitials>\n <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n </ng-template>\n <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n <eui-badge euiSecondaryLight euiSizeXS>\n <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\"></eui-icon-svg>\n </eui-badge>\n </eui-avatar-badge>\n </eui-avatar>\n </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:active:not([readonly]),.eui-user-profile-content:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content:focus [tabindex=\"0\"]:active:not([readonly]),.eui-user-profile-content:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-base-spacing-s);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);text-align:right;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-90);text-align:right}.eui-user-profile__infos--no-subinfos{display:flex}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-base-spacing-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-20);border-left:var(--eui-base-spacing-2xs) solid transparent;cursor:pointer;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);border-left:4px solid transparent}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-base-color-text);text-decoration:none}.eui-user-profile-menu-item .eui-icon{color:var(--eui-base-color-grey-75);font-size:var(--eui-base-icon-size-m);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs)}.eui-user-profile-menu-item:hover{background-color:var(--eui-base-color-grey-5);cursor:pointer}.eui-user-profile-menu-item:focus{border-left:4px solid var(--eui-base-color-accessible-focus);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-base-spacing-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-base-spacing-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-s)}\n"] }]
|
|
943
958
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
944
959
|
type: Host
|
|
945
960
|
}, {
|
|
@@ -993,6 +1008,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
993
1008
|
}] } });
|
|
994
1009
|
|
|
995
1010
|
class EuiUserProfileCardComponent {
|
|
1011
|
+
get cssClasses() {
|
|
1012
|
+
return 'eui-user-profile-card';
|
|
1013
|
+
}
|
|
996
1014
|
constructor() {
|
|
997
1015
|
/**
|
|
998
1016
|
* If true, the user is online
|
|
@@ -1010,30 +1028,34 @@ class EuiUserProfileCardComponent {
|
|
|
1010
1028
|
this.closeProfileMenu = new EventEmitter();
|
|
1011
1029
|
this.unsubscribeSubject$ = new Subject();
|
|
1012
1030
|
this.userService = inject(UserService);
|
|
1031
|
+
this.orderSignal = signal(false);
|
|
1032
|
+
this.userState = toSignal(this.userService.getState());
|
|
1013
1033
|
}
|
|
1014
|
-
|
|
1015
|
-
|
|
1034
|
+
ngOnChanges(changes) {
|
|
1035
|
+
if (changes['reverseNameOrder']) {
|
|
1036
|
+
this.orderSignal.set(this.reverseNameOrder);
|
|
1037
|
+
}
|
|
1016
1038
|
}
|
|
1017
1039
|
ngOnInit() {
|
|
1018
|
-
this.
|
|
1019
|
-
.
|
|
1020
|
-
.
|
|
1021
|
-
.
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
}
|
|
1040
|
+
this.avatarInitials = computed(() => {
|
|
1041
|
+
const firstNameInitial = this.userState().firstName?.substring(0, 1).toUpperCase();
|
|
1042
|
+
const lastNameInitial = this.userState().lastName?.substring(0, 1).toUpperCase();
|
|
1043
|
+
return this.orderSignal() ?
|
|
1044
|
+
`${firstNameInitial}${lastNameInitial}`
|
|
1045
|
+
: `${lastNameInitial}${firstNameInitial}`;
|
|
1046
|
+
});
|
|
1047
|
+
this.fullName = computed(() => {
|
|
1048
|
+
const user = this.userState();
|
|
1049
|
+
const impersonated = this.userState().impersonatingUser;
|
|
1050
|
+
const fullName = (user) => {
|
|
1051
|
+
return this.orderSignal()
|
|
1052
|
+
? `${user.firstName} ${user.lastName}`
|
|
1053
|
+
: `${user.lastName} ${user.firstName}`;
|
|
1054
|
+
};
|
|
1055
|
+
return {
|
|
1056
|
+
user: fullName(user),
|
|
1057
|
+
impersonated: impersonated ? fullName(impersonated) : undefined,
|
|
1058
|
+
};
|
|
1037
1059
|
});
|
|
1038
1060
|
}
|
|
1039
1061
|
ngOnDestroy() {
|
|
@@ -1047,15 +1069,15 @@ class EuiUserProfileCardComponent {
|
|
|
1047
1069
|
this.closeProfileMenu.emit();
|
|
1048
1070
|
}
|
|
1049
1071
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EuiUserProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1050
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EuiUserProfileCardComponent, selector: "eui-user-profile-card", inputs: { impersonateLabel: "impersonateLabel", showDetailsLabel: "showDetailsLabel", avatarUrl: "avatarUrl", isShowAvatarInitials: "isShowAvatarInitials", 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 euiInfo>\n <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n {{ avatarInitials }}\n </eui-avatar-text>\n <ng-template #noAvatarInitials>\n <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n </ng-template>\n </eui-avatar>\n </div>\n <div class=\"eui-user-profile-card__userInfos\">\n <div class=\"eui-u-font-xl eui-u-mb-s\">{{ fullName
|
|
1072
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EuiUserProfileCardComponent, selector: "eui-user-profile-card", inputs: { impersonateLabel: "impersonateLabel", showDetailsLabel: "showDetailsLabel", avatarUrl: "avatarUrl", isShowAvatarInitials: "isShowAvatarInitials", reverseNameOrder: "reverseNameOrder" }, outputs: { showProfileInfo: "showProfileInfo", closeProfileMenu: "closeProfileMenu" }, host: { properties: { "class": "this.cssClasses" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-user-profile-card__main-wrapper\">\n <div class=\"eui-user-profile-card__avatar-wrapper\">\n <eui-avatar euiSizeL euiInfo>\n <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n {{ avatarInitials() }}\n </eui-avatar-text>\n <ng-template #noAvatarInitials>\n <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n </ng-template>\n </eui-avatar>\n </div>\n <div class=\"eui-user-profile-card__userInfos\">\n <div class=\"eui-u-font-xl eui-u-mb-s\">{{ fullName()?.user }}</div>\n <div *ngIf=\"userState()?.function\" class=\"eui-user-profile-card__userInfos-item\">\n {{ userState()?.function }}\n </div>\n <div *ngIf=\"userState()?.organisation && userState()?.organisation.code\" class=\"eui-user-profile-card__userInfos-item\">\n {{ userState()?.organisation.code }}\n </div>\n </div>\n <div class=\"eui-user-profile-card__main-wrapper-right-content\">\n <a class=\"eui-u-text-link\" tabindex=\"0\" (click)=\"onClose()\">close</a>\n <button euiButton euiIconButton euiInfo euiSizeS class=\"eui-u-ml-auto eui-u-mt-m\" (click)=\"onShowInfoClick()\" title=\"{{ showDetailsLabel }}\">\n <eui-icon-svg icon=\"eui-info\"></eui-icon-svg>\n </button>\n </div>\n</div>\n\n<ng-container *ngIf=\"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</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1051
1073
|
}
|
|
1052
1074
|
__decorate([
|
|
1053
1075
|
coerceBoolean
|
|
1054
1076
|
], EuiUserProfileCardComponent.prototype, "isShowAvatarInitials", void 0);
|
|
1055
1077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EuiUserProfileCardComponent, decorators: [{
|
|
1056
1078
|
type: Component,
|
|
1057
|
-
args: [{ selector: 'eui-user-profile-card', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-user-profile-card__main-wrapper\">\n <div class=\"eui-user-profile-card__avatar-wrapper\">\n <eui-avatar euiSizeL euiInfo>\n <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n {{ avatarInitials }}\n </eui-avatar-text>\n <ng-template #noAvatarInitials>\n <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n </ng-template>\n </eui-avatar>\n </div>\n <div class=\"eui-user-profile-card__userInfos\">\n <div class=\"eui-u-font-xl eui-u-mb-s\">{{ fullName
|
|
1058
|
-
}], propDecorators: { cssClasses: [{
|
|
1079
|
+
args: [{ selector: 'eui-user-profile-card', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-user-profile-card__main-wrapper\">\n <div class=\"eui-user-profile-card__avatar-wrapper\">\n <eui-avatar euiSizeL euiInfo>\n <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n {{ avatarInitials() }}\n </eui-avatar-text>\n <ng-template #noAvatarInitials>\n <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n </ng-template>\n </eui-avatar>\n </div>\n <div class=\"eui-user-profile-card__userInfos\">\n <div class=\"eui-u-font-xl eui-u-mb-s\">{{ fullName()?.user }}</div>\n <div *ngIf=\"userState()?.function\" class=\"eui-user-profile-card__userInfos-item\">\n {{ userState()?.function }}\n </div>\n <div *ngIf=\"userState()?.organisation && userState()?.organisation.code\" class=\"eui-user-profile-card__userInfos-item\">\n {{ userState()?.organisation.code }}\n </div>\n </div>\n <div class=\"eui-user-profile-card__main-wrapper-right-content\">\n <a class=\"eui-u-text-link\" tabindex=\"0\" (click)=\"onClose()\">close</a>\n <button euiButton euiIconButton euiInfo euiSizeS class=\"eui-u-ml-auto eui-u-mt-m\" (click)=\"onShowInfoClick()\" title=\"{{ showDetailsLabel }}\">\n <eui-icon-svg icon=\"eui-info\"></eui-icon-svg>\n </button>\n </div>\n</div>\n\n<ng-container *ngIf=\"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</ng-container>\n" }]
|
|
1080
|
+
}], ctorParameters: () => [], propDecorators: { cssClasses: [{
|
|
1059
1081
|
type: HostBinding,
|
|
1060
1082
|
args: ['class']
|
|
1061
1083
|
}], impersonateLabel: [{
|