@eui/components 19.2.3-snapshot-1747224798876 → 19.2.3-snapshot-1747235808987
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/EuiNotificationsComponent.html +1 -82
- package/docs/components/EuiNotificationsV2Component.html +1 -1
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/fesm2022/eui-components-layout.mjs +26 -10
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/layout/eui-notifications/eui-notifications.component.d.ts +2 -1
- package/layout/eui-notifications/eui-notifications.component.d.ts.map +1 -1
- package/layout/eui-notifications-v2/eui-notifications.component.d.ts +2 -0
- package/layout/eui-notifications-v2/eui-notifications.component.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -2335,9 +2335,6 @@ class EuiNotificationsComponent {
|
|
|
2335
2335
|
this.isShowSettingsButton = true;
|
|
2336
2336
|
this.isShowRefreshButton = true;
|
|
2337
2337
|
}
|
|
2338
|
-
onHide() {
|
|
2339
|
-
this.isOverlayActive = false;
|
|
2340
|
-
}
|
|
2341
2338
|
onClicked(event) {
|
|
2342
2339
|
this.notificationsClick.emit();
|
|
2343
2340
|
consumeEvent(event);
|
|
@@ -2387,6 +2384,17 @@ class EuiNotificationsComponent {
|
|
|
2387
2384
|
trackByFn(index, item) {
|
|
2388
2385
|
return item.id;
|
|
2389
2386
|
}
|
|
2387
|
+
updateActiveState(isActive) {
|
|
2388
|
+
this.isOverlayActive = isActive;
|
|
2389
|
+
}
|
|
2390
|
+
getAriaLabel() {
|
|
2391
|
+
if (this.count) {
|
|
2392
|
+
return this.count > 1
|
|
2393
|
+
? ` You have ${this.count} notifications`
|
|
2394
|
+
: `You have ${this.count} notification`;
|
|
2395
|
+
}
|
|
2396
|
+
return 'Open notifications panel';
|
|
2397
|
+
}
|
|
2390
2398
|
_getUnreadCount() {
|
|
2391
2399
|
const unreadNotifications = this.items.filter((link) => {
|
|
2392
2400
|
if (link.metadata) {
|
|
@@ -2397,7 +2405,7 @@ class EuiNotificationsComponent {
|
|
|
2397
2405
|
return unreadNotifications.length;
|
|
2398
2406
|
}
|
|
2399
2407
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiNotificationsComponent, isStandalone: true, selector: "eui-notifications", inputs: { count: "count", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], customUnreadCount: ["customUnreadCount", "customUnreadCount", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", settingsClick: "settingsClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { listeners: { "body:click": "onHide()" }, properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-button\n class=\"eui-notifications__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\">\n @if (count) {\n <eui-badge euiDanger [maxCharCount]=\"2\">{{ count }}</eui-badge>\n }\n</eui-icon-button>\n\n<eui-overlay [isActive]=\"isOverlayActive\" class=\"eui-overlay-offset--width-30\">\n <eui-overlay-header>\n <div class=\"eui-notifications__header-title\">\n <div class=\"eui-notifications__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n @if (items) {\n <span\n class=\"eui-u-cursor-help eui-u-ml-s\"\n attr.aria-label=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\"\n title=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\">\n </span>\n }\n <eui-badge>{{ items.length }}</eui-badge>\n </div>\n </div>\n\n @if (items) {\n <div class=\"eui-notifications__header-actions\">\n @if (isShowMarkAllAsReadButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)\"\n title=\"{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}\"\n (click)=\"onMarkAllAsRead($event)\">\n <eui-icon-svg icon=\"checkmark-done:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowSettingsButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)\"\n title=\"{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}\"\n (click)=\"onSettings($event)\">\n <eui-icon-svg icon=\"settings:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowRefreshButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)\"\n title=\"{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}\"\n (click)=\"onRefresh($event)\">\n <eui-icon-svg icon=\"refresh:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n </div>\n }\n </eui-overlay-header>\n\n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; let i = $index; track $index) {\n <eui-notification-item\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item>\n }\n </ul>\n }\n </eui-overlay-body>\n\n @if ((items?.length > 0 && isShowViewAllAction) || items?.length === 0) {\n <eui-overlay-footer>\n @if (items?.length > 0 && isShowViewAllAction) {\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n }\n }\n </eui-overlay-footer>\n }\n</eui-overlay>\n", styles: [".eui-19 .eui-overlay-header{background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-divider)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-s-2xs);transform:scale(1.1)}.eui-19 .eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications__header-title{display:flex}.eui-19 .eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-19 .eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5$2.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i5$2.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i5$2.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i5$2.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiNotificationsComponent, isStandalone: true, selector: "eui-notifications", inputs: { count: "count", items: "items", unreadLabel: "unreadLabel", totalLabel: "totalLabel", markAsReadLabel: "markAsReadLabel", markAsUnReadLabel: "markAsUnReadLabel", markAllAsReadLabel: "markAllAsReadLabel", settingsLabel: "settingsLabel", refreshLabel: "refreshLabel", viewAllNotificationsLabel: "viewAllNotificationsLabel", headerTitleLabel: "headerTitleLabel", noNotificationFoundLabel: "noNotificationFoundLabel", nbUnreadCount: "nbUnreadCount", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], customUnreadCount: ["customUnreadCount", "customUnreadCount", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, 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-button\n class=\"eui-notifications__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n [ariaLabel]=\"getAriaLabel()\">\n @if (count) {\n <eui-badge euiDanger [maxCharCount]=\"2\">{{ count }}</eui-badge>\n }\n</eui-icon-button>\n\n@if (isOverlayActive) {\n <eui-overlay hasClosedOnClickOutside isActive class=\"eui-overlay-offset--width-30\" (activeState)=\"updateActiveState($event)\">\n <eui-overlay-header>\n <div class=\"eui-notifications__header-title\">\n <div class=\"eui-notifications__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n @if (items) {\n <span\n class=\"eui-u-cursor-help eui-u-ml-s\"\n attr.aria-label=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\"\n title=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\">\n </span>\n }\n <eui-badge>{{ items.length }}</eui-badge>\n </div>\n </div>\n \n @if (items) {\n <div class=\"eui-notifications__header-actions\">\n @if (isShowMarkAllAsReadButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)\"\n title=\"{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}\"\n (click)=\"onMarkAllAsRead($event)\">\n <eui-icon-svg icon=\"checkmark-done:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowSettingsButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)\"\n title=\"{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}\"\n (click)=\"onSettings($event)\">\n <eui-icon-svg icon=\"settings:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowRefreshButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)\"\n title=\"{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}\"\n (click)=\"onRefresh($event)\">\n <eui-icon-svg icon=\"refresh:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n </div>\n }\n </eui-overlay-header>\n \n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; let i = $index; track $index) {\n <eui-notification-item\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item>\n }\n </ul>\n }\n </eui-overlay-body>\n \n @if ((items?.length > 0 && isShowViewAllAction) || items?.length === 0) {\n <eui-overlay-footer>\n @if (items?.length > 0 && isShowViewAllAction) {\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n }\n }\n </eui-overlay-footer>\n }\n </eui-overlay>\n}\n\n", styles: [".eui-19 .eui-overlay-header{background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-divider)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-s-2xs);transform:scale(1.1)}.eui-19 .eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications__header-title{display:flex}.eui-19 .eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-19 .eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5$2.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i5$2.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i5$2.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i5$2.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2401
2409
|
}
|
|
2402
2410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiNotificationsComponent, decorators: [{
|
|
2403
2411
|
type: Component,
|
|
@@ -2409,7 +2417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
2409
2417
|
...EUI_BADGE,
|
|
2410
2418
|
...EUI_OVERLAY,
|
|
2411
2419
|
...EUI_BUTTON,
|
|
2412
|
-
], template: "<eui-icon-button\n class=\"eui-notifications__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n
|
|
2420
|
+
], template: "<eui-icon-button\n class=\"eui-notifications__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n [ariaLabel]=\"getAriaLabel()\">\n @if (count) {\n <eui-badge euiDanger [maxCharCount]=\"2\">{{ count }}</eui-badge>\n }\n</eui-icon-button>\n\n@if (isOverlayActive) {\n <eui-overlay hasClosedOnClickOutside isActive class=\"eui-overlay-offset--width-30\" (activeState)=\"updateActiveState($event)\">\n <eui-overlay-header>\n <div class=\"eui-notifications__header-title\">\n <div class=\"eui-notifications__header-title-label\">\n {{ headerTitleLabel ? headerTitleLabel : ('eui.MYNOTIFICATIONS' | translate) }}\n @if (items) {\n <span\n class=\"eui-u-cursor-help eui-u-ml-s\"\n attr.aria-label=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\"\n title=\"{{ unreadLabel ? unreadLabel : ('eui.NOTIFICATIONSUNREAD' | translate) }}\">\n </span>\n }\n <eui-badge>{{ items.length }}</eui-badge>\n </div>\n </div>\n \n @if (items) {\n <div class=\"eui-notifications__header-actions\">\n @if (isShowMarkAllAsReadButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate)\"\n title=\"{{ markAllAsReadLabel ? markAllAsReadLabel : ('eui.NOTIFICATIONMARKALLASREAD' | translate) }}\"\n (click)=\"onMarkAllAsRead($event)\">\n <eui-icon-svg icon=\"checkmark-done:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowSettingsButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate)\"\n title=\"{{ settingsLabel ? settingsLabel : ('eui.SETTINGS' | translate) }}\"\n (click)=\"onSettings($event)\">\n <eui-icon-svg icon=\"settings:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n @if (isShowRefreshButton) {\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"refreshLabel ? refreshLabel : ('eui.REFRESH' | translate)\"\n title=\"{{ refreshLabel ? refreshLabel : ('eui.REFRESH' | translate) }}\"\n (click)=\"onRefresh($event)\">\n <eui-icon-svg icon=\"refresh:outline\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n }\n </div>\n }\n </eui-overlay-header>\n \n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; let i = $index; track $index) {\n <eui-notification-item\n [item]=\"item\"\n [dateFormat]=\"dateFormat\"\n [markAsReadLabel]=\"markAsReadLabel\"\n [isShowMarkAsRead]=\"isShowMarkAsRead\"\n (itemClick)=\"onItemClick($event)\"\n (itemMarkAsRead)=\"onItemMarkAsRead($event)\">\n </eui-notification-item>\n }\n </ul>\n }\n </eui-overlay-body>\n \n @if ((items?.length > 0 && isShowViewAllAction) || items?.length === 0) {\n <eui-overlay-footer>\n @if (items?.length > 0 && isShowViewAllAction) {\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\n }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n }\n }\n </eui-overlay-footer>\n }\n </eui-overlay>\n}\n\n", styles: [".eui-19 .eui-overlay-header{background-color:var(--eui-c-neutral-bg-lighter);border-bottom:1px solid var(--eui-c-divider)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-s-2xs);transform:scale(1.1)}.eui-19 .eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications__header-title{display:flex}.eui-19 .eui-notifications__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-m)}.eui-19 .eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
|
|
2413
2421
|
}], propDecorators: { refreshClick: [{
|
|
2414
2422
|
type: Output
|
|
2415
2423
|
}], notificationsClick: [{
|
|
@@ -2481,9 +2489,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
2481
2489
|
}], isShowRefreshButton: [{
|
|
2482
2490
|
type: Input,
|
|
2483
2491
|
args: [{ transform: booleanAttribute }]
|
|
2484
|
-
}], onHide: [{
|
|
2485
|
-
type: HostListener,
|
|
2486
|
-
args: ['body:click']
|
|
2487
2492
|
}] } });
|
|
2488
2493
|
|
|
2489
2494
|
/**
|
|
@@ -2642,8 +2647,19 @@ class EuiNotificationsV2Component {
|
|
|
2642
2647
|
trackByFn(index, item) {
|
|
2643
2648
|
return item.id;
|
|
2644
2649
|
}
|
|
2650
|
+
updateActiveState(isActive) {
|
|
2651
|
+
this.isOverlayActive = isActive;
|
|
2652
|
+
}
|
|
2653
|
+
getAriaLabel() {
|
|
2654
|
+
if (this.count) {
|
|
2655
|
+
return this.count > 1
|
|
2656
|
+
? ` You have ${this.count} notifications`
|
|
2657
|
+
: `You have ${this.count} notification`;
|
|
2658
|
+
}
|
|
2659
|
+
return 'Open notifications panel';
|
|
2660
|
+
}
|
|
2645
2661
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiNotificationsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2646
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiNotificationsV2Component, isStandalone: true, 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", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<eui-icon-button\n class=\"eui-notifications-v2__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\">\n @if (isShowUnreadSinceLastCheckCount) {\n <eui-badge euiSizeM euiDanger [maxCharCount]=\"2\">{{ unreadSinceLastCheckCount }}</eui-badge>\n }\n</eui-icon-button>\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 <eui-icon-svg icon=\"chevron-forward:sharp\" size=\"2xs\"></eui-icon-svg>\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 @if (items.length > 0) {\n <a (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n }\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n <span class=\"eui-u-flex\">\n <eui-icon-svg set=\"eui\" icon=\"eui-refresh\" fillColor=\"neutral\"></eui-icon-svg>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; track trackByFn($index, item)) {\n <eui-notification-item-v2\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 }\n </ul>\n }\n </eui-overlay-body>\n\n <eui-overlay-footer>\n @if (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 }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n }\n }\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-19 .eui-overlay-header{padding:0}.eui-19 .eui-overlay-footer{background-color:var(--eui-c-white)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-19 .eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-19 .eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notifications-v2__header-subinfos-bar,.eui-19 .eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{display:flex;margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5$2.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i5$2.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i5$2.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i5$2.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2662
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiNotificationsV2Component, isStandalone: true, 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", dateFormat: "dateFormat", noNotificationFoundLink: ["noNotificationFoundLink", "noNotificationFoundLink", booleanAttribute], isShowMarkAsRead: ["isShowMarkAsRead", "isShowMarkAsRead", booleanAttribute], isShowViewAllAction: ["isShowViewAllAction", "isShowViewAllAction", booleanAttribute], isHidePanelOnViewAllAction: ["isHidePanelOnViewAllAction", "isHidePanelOnViewAllAction", booleanAttribute], isShowMarkAllAsReadButton: ["isShowMarkAllAsReadButton", "isShowMarkAllAsReadButton", booleanAttribute], isShowSettingsButton: ["isShowSettingsButton", "isShowSettingsButton", booleanAttribute], isShowRefreshButton: ["isShowRefreshButton", "isShowRefreshButton", booleanAttribute] }, outputs: { refreshClick: "refreshClick", notificationsClick: "notificationsClick", viewAllClick: "viewAllClick", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<eui-icon-button\n class=\"eui-notifications-v2__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n [ariaLabel]=\"getAriaLabel()\">\n @if (isShowUnreadSinceLastCheckCount) {\n <eui-badge euiSizeM euiDanger [maxCharCount]=\"2\">{{ unreadSinceLastCheckCount }}</eui-badge>\n }\n</eui-icon-button>\n\n@if (isOverlayActive){\n <eui-overlay isActive hasClosedOnClickOutside class=\"eui-overlay-offset--width-30\" (activeState)=\"updateActiveState($event)\">\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 <eui-icon-svg icon=\"chevron-forward:sharp\" size=\"2xs\"></eui-icon-svg>\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 @if (items.length > 0) {\n <a (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n }\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n <span class=\"eui-u-flex\">\n <eui-icon-svg set=\"eui\" icon=\"eui-refresh\" fillColor=\"neutral\"></eui-icon-svg>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n \n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; track trackByFn($index, item)) {\n <eui-notification-item-v2\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 }\n </ul>\n }\n </eui-overlay-body>\n \n <eui-overlay-footer>\n @if (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 }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n }\n }\n </eui-overlay-footer>\n </eui-overlay>\n}\n", styles: [".eui-19 .eui-overlay-header{padding:0}.eui-19 .eui-overlay-footer{background-color:var(--eui-c-white)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-19 .eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-19 .eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notifications-v2__header-subinfos-bar,.eui-19 .eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{display:flex;margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "component", type: EuiNotificationItemV2Component, selector: "eui-notification-item-v2", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5$2.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i5$2.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i5$2.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i5$2.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "euiHighlighted", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2647
2663
|
}
|
|
2648
2664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiNotificationsV2Component, decorators: [{
|
|
2649
2665
|
type: Component,
|
|
@@ -2655,7 +2671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
2655
2671
|
...EUI_BADGE,
|
|
2656
2672
|
...EUI_OVERLAY,
|
|
2657
2673
|
...EUI_BUTTON,
|
|
2658
|
-
], template: "<eui-icon-button\n class=\"eui-notifications-v2__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n
|
|
2674
|
+
], template: "<eui-icon-button\n class=\"eui-notifications-v2__trigger\"\n icon=\"notifications:outline\"\n fillColor=\"white\"\n (click)=\"onClicked($event)\"\n [ariaLabel]=\"getAriaLabel()\">\n @if (isShowUnreadSinceLastCheckCount) {\n <eui-badge euiSizeM euiDanger [maxCharCount]=\"2\">{{ unreadSinceLastCheckCount }}</eui-badge>\n }\n</eui-icon-button>\n\n@if (isOverlayActive){\n <eui-overlay isActive hasClosedOnClickOutside class=\"eui-overlay-offset--width-30\" (activeState)=\"updateActiveState($event)\">\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 <eui-icon-svg icon=\"chevron-forward:sharp\" size=\"2xs\"></eui-icon-svg>\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 @if (items.length > 0) {\n <a (click)=\"onMarkAllAsRead($event)\" class=\"eui-u-text-link\" tabIndex=\"0\">\n {{ 'notif.MARK-ALL-READ' | translate }}\n </a>\n }\n <a (click)=\"onRefresh($event)\" class=\"eui-u-text-link eui-u-ml-auto\" tabIndex=\"0\">\n <span class=\"eui-u-flex\">\n <eui-icon-svg set=\"eui\" icon=\"eui-refresh\" fillColor=\"neutral\"></eui-icon-svg>\n {{ 'notif.SV-REFRESH' | translate }}\n </span>\n </a>\n </div>\n </div>\n </eui-overlay-header>\n \n <eui-overlay-body>\n @if (items) {\n <ul class=\"eui-notifications-items\">\n @for (item of items; track trackByFn($index, item)) {\n <eui-notification-item-v2\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 }\n </ul>\n }\n </eui-overlay-body>\n \n <eui-overlay-footer>\n @if (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 }\n @if (items?.length === 0) {\n @if (!noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </div>\n }\n @if (noNotificationFoundLink) {\n <div class=\"ux-notification__item-content\">\n <strong\n ><a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">{{\n noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate)\n }}</a></strong\n >\n </div>\n }\n }\n </eui-overlay-footer>\n </eui-overlay>\n}\n", styles: [".eui-19 .eui-overlay-header{padding:0}.eui-19 .eui-overlay-footer{background-color:var(--eui-c-white)}.eui-19 .eui-notifications-items{margin:0;padding:0}.eui-19 .eui-notifications-v2__trigger .eui-icon-svg svg{transform:scale(1.1)}.eui-19 .eui-notifications-v2__header{border-bottom:1px solid var(--eui-c-neutral-bg-light);color:var(--eui-c-text);cursor:default;flex-direction:column;display:flex;width:100%}.eui-19 .eui-notifications-v2__header-title{display:flex;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notifications-v2__header-title-label{font:var(--eui-f-l-bold)}.eui-19 .eui-notifications-v2__header-title-subLabel{margin-top:var(--eui-s-xs);font:var(--eui-f-s)}.eui-19 .eui-notifications-v2__header-title-actions{align-items:center;display:flex;margin-left:auto}.eui-19 .eui-notifications-v2__header-subinfos-bar,.eui-19 .eui-notifications-v2__header-subactions-bar{display:flex;align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-19 .eui-notification-item-content{background-color:var(--eui-c-info-bg);border-bottom:1px solid var(--eui-c-divider);display:flex;flex-direction:column;min-height:var(--eui-s-4xl);padding:var(--eui-s-s) var(--eui-s-m);cursor:pointer}.eui-19 .eui-notification-item-content:hover{background-color:var(--eui-c-neutral-bg-light)!important}.eui-19 .eui-notification-item-content-top{align-items:center;display:flex;justify-content:space-between}.eui-19 .eui-notification-item-content-top__date{display:flex;align-items:center}.eui-19 .eui-notification-item-content-top__date-icon{align-items:center;display:flex;position:relative}.eui-19 .eui-notification-item-content-top__date-icon--rotated{transform:rotate(20deg)}.eui-19 .eui-notification-item-content-top__date-icon-dot{position:absolute;top:0;right:0}.eui-19 .eui-notification-item-content-middle{display:flex;margin:var(--eui-s-2xs) 0}.eui-19 .eui-notification-item-content-middle__sub-label{margin-top:var(--eui-s-2xs)}.eui-19 .eui-notification-item-content-bottom{display:flex;justify-content:flex-end}\n"] }]
|
|
2659
2675
|
}], propDecorators: { refreshClick: [{
|
|
2660
2676
|
type: Output
|
|
2661
2677
|
}], notificationsClick: [{
|