@eui/components 17.3.4-snapshot-1713921501323 → 17.3.4-snapshot-1715045153638
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/classes/CustomNodeSelectFnHelper.html +552 -0
- package/docs/classes/EuiAutoCompleteItem.html +24 -0
- package/docs/components/EuiAutocompleteComponent.html +1 -1
- package/docs/components/EuiNotificationItemComponent.html +1 -1
- package/docs/components/EuiTreeComponent.html +19 -0
- package/docs/dependencies.html +2 -2
- package/docs/directives/EuiTreeFormControlDirective.html +1 -1
- package/docs/index.html +1 -1
- package/docs/js/menu-wc.js +12 -9
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/miscellaneous/typealiases.html +148 -129
- package/docs/modules/EuiAutocompleteModule.html +3 -0
- package/esm2022/eui-autocomplete/eui-autocomplete.component.mjs +7 -5
- package/esm2022/eui-autocomplete/eui-autocomplete.module.mjs +7 -3
- package/esm2022/eui-autocomplete/models/eui-autocomplete-item.model.mjs +1 -1
- package/esm2022/eui-table/eui-table.component.mjs +2 -2
- package/esm2022/eui-tree/eui-tree-form-control.directive.mjs +2 -2
- package/esm2022/eui-tree/eui-tree.component.mjs +31 -5
- package/esm2022/eui-tree/eui-tree.model.mjs +20 -1
- package/esm2022/layout/eui-breadcrumb/breadcrumb.component.mjs +2 -2
- package/esm2022/layout/eui-breadcrumb/collapsed-breadcrumb/collapsed-breadcrumb.component.mjs +2 -2
- package/esm2022/layout/eui-breadcrumb/item/breadcrumb-item.component.mjs +2 -2
- package/esm2022/layout/eui-notifications/eui-notification-item.component.mjs +3 -3
- package/esm2022/layout/eui-notifications/eui-notifications.component.mjs +2 -2
- package/esm2022/layout/eui-notifications-v2/eui-notifications.component.mjs +2 -2
- package/eui-autocomplete/eui-autocomplete.component.d.ts.map +1 -1
- package/eui-autocomplete/eui-autocomplete.module.d.ts +2 -1
- package/eui-autocomplete/eui-autocomplete.module.d.ts.map +1 -1
- package/eui-autocomplete/models/eui-autocomplete-item.model.d.ts +1 -0
- package/eui-autocomplete/models/eui-autocomplete-item.model.d.ts.map +1 -1
- package/eui-tree/eui-tree.component.d.ts +4 -2
- package/eui-tree/eui-tree.component.d.ts.map +1 -1
- package/eui-tree/eui-tree.model.d.ts +9 -0
- package/eui-tree/eui-tree.model.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-autocomplete.mjs +10 -4
- package/fesm2022/eui-components-eui-autocomplete.mjs.map +1 -1
- package/fesm2022/eui-components-eui-table.mjs +2 -2
- package/fesm2022/eui-components-eui-table.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree.mjs +50 -5
- package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +12 -12
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/package.json +15 -15
|
@@ -1915,11 +1915,11 @@ class EuiBreadcrumbItemComponent {
|
|
|
1915
1915
|
return !this.nextCrumb;
|
|
1916
1916
|
}
|
|
1917
1917
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiBreadcrumbItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Router }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.LogService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1918
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiBreadcrumbItemComponent, selector: "eui-breadcrumb-item", inputs: { id: "id", label: "label", link: "link", navigationExtras: "navigationExtras" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<!-- render the separator if should have one -->\n<div *ngIf=\"hasPrevious\" class=\"eui-breadcrumb-item__separator\">\n <eui-icon-svg icon=\"eui-chevron-forward\" size=\"xs\" fillColor=\"grey-100\"></eui-icon-svg>\n</div>\n<button type=\"button\" *ngIf=\"link\" euiButton euiBasicButton euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\" (click)=\"onClick()\">\n {{ label }}\n</button>\n<span *ngIf=\"!link\" euiLabel euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\">{{ label }}</span>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700;z-index:
|
|
1918
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiBreadcrumbItemComponent, selector: "eui-breadcrumb-item", inputs: { id: "id", label: "label", link: "link", navigationExtras: "navigationExtras" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<!-- render the separator if should have one -->\n<div *ngIf=\"hasPrevious\" class=\"eui-breadcrumb-item__separator\">\n <eui-icon-svg icon=\"eui-chevron-forward\" size=\"xs\" fillColor=\"grey-100\"></eui-icon-svg>\n</div>\n<button type=\"button\" *ngIf=\"link\" euiButton euiBasicButton euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\" (click)=\"onClick()\">\n {{ label }}\n</button>\n<span *ngIf=\"!link\" euiLabel euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\">{{ label }}</span>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700;z-index:var(--eui-base-z-index-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i6$2.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1919
1919
|
}
|
|
1920
1920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiBreadcrumbItemComponent, decorators: [{
|
|
1921
1921
|
type: Component,
|
|
1922
|
-
args: [{ selector: 'eui-breadcrumb-item', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<!-- render the separator if should have one -->\n<div *ngIf=\"hasPrevious\" class=\"eui-breadcrumb-item__separator\">\n <eui-icon-svg icon=\"eui-chevron-forward\" size=\"xs\" fillColor=\"grey-100\"></eui-icon-svg>\n</div>\n<button type=\"button\" *ngIf=\"link\" euiButton euiBasicButton euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\" (click)=\"onClick()\">\n {{ label }}\n</button>\n<span *ngIf=\"!link\" euiLabel euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\">{{ label }}</span>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700;z-index:
|
|
1922
|
+
args: [{ selector: 'eui-breadcrumb-item', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<!-- render the separator if should have one -->\n<div *ngIf=\"hasPrevious\" class=\"eui-breadcrumb-item__separator\">\n <eui-icon-svg icon=\"eui-chevron-forward\" size=\"xs\" fillColor=\"grey-100\"></eui-icon-svg>\n</div>\n<button type=\"button\" *ngIf=\"link\" euiButton euiBasicButton euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\" (click)=\"onClick()\">\n {{ label }}\n</button>\n<span *ngIf=\"!link\" euiLabel euiSizeS [euiSecondary]=\"!hasNext\" [euiPrimary]=\"hasNext\">{{ label }}</span>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700;z-index:var(--eui-base-z-index-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"] }]
|
|
1923
1923
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Router }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.LogService, decorators: [{
|
|
1924
1924
|
type: Optional
|
|
1925
1925
|
}] }], propDecorators: { string: [{
|
|
@@ -1996,11 +1996,11 @@ class CollapsedBreadcrumbComponent {
|
|
|
1996
1996
|
return !!this.customButton;
|
|
1997
1997
|
}
|
|
1998
1998
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CollapsedBreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1999
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CollapsedBreadcrumbComponent, selector: "eui-collapsed-breadcrumb", queries: [{ propertyName: "customButton", first: true, predicate: i0.forwardRef(() => CollapsedButtonDirective), descendants: true, static: true }, { propertyName: "listItemComponents", predicate: i0.forwardRef(() => EuiListItemComponent) }], viewQueries: [{ propertyName: "list", first: true, predicate: EuiListComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<eui-dropdown>\n <!-- render default collapsed button if no custom is provided -->\n <ng-container *ngIf=\"!hasCustomButton()\">\n <button type=\"button\" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n <eui-icon-svg icon=\"eui-ellipsis-horizontal\"></eui-icon-svg>\n </button>\n </ng-container>\n <!-- provide customizations for the collapsed button -->\n <ng-content select=\"collapsed-button\"></ng-content>\n <eui-dropdown-content>\n <ul euiList>\n <ng-content></ng-content>\n </ul>\n </eui-dropdown-content>\n</eui-dropdown>\n\n<!-- SAMPLE aligned with Design System\n<eui-dropdown>\n <button type=\"button\" euiButton euiRounded euiIconButton euiBasicButton euiPrimary euiSizeS euiTooltip=\"Other links menu\" [attr.aria-label]=\"'Other links menu'\">\n <eui-icon-svg icon=\"ellipsis-horizontal\" fillColor=\"grey-100\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ul euiList>\n <li euiListItem>\n <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n <button type=\"button\" euiSizeXS euiListItem>Item 1</button>\n </li>\n <li euiListItem>\n <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n <button type=\"button\" euiSizeXS euiListItem>Item 2</button>\n </li>\n </ul>\n </eui-dropdown-content>\n</eui-dropdown>\n-->\n", styles: [".eui-breadcrumb-item{align-items:center;display:flex;font-size:v(eui-base-font-size-s);font-weight:700;z-index:
|
|
1999
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CollapsedBreadcrumbComponent, selector: "eui-collapsed-breadcrumb", queries: [{ propertyName: "customButton", first: true, predicate: i0.forwardRef(() => CollapsedButtonDirective), descendants: true, static: true }, { propertyName: "listItemComponents", predicate: i0.forwardRef(() => EuiListItemComponent) }], viewQueries: [{ propertyName: "list", first: true, predicate: EuiListComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<eui-dropdown>\n <!-- render default collapsed button if no custom is provided -->\n <ng-container *ngIf=\"!hasCustomButton()\">\n <button type=\"button\" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n <eui-icon-svg icon=\"eui-ellipsis-horizontal\"></eui-icon-svg>\n </button>\n </ng-container>\n <!-- provide customizations for the collapsed button -->\n <ng-content select=\"collapsed-button\"></ng-content>\n <eui-dropdown-content>\n <ul euiList>\n <ng-content></ng-content>\n </ul>\n </eui-dropdown-content>\n</eui-dropdown>\n\n<!-- SAMPLE aligned with Design System\n<eui-dropdown>\n <button type=\"button\" euiButton euiRounded euiIconButton euiBasicButton euiPrimary euiSizeS euiTooltip=\"Other links menu\" [attr.aria-label]=\"'Other links menu'\">\n <eui-icon-svg icon=\"ellipsis-horizontal\" fillColor=\"grey-100\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ul euiList>\n <li euiListItem>\n <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n <button type=\"button\" euiSizeXS euiListItem>Item 1</button>\n </li>\n <li euiListItem>\n <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n <button type=\"button\" euiSizeXS euiListItem>Item 2</button>\n </li>\n </ul>\n </eui-dropdown-content>\n</eui-dropdown>\n-->\n", styles: [".eui-breadcrumb-item{align-items:center;display:flex;font-size:v(eui-base-font-size-s);font-weight:700;z-index:v(eui-base-z-index-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 v(eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:v(eui-base-font-size-s);font-weight:700;padding:0 v(eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:v(eui-base-color-grey-75);cursor:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "isClosedOnClickInside", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5$1.EuiListComponent, selector: "[euiList], eui-list", inputs: ["isCollapsible"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2000
2000
|
}
|
|
2001
2001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CollapsedBreadcrumbComponent, decorators: [{
|
|
2002
2002
|
type: Component,
|
|
2003
|
-
args: [{ selector: 'eui-collapsed-breadcrumb', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-dropdown>\n <!-- render default collapsed button if no custom is provided -->\n <ng-container *ngIf=\"!hasCustomButton()\">\n <button type=\"button\" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n <eui-icon-svg icon=\"eui-ellipsis-horizontal\"></eui-icon-svg>\n </button>\n </ng-container>\n <!-- provide customizations for the collapsed button -->\n <ng-content select=\"collapsed-button\"></ng-content>\n <eui-dropdown-content>\n <ul euiList>\n <ng-content></ng-content>\n </ul>\n </eui-dropdown-content>\n</eui-dropdown>\n\n<!-- SAMPLE aligned with Design System\n<eui-dropdown>\n <button type=\"button\" euiButton euiRounded euiIconButton euiBasicButton euiPrimary euiSizeS euiTooltip=\"Other links menu\" [attr.aria-label]=\"'Other links menu'\">\n <eui-icon-svg icon=\"ellipsis-horizontal\" fillColor=\"grey-100\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ul euiList>\n <li euiListItem>\n <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n <button type=\"button\" euiSizeXS euiListItem>Item 1</button>\n </li>\n <li euiListItem>\n <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n <button type=\"button\" euiSizeXS euiListItem>Item 2</button>\n </li>\n </ul>\n </eui-dropdown-content>\n</eui-dropdown>\n-->\n", styles: [".eui-breadcrumb-item{align-items:center;display:flex;font-size:v(eui-base-font-size-s);font-weight:700;z-index:
|
|
2003
|
+
args: [{ selector: 'eui-collapsed-breadcrumb', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-dropdown>\n <!-- render default collapsed button if no custom is provided -->\n <ng-container *ngIf=\"!hasCustomButton()\">\n <button type=\"button\" euiButton euiRounded euiSizeS euiIconButton euiOutline euiAccent>\n <eui-icon-svg icon=\"eui-ellipsis-horizontal\"></eui-icon-svg>\n </button>\n </ng-container>\n <!-- provide customizations for the collapsed button -->\n <ng-content select=\"collapsed-button\"></ng-content>\n <eui-dropdown-content>\n <ul euiList>\n <ng-content></ng-content>\n </ul>\n </eui-dropdown-content>\n</eui-dropdown>\n\n<!-- SAMPLE aligned with Design System\n<eui-dropdown>\n <button type=\"button\" euiButton euiRounded euiIconButton euiBasicButton euiPrimary euiSizeS euiTooltip=\"Other links menu\" [attr.aria-label]=\"'Other links menu'\">\n <eui-icon-svg icon=\"ellipsis-horizontal\" fillColor=\"grey-100\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ul euiList>\n <li euiListItem>\n <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n <button type=\"button\" euiSizeXS euiListItem>Item 1</button>\n </li>\n <li euiListItem>\n <eui-icon-svg icon=\"chevron-forward\" size=\"xs\" fillColor=\"grey-75\"></eui-icon-svg>\n <button type=\"button\" euiSizeXS euiListItem>Item 2</button>\n </li>\n </ul>\n </eui-dropdown-content>\n</eui-dropdown>\n-->\n", styles: [".eui-breadcrumb-item{align-items:center;display:flex;font-size:v(eui-base-font-size-s);font-weight:700;z-index:v(eui-base-z-index-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 v(eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:v(eui-base-font-size-s);font-weight:700;padding:0 v(eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:v(eui-base-color-grey-75);cursor:none;pointer-events:none}\n"] }]
|
|
2004
2004
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { customButton: [{
|
|
2005
2005
|
type: ContentChild,
|
|
2006
2006
|
args: [forwardRef(() => CollapsedButtonDirective), { static: true }]
|
|
@@ -2209,11 +2209,11 @@ class EuiBreadcrumbComponent {
|
|
|
2209
2209
|
}
|
|
2210
2210
|
}
|
|
2211
2211
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiBreadcrumbComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$4.ViewportRuler }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2212
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiBreadcrumbComponent, selector: "eui-breadcrumb", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "breadcrumbItems", predicate: i0.forwardRef(() => EuiBreadcrumbItemComponent) }], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"eui-breadcrumb__items\">\n <ng-container #vcr>\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700;z-index:
|
|
2212
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiBreadcrumbComponent, selector: "eui-breadcrumb", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "breadcrumbItems", predicate: i0.forwardRef(() => EuiBreadcrumbItemComponent) }], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"eui-breadcrumb__items\">\n <ng-container #vcr>\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700;z-index:var(--eui-base-z-index-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2213
2213
|
}
|
|
2214
2214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiBreadcrumbComponent, decorators: [{
|
|
2215
2215
|
type: Component,
|
|
2216
|
-
args: [{ selector: 'eui-breadcrumb', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-breadcrumb__items\">\n <ng-container #vcr>\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700;z-index:
|
|
2216
|
+
args: [{ selector: 'eui-breadcrumb', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-breadcrumb__items\">\n <ng-container #vcr>\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: [".eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-base-color-grey-25);height:1rem;width:1rem;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E\");display:inline-block;padding-left:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xs)}.cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-base-spacing-xs) 0 0}@media screen and (max-width: 767px){eui-breadcrumb,.eui-breadcrumb{display:none}}.eui-breadcrumb-item{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:700;z-index:var(--eui-base-z-index-breadcrumb)}.eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-base-spacing-2xs)}.eui-breadcrumb-item .eui-button{background-color:transparent;border:1px solid transparent;font-size:var(--eui-base-font-size-s);font-weight:700;padding:0 var(--eui-base-spacing-2xs) 0 0}.eui-breadcrumb-item .eui-button:hover{background-color:transparent!important}.eui-breadcrumb-item .eui-label{white-space:nowrap;text-decoration:none!important}.eui-breadcrumb-item .eui-label--secondary{color:var(--eui-base-color-grey-75);cursor:none;pointer-events:none}\n"] }]
|
|
2217
2217
|
}], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$4.ViewportRuler }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { string: [{
|
|
2218
2218
|
type: HostBinding,
|
|
2219
2219
|
args: ['class']
|
|
@@ -2915,11 +2915,11 @@ class EuiNotificationItemComponent {
|
|
|
2915
2915
|
return this.item.metadata?.read ? 'grey-20' : 'grey-50';
|
|
2916
2916
|
}
|
|
2917
2917
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2918
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiNotificationItemComponent, selector: "eui-notification-item", 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-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 <eui-icon-svg icon=\"eui-notifications\" size=\"m\" [fillColor]=\"iconColor\"></eui-icon-svg>\n <span\n *ngIf=\"item.metadata?.new\"\n class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-s 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 ? '
|
|
2918
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiNotificationItemComponent, selector: "eui-notification-item", 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-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 <eui-icon-svg icon=\"eui-notifications\" size=\"m\" [fillColor]=\"iconColor\"></eui-icon-svg>\n <span\n *ngIf=\"item.metadata?.new\"\n class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-s 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-100\" 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 class=\"eui-u-text-link\" 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 class=\"eui-u-text-link-external\"\n href=\"{{ item.metadata.urlExternal }}\"\n [target]=\"!item.metadata.urlExternalTarget ? '_blank' : 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 *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\"\n class=\"eui-u-text-link\"\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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4$1.EuiTruncatePipe, name: "euiTruncate" }] }); }
|
|
2919
2919
|
}
|
|
2920
2920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiNotificationItemComponent, decorators: [{
|
|
2921
2921
|
type: Component,
|
|
2922
|
-
args: [{ selector: 'eui-notification-item', 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-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 <eui-icon-svg icon=\"eui-notifications\" size=\"m\" [fillColor]=\"iconColor\"></eui-icon-svg>\n <span\n *ngIf=\"item.metadata?.new\"\n class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-s 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 ? '
|
|
2922
|
+
args: [{ selector: 'eui-notification-item', 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-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 <eui-icon-svg icon=\"eui-notifications\" size=\"m\" [fillColor]=\"iconColor\"></eui-icon-svg>\n <span\n *ngIf=\"item.metadata?.new\"\n class=\"eui-notification-item-content-top__date-dot eui-u-color-danger-light eui-u-font-s 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-100\" 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 class=\"eui-u-text-link\" 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 class=\"eui-u-text-link-external\"\n href=\"{{ item.metadata.urlExternal }}\"\n [target]=\"!item.metadata.urlExternalTarget ? '_blank' : 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 *ngIf=\"isShowMarkAsRead && item.metadata && !item.metadata.read\"\n class=\"eui-u-text-link\"\n href=\"javascript:void(0)\"\n (click)=\"onItemMarkAsRead($event)\">\n {{ markAsReadLabel ? markAsReadLabel : ('eui.NOTIFICATIONMARKASREAD' | translate) }}\n </a>\n </div>\n</div>\n" }]
|
|
2923
2923
|
}], propDecorators: { string: [{
|
|
2924
2924
|
type: HostBinding,
|
|
2925
2925
|
args: ['class']
|
|
@@ -3110,11 +3110,11 @@ class EuiNotificationsComponent {
|
|
|
3110
3110
|
return unreadNotifications.length;
|
|
3111
3111
|
}
|
|
3112
3112
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3113
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiNotificationsComponent, 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", 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: { listeners: { "body:click": "onHide()" }, properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg-button\n class=\"eui-notifications__trigger\"\n iconSvgName=\"eui-notifications\"\n iconSvgSize=\"m\"\n iconSvgFillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n hasFocusBorder>\n <eui-badge *ngIf=\"count\" euiSizeS euiDanger>{{ count }}</eui-badge>\n</eui-icon-svg-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 <span\n *ngIf=\"items\"\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 <eui-badge euiSizeL *ngIf=\"count\">{{ count }}</eui-badge>\n <eui-badge euiSizeL *ngIf=\"!count\">{{ items.length }}</eui-badge>\n </div>\n </div>\n\n <div *ngIf=\"items\" class=\"eui-notifications__header-actions\">\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowMarkAllAsReadButton\"\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=\"eui-checkmark-done\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowSettingsButton\"\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=\"eui-settings\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowRefreshButton\"\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=\"eui-refresh\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n <eui-notification-item\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>\n </ul>\n </eui-overlay-body>\n\n <eui-overlay-footer>\n <ng-template [ngIf]=\"items?.length > 0\">\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\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 <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n </ng-template>\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-20)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-base-spacing-2xs);transform:scale(1.1)}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-primary-5);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{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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$6.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$6.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$6.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i2$1.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3113
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiNotificationsComponent, 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", 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: { listeners: { "body:click": "onHide()" }, properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg-button\n class=\"eui-notifications__trigger\"\n iconSvgName=\"eui-notifications\"\n iconSvgSize=\"m\"\n iconSvgFillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n hasFocusBorder>\n <eui-badge *ngIf=\"count\" euiSizeS euiDanger>{{ count }}</eui-badge>\n</eui-icon-svg-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 <span\n *ngIf=\"items\"\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 <eui-badge euiSizeL *ngIf=\"count\">{{ count }}</eui-badge>\n <eui-badge euiSizeL *ngIf=\"!count\">{{ items.length }}</eui-badge>\n </div>\n </div>\n\n <div *ngIf=\"items\" class=\"eui-notifications__header-actions\">\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowMarkAllAsReadButton\"\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=\"eui-checkmark-done\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowSettingsButton\"\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=\"eui-settings\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowRefreshButton\"\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=\"eui-refresh\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n <eui-notification-item\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>\n </ul>\n </eui-overlay-body>\n\n <eui-overlay-footer>\n <ng-template [ngIf]=\"items?.length > 0\">\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\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 <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n </ng-template>\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-20)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-base-spacing-2xs);transform:scale(1.1)}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-primary-5);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{align-items:center;display:flex;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{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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$6.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$6.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$6.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i2$1.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { kind: "component", type: EuiNotificationItemComponent, selector: "eui-notification-item", inputs: ["markAsReadLabel", "item", "dateFormat", "isShowMarkAsRead"], outputs: ["itemClick", "itemMarkAsRead"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3114
3114
|
}
|
|
3115
3115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiNotificationsComponent, decorators: [{
|
|
3116
3116
|
type: Component,
|
|
3117
|
-
args: [{ selector: 'eui-notifications', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-icon-svg-button\n class=\"eui-notifications__trigger\"\n iconSvgName=\"eui-notifications\"\n iconSvgSize=\"m\"\n iconSvgFillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n hasFocusBorder>\n <eui-badge *ngIf=\"count\" euiSizeS euiDanger>{{ count }}</eui-badge>\n</eui-icon-svg-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 <span\n *ngIf=\"items\"\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 <eui-badge euiSizeL *ngIf=\"count\">{{ count }}</eui-badge>\n <eui-badge euiSizeL *ngIf=\"!count\">{{ items.length }}</eui-badge>\n </div>\n </div>\n\n <div *ngIf=\"items\" class=\"eui-notifications__header-actions\">\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowMarkAllAsReadButton\"\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=\"eui-checkmark-done\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowSettingsButton\"\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=\"eui-settings\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowRefreshButton\"\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=\"eui-refresh\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n <eui-notification-item\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>\n </ul>\n </eui-overlay-body>\n\n <eui-overlay-footer>\n <ng-template [ngIf]=\"items?.length > 0\">\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\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 <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n </ng-template>\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-20)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-base-spacing-2xs);transform:scale(1.1)}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-primary-5);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{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"] }]
|
|
3117
|
+
args: [{ selector: 'eui-notifications', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-icon-svg-button\n class=\"eui-notifications__trigger\"\n iconSvgName=\"eui-notifications\"\n iconSvgSize=\"m\"\n iconSvgFillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n hasFocusBorder>\n <eui-badge *ngIf=\"count\" euiSizeS euiDanger>{{ count }}</eui-badge>\n</eui-icon-svg-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 <span\n *ngIf=\"items\"\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 <eui-badge euiSizeL *ngIf=\"count\">{{ count }}</eui-badge>\n <eui-badge euiSizeL *ngIf=\"!count\">{{ items.length }}</eui-badge>\n </div>\n </div>\n\n <div *ngIf=\"items\" class=\"eui-notifications__header-actions\">\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowMarkAllAsReadButton\"\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=\"eui-checkmark-done\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowSettingsButton\"\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=\"eui-settings\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n <button\n euiButton\n euiPrimary\n euiRounded\n euiIconButton\n euiBasicButton\n euiSizeS\n type=\"button\"\n *ngIf=\"isShowRefreshButton\"\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=\"eui-refresh\" fillColor=\"primary-100\"></eui-icon-svg>\n </button>\n </div>\n </eui-overlay-header>\n\n <eui-overlay-body>\n <ul class=\"eui-notifications-items\" *ngIf=\"items\">\n <eui-notification-item\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>\n </ul>\n </eui-overlay-body>\n\n <eui-overlay-footer>\n <ng-template [ngIf]=\"items?.length > 0\">\n <a (click)=\"onViewAllClick($event)\" class=\"eui-u-text-link\">\n <strong>{{ viewAllNotificationsLabel ? viewAllNotificationsLabel : ('eui.VIEWALLNOTIFICATIONS' | translate) }}</strong>\n </a>\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 <a (click)=\"onNoNotificationFoundClick()\" class=\"eui-u-text-link\">\n {{ noNotificationFoundLabel ? noNotificationFoundLabel : ('eui.NONOTIFICATIONFOUND' | translate) }}\n </a>\n </div>\n </ng-template>\n </eui-overlay-footer>\n</eui-overlay>\n", styles: [".eui-overlay-header{background-color:var(--eui-base-color-grey-10);border-bottom:1px solid var(--eui-base-color-grey-20)}.eui-notifications-items{margin:0;padding:0}.eui-notifications__trigger .eui-icon-svg svg{position:relative;top:var(--eui-base-spacing-2xs);transform:scale(1.1)}.eui-notifications__header{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);color:var(--eui-base-color-font);cursor:default;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.eui-notifications__header-title{display:flex}.eui-notifications__header-title-label{font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-notifications__header-title-subLabel{margin-top:var(--eui-base-spacing-xs);font:normal normal 400 1rem/1.25rem var(--eui-base-font-family)}.eui-notifications__header-actions{align-items:center;display:flex;margin-left:auto}.eui-notification-item{display:flex;flex-direction:column;overflow-y:auto;margin:0}.eui-notification-item-content{background-color:var(--eui-base-color-primary-5);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{align-items:center;display:flex;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{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"] }]
|
|
3118
3118
|
}], propDecorators: { refreshClick: [{
|
|
3119
3119
|
type: Output
|
|
3120
3120
|
}], notificationsClick: [{
|
|
@@ -3416,11 +3416,11 @@ class EuiNotificationsV2Component {
|
|
|
3416
3416
|
return unreadNotifications.length;
|
|
3417
3417
|
}
|
|
3418
3418
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiNotificationsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3419
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg-button\n class=\"eui-notifications-v2__trigger\"\n iconSvgName=\"eui-notifications\"\n iconSvgSize=\"m\"\n iconSvgFillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n hasFocusBorder>\n <eui-badge *ngIf=\"isShowUnreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg-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 set=\"eui\" icon=\"eui-chevron-forward\" 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 <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 .eui-icon-svg svg{transform:scale(1.1)}.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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$6.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$6.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$6.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i2$1.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { 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 }); }
|
|
3419
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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", markAllAsReadClick: "markAllAsReadClick", noNotificationFoundClick: "noNotificationFoundClick", itemClick: "itemClick", itemMarkAsReadClick: "itemMarkAsReadClick" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg-button\n class=\"eui-notifications-v2__trigger\"\n iconSvgName=\"eui-notifications\"\n iconSvgSize=\"m\"\n iconSvgFillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n hasFocusBorder>\n <eui-badge *ngIf=\"isShowUnreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg-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 set=\"eui\" icon=\"eui-chevron-forward\" 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 <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 .eui-icon-svg svg{transform:scale(1.1)}.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{align-items:center;display:flex;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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.EuiOverlayHeaderComponent, selector: "eui-overlay-header" }, { kind: "component", type: i2$6.EuiOverlayBodyComponent, selector: "eui-overlay-body" }, { kind: "component", type: i2$6.EuiOverlayFooterComponent, selector: "eui-overlay-footer" }, { kind: "component", type: i2$6.EuiOverlayComponent, selector: "eui-overlay", inputs: ["isActive", "hasClosedOnClickOutside", "position", "width", "fixedWidth"], outputs: ["activeState"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i2$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i2$1.EuiIconSvgButtonComponent, selector: "eui-icon-svg-button", inputs: ["iconSvgName", "iconSvgFillColor", "iconSvgSize", "ariaLabel", "hasFocusBorder", "hasNoPadding"], outputs: ["buttonClick"] }, { 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 }); }
|
|
3420
3420
|
}
|
|
3421
3421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiNotificationsV2Component, decorators: [{
|
|
3422
3422
|
type: Component,
|
|
3423
|
-
args: [{ selector: 'eui-notifications-v2', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-icon-svg-button\n class=\"eui-notifications-v2__trigger\"\n iconSvgName=\"eui-notifications\"\n iconSvgSize=\"m\"\n iconSvgFillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n hasFocusBorder>\n <eui-badge *ngIf=\"isShowUnreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg-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 set=\"eui\" icon=\"eui-chevron-forward\" 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 <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 .eui-icon-svg svg{transform:scale(1.1)}.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"] }]
|
|
3423
|
+
args: [{ selector: 'eui-notifications-v2', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<eui-icon-svg-button\n class=\"eui-notifications-v2__trigger\"\n iconSvgName=\"eui-notifications\"\n iconSvgSize=\"m\"\n iconSvgFillColor=\"white\"\n (click)=\"onClicked($event)\"\n (keydown.enter)=\"onClicked($event)\"\n (keydown.esc)=\"onHide()\"\n hasFocusBorder>\n <eui-badge *ngIf=\"isShowUnreadSinceLastCheckCount\" euiSizeS euiDanger>{{ unreadSinceLastCheckCount }}</eui-badge>\n</eui-icon-svg-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 set=\"eui\" icon=\"eui-chevron-forward\" 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 <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 .eui-icon-svg svg{transform:scale(1.1)}.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{align-items:center;display:flex;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"] }]
|
|
3424
3424
|
}], propDecorators: { refreshClick: [{
|
|
3425
3425
|
type: Output
|
|
3426
3426
|
}], notificationsClick: [{
|