@eui/ecl 19.3.3-snapshot-1754580137043 → 19.3.3-snapshot-1754592815527

package/fesm2022/eui-ecl-components-ecl-notification.mjs

@@ -1,16 +1,14 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, booleanAttribute, HostBinding, Output, Input, Component, Directive, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i5 from '@ngx-translate/core';
+import * as i1 from '@eui/ecl/core';
+import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
+import { AsyncPipe, TitleCasePipe } from '@angular/common';
+import * as i4 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i2 from '@eui/ecl/components/ecl-button';
+import * as i3 from '@eui/ecl/components/ecl-button';
 import { EclButtonModule } from '@eui/ecl/components/ecl-button';
-import * as i3 from '@eui/ecl/components/ecl-icon';
+import * as i2 from '@eui/ecl/components/ecl-icon';
 import { EclIconModule } from '@eui/ecl/components/ecl-icon';
-import { EclSiteFooterModule } from '@eui/ecl/components/ecl-site-footer';
-import * as i1 from '@eui/ecl/core';
-import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
 
 /**
  * Event emitted when the notification is closed.
@@ -99,11 +97,17 @@ class EclNotificationComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationComponent, deps: [{ token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclNotificationComponent, isStandalone: false, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n", dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclNotificationComponent, isStandalone: true, selector: "ecl-notification", inputs: { notificationTitle: "notificationTitle", variant: "variant", isVisible: ["isVisible", "isVisible", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute] }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-notification', standalone: false, template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n" }]
+            args: [{ selector: 'ecl-notification', imports: [
+                        AsyncPipe,
+                        TitleCasePipe,
+                        EclIconModule,
+                        EclButtonModule,
+                        TranslateModule,
+                    ], template: "@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.EclThemeService }], propDecorators: { notificationTitle: [{
                 type: Input
             }], variant: [{
@@ -139,36 +143,45 @@ class EclNotificationTitleDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-notification__title')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclNotificationTitleDirective, isStandalone: false, selector: "[eclNotificationTitle]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclNotificationTitleDirective, isStandalone: true, selector: "[eclNotificationTitle]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclNotificationTitle]',
-                    standalone: false,
                 }]
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * Module that provides the EclNotification component and its dependencies.
+ *
+ * @deprecated Use {@link EUI_ECL_NOTIFICATION} instead.
+ */
 class EclNotificationModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationModule, declarations: [EclNotificationComponent, EclNotificationTitleDirective], imports: [CommonModule, EclButtonModule, EclIconModule, TranslateModule, EclSiteFooterModule], exports: [EclNotificationComponent, EclNotificationTitleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationModule, imports: [CommonModule, EclButtonModule, EclIconModule, TranslateModule, EclSiteFooterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationModule, imports: [EclNotificationComponent, EclNotificationTitleDirective], exports: [EclNotificationComponent, EclNotificationTitleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationModule, imports: [EclNotificationComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclNotificationModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, EclButtonModule, EclIconModule, TranslateModule, EclSiteFooterModule],
+                    imports: [EclNotificationComponent, EclNotificationTitleDirective],
                     exports: [EclNotificationComponent, EclNotificationTitleDirective],
-                    declarations: [EclNotificationComponent, EclNotificationTitleDirective],
                 }]
         }] });
 
+const EUI_ECL_NOTIFICATION = [
+    EclNotificationComponent,
+    EclNotificationTitleDirective,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EclNotificationCloseEvent, EclNotificationComponent, EclNotificationModule, EclNotificationTitleDirective };
+export { EUI_ECL_NOTIFICATION, EclNotificationCloseEvent, EclNotificationComponent, EclNotificationModule, EclNotificationTitleDirective };
 //# sourceMappingURL=eui-ecl-components-ecl-notification.mjs.map

package/fesm2022/eui-ecl-components-ecl-notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-notification.mjs","sources":["../../components/ecl-notification/events/ecl-notification-close.event.ts","../../components/ecl-notification/ecl-notification.component.ts","../../components/ecl-notification/ecl-notification.component.html","../../components/ecl-notification/ecl-notification-title.directive.ts","../../components/ecl-notification/ecl-notification.module.ts","../../components/ecl-notification/eui-ecl-components-ecl-notification.ts"],"sourcesContent":["import { EclBaseEvent } from '@eui/ecl/core';\n\n/**\n * Event emitted when the notification is closed.\n *\n * Can be used to prevent default close behavior by calling `event.preventDefault()`.\n */\nexport class EclNotificationCloseEvent extends EclBaseEvent {\n}\n","import { Component, Input, Output, EventEmitter, HostBinding, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclNotificationCloseEvent } from './events/ecl-notification-close.event';\n\n@Component({\n    selector: 'ecl-notification',\n    templateUrl: './ecl-notification.component.html',\n    standalone: false,\n})\nexport class EclNotificationComponent extends ECLBaseDirective {\n    /**\n     * The title of the notification. This is displayed inside the component.\n     */\n    @Input() notificationTitle: string;\n\n    /**\n     * Defines the visual style of the notification.\n     * Can be one of: 'info' | 'success' | 'warning' | 'error'.\n     * Default is 'info'.\n     */\n    @Input() variant: 'info' | 'success' | 'warning' | 'error' = 'info';\n\n    /**\n     * Controls the visibility of the notification.\n     * When false, the component is hidden using CSS utility class.\n     */\n    @Input({ transform: booleanAttribute }) isVisible = true;\n\n    /**\n     * Indicates whether the close button is displayed.\n     */\n    @Input({ transform: booleanAttribute }) isCloseable = true;\n\n    /**\n     * Emits an event when the close button is clicked.\n     * Consumers can call `preventDefault()` on the emitted event to prevent the notification from closing.\n     */\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() close = new EventEmitter<EclNotificationCloseEvent>();\n\n    /**\n     * The ARIA role for the component. Set to \"alert\" by default.\n     */\n    @HostBinding('attr.role')\n    role = 'alert';\n\n    private variantTitleIconMapping = new Map<string, { title: string, icon: string }>([\n        ['info', { title: 'information', icon: 'information' }],\n        ['success', { title: 'success', icon: 'check-filled' }],\n        ['warning', { title: 'warning', icon: 'warning' }],\n        ['error', { title: 'error', icon: 'error' }],\n    ]);\n\n    constructor(public eclThemeService: EclThemeService) {\n        super();\n    }\n\n    /**\n     * Applies the `ecl-u-d-none` utility class when the notification is not visible.\n     */\n    @HostBinding('class.ecl-u-d-none')\n    get isHidden(): boolean {\n        return !this.isVisible;\n    }\n\n    /**\n     * Computes the CSS classes applied to the host element, including the modifier for the current variant.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification'), this.variant ? `ecl-notification--${this.variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * Returns the default title text based on the current variant.\n     */\n    get title(): string {\n        return this.titleAndIconBaseOnVariant.title;\n    }\n\n    /**\n     * Returns the icon name based on the current variant.\n     */\n    get icon(): string {\n        return this.titleAndIconBaseOnVariant.icon;\n    }\n\n    /**\n     * Returns a mapping of title and icon based on the current variant.\n     */\n    get titleAndIconBaseOnVariant(): { title: string, icon: string } {\n        return this.variantTitleIconMapping.get(this.variant) || { title: 'information', icon: 'information' };\n    }\n\n    /**\n     * Handles the click event on the close button.\n     * Emits a `close` event with an instance of `EclNotificationCloseEvent`.\n     * If the event is not prevented, the notification is hidden.\n     */\n    onCloseClick(evt: Event): void {\n        const event = new EclNotificationCloseEvent();\n        this.close.next(event);\n        if (!event.defaultPrevented) {\n            this.isVisible = false;\n        }\n    }\n}\n","@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive applied to a notification title element.\n * Adds the appropriate ECL class for styling the notification title.\n */\n@Directive({\n    selector: '[eclNotificationTitle]',\n    standalone: false,\n})\nexport class EclNotificationTitleDirective extends ECLBaseDirective {\n    /**\n     * Host binding for applying the ECL notification title CSS class.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification__title')].join(' ').trim();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EclButtonModule } from '@eui/ecl/components/ecl-button';\nimport { EclIconModule } from '@eui/ecl/components/ecl-icon';\nimport { EclSiteFooterModule } from '@eui/ecl/components/ecl-site-footer';\nimport { EclNotificationComponent } from './ecl-notification.component';\nimport { EclNotificationTitleDirective } from './ecl-notification-title.directive';\n\n@NgModule({\n    imports: [CommonModule, EclButtonModule, EclIconModule, TranslateModule, EclSiteFooterModule],\n    exports: [EclNotificationComponent, EclNotificationTitleDirective],\n    declarations: [EclNotificationComponent, EclNotificationTitleDirective],\n})\nexport class EclNotificationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAEA;;;;AAIG;AACG,MAAO,yBAA0B,SAAQ,YAAY,CAAA;AAC1D;;ACEK,MAAO,wBAAyB,SAAQ,gBAAgB,CAAA;AA4C1D,IAAA,WAAA,CAAmB,eAAgC,EAAA;AAC/C,QAAA,KAAK,EAAE;QADQ,IAAA,CAAA,eAAe,GAAf,eAAe;AAtClC;;;;AAIG;QACM,IAAA,CAAA,OAAO,GAA6C,MAAM;AAEnE;;;AAGG;QACqC,IAAA,CAAA,SAAS,GAAG,IAAI;AAExD;;AAEG;QACqC,IAAA,CAAA,WAAW,GAAG,IAAI;AAE1D;;;AAGG;;AAEO,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,YAAY,EAA6B;AAE/D;;AAEG;QAEH,IAAA,CAAA,IAAI,GAAG,OAAO;QAEN,IAAA,CAAA,uBAAuB,GAAG,IAAI,GAAG,CAA0C;YAC/E,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;YACvD,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;YACvD,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;YAClD,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAC/C,SAAA,CAAC;IAIF;AAEA;;AAEG;AACH,IAAA,IACI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAC,IAAI,CAAC,SAAS;IAC1B;AAEA;;AAEG;AACH,IAAA,IACI,UAAU,GAAA;AACV,QAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,CAAA,kBAAA,EAAqB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IAC9H;AAEA;;AAEG;AACH,IAAA,IAAI,KAAK,GAAA;AACL,QAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,KAAK;IAC/C;AAEA;;AAEG;AACH,IAAA,IAAI,IAAI,GAAA;AACJ,QAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,IAAI;IAC9C;AAEA;;AAEG;AACH,IAAA,IAAI,yBAAyB,GAAA;QACzB,OAAO,IAAI,CAAC,uBAAuB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC1G;AAEA;;;;AAIG;AACH,IAAA,YAAY,CAAC,GAAU,EAAA;AACnB,QAAA,MAAM,KAAK,GAAG,IAAI,yBAAyB,EAAE;AAC7C,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QAC1B;IACJ;+GAhGS,wBAAwB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAiBb,gBAAgB,CAAA,EAAA,WAAA,EAAA,CAAA,aAAA,EAAA,aAAA,EAKhB,gBAAgB,wMChCxC,w0BAmBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,SAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDTa,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBALpC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,cAEhB,KAAK,EAAA,QAAA,EAAA,w0BAAA,EAAA;oFAMR,iBAAiB,EAAA,CAAA;sBAAzB;gBAOQ,OAAO,EAAA,CAAA;sBAAf;gBAMuC,SAAS,EAAA,CAAA;sBAAhD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAKE,WAAW,EAAA,CAAA;sBAAlD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAO5B,KAAK,EAAA,CAAA;sBAAd;gBAMD,IAAI,EAAA,CAAA;sBADH,WAAW;uBAAC,WAAW;gBAkBpB,QAAQ,EAAA,CAAA;sBADX,WAAW;uBAAC,oBAAoB;gBAS7B,UAAU,EAAA,CAAA;sBADb,WAAW;uBAAC,OAAO;;;AElExB;;;AAGG;AAKG,MAAO,6BAA8B,SAAQ,gBAAgB,CAAA;AAC/D;;AAEG;AACH,IAAA,IACI,UAAU,GAAA;AACV,QAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;IAC5E;+GAPS,6BAA6B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAA7B,6BAA6B,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAA7B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAJzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,UAAU,EAAE,KAAK;AACpB,iBAAA;8BAMO,UAAU,EAAA,CAAA;sBADb,WAAW;uBAAC,OAAO;;;MCDX,qBAAqB,CAAA;+GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,iBAFf,wBAAwB,EAAE,6BAA6B,CAAA,EAAA,OAAA,EAAA,CAF5D,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,mBAAmB,CAAA,EAAA,OAAA,EAAA,CAClF,wBAAwB,EAAE,6BAA6B,CAAA,EAAA,CAAA,CAAA;gHAGxD,qBAAqB,EAAA,OAAA,EAAA,CAJpB,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,mBAAmB,CAAA,EAAA,CAAA,CAAA;;4FAInF,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,mBAAmB,CAAC;AAC7F,oBAAA,OAAO,EAAE,CAAC,wBAAwB,EAAE,6BAA6B,CAAC;AAClE,oBAAA,YAAY,EAAE,CAAC,wBAAwB,EAAE,6BAA6B,CAAC;AAC1E,iBAAA;;;ACbD;;AAEG;;;;"}
+{"version":3,"file":"eui-ecl-components-ecl-notification.mjs","sources":["../../components/ecl-notification/events/ecl-notification-close.event.ts","../../components/ecl-notification/ecl-notification.component.ts","../../components/ecl-notification/ecl-notification.component.html","../../components/ecl-notification/ecl-notification-title.directive.ts","../../components/ecl-notification/ecl-notification.module.ts","../../components/ecl-notification/index.ts","../../components/ecl-notification/eui-ecl-components-ecl-notification.ts"],"sourcesContent":["import { EclBaseEvent } from '@eui/ecl/core';\n\n/**\n * Event emitted when the notification is closed.\n *\n * Can be used to prevent default close behavior by calling `event.preventDefault()`.\n */\nexport class EclNotificationCloseEvent extends EclBaseEvent {\n}\n","import { Component, Input, Output, EventEmitter, HostBinding, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclNotificationCloseEvent } from './events/ecl-notification-close.event';\nimport { AsyncPipe, TitleCasePipe } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EclButtonModule } from '@eui/ecl/components/ecl-button';\nimport { EclIconModule } from '@eui/ecl/components/ecl-icon';\n\n@Component({\n    selector: 'ecl-notification',\n    templateUrl: './ecl-notification.component.html',\n    imports: [\n        AsyncPipe,\n        TitleCasePipe,\n        EclIconModule,\n        EclButtonModule,\n        TranslateModule,\n    ],\n})\nexport class EclNotificationComponent extends ECLBaseDirective {\n    /**\n     * The title of the notification. This is displayed inside the component.\n     */\n    @Input() notificationTitle: string;\n\n    /**\n     * Defines the visual style of the notification.\n     * Can be one of: 'info' | 'success' | 'warning' | 'error'.\n     * Default is 'info'.\n     */\n    @Input() variant: 'info' | 'success' | 'warning' | 'error' = 'info';\n\n    /**\n     * Controls the visibility of the notification.\n     * When false, the component is hidden using CSS utility class.\n     */\n    @Input({ transform: booleanAttribute }) isVisible = true;\n\n    /**\n     * Indicates whether the close button is displayed.\n     */\n    @Input({ transform: booleanAttribute }) isCloseable = true;\n\n    /**\n     * Emits an event when the close button is clicked.\n     * Consumers can call `preventDefault()` on the emitted event to prevent the notification from closing.\n     */\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() close = new EventEmitter<EclNotificationCloseEvent>();\n\n    /**\n     * The ARIA role for the component. Set to \"alert\" by default.\n     */\n    @HostBinding('attr.role')\n    role = 'alert';\n\n    private variantTitleIconMapping = new Map<string, { title: string, icon: string }>([\n        ['info', { title: 'information', icon: 'information' }],\n        ['success', { title: 'success', icon: 'check-filled' }],\n        ['warning', { title: 'warning', icon: 'warning' }],\n        ['error', { title: 'error', icon: 'error' }],\n    ]);\n\n    constructor(public eclThemeService: EclThemeService) {\n        super();\n    }\n\n    /**\n     * Applies the `ecl-u-d-none` utility class when the notification is not visible.\n     */\n    @HostBinding('class.ecl-u-d-none')\n    get isHidden(): boolean {\n        return !this.isVisible;\n    }\n\n    /**\n     * Computes the CSS classes applied to the host element, including the modifier for the current variant.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification'), this.variant ? `ecl-notification--${this.variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * Returns the default title text based on the current variant.\n     */\n    get title(): string {\n        return this.titleAndIconBaseOnVariant.title;\n    }\n\n    /**\n     * Returns the icon name based on the current variant.\n     */\n    get icon(): string {\n        return this.titleAndIconBaseOnVariant.icon;\n    }\n\n    /**\n     * Returns a mapping of title and icon based on the current variant.\n     */\n    get titleAndIconBaseOnVariant(): { title: string, icon: string } {\n        return this.variantTitleIconMapping.get(this.variant) || { title: 'information', icon: 'information' };\n    }\n\n    /**\n     * Handles the click event on the close button.\n     * Emits a `close` event with an instance of `EclNotificationCloseEvent`.\n     * If the event is not prevented, the notification is hidden.\n     */\n    onCloseClick(evt: Event): void {\n        const event = new EclNotificationCloseEvent();\n        this.close.next(event);\n        if (!event.defaultPrevented) {\n            this.isVisible = false;\n        }\n    }\n}\n","@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive applied to a notification title element.\n * Adds the appropriate ECL class for styling the notification title.\n */\n@Directive({\n    selector: '[eclNotificationTitle]',\n})\nexport class EclNotificationTitleDirective extends ECLBaseDirective {\n    /**\n     * Host binding for applying the ECL notification title CSS class.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification__title')].join(' ').trim();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { EclNotificationComponent } from './ecl-notification.component';\nimport { EclNotificationTitleDirective } from './ecl-notification-title.directive';\n\n/**\n * @description\n * Module that provides the EclNotification component and its dependencies.\n *\n * @deprecated Use {@link EUI_ECL_NOTIFICATION} instead.\n */\n@NgModule({\n  imports: [EclNotificationComponent, EclNotificationTitleDirective],\n  exports: [EclNotificationComponent, EclNotificationTitleDirective],\n})\nexport class EclNotificationModule {}\n","import { EclNotificationComponent } from './ecl-notification.component';\nimport { EclNotificationTitleDirective } from './ecl-notification-title.directive';\n\nexport * from './ecl-notification.module';\nexport * from './ecl-notification.component';\nexport * from './ecl-notification-title.directive';\nexport * from './events/ecl-notification-close.event';\n\nexport const EUI_ECL_NOTIFICATION = [\n  EclNotificationComponent,\n  EclNotificationTitleDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-ecl-components-ecl-page-header.mjs

@@ -1,10 +1,60 @@
 import * as i0 from '@angular/core';
 import { HostBinding, Directive, booleanAttribute, Input, ContentChild, Component, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { ECLBaseDirective } from '@eui/ecl/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { EclBreadcrumbComponent } from '@eui/ecl/components/ecl-breadcrumb';
 
+/**
+ * Styles the background picture inside the page header.
+ */
+class EclPageHeaderBackgroundPictureDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * Applies 'ecl-picture ecl-page-header__picture-background' classes to the host.
+         *
+         * @default 'ecl-picture ecl-page-header__picture-background'
+         */
+        this.className = 'ecl-picture ecl-page-header__picture-background';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderBackgroundPictureDirective, isStandalone: true, selector: "[eclPageHeaderBackgroundPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclPageHeaderBackgroundPicture]',
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+/**
+ * Styles the background image inside the page header.
+ */
+class EclPageHeaderBackgroundImageDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * Applies 'ecl-page-header__background' class to the host.
+         *
+         * @default 'ecl-page-header__background'
+         */
+        this.className = 'ecl-page-header__background';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderBackgroundImageDirective, isStandalone: true, selector: "[eclPageHeaderBackgroundImage]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclPageHeaderBackgroundImage]',
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 /**
  * Styles the container for the page header description.
  */
@@ -19,13 +69,12 @@ class EclPageHeaderDescriptionContainerDirective extends ECLBaseDirective {
         this.className = 'ecl-page-header__description-container';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderDescriptionContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderDescriptionContainerDirective, isStandalone: false, selector: "[eclPageHeaderDescriptionContainer]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderDescriptionContainerDirective, isStandalone: true, selector: "[eclPageHeaderDescriptionContainer]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderDescriptionContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderDescriptionContainer]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -45,13 +94,12 @@ class EclPageHeaderDescriptionPictureDirective extends ECLBaseDirective {
         this.className = 'ecl-picture ecl-page-header__picture-thumbnail';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderDescriptionPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderDescriptionPictureDirective, isStandalone: false, selector: "[eclPageHeaderDescriptionPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderDescriptionPictureDirective, isStandalone: true, selector: "[eclPageHeaderDescriptionPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderDescriptionPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderDescriptionPicture]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -71,13 +119,12 @@ class EclPageHeaderDescriptionThumbnailDirective extends ECLBaseDirective {
         this.className = 'ecl-page-header__description-thumbnail';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderDescriptionThumbnailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderDescriptionThumbnailDirective, isStandalone: false, selector: "[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderDescriptionThumbnailDirective, isStandalone: true, selector: "[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderDescriptionThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -97,13 +144,12 @@ class EclPageHeaderDescriptionDirective extends ECLBaseDirective {
         this.className = 'ecl-page-header__description';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderDescriptionDirective, isStandalone: false, selector: "[eclPageHeaderDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderDescriptionDirective, isStandalone: true, selector: "[eclPageHeaderDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderDescription]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -111,43 +157,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 /**
- * Styles the title section in the page header.
+ * Styles the info section in the page header.
  */
-class EclPageHeaderTitleDirective extends ECLBaseDirective {
+class EclPageHeaderInfoDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
         /**
-         * Whether the title is visible.
+         * Applies 'ecl-page-header__info' class to the host.
          *
-         * @default true
+         * @default 'ecl-page-header__info'
          */
-        this.isTitleVisible = true;
-    }
-    /**
-     * CSS classes applied to the host.
-     *
-     * @default 'ecl-page-header__title'
-     * 'ecl-u-sr-only' if the title is hidden
-     */
-    get cssClasses() {
-        return [
-            super.getCssClasses('ecl-page-header__title'),
-            !this.isTitleVisible ? 'ecl-u-sr-only' : '',
-        ].join(' ').trim();
+        this.className = 'ecl-page-header__info';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.14", type: EclPageHeaderTitleDirective, isStandalone: false, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: ["isTitleVisible", "isTitleVisible", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderInfoDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderInfoDirective, isStandalone: true, selector: "[eclPageHeaderInfo]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderInfoDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[eclPageHeaderTitle]',
-                    standalone: false,
+                    selector: '[eclPageHeaderInfo]',
                 }]
-        }], propDecorators: { isTitleVisible: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], cssClasses: [{
+        }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -166,13 +196,12 @@ class EclPageHeaderMetaDirective extends ECLBaseDirective {
         this.className = 'ecl-page-header__meta';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderMetaDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderMetaDirective, isStandalone: false, selector: "[eclPageHeaderMeta]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderMetaDirective, isStandalone: true, selector: "[eclPageHeaderMeta]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderMetaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderMeta]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -192,13 +221,12 @@ class EclPageHeaderMetaItemDirective extends ECLBaseDirective {
         this.className = 'ecl-page-header__meta-item';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderMetaItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderMetaItemDirective, isStandalone: false, selector: "[eclPageHeaderMetaItem]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderMetaItemDirective, isStandalone: true, selector: "[eclPageHeaderMetaItem]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderMetaItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderMetaItem]',
-                    standalone: false,
                 }]
         }], propDecorators: { className: [{
                 type: HostBinding,
@@ -206,54 +234,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 /**
- * Styles the background picture inside the page header.
+ * Styles the title section in the page header.
  */
-class EclPageHeaderBackgroundPictureDirective extends ECLBaseDirective {
+class EclPageHeaderTitleDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
         /**
-         * Applies 'ecl-picture ecl-page-header__picture-background' classes to the host.
+         * Whether the title is visible.
          *
-         * @default 'ecl-picture ecl-page-header__picture-background'
+         * @default true
          */
-        this.className = 'ecl-picture ecl-page-header__picture-background';
+        this.isTitleVisible = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderBackgroundPictureDirective, isStandalone: false, selector: "[eclPageHeaderBackgroundPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[eclPageHeaderBackgroundPicture]',
-                    standalone: false,
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-/**
- * Styles the background image inside the page header.
- */
-class EclPageHeaderBackgroundImageDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies 'ecl-page-header__background' class to the host.
-         *
-         * @default 'ecl-page-header__background'
-         */
-        this.className = 'ecl-page-header__background';
+    /**
+     * CSS classes applied to the host.
+     *
+     * @default 'ecl-page-header__title'
+     * 'ecl-u-sr-only' if the title is hidden
+     */
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-page-header__title'),
+            !this.isTitleVisible ? 'ecl-u-sr-only' : '',
+        ].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderBackgroundImageDirective, isStandalone: false, selector: "[eclPageHeaderBackgroundImage]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.14", type: EclPageHeaderTitleDirective, isStandalone: true, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: ["isTitleVisible", "isTitleVisible", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[eclPageHeaderBackgroundImage]',
-                    standalone: false,
+                    selector: '[eclPageHeaderTitle]',
                 }]
-        }], propDecorators: { className: [{
+        }], propDecorators: { isTitleVisible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -295,11 +311,11 @@ class EclPageHeaderComponent extends ECLBaseDirective {
         return !!this.eclBackgroundPicture;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclPageHeaderComponent, isStandalone: false, selector: "ecl-page-header", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasPicture){\n    <div class=\"ecl-page-header__background-container\" aria-hidden=\"true\">\n        <ng-content select=\"[eclPageHeaderBackgroundPicture]\"></ng-content>\n    </div>\n}\n\n<div class=\"ecl-container\">\n    <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclPageHeaderComponent, isStandalone: true, selector: "ecl-page-header", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasPicture){\n    <div class=\"ecl-page-header__background-container\" aria-hidden=\"true\">\n        <ng-content select=\"[eclPageHeaderBackgroundPicture]\"></ng-content>\n    </div>\n}\n\n<div class=\"ecl-container\">\n    <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-page-header', standalone: false, template: "@if(hasPicture){\n    <div class=\"ecl-page-header__background-container\" aria-hidden=\"true\">\n        <ng-content select=\"[eclPageHeaderBackgroundPicture]\"></ng-content>\n    </div>\n}\n\n<div class=\"ecl-container\">\n    <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-page-header', imports: [NgTemplateOutlet], template: "@if(hasPicture){\n    <div class=\"ecl-page-header__background-container\" aria-hidden=\"true\">\n        <ng-content select=\"[eclPageHeaderBackgroundPicture]\"></ng-content>\n    </div>\n}\n\n<div class=\"ecl-container\">\n    <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -311,33 +327,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [EclPageHeaderBackgroundPictureDirective]
             }] } });
 
-/**
- * Styles the info section in the page header.
- */
-class EclPageHeaderInfoDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies 'ecl-page-header__info' class to the host.
-         *
-         * @default 'ecl-page-header__info'
-         */
-        this.className = 'ecl-page-header__info';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderInfoDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclPageHeaderInfoDirective, isStandalone: false, selector: "[eclPageHeaderInfo]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderInfoDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[eclPageHeaderInfo]',
-                    standalone: false,
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 const COMPONENTS = [
     EclPageHeaderComponent,
     EclPageHeaderInfoDirective,
@@ -351,9 +340,14 @@ const COMPONENTS = [
     EclPageHeaderBackgroundPictureDirective,
     EclPageHeaderBackgroundImageDirective,
 ];
+/**
+ * Module that provides the EclPageHeaderComponent and it's dependencies.
+ *
+ * @deprecated Use {@link EUI_ECL_PAGE_HEADER} instead.
+ */
 class EclPageHeaderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderModule, declarations: [EclPageHeaderComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderModule, imports: [EclPageHeaderComponent,
             EclPageHeaderInfoDirective,
             EclPageHeaderMetaDirective,
             EclPageHeaderMetaItemDirective,
@@ -363,7 +357,7 @@ class EclPageHeaderModule {
             EclPageHeaderDescriptionContainerDirective,
             EclPageHeaderDescriptionPictureDirective,
             EclPageHeaderBackgroundPictureDirective,
-            EclPageHeaderBackgroundImageDirective], imports: [CommonModule], exports: [EclPageHeaderComponent,
+            EclPageHeaderBackgroundImageDirective], exports: [EclPageHeaderComponent,
             EclPageHeaderInfoDirective,
             EclPageHeaderMetaDirective,
             EclPageHeaderMetaItemDirective,
@@ -374,20 +368,33 @@ class EclPageHeaderModule {
             EclPageHeaderDescriptionPictureDirective,
             EclPageHeaderBackgroundPictureDirective,
             EclPageHeaderBackgroundImageDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclPageHeaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [...COMPONENTS],
                     exports: [...COMPONENTS],
-                    declarations: [...COMPONENTS],
                 }]
         }] });
 
+const EUI_ECL_PAGE_HEADER = [
+    EclPageHeaderComponent,
+    EclPageHeaderInfoDirective,
+    EclPageHeaderMetaDirective,
+    EclPageHeaderMetaItemDirective,
+    EclPageHeaderTitleDirective,
+    EclPageHeaderDescriptionDirective,
+    EclPageHeaderDescriptionThumbnailDirective,
+    EclPageHeaderDescriptionContainerDirective,
+    EclPageHeaderDescriptionPictureDirective,
+    EclPageHeaderBackgroundPictureDirective,
+    EclPageHeaderBackgroundImageDirective,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderInfoDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderModule, EclPageHeaderTitleDirective };
+export { EUI_ECL_PAGE_HEADER, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderInfoDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderModule, EclPageHeaderTitleDirective };
 //# sourceMappingURL=eui-ecl-components-ecl-page-header.mjs.map