@eui/components 17.0.0-next.6 → 17.0.0-next.7
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/esm2022/eui-autocomplete/eui-autocomplete.component.mjs +3 -4
- package/esm2022/eui-dropdown/eui-dropdown.component.mjs +9 -4
- package/esm2022/eui-overlay/components/eui-overlay-body/eui-overlay-body.component.mjs +2 -2
- package/esm2022/eui-overlay/components/eui-overlay-footer/eui-overlay-footer.component.mjs +2 -2
- package/esm2022/eui-overlay/components/eui-overlay-header/eui-overlay-header-title/eui-overlay-header-title.component.mjs +3 -3
- package/esm2022/eui-overlay/components/eui-overlay-header/eui-overlay-header.component.mjs +2 -2
- package/esm2022/eui-overlay/eui-overlay.component.mjs +9 -6
- package/esm2022/eui-page/components/eui-page-header/eui-page-header.component.mjs +7 -3
- package/esm2022/layout/eui-app/eui-app.component.mjs +2 -1
- package/esm2022/layout/eui-notifications-v2/eui-notification-item.component.mjs +3 -3
- package/esm2022/layout/eui-notifications-v2/eui-notifications.component.mjs +3 -3
- package/esm2022/layout/eui-toolbar/toolbar-item-user-profile/toolbar-item-user-profile.component.mjs +19 -4
- package/esm2022/layout/eui-user-profile/user-profile-card/user-profile-card.component.mjs +9 -3
- package/esm2022/layout/eui-user-profile/user-profile.component.mjs +11 -5
- package/esm2022/shared/eui-common-header/common-header.component.mjs +12 -6
- package/eui-autocomplete/eui-autocomplete.component.d.ts +0 -1
- package/eui-autocomplete/eui-autocomplete.component.d.ts.map +1 -1
- package/eui-dropdown/eui-dropdown.component.d.ts.map +1 -1
- package/eui-overlay/eui-overlay.component.d.ts +3 -1
- package/eui-overlay/eui-overlay.component.d.ts.map +1 -1
- package/eui-page/components/eui-page-header/eui-page-header.component.d.ts +3 -1
- package/eui-page/components/eui-page-header/eui-page-header.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-autocomplete.mjs +2 -3
- package/fesm2022/eui-components-eui-autocomplete.mjs.map +1 -1
- package/fesm2022/eui-components-eui-dropdown.mjs +8 -3
- package/fesm2022/eui-components-eui-dropdown.mjs.map +1 -1
- package/fesm2022/eui-components-eui-overlay.mjs +16 -13
- package/fesm2022/eui-components-eui-overlay.mjs.map +1 -1
- package/fesm2022/eui-components-eui-page.mjs +6 -2
- package/fesm2022/eui-components-eui-page.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +40 -12
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/fesm2022/eui-components-shared.mjs +11 -5
- package/fesm2022/eui-components-shared.mjs.map +1 -1
- package/layout/eui-app/eui-app.component.d.ts.map +1 -1
- package/layout/eui-toolbar/toolbar-item-user-profile/toolbar-item-user-profile.component.d.ts +7 -2
- package/layout/eui-toolbar/toolbar-item-user-profile/toolbar-item-user-profile.component.d.ts.map +1 -1
- package/layout/eui-user-profile/user-profile-card/user-profile-card.component.d.ts +3 -1
- 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 +3 -0
- package/layout/eui-user-profile/user-profile.component.d.ts.map +1 -1
- package/package.json +7 -7
- package/shared/eui-common-header/common-header.component.d.ts +5 -2
- package/shared/eui-common-header/common-header.component.d.ts.map +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2$1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, HostBinding, HostListener, EventEmitter, Input, Output, NgModule, Inject, ContentChildren, forwardRef, ContentChild, Directive,
|
|
4
|
+
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, HostBinding, HostListener, EventEmitter, Input, Output, NgModule, Inject, ContentChildren, forwardRef, ViewChild, ContentChild, Directive, ElementRef, QueryList, ComponentRef, ViewContainerRef, Injectable } from '@angular/core';
|
|
5
5
|
import * as i1$2 from '@angular/router';
|
|
6
6
|
import { RouterModule } from '@angular/router';
|
|
7
7
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
@@ -705,13 +705,19 @@ class EuiUserProfileComponent {
|
|
|
705
705
|
});
|
|
706
706
|
}
|
|
707
707
|
}
|
|
708
|
+
closeDropdown() {
|
|
709
|
+
this.dropdown.closeDropdown();
|
|
710
|
+
}
|
|
708
711
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiUserProfileComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
709
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", hasMenu: "hasMenu", isShowUserInfos: "isShowUserInfos", hasWelcomeLabel: "hasWelcomeLabel", euiUserProfileSizeS: "euiUserProfileSizeS", isShowAvatarInitials: "isShowAvatarInitials", hasTabNavigation: "hasTabNavigation" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\">\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 <ng-container *ngIf=\"isShowUserInfos; else noUserInfos\">\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n <div\n class=\"eui-user-profile__infos\"\n [class.eui-user-profile__infos--no-subinfos]=\"(asService.state$ | async).userSubInfos && !hasWelcomeLabel\">\n <ng-container *ngIf=\"(asService.state$ | async).impersonatedUserInfos; else notImpersonated\">\n <div class=\"eui-user-profile__infos-welcome\">\n <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n <strong>{{ (asService.state$ | async).userInfos }}</strong>\n <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n </div>\n <div class=\"eui-user-profile__infos-name\">{{ (asService.state$ | async).impersonatedUserInfos }}</div>\n <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ (asService.state$ | async).userSubInfos }}\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\">{{ (asService.state$ | async).userInfos }}</div>\n <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ (asService.state$ | async).userSubInfos }}\n </div>\n </ng-template>\n </div>\n\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-shadow\">\n <div class=\"eui-user-profile__avatar eui-u-svg eui-u-svg--default-avatar\"></div>\n </div>\n\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </button>\n </ng-container>\n\n <ng-template #noUserInfos>\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-initials-shadow\"></div>\n <div *ngIf=\"isShowAvatarInitials; else defaultAvatar\" class=\"eui-user-profile__avatar-initials\">\n {{ avatarInitials }}\n <eui-icon-svg icon=\"eui-chevron-down\" class=\"eui-user-profile__avatar-expander-icon\"></eui-icon-svg>\n </div>\n <ng-template #defaultAvatar>\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-shadow\">\n <div class=\"eui-user-profile__avatar\"></div>\n </div>\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </ng-template>\n </button>\n </ng-template>\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{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;margin-right:var(--eui-base-spacing-xs);margin-top:var(--eui-base-spacing-xs)}.eui-toolbar .eui-user-profile__infos{margin-top:var(--eui-base-spacing-3xs);line-height:1.25}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-s)}.eui-toolbar .eui-user-profile__infos-welcome{color:var(--eui-base-color-grey-15);font-size:85%}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font-size:var(--eui-base-font-size);font-weight:700}.eui-toolbar .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-s)}.eui-toolbar .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15);font-size:85%}.eui-user-profile__infos--no-subinfos{display:flex}.eui-user-profile__avatar{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiNFN0VDRUQ7IiBkPSJNMTguNjEzLDQxLjU1MmwtNy45MDcsNC4zMTNjLTAuNDY0LDAuMjUzLTAuODgxLDAuNTY0LTEuMjY5LDAuOTAzQzE0LjA0Nyw1MC42NTUsMTkuOTk4LDUzLDI2LjUsNTNjNi40NTQsMCwxMi4zNjctMi4zMSwxNi45NjQtNi4xNDRjLTAuNDI0LTAuMzU4LTAuODg0LTAuNjgtMS4zOTQtMC45MzRsLTguNDY3LTQuMjMzYy0xLjA5NC0wLjU0Ny0xLjc4NS0xLjY2NS0xLjc4NS0yLjg4OHYtMy4zMjJjMC4yMzgtMC4yNzEsMC41MS0wLjYxOSwwLjgwMS0xLjAzYzEuMTU0LTEuNjMsMi4wMjctMy40MjMsMi42MzItNS4zMDRjMS4wODYtMC4zMzUsMS44ODYtMS4zMzgsMS44ODYtMi41M3YtMy41NDZjMC0wLjc4LTAuMzQ3LTEuNDc3LTAuODg2LTEuOTY1di01LjEyNmMwLDAsMS4wNTMtNy45NzctOS43NS03Ljk3N3MtOS43NSw3Ljk3Ny05Ljc1LDcuOTc3djUuMTI2Yy0wLjU0LDAuNDg4LTAuODg2LDEuMTg1LTAuODg2LDEuOTY1djMuNTQ2YzAsMC45MzQsMC40OTEsMS43NTYsMS4yMjYsMi4yMzFjMC44ODYsMy44NTcsMy4yMDYsNi42MzMsMy4yMDYsNi42MzN2My4yNEMyMC4yOTYsMzkuODk5LDE5LjY1LDQwLjk4NiwxOC42MTMsNDEuNTUyeiIvPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43NmMwLjM4NS0wLjMzNiwwLjc5OC0wLjY0NCwxLjI1Ny0wLjg5NGw3LjkwNy00LjMxM2MxLjAzNy0wLjU2NiwxLjY4My0xLjY1MywxLjY4My0yLjgzNXYtMy4yNGMwLDAtMi4zMjEtMi43NzYtMy4yMDYtNi42MzNjLTAuNzM0LTAuNDc1LTEuMjI2LTEuMjk2LTEuMjI2LTIuMjMxdi0zLjU0NmMwLTAuNzgsMC4zNDctMS40NzcsMC44ODYtMS45NjV2LTUuMTI2YzAsMC0xLjA1My03Ljk3Nyw5Ljc1LTcuOTc3czkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTNjLTAuNjA1LDEuODgxLTEuNDc4LDMuNjc0LTIuNjMyLDUuMzA0Yy0wLjI5MSwwLjQxMS0wLjU2MywwLjc1OS0wLjgwMSwxLjAzVjM4LjhjMCwxLjIyMywwLjY5MSwyLjM0MiwxLjc4NSwyLjg4OGw4LjQ2Nyw0LjIzM2MwLjUwOCwwLjI1NCwwLjk2NywwLjU3NSwxLjM5LDAuOTMyYzUuNzEtNC43NjIsOS4zOTktMTEuODgyLDkuNTM2LTE5LjlDNTMuMjQ2LDEyLjMyLDQxLjU4NywwLjI1NCwyNi45NTMsMC4wMDR6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);background-size:cover;border:2px solid var(--eui-base-color-info-75);border-radius:50%;height:50px;margin-right:1rem;min-height:50px;min-width:50px;position:relative;width:50px;box-shadow:var(--eui-base-shadow-2)}.eui-user-profile__avatar-toggle{bottom:-23px;color:var(--eui-base-color-grey-25);cursor:pointer;right:14px;position:absolute}.eui-user-profile__avatar-toggle .eui-icon{font-size:var(--eui-base-font-size)}.eui-user-profile__avatar-toggle:hover{animation:none;color:var(--eui-base-color-primary-100)}.eui-user-profile__avatar--offline{border-color:var(--eui-base-color-danger-75)}.eui-user-profile__avatar--online{border-color:var(--eui-base-color-info-75)}.eui-user-profile__avatar img{background-size:cover;border:2px solid var(--eui-base-color-info-75);border-radius:50%;min-width:50px;margin-top:-3px;margin-left:-2px}.eui-user-profile__avatar-shadow{opacity:.5;position:absolute;right:-10px}.eui-user-profile__avatar-shadow .eui-user-profile__avatar{border:2px solid var(--eui-base-color-grey-15)}.eui-user-profile__avatar-expander-icon{border-radius:50%;background-color:var(--eui-base-color-grey-10);position:absolute;bottom:-4px;right:-2px;width:12px;height:12px}.eui-user-profile__avatar-initials{font-size:16px;font-weight:700;width:36px;height:36px;justify-content:center;align-items:center;display:flex;background-color:var(--eui-base-color-primary-75);border:2px solid var(--eui-base-color-primary-50);border-radius:50%;position:relative;color:var(--eui-base-color-white)}.eui-user-profile__avatar-initials-shadow{position:absolute;right:10px;width:36px;height:36px;border:5px solid var(--eui-base-color-primary-25);border-radius:50%}@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--size-s .eui-user-profile__avatar{border-width:2px;box-shadow:none;height:2.5rem;margin:0;min-height:2.5rem;min-width:2.5rem;width:2.5rem}.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-s)}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__avatar-initials{font-size:var(--eui-base-font-size-xl);color:var(--eui-base-color-white);font-weight:700;width:64px;height:64px;justify-content:center;align-items:center;display:flex;background-color:var(--eui-base-color-info-75);border:2px solid var(--eui-base-color-info-100);border-radius:50%}.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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i5.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i2$2.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: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
712
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", hasMenu: "hasMenu", isShowUserInfos: "isShowUserInfos", hasWelcomeLabel: "hasWelcomeLabel", euiUserProfileSizeS: "euiUserProfileSizeS", isShowAvatarInitials: "isShowAvatarInitials", hasTabNavigation: "hasTabNavigation" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], 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 <ng-container *ngIf=\"isShowUserInfos; else noUserInfos\">\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n <div\n class=\"eui-user-profile__infos\"\n [class.eui-user-profile__infos--no-subinfos]=\"(asService.state$ | async).userSubInfos && !hasWelcomeLabel\">\n <ng-container *ngIf=\"(asService.state$ | async).impersonatedUserInfos; else notImpersonated\">\n <div class=\"eui-user-profile__infos-welcome\">\n <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n <strong>{{ (asService.state$ | async).userInfos }}</strong>\n <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n </div>\n <div class=\"eui-user-profile__infos-name\">{{ (asService.state$ | async).impersonatedUserInfos }}</div>\n <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ (asService.state$ | async).userSubInfos }}\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\">{{ (asService.state$ | async).userInfos }}</div>\n <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ (asService.state$ | async).userSubInfos }}\n </div>\n </ng-template>\n </div>\n\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-shadow\">\n <div class=\"eui-user-profile__avatar eui-u-svg eui-u-svg--default-avatar\"></div>\n </div>\n\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </button>\n </ng-container>\n\n <ng-template #noUserInfos>\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-initials-shadow\"></div>\n <div *ngIf=\"isShowAvatarInitials; else defaultAvatar\" class=\"eui-user-profile__avatar-initials\">\n {{ avatarInitials }}\n <eui-icon-svg icon=\"eui-chevron-down\" class=\"eui-user-profile__avatar-expander-icon\"></eui-icon-svg>\n </div>\n <ng-template #defaultAvatar>\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-shadow\">\n <div class=\"eui-user-profile__avatar\"></div>\n </div>\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </ng-template>\n </button>\n </ng-template>\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{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;margin-right:var(--eui-base-spacing-xs);margin-top:var(--eui-base-spacing-xs)}.eui-toolbar .eui-user-profile__infos{margin-top:var(--eui-base-spacing-3xs);line-height:1.25}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-s)}.eui-toolbar .eui-user-profile__infos-welcome{color:var(--eui-base-color-grey-15);font-size:85%}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font-size:var(--eui-base-font-size);font-weight:700}.eui-toolbar .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-s)}.eui-toolbar .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15);font-size:85%}.eui-user-profile__infos--no-subinfos{display:flex}.eui-user-profile__avatar{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiNFN0VDRUQ7IiBkPSJNMTguNjEzLDQxLjU1MmwtNy45MDcsNC4zMTNjLTAuNDY0LDAuMjUzLTAuODgxLDAuNTY0LTEuMjY5LDAuOTAzQzE0LjA0Nyw1MC42NTUsMTkuOTk4LDUzLDI2LjUsNTNjNi40NTQsMCwxMi4zNjctMi4zMSwxNi45NjQtNi4xNDRjLTAuNDI0LTAuMzU4LTAuODg0LTAuNjgtMS4zOTQtMC45MzRsLTguNDY3LTQuMjMzYy0xLjA5NC0wLjU0Ny0xLjc4NS0xLjY2NS0xLjc4NS0yLjg4OHYtMy4zMjJjMC4yMzgtMC4yNzEsMC41MS0wLjYxOSwwLjgwMS0xLjAzYzEuMTU0LTEuNjMsMi4wMjctMy40MjMsMi42MzItNS4zMDRjMS4wODYtMC4zMzUsMS44ODYtMS4zMzgsMS44ODYtMi41M3YtMy41NDZjMC0wLjc4LTAuMzQ3LTEuNDc3LTAuODg2LTEuOTY1di01LjEyNmMwLDAsMS4wNTMtNy45NzctOS43NS03Ljk3N3MtOS43NSw3Ljk3Ny05Ljc1LDcuOTc3djUuMTI2Yy0wLjU0LDAuNDg4LTAuODg2LDEuMTg1LTAuODg2LDEuOTY1djMuNTQ2YzAsMC45MzQsMC40OTEsMS43NTYsMS4yMjYsMi4yMzFjMC44ODYsMy44NTcsMy4yMDYsNi42MzMsMy4yMDYsNi42MzN2My4yNEMyMC4yOTYsMzkuODk5LDE5LjY1LDQwLjk4NiwxOC42MTMsNDEuNTUyeiIvPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43NmMwLjM4NS0wLjMzNiwwLjc5OC0wLjY0NCwxLjI1Ny0wLjg5NGw3LjkwNy00LjMxM2MxLjAzNy0wLjU2NiwxLjY4My0xLjY1MywxLjY4My0yLjgzNXYtMy4yNGMwLDAtMi4zMjEtMi43NzYtMy4yMDYtNi42MzNjLTAuNzM0LTAuNDc1LTEuMjI2LTEuMjk2LTEuMjI2LTIuMjMxdi0zLjU0NmMwLTAuNzgsMC4zNDctMS40NzcsMC44ODYtMS45NjV2LTUuMTI2YzAsMC0xLjA1My03Ljk3Nyw5Ljc1LTcuOTc3czkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTNjLTAuNjA1LDEuODgxLTEuNDc4LDMuNjc0LTIuNjMyLDUuMzA0Yy0wLjI5MSwwLjQxMS0wLjU2MywwLjc1OS0wLjgwMSwxLjAzVjM4LjhjMCwxLjIyMywwLjY5MSwyLjM0MiwxLjc4NSwyLjg4OGw4LjQ2Nyw0LjIzM2MwLjUwOCwwLjI1NCwwLjk2NywwLjU3NSwxLjM5LDAuOTMyYzUuNzEtNC43NjIsOS4zOTktMTEuODgyLDkuNTM2LTE5LjlDNTMuMjQ2LDEyLjMyLDQxLjU4NywwLjI1NCwyNi45NTMsMC4wMDR6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);background-size:cover;border:2px solid var(--eui-base-color-info-75);border-radius:50%;height:50px;margin-right:1rem;min-height:50px;min-width:50px;position:relative;width:50px;box-shadow:var(--eui-base-shadow-2)}.eui-user-profile__avatar-toggle{bottom:-23px;color:var(--eui-base-color-grey-25);cursor:pointer;right:14px;position:absolute}.eui-user-profile__avatar-toggle .eui-icon{font-size:var(--eui-base-font-size)}.eui-user-profile__avatar-toggle:hover{animation:none;color:var(--eui-base-color-primary-100)}.eui-user-profile__avatar--offline{border-color:var(--eui-base-color-danger-75)}.eui-user-profile__avatar--online{border-color:var(--eui-base-color-info-75)}.eui-user-profile__avatar img{background-size:cover;border:2px solid var(--eui-base-color-info-75);border-radius:50%;min-width:50px;margin-top:-3px;margin-left:-2px}.eui-user-profile__avatar-shadow{opacity:.5;position:absolute;right:-10px}.eui-user-profile__avatar-shadow .eui-user-profile__avatar{border:2px solid var(--eui-base-color-grey-15)}.eui-user-profile__avatar-expander-icon{border-radius:50%;background-color:var(--eui-base-color-grey-10);position:absolute;bottom:-4px;right:-2px;width:12px;height:12px}.eui-user-profile__avatar-initials{font-size:16px;font-weight:700;width:36px;height:36px;justify-content:center;align-items:center;display:flex;background-color:var(--eui-base-color-primary-75);border:2px solid var(--eui-base-color-primary-50);border-radius:50%;position:relative;color:var(--eui-base-color-white)}.eui-user-profile__avatar-initials-shadow{position:absolute;right:10px;width:36px;height:36px;border:5px solid var(--eui-base-color-primary-25);border-radius:50%}@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--size-s .eui-user-profile__avatar{border-width:2px;box-shadow:none;height:2.5rem;margin:0;min-height:2.5rem;min-width:2.5rem;width:2.5rem}.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__avatar-initials{font-size:var(--eui-base-font-size-xl);color:var(--eui-base-color-white);font-weight:700;width:64px;height:64px;justify-content:center;align-items:center;display:flex;background-color:var(--eui-base-color-info-75);border:2px solid var(--eui-base-color-info-100);border-radius:50%}.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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i5.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i2$2.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: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
710
713
|
}
|
|
711
714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiUserProfileComponent, decorators: [{
|
|
712
715
|
type: Component,
|
|
713
|
-
args: [{ selector: 'eui-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\">\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 <ng-container *ngIf=\"isShowUserInfos; else noUserInfos\">\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n <div\n class=\"eui-user-profile__infos\"\n [class.eui-user-profile__infos--no-subinfos]=\"(asService.state$ | async).userSubInfos && !hasWelcomeLabel\">\n <ng-container *ngIf=\"(asService.state$ | async).impersonatedUserInfos; else notImpersonated\">\n <div class=\"eui-user-profile__infos-welcome\">\n <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n <strong>{{ (asService.state$ | async).userInfos }}</strong>\n <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n </div>\n <div class=\"eui-user-profile__infos-name\">{{ (asService.state$ | async).impersonatedUserInfos }}</div>\n <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ (asService.state$ | async).userSubInfos }}\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\">{{ (asService.state$ | async).userInfos }}</div>\n <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ (asService.state$ | async).userSubInfos }}\n </div>\n </ng-template>\n </div>\n\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-shadow\">\n <div class=\"eui-user-profile__avatar eui-u-svg eui-u-svg--default-avatar\"></div>\n </div>\n\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </button>\n </ng-container>\n\n <ng-template #noUserInfos>\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-initials-shadow\"></div>\n <div *ngIf=\"isShowAvatarInitials; else defaultAvatar\" class=\"eui-user-profile__avatar-initials\">\n {{ avatarInitials }}\n <eui-icon-svg icon=\"eui-chevron-down\" class=\"eui-user-profile__avatar-expander-icon\"></eui-icon-svg>\n </div>\n <ng-template #defaultAvatar>\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-shadow\">\n <div class=\"eui-user-profile__avatar\"></div>\n </div>\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </ng-template>\n </button>\n </ng-template>\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{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;margin-right:var(--eui-base-spacing-xs);margin-top:var(--eui-base-spacing-xs)}.eui-toolbar .eui-user-profile__infos{margin-top:var(--eui-base-spacing-3xs);line-height:1.25}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-s)}.eui-toolbar .eui-user-profile__infos-welcome{color:var(--eui-base-color-grey-15);font-size:85%}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font-size:var(--eui-base-font-size);font-weight:700}.eui-toolbar .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-s)}.eui-toolbar .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15);font-size:85%}.eui-user-profile__infos--no-subinfos{display:flex}.eui-user-profile__avatar{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiNFN0VDRUQ7IiBkPSJNMTguNjEzLDQxLjU1MmwtNy45MDcsNC4zMTNjLTAuNDY0LDAuMjUzLTAuODgxLDAuNTY0LTEuMjY5LDAuOTAzQzE0LjA0Nyw1MC42NTUsMTkuOTk4LDUzLDI2LjUsNTNjNi40NTQsMCwxMi4zNjctMi4zMSwxNi45NjQtNi4xNDRjLTAuNDI0LTAuMzU4LTAuODg0LTAuNjgtMS4zOTQtMC45MzRsLTguNDY3LTQuMjMzYy0xLjA5NC0wLjU0Ny0xLjc4NS0xLjY2NS0xLjc4NS0yLjg4OHYtMy4zMjJjMC4yMzgtMC4yNzEsMC41MS0wLjYxOSwwLjgwMS0xLjAzYzEuMTU0LTEuNjMsMi4wMjctMy40MjMsMi42MzItNS4zMDRjMS4wODYtMC4zMzUsMS44ODYtMS4zMzgsMS44ODYtMi41M3YtMy41NDZjMC0wLjc4LTAuMzQ3LTEuNDc3LTAuODg2LTEuOTY1di01LjEyNmMwLDAsMS4wNTMtNy45NzctOS43NS03Ljk3N3MtOS43NSw3Ljk3Ny05Ljc1LDcuOTc3djUuMTI2Yy0wLjU0LDAuNDg4LTAuODg2LDEuMTg1LTAuODg2LDEuOTY1djMuNTQ2YzAsMC45MzQsMC40OTEsMS43NTYsMS4yMjYsMi4yMzFjMC44ODYsMy44NTcsMy4yMDYsNi42MzMsMy4yMDYsNi42MzN2My4yNEMyMC4yOTYsMzkuODk5LDE5LjY1LDQwLjk4NiwxOC42MTMsNDEuNTUyeiIvPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43NmMwLjM4NS0wLjMzNiwwLjc5OC0wLjY0NCwxLjI1Ny0wLjg5NGw3LjkwNy00LjMxM2MxLjAzNy0wLjU2NiwxLjY4My0xLjY1MywxLjY4My0yLjgzNXYtMy4yNGMwLDAtMi4zMjEtMi43NzYtMy4yMDYtNi42MzNjLTAuNzM0LTAuNDc1LTEuMjI2LTEuMjk2LTEuMjI2LTIuMjMxdi0zLjU0NmMwLTAuNzgsMC4zNDctMS40NzcsMC44ODYtMS45NjV2LTUuMTI2YzAsMC0xLjA1My03Ljk3Nyw5Ljc1LTcuOTc3czkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTNjLTAuNjA1LDEuODgxLTEuNDc4LDMuNjc0LTIuNjMyLDUuMzA0Yy0wLjI5MSwwLjQxMS0wLjU2MywwLjc1OS0wLjgwMSwxLjAzVjM4LjhjMCwxLjIyMywwLjY5MSwyLjM0MiwxLjc4NSwyLjg4OGw4LjQ2Nyw0LjIzM2MwLjUwOCwwLjI1NCwwLjk2NywwLjU3NSwxLjM5LDAuOTMyYzUuNzEtNC43NjIsOS4zOTktMTEuODgyLDkuNTM2LTE5LjlDNTMuMjQ2LDEyLjMyLDQxLjU4NywwLjI1NCwyNi45NTMsMC4wMDR6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);background-size:cover;border:2px solid var(--eui-base-color-info-75);border-radius:50%;height:50px;margin-right:1rem;min-height:50px;min-width:50px;position:relative;width:50px;box-shadow:var(--eui-base-shadow-2)}.eui-user-profile__avatar-toggle{bottom:-23px;color:var(--eui-base-color-grey-25);cursor:pointer;right:14px;position:absolute}.eui-user-profile__avatar-toggle .eui-icon{font-size:var(--eui-base-font-size)}.eui-user-profile__avatar-toggle:hover{animation:none;color:var(--eui-base-color-primary-100)}.eui-user-profile__avatar--offline{border-color:var(--eui-base-color-danger-75)}.eui-user-profile__avatar--online{border-color:var(--eui-base-color-info-75)}.eui-user-profile__avatar img{background-size:cover;border:2px solid var(--eui-base-color-info-75);border-radius:50%;min-width:50px;margin-top:-3px;margin-left:-2px}.eui-user-profile__avatar-shadow{opacity:.5;position:absolute;right:-10px}.eui-user-profile__avatar-shadow .eui-user-profile__avatar{border:2px solid var(--eui-base-color-grey-15)}.eui-user-profile__avatar-expander-icon{border-radius:50%;background-color:var(--eui-base-color-grey-10);position:absolute;bottom:-4px;right:-2px;width:12px;height:12px}.eui-user-profile__avatar-initials{font-size:16px;font-weight:700;width:36px;height:36px;justify-content:center;align-items:center;display:flex;background-color:var(--eui-base-color-primary-75);border:2px solid var(--eui-base-color-primary-50);border-radius:50%;position:relative;color:var(--eui-base-color-white)}.eui-user-profile__avatar-initials-shadow{position:absolute;right:10px;width:36px;height:36px;border:5px solid var(--eui-base-color-primary-25);border-radius:50%}@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--size-s .eui-user-profile__avatar{border-width:2px;box-shadow:none;height:2.5rem;margin:0;min-height:2.5rem;min-width:2.5rem;width:2.5rem}.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-s)}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__avatar-initials{font-size:var(--eui-base-font-size-xl);color:var(--eui-base-color-white);font-weight:700;width:64px;height:64px;justify-content:center;align-items:center;display:flex;background-color:var(--eui-base-color-info-75);border:2px solid var(--eui-base-color-info-100);border-radius:50%}.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"] }]
|
|
714
|
-
}], ctorParameters: function () { return [{ type: i1.EuiAppShellService }, { type: i1.UserService }]; }, propDecorators: {
|
|
716
|
+
args: [{ selector: 'eui-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, 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 <ng-container *ngIf=\"isShowUserInfos; else noUserInfos\">\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n <div\n class=\"eui-user-profile__infos\"\n [class.eui-user-profile__infos--no-subinfos]=\"(asService.state$ | async).userSubInfos && !hasWelcomeLabel\">\n <ng-container *ngIf=\"(asService.state$ | async).impersonatedUserInfos; else notImpersonated\">\n <div class=\"eui-user-profile__infos-welcome\">\n <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n <strong>{{ (asService.state$ | async).userInfos }}</strong>\n <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n </div>\n <div class=\"eui-user-profile__infos-name\">{{ (asService.state$ | async).impersonatedUserInfos }}</div>\n <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ (asService.state$ | async).userSubInfos }}\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\">{{ (asService.state$ | async).userInfos }}</div>\n <div *ngIf=\"(asService.state$ | async).userSubInfos\" class=\"eui-user-profile__infos-subinfos\">\n {{ (asService.state$ | async).userSubInfos }}\n </div>\n </ng-template>\n </div>\n\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-shadow\">\n <div class=\"eui-user-profile__avatar eui-u-svg eui-u-svg--default-avatar\"></div>\n </div>\n\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </button>\n </ng-container>\n\n <ng-template #noUserInfos>\n <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\">\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-initials-shadow\"></div>\n <div *ngIf=\"isShowAvatarInitials; else defaultAvatar\" class=\"eui-user-profile__avatar-initials\">\n {{ avatarInitials }}\n <eui-icon-svg icon=\"eui-chevron-down\" class=\"eui-user-profile__avatar-expander-icon\"></eui-icon-svg>\n </div>\n <ng-template #defaultAvatar>\n <div *ngIf=\"(asService.state$ | async).impersonatedUserInfos\" class=\"eui-user-profile__avatar-shadow\">\n <div class=\"eui-user-profile__avatar\"></div>\n </div>\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile__avatar--online' : 'eui-user-profile__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </ng-template>\n </button>\n </ng-template>\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{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;margin-right:var(--eui-base-spacing-xs);margin-top:var(--eui-base-spacing-xs)}.eui-toolbar .eui-user-profile__infos{margin-top:var(--eui-base-spacing-3xs);line-height:1.25}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-s)}.eui-toolbar .eui-user-profile__infos-welcome{color:var(--eui-base-color-grey-15);font-size:85%}.eui-user-profile__infos-name{color:var(--eui-base-color-primary-100);font-size:var(--eui-base-font-size);font-weight:700}.eui-toolbar .eui-user-profile__infos-name{color:var(--eui-base-color-white)}.eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-s)}.eui-toolbar .eui-user-profile__infos-subinfos{color:var(--eui-base-color-grey-15);font-size:85%}.eui-user-profile__infos--no-subinfos{display:flex}.eui-user-profile__avatar{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzIDUzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MyA1MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiNFN0VDRUQ7IiBkPSJNMTguNjEzLDQxLjU1MmwtNy45MDcsNC4zMTNjLTAuNDY0LDAuMjUzLTAuODgxLDAuNTY0LTEuMjY5LDAuOTAzQzE0LjA0Nyw1MC42NTUsMTkuOTk4LDUzLDI2LjUsNTNjNi40NTQsMCwxMi4zNjctMi4zMSwxNi45NjQtNi4xNDRjLTAuNDI0LTAuMzU4LTAuODg0LTAuNjgtMS4zOTQtMC45MzRsLTguNDY3LTQuMjMzYy0xLjA5NC0wLjU0Ny0xLjc4NS0xLjY2NS0xLjc4NS0yLjg4OHYtMy4zMjJjMC4yMzgtMC4yNzEsMC41MS0wLjYxOSwwLjgwMS0xLjAzYzEuMTU0LTEuNjMsMi4wMjctMy40MjMsMi42MzItNS4zMDRjMS4wODYtMC4zMzUsMS44ODYtMS4zMzgsMS44ODYtMi41M3YtMy41NDZjMC0wLjc4LTAuMzQ3LTEuNDc3LTAuODg2LTEuOTY1di01LjEyNmMwLDAsMS4wNTMtNy45NzctOS43NS03Ljk3N3MtOS43NSw3Ljk3Ny05Ljc1LDcuOTc3djUuMTI2Yy0wLjU0LDAuNDg4LTAuODg2LDEuMTg1LTAuODg2LDEuOTY1djMuNTQ2YzAsMC45MzQsMC40OTEsMS43NTYsMS4yMjYsMi4yMzFjMC44ODYsMy44NTcsMy4yMDYsNi42MzMsMy4yMDYsNi42MzN2My4yNEMyMC4yOTYsMzkuODk5LDE5LjY1LDQwLjk4NiwxOC42MTMsNDEuNTUyeiIvPjxnPjxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43NmMwLjM4NS0wLjMzNiwwLjc5OC0wLjY0NCwxLjI1Ny0wLjg5NGw3LjkwNy00LjMxM2MxLjAzNy0wLjU2NiwxLjY4My0xLjY1MywxLjY4My0yLjgzNXYtMy4yNGMwLDAtMi4zMjEtMi43NzYtMy4yMDYtNi42MzNjLTAuNzM0LTAuNDc1LTEuMjI2LTEuMjk2LTEuMjI2LTIuMjMxdi0zLjU0NmMwLTAuNzgsMC4zNDctMS40NzcsMC44ODYtMS45NjV2LTUuMTI2YzAsMC0xLjA1My03Ljk3Nyw5Ljc1LTcuOTc3czkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTNjLTAuNjA1LDEuODgxLTEuNDc4LDMuNjc0LTIuNjMyLDUuMzA0Yy0wLjI5MSwwLjQxMS0wLjU2MywwLjc1OS0wLjgwMSwxLjAzVjM4LjhjMCwxLjIyMywwLjY5MSwyLjM0MiwxLjc4NSwyLjg4OGw4LjQ2Nyw0LjIzM2MwLjUwOCwwLjI1NCwwLjk2NywwLjU3NSwxLjM5LDAuOTMyYzUuNzEtNC43NjIsOS4zOTktMTEuODgyLDkuNTM2LTE5LjlDNTMuMjQ2LDEyLjMyLDQxLjU4NywwLjI1NCwyNi45NTMsMC4wMDR6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);background-size:cover;border:2px solid var(--eui-base-color-info-75);border-radius:50%;height:50px;margin-right:1rem;min-height:50px;min-width:50px;position:relative;width:50px;box-shadow:var(--eui-base-shadow-2)}.eui-user-profile__avatar-toggle{bottom:-23px;color:var(--eui-base-color-grey-25);cursor:pointer;right:14px;position:absolute}.eui-user-profile__avatar-toggle .eui-icon{font-size:var(--eui-base-font-size)}.eui-user-profile__avatar-toggle:hover{animation:none;color:var(--eui-base-color-primary-100)}.eui-user-profile__avatar--offline{border-color:var(--eui-base-color-danger-75)}.eui-user-profile__avatar--online{border-color:var(--eui-base-color-info-75)}.eui-user-profile__avatar img{background-size:cover;border:2px solid var(--eui-base-color-info-75);border-radius:50%;min-width:50px;margin-top:-3px;margin-left:-2px}.eui-user-profile__avatar-shadow{opacity:.5;position:absolute;right:-10px}.eui-user-profile__avatar-shadow .eui-user-profile__avatar{border:2px solid var(--eui-base-color-grey-15)}.eui-user-profile__avatar-expander-icon{border-radius:50%;background-color:var(--eui-base-color-grey-10);position:absolute;bottom:-4px;right:-2px;width:12px;height:12px}.eui-user-profile__avatar-initials{font-size:16px;font-weight:700;width:36px;height:36px;justify-content:center;align-items:center;display:flex;background-color:var(--eui-base-color-primary-75);border:2px solid var(--eui-base-color-primary-50);border-radius:50%;position:relative;color:var(--eui-base-color-white)}.eui-user-profile__avatar-initials-shadow{position:absolute;right:10px;width:36px;height:36px;border:5px solid var(--eui-base-color-primary-25);border-radius:50%}@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--size-s .eui-user-profile__avatar{border-width:2px;box-shadow:none;height:2.5rem;margin:0;min-height:2.5rem;min-width:2.5rem;width:2.5rem}.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__avatar-initials{font-size:var(--eui-base-font-size-xl);color:var(--eui-base-color-white);font-weight:700;width:64px;height:64px;justify-content:center;align-items:center;display:flex;background-color:var(--eui-base-color-info-75);border:2px solid var(--eui-base-color-info-100);border-radius:50%}.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"] }]
|
|
717
|
+
}], ctorParameters: function () { return [{ type: i1.EuiAppShellService }, { type: i1.UserService }]; }, propDecorators: { dropdown: [{
|
|
718
|
+
type: ViewChild,
|
|
719
|
+
args: ['dropdown']
|
|
720
|
+
}], welcomeLabel: [{
|
|
715
721
|
type: Input
|
|
716
722
|
}], impersonateLabel: [{
|
|
717
723
|
type: Input
|
|
@@ -751,6 +757,7 @@ class EuiUserProfileCardComponent {
|
|
|
751
757
|
this.impersonateLabel = 'impersonating';
|
|
752
758
|
this.showDetailsLabel = 'Show profile details';
|
|
753
759
|
this.showProfileInfo = new EventEmitter();
|
|
760
|
+
this.closeProfileMenu = new EventEmitter();
|
|
754
761
|
this._isShowAvatarInitials = false;
|
|
755
762
|
}
|
|
756
763
|
ngOnInit() {
|
|
@@ -770,12 +777,15 @@ class EuiUserProfileCardComponent {
|
|
|
770
777
|
onShowInfoClick() {
|
|
771
778
|
this.showProfileInfo.emit();
|
|
772
779
|
}
|
|
780
|
+
onClose() {
|
|
781
|
+
this.closeProfileMenu.emit();
|
|
782
|
+
}
|
|
773
783
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiUserProfileCardComponent, deps: [{ token: i1.UserService }, { token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
774
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiUserProfileCardComponent, selector: "eui-user-profile-card", inputs: { impersonateLabel: "impersonateLabel", showDetailsLabel: "showDetailsLabel", avatarUrl: "avatarUrl", isShowAvatarInitials: "isShowAvatarInitials" }, outputs: { showProfileInfo: "showProfileInfo" }, 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 <div *ngIf=\"isShowAvatarInitials; else defaultAvatar\" class=\"eui-user-profile-card__avatar-initials\">\n {{ avatarInitials }}\n </div>\n <ng-template #defaultAvatar>\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile-card__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile-card__avatar--online' : 'eui-user-profile-card__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile-card__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </ng-template>\n </div>\n <div class=\"eui-user-profile-card__userInfos\">\n <div class=\"eui-u-font-size-xl eui-u-mb-s\">{{ userState.fullName }}</div>\n <div class=\"eui-user-profile-card__userInfos-item\">\n {{ userState.function }}\n </div>\n <div class=\"eui-user-profile-card__userInfos-item\">\n {{ userState.organisation.code }}\n </div>\n </div>\n <button euiButton euiIconButton euiInfo euiSizeS class=\"eui-u-ml-auto\" (click)=\"onShowInfoClick()\" title=\"{{ showDetailsLabel }}\">\n
|
|
784
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiUserProfileCardComponent, selector: "eui-user-profile-card", inputs: { impersonateLabel: "impersonateLabel", showDetailsLabel: "showDetailsLabel", avatarUrl: "avatarUrl", isShowAvatarInitials: "isShowAvatarInitials" }, 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 <div *ngIf=\"isShowAvatarInitials; else defaultAvatar\" class=\"eui-user-profile-card__avatar-initials\">\n {{ avatarInitials }}\n </div>\n <ng-template #defaultAvatar>\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile-card__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile-card__avatar--online' : 'eui-user-profile-card__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile-card__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </ng-template>\n </div>\n <div class=\"eui-user-profile-card__userInfos\">\n <div class=\"eui-u-font-size-xl eui-u-mb-s\">{{ userState.fullName }}</div>\n <div class=\"eui-user-profile-card__userInfos-item\">\n {{ userState.function }}\n </div>\n <div 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=\"(asService.state$ | async).impersonatedUserInfos\">\n <div class=\"eui-user-profile-card__impersonateInfos\">\n <div>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName }}</div>\n <div class=\"eui-u-mt-2xs\">{{ impersonateLabel }}</div>\n <div class=\"eui-u-mt-2xs\">\n <strong>{{ (asService.state$ | async).impersonatedUserInfos }}</strong>\n </div>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
775
785
|
}
|
|
776
786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiUserProfileCardComponent, decorators: [{
|
|
777
787
|
type: Component,
|
|
778
|
-
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 <div *ngIf=\"isShowAvatarInitials; else defaultAvatar\" class=\"eui-user-profile-card__avatar-initials\">\n {{ avatarInitials }}\n </div>\n <ng-template #defaultAvatar>\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile-card__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile-card__avatar--online' : 'eui-user-profile-card__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile-card__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </ng-template>\n </div>\n <div class=\"eui-user-profile-card__userInfos\">\n <div class=\"eui-u-font-size-xl eui-u-mb-s\">{{ userState.fullName }}</div>\n <div class=\"eui-user-profile-card__userInfos-item\">\n {{ userState.function }}\n </div>\n <div class=\"eui-user-profile-card__userInfos-item\">\n {{ userState.organisation.code }}\n </div>\n </div>\n <button euiButton euiIconButton euiInfo euiSizeS class=\"eui-u-ml-auto\" (click)=\"onShowInfoClick()\" title=\"{{ showDetailsLabel }}\">\n
|
|
788
|
+
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 <div *ngIf=\"isShowAvatarInitials; else defaultAvatar\" class=\"eui-user-profile-card__avatar-initials\">\n {{ avatarInitials }}\n </div>\n <ng-template #defaultAvatar>\n <div\n *ngIf=\"!avatarUrl\"\n class=\"eui-user-profile-card__avatar\"\n [ngClass]=\"isOnline ? 'eui-user-profile-card__avatar--online' : 'eui-user-profile-card__avatar--offline'\"></div>\n\n <div *ngIf=\"avatarUrl\" class=\"eui-user-profile-card__avatar eui-u-svg\">\n <img [src]=\"avatarUrl\" alt=\"avatar\" />\n </div>\n </ng-template>\n </div>\n <div class=\"eui-user-profile-card__userInfos\">\n <div class=\"eui-u-font-size-xl eui-u-mb-s\">{{ userState.fullName }}</div>\n <div class=\"eui-user-profile-card__userInfos-item\">\n {{ userState.function }}\n </div>\n <div 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=\"(asService.state$ | async).impersonatedUserInfos\">\n <div class=\"eui-user-profile-card__impersonateInfos\">\n <div>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName }}</div>\n <div class=\"eui-u-mt-2xs\">{{ impersonateLabel }}</div>\n <div class=\"eui-u-mt-2xs\">\n <strong>{{ (asService.state$ | async).impersonatedUserInfos }}</strong>\n </div>\n </div>\n</ng-container>\n" }]
|
|
779
789
|
}], ctorParameters: function () { return [{ type: i1.UserService }, { type: i1.EuiAppShellService }]; }, propDecorators: { cssClasses: [{
|
|
780
790
|
type: HostBinding,
|
|
781
791
|
args: ['class']
|
|
@@ -789,6 +799,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4",
|
|
|
789
799
|
type: Input
|
|
790
800
|
}], showProfileInfo: [{
|
|
791
801
|
type: Output
|
|
802
|
+
}], closeProfileMenu: [{
|
|
803
|
+
type: Output
|
|
792
804
|
}] } });
|
|
793
805
|
|
|
794
806
|
const COMPONENTS$3 = [EuiUserProfileComponent, EuiUserProfileMenuComponent, EuiUserProfileMenuItemComponent, EuiUserProfileCardComponent];
|
|
@@ -1271,6 +1283,7 @@ class EuiToolbarItemUserProfileComponent {
|
|
|
1271
1283
|
this.class = 'eui-toolbar-item-user-profile';
|
|
1272
1284
|
this.welcomeLabel = 'Welcome';
|
|
1273
1285
|
this.impersonateLabel = 'impersonating';
|
|
1286
|
+
this._hasTabNavigation = false;
|
|
1274
1287
|
this._hasWelcomeLabel = true;
|
|
1275
1288
|
this._isShowUserInfos = true;
|
|
1276
1289
|
this._isShowAvatarInitials = false;
|
|
@@ -1293,17 +1306,29 @@ class EuiToolbarItemUserProfileComponent {
|
|
|
1293
1306
|
set isShowAvatarInitials(value) {
|
|
1294
1307
|
this._isShowAvatarInitials = coerceBooleanProperty(value);
|
|
1295
1308
|
}
|
|
1309
|
+
get hasTabNavigation() {
|
|
1310
|
+
return this._hasTabNavigation;
|
|
1311
|
+
}
|
|
1312
|
+
set hasTabNavigation(value) {
|
|
1313
|
+
this._hasTabNavigation = coerceBooleanProperty(value);
|
|
1314
|
+
}
|
|
1315
|
+
closeUserProfileDropdown() {
|
|
1316
|
+
this.userProfile.closeDropdown();
|
|
1317
|
+
}
|
|
1296
1318
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiToolbarItemUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1297
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiToolbarItemUserProfileComponent, selector: "eui-toolbar-item-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", hasWelcomeLabel: "hasWelcomeLabel", isShowUserInfos: "isShowUserInfos", isShowAvatarInitials: "isShowAvatarInitials" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "userProfileMenu", predicate: i0.forwardRef(function () { return EuiUserProfileMenuComponent; }) }], ngImport: i0, template: "<eui-user-profile\n euiUserProfileSizeS\n [hasWelcomeLabel]=\"hasWelcomeLabel\"\n [welcomeLabel]=\"welcomeLabel\"\n [impersonateLabel]=\"impersonateLabel\"\n [avatarUrl]=\"avatarUrl\"\n [hasMenu]=\"userProfileMenu.length !== 0\"\n [isShowUserInfos]=\"isShowUserInfos\"\n [isShowAvatarInitials]=\"isShowAvatarInitials\">\n <ng-content select=\"eui-user-profile-menu\"></ng-content>\n</eui-user-profile>\n", dependencies: [{ kind: "component", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "hasMenu", "isShowUserInfos", "hasWelcomeLabel", "euiUserProfileSizeS", "isShowAvatarInitials", "hasTabNavigation"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1319
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiToolbarItemUserProfileComponent, selector: "eui-toolbar-item-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", hasWelcomeLabel: "hasWelcomeLabel", isShowUserInfos: "isShowUserInfos", isShowAvatarInitials: "isShowAvatarInitials", hasTabNavigation: "hasTabNavigation" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "userProfileMenu", predicate: i0.forwardRef(function () { return EuiUserProfileMenuComponent; }) }], viewQueries: [{ propertyName: "userProfile", first: true, predicate: ["userProfile"], descendants: true }], ngImport: i0, template: "<eui-user-profile\n euiUserProfileSizeS\n [hasWelcomeLabel]=\"hasWelcomeLabel\"\n [welcomeLabel]=\"welcomeLabel\"\n [impersonateLabel]=\"impersonateLabel\"\n [avatarUrl]=\"avatarUrl\"\n [hasMenu]=\"userProfileMenu.length !== 0\"\n [isShowUserInfos]=\"isShowUserInfos\"\n [isShowAvatarInitials]=\"isShowAvatarInitials\"\n [hasTabNavigation]=\"hasTabNavigation\"\n #userProfile>\n <ng-content select=\"eui-user-profile-menu\"></ng-content>\n</eui-user-profile>\n", dependencies: [{ kind: "component", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: ["welcomeLabel", "impersonateLabel", "avatarUrl", "hasMenu", "isShowUserInfos", "hasWelcomeLabel", "euiUserProfileSizeS", "isShowAvatarInitials", "hasTabNavigation"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1298
1320
|
}
|
|
1299
1321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiToolbarItemUserProfileComponent, decorators: [{
|
|
1300
1322
|
type: Component,
|
|
1301
|
-
args: [{ selector: 'eui-toolbar-item-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-user-profile\n euiUserProfileSizeS\n [hasWelcomeLabel]=\"hasWelcomeLabel\"\n [welcomeLabel]=\"welcomeLabel\"\n [impersonateLabel]=\"impersonateLabel\"\n [avatarUrl]=\"avatarUrl\"\n [hasMenu]=\"userProfileMenu.length !== 0\"\n [isShowUserInfos]=\"isShowUserInfos\"\n [isShowAvatarInitials]=\"isShowAvatarInitials\">\n <ng-content select=\"eui-user-profile-menu\"></ng-content>\n</eui-user-profile>\n" }]
|
|
1323
|
+
args: [{ selector: 'eui-toolbar-item-user-profile', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-user-profile\n euiUserProfileSizeS\n [hasWelcomeLabel]=\"hasWelcomeLabel\"\n [welcomeLabel]=\"welcomeLabel\"\n [impersonateLabel]=\"impersonateLabel\"\n [avatarUrl]=\"avatarUrl\"\n [hasMenu]=\"userProfileMenu.length !== 0\"\n [isShowUserInfos]=\"isShowUserInfos\"\n [isShowAvatarInitials]=\"isShowAvatarInitials\"\n [hasTabNavigation]=\"hasTabNavigation\"\n #userProfile>\n <ng-content select=\"eui-user-profile-menu\"></ng-content>\n</eui-user-profile>\n" }]
|
|
1302
1324
|
}], propDecorators: { class: [{
|
|
1303
1325
|
type: HostBinding
|
|
1304
1326
|
}], userProfileMenu: [{
|
|
1305
1327
|
type: ContentChildren,
|
|
1306
1328
|
args: [forwardRef(() => EuiUserProfileMenuComponent)]
|
|
1329
|
+
}], userProfile: [{
|
|
1330
|
+
type: ViewChild,
|
|
1331
|
+
args: ['userProfile']
|
|
1307
1332
|
}], welcomeLabel: [{
|
|
1308
1333
|
type: Input
|
|
1309
1334
|
}], impersonateLabel: [{
|
|
@@ -1316,6 +1341,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4",
|
|
|
1316
1341
|
type: Input
|
|
1317
1342
|
}], isShowAvatarInitials: [{
|
|
1318
1343
|
type: Input
|
|
1344
|
+
}], hasTabNavigation: [{
|
|
1345
|
+
type: Input
|
|
1319
1346
|
}] } });
|
|
1320
1347
|
|
|
1321
1348
|
class EuiToolbarItemSearchComponent {
|
|
@@ -1694,6 +1721,7 @@ class EuiAppComponent {
|
|
|
1694
1721
|
isIE11: deviceInfo.browser === 'IE' && deviceInfo.browser_version === '11.0',
|
|
1695
1722
|
isFF: deviceInfo.browser === 'Firefox',
|
|
1696
1723
|
},
|
|
1724
|
+
appBaseFontSize: this.asService.getBaseFontSize(),
|
|
1697
1725
|
});
|
|
1698
1726
|
this.asService
|
|
1699
1727
|
.getState('wrapperClasses')
|
|
@@ -3099,11 +3127,11 @@ class EuiNotificationItemV2Component {
|
|
|
3099
3127
|
consumeEvent(event);
|
|
3100
3128
|
}
|
|
3101
3129
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiNotificationItemV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3102
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: { markAsReadLabel: "markAsReadLabel", item: "item", dateFormat: "dateFormat", isShowMarkAsRead: "isShowMarkAsRead" }, outputs: { itemClick: "itemClick", itemMarkAsRead: "itemMarkAsRead" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div\n class=\"eui-notification-item-content\"\n (click)=\"onItemClick()\"\n [ngClass]=\"{ 'eui-u-bg-color-white': item.metadata?.read || !item.metadata }\">\n <div class=\"eui-notification-item-content-top eui-u-font-size-s\">\n <div *ngIf=\"item.metadata?.date\" class=\"eui-notification-item-content-top__date\">\n <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n <!-- TODO v15 replace by eui-icon-svg -->\n <span\n class=\"eui-icon eui-icon-bell eui-u-font-size-m\"\n [ngClass]=\"{\n 'eui-u-color-info-lighter time__icon--rotated': !item.metadata?.read,\n 'eui-u-color-grey-20': item.metadata?.read\n }\"></span>\n <span\n *ngIf=\"item.metadata?.new\"\n class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-size-h9 eui-icon eui-icon-circle\"></span>\n </span>\n <span class=\"eui-u-color-grey-dark\">{{ item.metadata?.date | date: dateFormat }}</span>\n </div>\n <div *ngIf=\"item.metadata?.important\" class=\"eui-u-font-bold eui-u-color-grey-dark\">\n <eui-icon-svg icon=\"eui-exclamation\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n </div>\n </div>\n <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n <ng-template [ngIf]=\"item.metadata?.url\">\n <a href=\"{{ item.metadata.url }}\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </a>\n </ng-template>\n\n <ng-template [ngIf]=\"item.metadata?.urlExternal\">\n <a\n href=\"{{ item.metadata.urlExternal }}\"\n [target]=\"!item.metadata.urlExternalTarget ? '_black' : item.metadata.urlExternalTarget\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </a>\n </ng-template>\n\n <ng-template [ngIf]=\"!item.metadata?.url && !item.metadata?.urlExternal\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </ng-template>\n </span>\n <div class=\"eui-notification-item-content-bottom\">\n <a\n class=\"eui-u-text-link\"\n *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\"\n href=\"javascript:void(0)\"\n (click)=\"onItemMarkAsRead($event)\">\n {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n </a>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.EuiTruncatePipe, name: "euiTruncate" }] }); }
|
|
3130
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: { markAsReadLabel: "markAsReadLabel", item: "item", dateFormat: "dateFormat", isShowMarkAsRead: "isShowMarkAsRead" }, outputs: { itemClick: "itemClick", itemMarkAsRead: "itemMarkAsRead" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div\n class=\"eui-notification-item-content\"\n (click)=\"onItemClick()\"\n [ngClass]=\"{ 'eui-u-bg-color-white': item.metadata?.read || !item.metadata }\">\n <div class=\"eui-notification-item-content-top eui-u-font-size-s\">\n <div *ngIf=\"item.metadata?.date\" class=\"eui-notification-item-content-top__date\">\n <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n <!-- TODO v15 replace by eui-icon-svg -->\n <span\n class=\"eui-icon eui-icon-bell eui-u-font-size-m\"\n [ngClass]=\"{\n 'eui-u-color-info-lighter time__icon--rotated': !item.metadata?.read,\n 'eui-u-color-grey-20': item.metadata?.read\n }\"></span>\n <span\n *ngIf=\"item.metadata?.new\"\n class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-size-h9 eui-icon eui-icon-circle\"></span>\n </span>\n <span class=\"eui-u-color-grey-dark\">{{ item.metadata?.date | date: dateFormat }}</span>\n </div>\n <div *ngIf=\"item.metadata?.important\" class=\"eui-u-font-bold eui-u-color-grey-dark\">\n <eui-icon-svg icon=\"eui-exclamation\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n </div>\n </div>\n <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n <ng-template [ngIf]=\"item.metadata?.url\">\n <a href=\"{{ item.metadata.url }}\" tabIndex=\"0\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </a>\n </ng-template>\n\n <ng-template [ngIf]=\"item.metadata?.urlExternal\">\n <a\n href=\"{{ item.metadata.urlExternal }}\"\n [target]=\"!item.metadata.urlExternalTarget ? '_black' : item.metadata.urlExternalTarget\" tabIndex=\"0\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </a>\n </ng-template>\n\n <ng-template [ngIf]=\"!item.metadata?.url && !item.metadata?.urlExternal\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </ng-template>\n </span>\n <div class=\"eui-notification-item-content-bottom\">\n <a\n class=\"eui-u-text-link\"\n *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\"\n href=\"javascript:void(0)\"\n (click)=\"onItemMarkAsRead($event)\" tabIndex=\"0\">\n {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n </a>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.EuiTruncatePipe, name: "euiTruncate" }] }); }
|
|
3103
3131
|
}
|
|
3104
3132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiNotificationItemV2Component, decorators: [{
|
|
3105
3133
|
type: Component,
|
|
3106
|
-
args: [{ selector: 'eui-notification-item-v2', template: "<div\n class=\"eui-notification-item-content\"\n (click)=\"onItemClick()\"\n [ngClass]=\"{ 'eui-u-bg-color-white': item.metadata?.read || !item.metadata }\">\n <div class=\"eui-notification-item-content-top eui-u-font-size-s\">\n <div *ngIf=\"item.metadata?.date\" class=\"eui-notification-item-content-top__date\">\n <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n <!-- TODO v15 replace by eui-icon-svg -->\n <span\n class=\"eui-icon eui-icon-bell eui-u-font-size-m\"\n [ngClass]=\"{\n 'eui-u-color-info-lighter time__icon--rotated': !item.metadata?.read,\n 'eui-u-color-grey-20': item.metadata?.read\n }\"></span>\n <span\n *ngIf=\"item.metadata?.new\"\n class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-size-h9 eui-icon eui-icon-circle\"></span>\n </span>\n <span class=\"eui-u-color-grey-dark\">{{ item.metadata?.date | date: dateFormat }}</span>\n </div>\n <div *ngIf=\"item.metadata?.important\" class=\"eui-u-font-bold eui-u-color-grey-dark\">\n <eui-icon-svg icon=\"eui-exclamation\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n </div>\n </div>\n <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n <ng-template [ngIf]=\"item.metadata?.url\">\n <a href=\"{{ item.metadata.url }}\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </a>\n </ng-template>\n\n <ng-template [ngIf]=\"item.metadata?.urlExternal\">\n <a\n href=\"{{ item.metadata.urlExternal }}\"\n [target]=\"!item.metadata.urlExternalTarget ? '_black' : item.metadata.urlExternalTarget\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </a>\n </ng-template>\n\n <ng-template [ngIf]=\"!item.metadata?.url && !item.metadata?.urlExternal\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </ng-template>\n </span>\n <div class=\"eui-notification-item-content-bottom\">\n <a\n class=\"eui-u-text-link\"\n *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\"\n href=\"javascript:void(0)\"\n (click)=\"onItemMarkAsRead($event)\">\n {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n </a>\n </div>\n</div>\n" }]
|
|
3134
|
+
args: [{ selector: 'eui-notification-item-v2', template: "<div\n class=\"eui-notification-item-content\"\n (click)=\"onItemClick()\"\n [ngClass]=\"{ 'eui-u-bg-color-white': item.metadata?.read || !item.metadata }\">\n <div class=\"eui-notification-item-content-top eui-u-font-size-s\">\n <div *ngIf=\"item.metadata?.date\" class=\"eui-notification-item-content-top__date\">\n <span class=\"eui-notification-item-content-top__date-icon eui-u-mr-s\">\n <!-- TODO v15 replace by eui-icon-svg -->\n <span\n class=\"eui-icon eui-icon-bell eui-u-font-size-m\"\n [ngClass]=\"{\n 'eui-u-color-info-lighter time__icon--rotated': !item.metadata?.read,\n 'eui-u-color-grey-20': item.metadata?.read\n }\"></span>\n <span\n *ngIf=\"item.metadata?.new\"\n class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-size-h9 eui-icon eui-icon-circle\"></span>\n </span>\n <span class=\"eui-u-color-grey-dark\">{{ item.metadata?.date | date: dateFormat }}</span>\n </div>\n <div *ngIf=\"item.metadata?.important\" class=\"eui-u-font-bold eui-u-color-grey-dark\">\n <eui-icon-svg icon=\"eui-exclamation\" fillColor=\"danger\" class=\"eui-u-ml-xs\"></eui-icon-svg>\n </div>\n </div>\n <span class=\"eui-notification-item-content-middle eui-u-cursor-pointer\">\n <ng-template [ngIf]=\"item.metadata?.url\">\n <a href=\"{{ item.metadata.url }}\" tabIndex=\"0\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </a>\n </ng-template>\n\n <ng-template [ngIf]=\"item.metadata?.urlExternal\">\n <a\n href=\"{{ item.metadata.urlExternal }}\"\n [target]=\"!item.metadata.urlExternalTarget ? '_black' : item.metadata.urlExternalTarget\" tabIndex=\"0\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </a>\n </ng-template>\n\n <ng-template [ngIf]=\"!item.metadata?.url && !item.metadata?.urlExternal\">\n <div\n class=\"eui-notification-item-content-middle__label\"\n [ngClass]=\"{ 'eui-u-font-bold': !item.metadata || (item.metadata && !item.metadata.read) }\">\n {{ item.label | translate | euiTruncate: 200 }}\n </div>\n <div\n *ngIf=\"item.subLabel\"\n class=\"eui-notification-item-content-middle__sub-label\"\n [innerHTML]=\"item.subLabel | translate | euiTruncate: 200\"></div>\n </ng-template>\n </span>\n <div class=\"eui-notification-item-content-bottom\">\n <a\n class=\"eui-u-text-link\"\n *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\"\n href=\"javascript:void(0)\"\n (click)=\"onItemMarkAsRead($event)\" tabIndex=\"0\">\n {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n </a>\n </div>\n</div>\n" }]
|
|
3107
3135
|
}], propDecorators: { string: [{
|
|
3108
3136
|
type: HostBinding,
|
|
3109
3137
|
args: ['class']
|
|
@@ -3275,11 +3303,11 @@ class EuiNotificationsV2Component {
|
|
|
3275
3303
|
return unreadNotifications.length;
|
|
3276
3304
|
}
|
|
3277
3305
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiNotificationsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3278
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiNotificationsV2Component, selector: "eui-notifications-v2", inputs: { count: "count", unreadCount: "unreadCount", unreadSinceLastCheckCount: "unreadSinceLastCheckCount", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", headerHideLabel: "headerHideLabel", headerUnreadSinceLastCheckCountLabel: "headerUnreadSinceLastCheckCountLabel", headerUnreadCountLabel: "headerUnreadCountLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: "noNotificationFoundLink", isShowMarkAsRead: "isShowMarkAsRead", isShowViewAllAction: "isShowViewAllAction", isHidePanelOnViewAllAction: "isHidePanelOnViewAllAction", customUnreadCount: "customUnreadCount", isShowMarkAllAsReadButton: "isShowMarkAllAsReadButton", isShowSettingsButton: "isShowSettingsButton", isShowRefreshButton: "isShowRefreshButton" }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg\n class=\"eui-notifications-v2__trigger\"\n role=\"button\"\n size=\"m\"\n icon=\"eui-notifications\"\n fillColor=\"grey-5\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n tabindex=\"0\">\n <eui-badge *ngIf=\"unreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg>\n\n<!-- FROM MWP -->\n\n<!-- <div class=\"mywp-notification-qv\">\n <div class=\"mywp-notification-qv__header\">\n <div class=\"mywp-notification-qv__header-left\">\n <h5 class=\"eui-u-font-bold\">\n {{ 'notif.MY-NOTIFICATION' | translate }}\n </h5>\n <ul>\n <li>\n <strong>{{ unreadIdsSinceLastCheck.length }}</strong>\n {{ 'notif.SV-NEW-COUNT-LABEL' | translate }}\n </li>\n <li>\n <span>{{ unreadCount }}</span>\n {{ 'notif.SV-UNREAD-COUNT-LABEL' | translate }}\n </li>\n </ul>\n </div>\n <div class=\"mywp-notification-qv__header-right\">\n <span class=\"hide\">\n <a (click)=\"hideSidebar($event)\">\n {{ 'notif.SV-HIDE' | translate }}\n </a>\n <span class=\"ml-2 eui-u-font-size-xs eui-icon eui-icon-chevron-right\"></span>\n </span>\n </div>\n </div>\n <div class=\"mywp-notification-qv__actions-bar\">\n <a *ngIf=\"items.length > 0\" (click)=\"onMarkAllAsRead($event)\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n <a (click)=\"onRefreshClick($event)\" class=\"d-flex align-items-center\">\n <span class=\"eui-icon eui-icon-refresh mr-1\"></span>\n {{ 'notif.SV-REFRESH' | translate }}\n </a>\n </div>\n <div class=\"mywp-notification-qv__content\" *ngIf=\"items && items.length > 0\">\n <ul>\n <li *ngFor=\"let item of items; trackBy: trackById\" [ngClass]=\"{ 'eui-u-bg-color-info-lightester-2': !item.metadata.read }\">\n <div class=\"mywp-notification-qv__content-item-top eui-u-font-size-h7\">\n <div class=\"time\">\n <span class=\"time__icon mr-2\">\n <span class=\"eui-icon eui-icon-bell eui-u-font-size-h5\" [ngClass]=\"{ 'eui-u-color-info-lighter time__icon--rotated': !item.metadata.read, 'eui-u-color-grey-light': item.metadata.read }\"></span>\n <span *ngIf=\"isNew(item)\" class=\"time__icon-dot eui-u-color-danger-light eui-u-font-size-h9 eui-icon eui-icon-circle\"></span>\n </span>\n <span class=\"eui-u-color-grey-dark\">{{ item.metadata.date }}</span>\n </div>\n <div *ngIf=\"item.metadata.important\" class=\"d-flex align-items-center eui-u-font-bold eui-u-color-grey-dark\">\n {{ 'notif.SV-IMPORTANT-LABEL' | translate }}\n <span class=\"ml-1 eui-u-color-danger-dark eui-icon eui-icon-exclamation\"></span>\n </div>\n </div>\n <span (click)=\"onItemClick(item)\" class=\"mywp-notification-qv__content-item-middle eui-u-cursor-pointer\" [ngClass]=\"{ 'eui-u-font-bold': !item.metadata.read }\">\n {{ item.label }}\n </span>\n <div class=\"mywp-notification-qv__content-item-bottom\">\n <a *ngIf=\"!item.metadata.read\" (click)=\"onMarkAsRead(item)\">{{ 'notif.MARK-AS-READ' | translate }}</a>\n </div>\n </li>\n </ul>\n </div>\n <div class=\"mywp-notification-qv__footer\" *ngIf=\"items && items.length > 0\">\n <a *ngIf=\"items.length > 0\" (click)=\"onViewAll($event)\">{{ 'notif.VIEW-ALL-NOTIFICATIONS' | translate }}</a>\n </div>\n</div> -->\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications-v2__header\">\n <div class=\"eui-notifications-v2__header-title\">\n <div class=\"eui-notifications-v2__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n </div>\n\n <div class=\"eui-notifications-v2__header-title-actions\">\n <span class=\"hide\">\n <a (click)=\"onHide()\" class=\"eui-u-text-link\">\n {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n </a>\n <span class=\"ml-2 eui-u-font-size-xs eui-icon eui-icon-chevron-right\"></span>\n </span>\n </div>\n </div>\n\n <div class=\"eui-notifications-v2__header-subinfos-bar\">\n <strong>{{ unreadSinceLastCheckCount }}</strong>\n <span class=\"eui-u-ml-xs\">{{\n headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n }}</span>\n\n <span class=\"eui-u-ml-xs\">|</span>\n\n <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n </div>\n\n <div class=\"eui-notifications-v2__header-subactions-bar\">\n <a *ngIf=\"items.length > 0\" (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\">\n <span class=\"eui-u-flex\">\n <span class=\"eui-icon eui-icon-refresh mr-1\"></span>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n <eui-notification-item-v2\n *ngFor=\"let item of items; trackBy: trackByFn\"\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item-v2>\n </ul>\n </eui-overlay-body>\n\n <eui-overlay-footer>\n <ng-template [ngIf]=\"items?.length > 0\">\n <strong\n ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n }}</a></strong\n >\n </ng-template>\n <ng-template [ngIf]=\"items?.length === 0\">\n <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n </ng-template>\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{padding:0}.eui-overlay-footer{background-color:var(--eui-base-color-white)}.eui-notifications-items{margin:0;padding:0}.eui-notifications-v2__trigger{cursor:pointer;margin-top:var(--eui-base-spacing-xs);margin-left:var(--eui-base-spacing-s)}.eui-notifications-v2__trigger:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:5px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-notifications-v2__header{border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;flex-direction:column;display:flex;width:100%}.eui-notifications-v2__header-title{display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications-v2__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-notifications-v2__header-subinfos-bar,.eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-info-10);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{display:flex;margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$3.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$3.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$3.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "position", "width", "fixedWidth"] }, { kind: "component", type: i4$2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i2$2.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: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3306
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: EuiNotificationsV2Component, selector: "eui-notifications-v2", inputs: { count: "count", unreadCount: "unreadCount", unreadSinceLastCheckCount: "unreadSinceLastCheckCount", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", headerHideLabel: "headerHideLabel", headerUnreadSinceLastCheckCountLabel: "headerUnreadSinceLastCheckCountLabel", headerUnreadCountLabel: "headerUnreadCountLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: "noNotificationFoundLink", isShowMarkAsRead: "isShowMarkAsRead", isShowViewAllAction: "isShowViewAllAction", isHidePanelOnViewAllAction: "isHidePanelOnViewAllAction", customUnreadCount: "customUnreadCount", isShowMarkAllAsReadButton: "isShowMarkAllAsReadButton", isShowSettingsButton: "isShowSettingsButton", isShowRefreshButton: "isShowRefreshButton" }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg\n class=\"eui-notifications-v2__trigger\"\n role=\"button\"\n size=\"m\"\n icon=\"eui-notifications\"\n fillColor=\"grey-5\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n tabindex=\"0\">\n <eui-badge *ngIf=\"unreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications-v2__header\">\n <div class=\"eui-notifications-v2__header-title\">\n <div class=\"eui-notifications-v2__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n </div>\n\n <div class=\"eui-notifications-v2__header-title-actions\">\n <span class=\"hide\">\n <a (click)=\"onHide()\" class=\"eui-u-text-link\" role=\"button\" tabIndex=\"0\">\n {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n </a>\n <span class=\"ml-2 eui-u-font-size-xs eui-icon eui-icon-chevron-right\"></span>\n </span>\n </div>\n </div>\n\n <div class=\"eui-notifications-v2__header-subinfos-bar\">\n <strong>{{ unreadSinceLastCheckCount }}</strong>\n <span class=\"eui-u-ml-xs\">{{\n headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n }}</span>\n\n <span class=\"eui-u-ml-xs\">|</span>\n\n <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n </div>\n\n <div class=\"eui-notifications-v2__header-subactions-bar\">\n <a *ngIf=\"items.length > 0\" (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n <span class=\"eui-u-flex\">\n <span class=\"eui-icon eui-icon-refresh mr-1\"></span>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n <eui-notification-item-v2\n *ngFor=\"let item of items; trackBy: trackByFn\"\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item-v2>\n </ul>\n </eui-overlay-body>\n\n <eui-overlay-footer>\n <ng-template [ngIf]=\"items?.length > 0\">\n <strong\n ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n }}</a></strong\n >\n </ng-template>\n <ng-template [ngIf]=\"items?.length === 0\">\n <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n </ng-template>\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{padding:0}.eui-overlay-footer{background-color:var(--eui-base-color-white)}.eui-notifications-items{margin:0;padding:0}.eui-notifications-v2__trigger{cursor:pointer;margin-top:var(--eui-base-spacing-xs);margin-left:var(--eui-base-spacing-s)}.eui-notifications-v2__trigger:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:5px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-notifications-v2__header{border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;flex-direction:column;display:flex;width:100%}.eui-notifications-v2__header-title{display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications-v2__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-notifications-v2__header-subinfos-bar,.eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-info-10);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{display:flex;margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$3.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$3.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$3.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "position", "width", "fixedWidth"] }, { kind: "component", type: i4$2.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i2$2.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: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3279
3307
|
}
|
|
3280
3308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: EuiNotificationsV2Component, decorators: [{
|
|
3281
3309
|
type: Component,
|
|
3282
|
-
args: [{ selector: 'eui-notifications-v2', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-icon-svg\n class=\"eui-notifications-v2__trigger\"\n role=\"button\"\n size=\"m\"\n icon=\"eui-notifications\"\n fillColor=\"grey-5\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n tabindex=\"0\">\n <eui-badge *ngIf=\"unreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg>\n\n<!-- FROM MWP -->\n\n<!-- <div class=\"mywp-notification-qv\">\n <div class=\"mywp-notification-qv__header\">\n <div class=\"mywp-notification-qv__header-left\">\n <h5 class=\"eui-u-font-bold\">\n {{ 'notif.MY-NOTIFICATION' | translate }}\n </h5>\n <ul>\n <li>\n <strong>{{ unreadIdsSinceLastCheck.length }}</strong>\n {{ 'notif.SV-NEW-COUNT-LABEL' | translate }}\n </li>\n <li>\n <span>{{ unreadCount }}</span>\n {{ 'notif.SV-UNREAD-COUNT-LABEL' | translate }}\n </li>\n </ul>\n </div>\n <div class=\"mywp-notification-qv__header-right\">\n <span class=\"hide\">\n <a (click)=\"hideSidebar($event)\">\n {{ 'notif.SV-HIDE' | translate }}\n </a>\n <span class=\"ml-2 eui-u-font-size-xs eui-icon eui-icon-chevron-right\"></span>\n </span>\n </div>\n </div>\n <div class=\"mywp-notification-qv__actions-bar\">\n <a *ngIf=\"items.length > 0\" (click)=\"onMarkAllAsRead($event)\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n <a (click)=\"onRefreshClick($event)\" class=\"d-flex align-items-center\">\n <span class=\"eui-icon eui-icon-refresh mr-1\"></span>\n {{ 'notif.SV-REFRESH' | translate }}\n </a>\n </div>\n <div class=\"mywp-notification-qv__content\" *ngIf=\"items && items.length > 0\">\n <ul>\n <li *ngFor=\"let item of items; trackBy: trackById\" [ngClass]=\"{ 'eui-u-bg-color-info-lightester-2': !item.metadata.read }\">\n <div class=\"mywp-notification-qv__content-item-top eui-u-font-size-h7\">\n <div class=\"time\">\n <span class=\"time__icon mr-2\">\n <span class=\"eui-icon eui-icon-bell eui-u-font-size-h5\" [ngClass]=\"{ 'eui-u-color-info-lighter time__icon--rotated': !item.metadata.read, 'eui-u-color-grey-light': item.metadata.read }\"></span>\n <span *ngIf=\"isNew(item)\" class=\"time__icon-dot eui-u-color-danger-light eui-u-font-size-h9 eui-icon eui-icon-circle\"></span>\n </span>\n <span class=\"eui-u-color-grey-dark\">{{ item.metadata.date }}</span>\n </div>\n <div *ngIf=\"item.metadata.important\" class=\"d-flex align-items-center eui-u-font-bold eui-u-color-grey-dark\">\n {{ 'notif.SV-IMPORTANT-LABEL' | translate }}\n <span class=\"ml-1 eui-u-color-danger-dark eui-icon eui-icon-exclamation\"></span>\n </div>\n </div>\n <span (click)=\"onItemClick(item)\" class=\"mywp-notification-qv__content-item-middle eui-u-cursor-pointer\" [ngClass]=\"{ 'eui-u-font-bold': !item.metadata.read }\">\n {{ item.label }}\n </span>\n <div class=\"mywp-notification-qv__content-item-bottom\">\n <a *ngIf=\"!item.metadata.read\" (click)=\"onMarkAsRead(item)\">{{ 'notif.MARK-AS-READ' | translate }}</a>\n </div>\n </li>\n </ul>\n </div>\n <div class=\"mywp-notification-qv__footer\" *ngIf=\"items && items.length > 0\">\n <a *ngIf=\"items.length > 0\" (click)=\"onViewAll($event)\">{{ 'notif.VIEW-ALL-NOTIFICATIONS' | translate }}</a>\n </div>\n</div> -->\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications-v2__header\">\n <div class=\"eui-notifications-v2__header-title\">\n <div class=\"eui-notifications-v2__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n </div>\n\n <div class=\"eui-notifications-v2__header-title-actions\">\n <span class=\"hide\">\n <a (click)=\"onHide()\" class=\"eui-u-text-link\">\n {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n </a>\n <span class=\"ml-2 eui-u-font-size-xs eui-icon eui-icon-chevron-right\"></span>\n </span>\n </div>\n </div>\n\n <div class=\"eui-notifications-v2__header-subinfos-bar\">\n <strong>{{ unreadSinceLastCheckCount }}</strong>\n <span class=\"eui-u-ml-xs\">{{\n headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n }}</span>\n\n <span class=\"eui-u-ml-xs\">|</span>\n\n <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n </div>\n\n <div class=\"eui-notifications-v2__header-subactions-bar\">\n <a *ngIf=\"items.length > 0\" (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\">\n <span class=\"eui-u-flex\">\n <span class=\"eui-icon eui-icon-refresh mr-1\"></span>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n <eui-notification-item-v2\n *ngFor=\"let item of items; trackBy: trackByFn\"\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item-v2>\n </ul>\n </eui-overlay-body>\n\n <eui-overlay-footer>\n <ng-template [ngIf]=\"items?.length > 0\">\n <strong\n ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n }}</a></strong\n >\n </ng-template>\n <ng-template [ngIf]=\"items?.length === 0\">\n <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n </ng-template>\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{padding:0}.eui-overlay-footer{background-color:var(--eui-base-color-white)}.eui-notifications-items{margin:0;padding:0}.eui-notifications-v2__trigger{cursor:pointer;margin-top:var(--eui-base-spacing-xs);margin-left:var(--eui-base-spacing-s)}.eui-notifications-v2__trigger:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:5px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-notifications-v2__header{border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;flex-direction:column;display:flex;width:100%}.eui-notifications-v2__header-title{display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications-v2__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-notifications-v2__header-subinfos-bar,.eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-info-10);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{display:flex;margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
|
|
3310
|
+
args: [{ selector: 'eui-notifications-v2', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-icon-svg\n class=\"eui-notifications-v2__trigger\"\n role=\"button\"\n size=\"m\"\n icon=\"eui-notifications\"\n fillColor=\"grey-5\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n tabindex=\"0\">\n <eui-badge *ngIf=\"unreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications-v2__header\">\n <div class=\"eui-notifications-v2__header-title\">\n <div class=\"eui-notifications-v2__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n </div>\n\n <div class=\"eui-notifications-v2__header-title-actions\">\n <span class=\"hide\">\n <a (click)=\"onHide()\" class=\"eui-u-text-link\" role=\"button\" tabIndex=\"0\">\n {{ headerHideLabel ? headerHideLabel : ('eui.HIDE' | translate) }}\n </a>\n <span class=\"ml-2 eui-u-font-size-xs eui-icon eui-icon-chevron-right\"></span>\n </span>\n </div>\n </div>\n\n <div class=\"eui-notifications-v2__header-subinfos-bar\">\n <strong>{{ unreadSinceLastCheckCount }}</strong>\n <span class=\"eui-u-ml-xs\">{{\n headerUnreadSinceLastCheckCountLabel ? headerUnreadSinceLastCheckCountLabel : ('eui.NEW-COUNT' | translate)\n }}</span>\n\n <span class=\"eui-u-ml-xs\">|</span>\n\n <span class=\"eui-u-ml-xs\">{{ unreadCount }}</span>\n <span class=\"eui-u-ml-xs\">{{ headerUnreadCountLabel ? headerUnreadCountLabel : ('eui.NEW-COUNT' | translate) }}</span>\n </div>\n\n <div class=\"eui-notifications-v2__header-subactions-bar\">\n <a *ngIf=\"items.length > 0\" (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n <span class=\"eui-u-flex\">\n <span class=\"eui-icon eui-icon-refresh mr-1\"></span>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n <eui-notification-item-v2\n *ngFor=\"let item of items; trackBy: trackByFn\"\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item-v2>\n </ul>\n </eui-overlay-body>\n\n <eui-overlay-footer>\n <ng-template [ngIf]=\"items?.length > 0\">\n <strong\n ><a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">{{\n viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate)\n }}</a></strong\n >\n </ng-template>\n <ng-template [ngIf]=\"items?.length === 0\">\n <div class=\"ux-notification__item-content\" *ngIf=\"!noNotificationFoundLink\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n <div class=\"ux-notification__item-content\" *ngIf=\"noNotificationFoundLink\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n </ng-template>\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{padding:0}.eui-overlay-footer{background-color:var(--eui-base-color-white)}.eui-notifications-items{margin:0;padding:0}.eui-notifications-v2__trigger{cursor:pointer;margin-top:var(--eui-base-spacing-xs);margin-left:var(--eui-base-spacing-s)}.eui-notifications-v2__trigger:focus{outline:2px solid var(--eui-base-color-accessible-focus)!important;outline-offset:5px;-moz-outline-radius:var(--eui-base-border-radius)!important;transition:outline .15s ease-in-out,border .15s ease-in-out}.eui-notifications-v2__header{border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;flex-direction:column;display:flex;width:100%}.eui-notifications-v2__header-title{display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications-v2__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-notifications-v2__header-subinfos-bar,.eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-info-10);border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;flex-direction:column;min-height:var(--eui-base-spacing-4xl);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);cursor:pointer}.eui-notification-item-content:hover{background-color:var(--eui-base-color-grey-5)!important}.eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-notification-item-content-top__date{display:flex;align-items:center}.eui-notification-item-content-top__date-icon{position:relative}.eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-notification-item-content-middle{display:flex;margin:var(--eui-base-spacing-2xs) 0}.eui-notification-item-content-middle__sub-label{margin-top:var(--eui-base-spacing-2xs)}.eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
|
|
3283
3311
|
}], propDecorators: { refreshClick: [{
|
|
3284
3312
|
type: Output
|
|
3285
3313
|
}], notificationsClick: [{
|