@eui/ecl 22.0.0-alpha.21 → 22.0.0-alpha.22

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, input, Component, signal, viewChild, computed, afterNextRender, contentChild, booleanAttribute } from '@angular/core';
+import { Directive, input, Component, signal, viewChild, computed, afterNextRender, contentChild, booleanAttribute } from '@angular/core';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@eui/ecl/components/ecl-button';
@@ -12,142 +12,93 @@ 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: "22.1.2", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderBackgroundPictureDirective, isStandalone: true, selector: "[eclPageHeaderBackgroundPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderBackgroundPictureDirective, isStandalone: true, selector: "[eclPageHeaderBackgroundPicture]", host: { classAttribute: "ecl-picture ecl-page-header__picture-background" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderBackgroundPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderBackgroundPicture]',
+                    host: {
+                        'class': 'ecl-picture ecl-page-header__picture-background',
+                    },
                 }]
-        }], 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: "22.1.2", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderBackgroundImageDirective, isStandalone: true, selector: "[eclPageHeaderBackgroundImage]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderBackgroundImageDirective, isStandalone: true, selector: "[eclPageHeaderBackgroundImage]", host: { classAttribute: "ecl-page-header__background" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderBackgroundImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderBackgroundImage]',
+                    host: {
+                        'class': 'ecl-page-header__background',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 // /**
 //  * Styles the container for the page header description.
 //  */
 // @Directive({
 //     selector: '[eclPageHeaderDescriptionContainer]',
+//     host: {
+//         'class': 'ecl-page-header__description-container',
+//     },
 // })
-// export class EclPageHeaderDescriptionContainerDirective extends ECLBaseDirective {
-//     /**
-//      * Applies 'ecl-page-header__description-container' class to the host.
-//      *
-//      * @default 'ecl-page-header__description-container'
-//      */
-//     @HostBinding('class') className = 'ecl-page-header__description-container';
-// }
+// export class EclPageHeaderDescriptionContainerDirective extends ECLBaseDirective {}
 /**
  * Styles a picture used in the page header description.
  */
 class EclPageHeaderDescriptionPictureDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies 'ecl-picture ecl-page-header__picture-thumbnail' classes to the host.
-         *
-         * @default 'ecl-picture ecl-page-header__picture-thumbnail'
-         */
-        this.className = 'ecl-picture ecl-page-header__picture-thumbnail';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderDescriptionPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderDescriptionPictureDirective, isStandalone: true, selector: "[eclPageHeaderDescriptionPicture]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderDescriptionPictureDirective, isStandalone: true, selector: "[eclPageHeaderDescriptionPicture]", host: { classAttribute: "ecl-picture ecl-page-header__picture-thumbnail" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderDescriptionPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderDescriptionPicture]',
+                    host: {
+                        'class': 'ecl-picture ecl-page-header__picture-thumbnail',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Styles a thumbnail or image in the page header description.
  */
 class EclPageHeaderDescriptionThumbnailDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies 'ecl-page-header__description-thumbnail' class to the host.
-         *
-         * @default 'ecl-page-header__description-thumbnail'
-         */
-        this.className = 'ecl-page-header__description-thumbnail';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderDescriptionThumbnailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderDescriptionThumbnailDirective, isStandalone: true, selector: "[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderDescriptionThumbnailDirective, isStandalone: true, selector: "[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]", host: { classAttribute: "ecl-page-header__description-thumbnail" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderDescriptionThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]',
+                    host: {
+                        'class': 'ecl-page-header__description-thumbnail',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Styles the text description in the page header.
  */
 class EclPageHeaderDescriptionDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies 'ecl-page-header__description' class to the host.
-         *
-         * @default 'ecl-page-header__description'
-         */
-        this.className = 'ecl-page-header__description';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderDescriptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderDescriptionDirective, isStandalone: true, selector: "p[eclPageHeaderDescription]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderDescriptionDirective, isStandalone: true, selector: "p[eclPageHeaderDescription]", host: { classAttribute: "ecl-page-header__description" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'p[eclPageHeaderDescription]',
+                    host: {
+                        'class': 'ecl-page-header__description',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 class EclPageHeaderDescriptionContainerComponent extends ECLBaseDirective {
     constructor() {
@@ -218,111 +169,74 @@ class EclPageHeaderExpandableComponent extends ECLBaseDirective {
         this.isExpanded.set(!this.isExpanded());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderExpandableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclPageHeaderExpandableComponent, isStandalone: true, selector: "div[eclPageHeaderExpandable]", host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "projectedSlot", first: true, predicate: ["projectedSlot"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-page-header-expandable__header\">\n    <div class=\"ecl-container ecl-page-header-expandable__container\">\n        <ng-content select=\"[eclPageHeaderExpandableHeader]\"></ng-content>\n\n        @if (hasProjectedContent()) {\n        <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly aria-expanded=\"{{isExpanded()}}\" type=\"submit\"\n            [attr.aria-controls]=\"panelId\" class=\"ecl-page-header-expandable__toggle\" (click)=\"onExpandButtonClick()\">\n            <span eclButtonLabel>expandable button</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"flip-vertical\"></ecl-icon>\n        </button>\n        }\n    </div>\n</div>\n<div class=\"ecl-page-header-expandable__panel\" id=\"{{panelId}}\" [hidden]=\"!isExpanded()\">\n    <div class=\"ecl-container ecl-page-header-expandable__container\" #projectedSlot>\n        <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclPageHeaderExpandableComponent, isStandalone: true, selector: "div[eclPageHeaderExpandable]", host: { properties: { "class": "cssClasses" } }, viewQueries: [{ propertyName: "projectedSlot", first: true, predicate: ["projectedSlot"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-page-header-expandable__header\">\n    <div class=\"ecl-container ecl-page-header-expandable__container\">\n        <ng-content select=\"[eclPageHeaderExpandableHeader]\"></ng-content>\n\n        @if (hasProjectedContent()) {\n        <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly aria-expanded=\"{{isExpanded()}}\" type=\"submit\"\n            [attr.aria-controls]=\"panelId\" class=\"ecl-page-header-expandable__toggle\" (click)=\"onExpandButtonClick()\">\n            <span eclButtonLabel>expandable button</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"flip-vertical\"></ecl-icon>\n        </button>\n        }\n    </div>\n</div>\n<div class=\"ecl-page-header-expandable__panel\" id=\"{{panelId}}\" [hidden]=\"!isExpanded()\">\n    <div class=\"ecl-container ecl-page-header-expandable__container\" #projectedSlot>\n        <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderExpandableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclPageHeaderExpandable]', imports: [...EUI_ECL_BUTTON, ...EUI_ECL_ICON], template: "<div class=\"ecl-page-header-expandable__header\">\n    <div class=\"ecl-container ecl-page-header-expandable__container\">\n        <ng-content select=\"[eclPageHeaderExpandableHeader]\"></ng-content>\n\n        @if (hasProjectedContent()) {\n        <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly aria-expanded=\"{{isExpanded()}}\" type=\"submit\"\n            [attr.aria-controls]=\"panelId\" class=\"ecl-page-header-expandable__toggle\" (click)=\"onExpandButtonClick()\">\n            <span eclButtonLabel>expandable button</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"flip-vertical\"></ecl-icon>\n        </button>\n        }\n    </div>\n</div>\n<div class=\"ecl-page-header-expandable__panel\" id=\"{{panelId}}\" [hidden]=\"!isExpanded()\">\n    <div class=\"ecl-container ecl-page-header-expandable__container\" #projectedSlot>\n        <ng-content></ng-content>\n    </div>\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], projectedSlot: [{ type: i0.ViewChild, args: ['projectedSlot', { isSignal: true }] }] } });
+            args: [{ selector: 'div[eclPageHeaderExpandable]', imports: [...EUI_ECL_BUTTON, ...EUI_ECL_ICON], host: {
+                        '[class]': 'cssClasses',
+                    }, template: "<div class=\"ecl-page-header-expandable__header\">\n    <div class=\"ecl-container ecl-page-header-expandable__container\">\n        <ng-content select=\"[eclPageHeaderExpandableHeader]\"></ng-content>\n\n        @if (hasProjectedContent()) {\n        <button eclButton variant=\"tertiary\" eclStyle=\"neutral\" isIconOnly aria-expanded=\"{{isExpanded()}}\" type=\"submit\"\n            [attr.aria-controls]=\"panelId\" class=\"ecl-page-header-expandable__toggle\" (click)=\"onExpandButtonClick()\">\n            <span eclButtonLabel>expandable button</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"flip-vertical\"></ecl-icon>\n        </button>\n        }\n    </div>\n</div>\n<div class=\"ecl-page-header-expandable__panel\" id=\"{{panelId}}\" [hidden]=\"!isExpanded()\">\n    <div class=\"ecl-container ecl-page-header-expandable__container\" #projectedSlot>\n        <ng-content></ng-content>\n    </div>\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { projectedSlot: [{ type: i0.ViewChild, args: ['projectedSlot', { isSignal: true }] }] } });
 
 /**
  * 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: "22.1.2", ngImport: i0, type: EclPageHeaderInfoDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderInfoDirective, isStandalone: true, selector: "[eclPageHeaderInfo]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderInfoDirective, isStandalone: true, selector: "[eclPageHeaderInfo]", host: { classAttribute: "ecl-page-header__info" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderInfoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderInfo]',
+                    host: {
+                        'class': 'ecl-page-header__info',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 class EclPageHeaderContainerDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies 'ecl-page-header__container' class to the host.
-         *
-         * @default 'ecl-page-header__container'
-         */
-        this.className = 'ecl-page-header__container';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderContainerDirective, isStandalone: true, selector: "[eclPageHeaderContainer]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderContainerDirective, isStandalone: true, selector: "[eclPageHeaderContainer]", host: { classAttribute: "ecl-page-header__container" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderContainer]',
+                    host: {
+                        'class': 'ecl-page-header__container',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 class EclContainerDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies 'ecl-container' class to the host.
-         *
-         * @default 'ecl-container'
-         */
-        this.className = 'ecl-container';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclContainerDirective, isStandalone: true, selector: "[eclContainer]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclContainerDirective, isStandalone: true, selector: "[eclContainer]", host: { classAttribute: "ecl-container" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclContainer]',
+                    host: {
+                        'class': 'ecl-container',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 /**
  * Styles the meta section in the page header.
  */
 class EclPageHeaderMetaDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies 'ecl-page-header__meta' class to the host.
-         *
-         * @default 'ecl-page-header__meta'
-         */
-        this.className = 'ecl-page-header__meta';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderMetaDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderMetaDirective, isStandalone: true, selector: "[eclPageHeaderMeta]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderMetaDirective, isStandalone: true, selector: "[eclPageHeaderMeta]", host: { classAttribute: "ecl-page-header__meta" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderMetaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderMeta]',
+                    host: {
+                        'class': 'ecl-page-header__meta',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Styles individual meta items in the page header.
  */
@@ -331,12 +245,6 @@ class EclPageHeaderMetaItemDirective extends ECLBaseDirective {
         super(...arguments);
         this.eclIcon = contentChild(EclIconComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "eclIcon" }] : /* istanbul ignore next */ []));
-        /**
-         * Applies 'ecl-page-header__meta-item' class to the host.
-         *
-         * @default 'ecl-page-header__meta-item'
-         */
-        this.className = 'ecl-page-header__meta-item';
         this.ICON_CLASS = 'ecl-page-header__meta-icon';
     }
     /**
@@ -349,17 +257,17 @@ class EclPageHeaderMetaItemDirective extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderMetaItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclPageHeaderMetaItemDirective, isStandalone: true, selector: "[eclPageHeaderMetaItem]", host: { properties: { "class": "this.className" } }, queries: [{ propertyName: "eclIcon", first: true, predicate: EclIconComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclPageHeaderMetaItemDirective, isStandalone: true, selector: "[eclPageHeaderMetaItem]", host: { classAttribute: "ecl-page-header__meta-item" }, queries: [{ propertyName: "eclIcon", first: true, predicate: EclIconComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderMetaItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderMetaItem]',
+                    host: {
+                        'class': 'ecl-page-header__meta-item',
+                    },
                 }]
-        }], propDecorators: { eclIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclIconComponent), { isSignal: true }] }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { eclIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclIconComponent), { isSignal: true }] }] } });
 
 /**
  * ECL Page Header component, wraps header content and handles background images and breadcrumb styling.
@@ -407,53 +315,36 @@ class EclPageHeaderNextComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderNextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclPageHeaderNextComponent, isStandalone: true, selector: "div[eclPageHeader]", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, picturePosition: { classPropertyName: "picturePosition", publicName: "picturePosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclPageHeaderNextComponent, isStandalone: true, selector: "div[eclPageHeader]", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, picturePosition: { classPropertyName: "picturePosition", publicName: "picturePosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderNextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclPageHeader]', imports: [], template: "<ng-content></ng-content>" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], eclBreadcrumbComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclBreadcrumbComponent), { isSignal: true }] }], hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }], descriptionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionPosition", required: false }] }], picturePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "picturePosition", required: false }] }] } });
+            args: [{ selector: 'div[eclPageHeader]', imports: [], host: {
+                        '[class]': 'cssClasses',
+                    }, template: "<ng-content></ng-content>" }]
+        }], propDecorators: { eclBreadcrumbComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclBreadcrumbComponent), { isSignal: true }] }], hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }], descriptionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionPosition", required: false }] }], picturePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "picturePosition", required: false }] }] } });
 
 class EclPageHeaderSectionInfoComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * CSS classes applied to the host.
-         */
-        this.className = 'ecl-page-header__section-info ecl-container';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderSectionInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderSectionInfoComponent, isStandalone: true, selector: "div[eclPageHeaderSectionInfo]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ecl-breadcrumb, nav[eclBreadcrumb]\"></ng-content>\n\n<div class=\"ecl-page-header__content-info\">\n    <ng-content select=\"[eclPageHeaderTitle]\"></ng-content>\n    <ng-content select=\"[eclPageHeaderDescriptionContainer]\"></ng-content>\n</div>\n<ng-content select=\"[eclPageHeaderMeta]\"></ng-content>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderSectionInfoComponent, isStandalone: true, selector: "div[eclPageHeaderSectionInfo]", host: { classAttribute: "ecl-page-header__section-info ecl-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ecl-breadcrumb, nav[eclBreadcrumb]\"></ng-content>\n\n<div class=\"ecl-page-header__content-info\">\n    <ng-content select=\"[eclPageHeaderTitle]\"></ng-content>\n    <ng-content select=\"[eclPageHeaderDescriptionContainer]\"></ng-content>\n</div>\n<ng-content select=\"[eclPageHeaderMeta]\"></ng-content>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderSectionInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclPageHeaderSectionInfo]', template: "<ng-content select=\"ecl-breadcrumb, nav[eclBreadcrumb]\"></ng-content>\n\n<div class=\"ecl-page-header__content-info\">\n    <ng-content select=\"[eclPageHeaderTitle]\"></ng-content>\n    <ng-content select=\"[eclPageHeaderDescriptionContainer]\"></ng-content>\n</div>\n<ng-content select=\"[eclPageHeaderMeta]\"></ng-content>" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'div[eclPageHeaderSectionInfo]', host: {
+                        'class': 'ecl-page-header__section-info ecl-container',
+                    }, template: "<ng-content select=\"ecl-breadcrumb, nav[eclBreadcrumb]\"></ng-content>\n\n<div class=\"ecl-page-header__content-info\">\n    <ng-content select=\"[eclPageHeaderTitle]\"></ng-content>\n    <ng-content select=\"[eclPageHeaderDescriptionContainer]\"></ng-content>\n</div>\n<ng-content select=\"[eclPageHeaderMeta]\"></ng-content>" }]
+        }] });
 
 class EclPageHeaderSectionComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * CSS classes applied to the host.
-         */
-        this.className = 'ecl-page-header__section-description';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderSectionComponent, isStandalone: true, selector: "div[eclPageHeaderSection]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderSectionComponent, isStandalone: true, selector: "div[eclPageHeaderSection]", host: { classAttribute: "ecl-page-header__section-description" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclPageHeaderSection]', template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>" }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'div[eclPageHeaderSection]', host: {
+                        'class': 'ecl-page-header__section-description',
+                    }, template: "<div class=\"ecl-container\">\n    <ng-content></ng-content>\n</div>" }]
+        }] });
 
 /**
  * Styles the title section in the page header.
@@ -481,17 +372,17 @@ class EclPageHeaderTitleDirective extends ECLBaseDirective {
         ].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclPageHeaderTitleDirective, isStandalone: true, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: { classPropertyName: "isTitleVisible", publicName: "isTitleVisible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EclPageHeaderTitleDirective, isStandalone: true, selector: "[eclPageHeaderTitle]", inputs: { isTitleVisible: { classPropertyName: "isTitleVisible", publicName: "isTitleVisible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderTitle]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { isTitleVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTitleVisible", required: false }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { isTitleVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTitleVisible", required: false }] }] } });
 /**
  * Styles the header section for the page header expandable component.
  */
@@ -505,17 +396,17 @@ class EclPageHeaderExpandableHeaderDirective extends ECLBaseDirective {
         ].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderExpandableHeaderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderExpandableHeaderDirective, isStandalone: true, selector: "[eclPageHeaderExpandableHeader]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclPageHeaderExpandableHeaderDirective, isStandalone: true, selector: "[eclPageHeaderExpandableHeader]", host: { properties: { "class": "cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderExpandableHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclPageHeaderExpandableHeader]',
+                    host: {
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 /**
  * ECL Page Header component, wraps header content and handles background images and breadcrumb styling.
@@ -577,15 +468,14 @@ class EclPageHeaderComponent extends ECLBaseDirective {
         return !!this.eclBackgroundPicture();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclPageHeaderComponent, isStandalone: true, selector: "ecl-page-header", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, picturePosition: { classPropertyName: "picturePosition", publicName: "picturePosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true, isSignal: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[eclPageHeaderExpandable]\"></ng-content>\n@if(hasPicture){\n<div class=\"ecl-page-header__background-container\">\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>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclPageHeaderComponent, isStandalone: true, selector: "ecl-page-header", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, picturePosition: { classPropertyName: "picturePosition", publicName: "picturePosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true, isSignal: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[eclPageHeaderExpandable]\"></ng-content>\n@if(hasPicture){\n<div class=\"ecl-page-header__background-container\">\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>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-page-header', imports: [NgTemplateOutlet], template: "<ng-content select=\"[eclPageHeaderExpandable]\"></ng-content>\n@if(hasPicture){\n<div class=\"ecl-page-header__background-container\">\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>", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], eclBreadcrumbComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclBreadcrumbComponent), { isSignal: true }] }], eclBackgroundPicture: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclPageHeaderBackgroundPictureDirective), { isSignal: true }] }], hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }], descriptionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionPosition", required: false }] }], picturePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "picturePosition", required: false }] }] } });
+            args: [{ selector: 'ecl-page-header', imports: [NgTemplateOutlet], host: {
+                        '[class]': 'cssClasses',
+                    }, template: "<ng-content select=\"[eclPageHeaderExpandable]\"></ng-content>\n@if(hasPicture){\n<div class=\"ecl-page-header__background-container\">\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>", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { eclBreadcrumbComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclBreadcrumbComponent), { isSignal: true }] }], eclBackgroundPicture: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclPageHeaderBackgroundPictureDirective), { isSignal: true }] }], hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }], descriptionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionPosition", required: false }] }], picturePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "picturePosition", required: false }] }] } });
 
 const EUI_ECL_PAGE_HEADER = [
     EclPageHeaderComponent,