npm - @eui/ecl - Versions diffs - 15.0.0-next.16 → 15.0.0-next.18 - Mend

@eui/ecl 15.0.0-next.16 → 15.0.0-next.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (213) hide show

package/fesm2020/eui-ecl.mjs CHANGED Viewed

@@ -61,6 +61,7 @@ class EclIconComponent extends ECLBaseDirective {
         this.el = el;
         this.iconSet = 'default';
         this.size = 'xs';
+        this.isInverted = false;
         this.ariaHidden = true;
         this.focusable = false;
     }
@@ -90,6 +91,7 @@ class EclIconComponent extends ECLBaseDirective {
             [`ecl-icon--${this.size}`]: this.size,
             [`ecl-icon--${this.transform}`]: this.transform,
             [`ecl-icon--${this.color}`]: this.color,
+            [`ecl-icon--inverted`]: this.isInverted,
             [hostClasses]: true
         };
     }
@@ -115,7 +117,10 @@ class EclIconComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclIconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclIconComponent, selector: "ecl-icon", inputs: { iconSet: "iconSet", icon: "icon", size: "size", color: "color", transform: "transform", ariaLabelledby: "ariaLabelledby", role: "role", ariaHidden: "ariaHidden", focusable: "focusable" }, viewQueries: [{ propertyName: "svgEl", first: true, predicate: ["svg"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg #svg\n     [ngClass]=\"getClasses()\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-labelledby]=\"ariaLabelledby || null\"\n     [attr.role]=\"role || null\"\n     [attr.focusable]=\"focusable\">\n  <use [attr.xlink:href]=\"iconUrl\"></use>\n  <ng-content></ng-content>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+/** @nocollapse */ EclIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclIconComponent, selector: "ecl-icon", inputs: { iconSet: "iconSet", icon: "icon", size: "size", color: "color", transform: "transform", ariaLabelledby: "ariaLabelledby", role: "role", isInverted: "isInverted", ariaHidden: "ariaHidden", focusable: "focusable" }, viewQueries: [{ propertyName: "svgEl", first: true, predicate: ["svg"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<svg #svg\n     [ngClass]=\"getClasses()\"\n     [attr.aria-hidden]=\"ariaHidden\"\n     [attr.aria-labelledby]=\"ariaLabelledby || null\"\n     [attr.role]=\"role || null\"\n     [attr.focusable]=\"focusable\">\n  <use [attr.xlink:href]=\"iconUrl\"></use>\n  <ng-content></ng-content>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+__decorate([
+    coerceBoolean
+], EclIconComponent.prototype, "isInverted", void 0);
 __decorate([
     coerceBoolean
 ], EclIconComponent.prototype, "ariaHidden", void 0);
@@ -142,6 +147,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 type: Input
             }], role: [{
                 type: Input
+            }], isInverted: [{
+                type: Input
             }], ariaHidden: [{
                 type: Input
             }], focusable: [{
@@ -177,7 +184,7 @@ class EclAccordionItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclAccordionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclAccordionItemComponent, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: "isExpanded" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"ecl-accordion__title\">\n    <button \n        type=\"button\" \n        (click)=\"onItemClick($event)\"\n        [attr.aria-expanded]=\"isExpanded\"\n        class=\"ecl-accordion__toggle\">\n        <span class=\"ecl-accordion__toggle-flex\">\n            <span class=\"ecl-accordion__toggle-indicator\">\n                <span class=\"ecl-accordion__toggle-label\">{{ 'ecl.common.OPEN' | translate }}</span>\n                <ecl-icon \n                    *ngIf=\"!isExpanded\" \n                    icon=\"plus\" \n                    size=\"m\" \n                    class=\"ecl-accordion__toggle-icon\" \n                    [attr.aria-hidden]=\"!isExpanded\">\n                </ecl-icon>\n                <ecl-icon \n                    *ngIf=\"isExpanded\" \n                    icon=\"minus\" \n                    size=\"m\" \n                    class=\"ecl-accordion__toggle-icon\" \n                    [attr.aria-hidden]=\"isExpanded\">\n                </ecl-icon>\n            </span>\n            <span class=\"ecl-accordion__toggle-title\">{{ label }}</span>\n        </span>\n    </button>\n</h3>\n<div class=\"ecl-accordion__content\" [hidden]=\"!isExpanded\" role=\"region\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ EclAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclAccordionItemComponent, selector: "ecl-accordion-item", inputs: { label: "label", isExpanded: "isExpanded" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"ecl-accordion__title\">\n    <button \n        type=\"button\" \n        (click)=\"onItemClick($event)\"\n        [attr.aria-expanded]=\"isExpanded\"\n        class=\"ecl-accordion__toggle\">\n        <span class=\"ecl-accordion__toggle-flex\">\n            <span class=\"ecl-accordion__toggle-indicator\">\n                <span class=\"ecl-accordion__toggle-label\">{{ 'ecl.common.OPEN' | translate }}</span>\n                <ecl-icon \n                    *ngIf=\"!isExpanded\" \n                    icon=\"plus\" \n                    size=\"m\" \n                    class=\"ecl-accordion__toggle-icon\" \n                    [attr.aria-hidden]=\"!isExpanded\">\n                </ecl-icon>\n                <ecl-icon \n                    *ngIf=\"isExpanded\" \n                    icon=\"minus\" \n                    size=\"m\" \n                    class=\"ecl-accordion__toggle-icon\" \n                    [attr.aria-hidden]=\"isExpanded\">\n                </ecl-icon>\n            </span>\n            <span class=\"ecl-accordion__toggle-title\">{{ label }}</span>\n        </span>\n    </button>\n</h3>\n<div class=\"ecl-accordion__content\" [hidden]=\"!isExpanded\" role=\"region\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     coerceBoolean
 ], EclAccordionItemComponent.prototype, "isExpanded", void 0);
@@ -414,9 +421,12 @@ class EclLinkDirective extends ECLBaseDirective {
                     if (this.isIconOnLeftSide(this.eclIconComponents.toArray())) {
                         icn.class = 'ecl-link__icon ecl-link__icon--before';
                     }
-                    if (this.isIconOnRightSide(this.eclIconComponents.toArray())) {
+                    else if (this.isIconOnRightSide(this.eclIconComponents.toArray())) {
                         icn.class = 'ecl-link__icon ecl-link__icon--after';
                     }
+                    else {
+                        icn.class = 'ecl-link__icon ecl-link__icon--before';
+                    }
                 });
             });
         }
@@ -509,7 +519,7 @@ class EclLanguageListItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclLanguageListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclLanguageListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclLanguageListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclLanguageListItemComponent, selector: "ecl-language-list-item", inputs: { isActive: "isActive", languageCode: "languageCode", languageLabel: "languageLabel" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onItemClick($event)" }, properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink href=\"#\" variant=\"standalone\" class=\"ecl-language-list__link\">\n  {{ languageLabel}}\n  <ecl-icon *ngIf=\"isActive\" size=\"xs\" icon=\"check\"></ecl-icon>\n</a>", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] });
+/** @nocollapse */ EclLanguageListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclLanguageListItemComponent, selector: "ecl-language-list-item", inputs: { isActive: "isActive", languageCode: "languageCode", languageLabel: "languageLabel" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onItemClick($event)" }, properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink href=\"#\" variant=\"standalone\" class=\"ecl-language-list__link\">\n  {{ languageLabel}}\n  <ecl-icon *ngIf=\"isActive\" size=\"xs\" icon=\"check\"></ecl-icon>\n</a>", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] });
 __decorate([
     coerceBoolean
 ], EclLanguageListItemComponent.prototype, "isActive", void 0);
@@ -886,7 +896,7 @@ class EclLanguageListComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclLanguageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclLanguageListComponent, deps: [{ token: EclLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclLanguageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclLanguageListComponent, selector: "ecl-language-list", inputs: { isOverlay: "isOverlay", selectedLanguageCode: "selectedLanguageCode", isHidden: "isHidden" }, outputs: { languageSelected: "languageSelected", close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLanguageListItems", predicate: EclLanguageListItemComponent }], viewQueries: [{ propertyName: "euLeftContainer", first: true, predicate: ["euLeftContainer"], descendants: true }, { propertyName: "euRightContainer", first: true, predicate: ["euRightContainer"], descendants: true }, { propertyName: "nonEuLeftContainer", first: true, predicate: ["nonEuLeftContainer"], descendants: true }, { propertyName: "nonEuRightContainer", first: true, predicate: ["nonEuRightContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<header *ngIf=\"isSplash\" class=\"ecl-language-list__header\">\n    <img class=\"ecl-language-list__logo\" src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\" alt=\"European Commission logo\" />\n</header>\n<div class=\"ecl-language-list__container ecl-container\">\n    <div *ngIf=\"isOverlay\" class=\"ecl-row\">\n        <div class=\"ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2\">\n            <button eclButton type=\"ghost\" (click)=\"onCloseClick($event)\" styleClass=\"ecl-language-list__close-button\">\n                <span eclButtonLabel>\n                    {{ 'ecl.common.CLOSE' | translate }}\n                </span>\n                <ecl-icon icon=\"close\" size=\"s\" class=\"ecl-icon--fluid\"></ecl-icon>\n            </button>\n        </div>\n        <div class=\"ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2\">\n            <ecl-icon size=\"m\" class=\"ecl-language-list__title-icon\" icon=\"generic-lang\"></ecl-icon>\n            {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n        </div>\n    </div>\n    <div [eclHidden]=\"!hasEuLanguageListItems\" class=\"ecl-row ecl-language-list__eu\">\n        <div class=\"ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2\">\n            {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n        </div>\n        <div class=\"ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2\">\n            <ul #euLeftContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n        <div class=\"ecl-language-list__column ecl-col-12 ecl-col-l-4\">\n            <ul #euRightContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n    </div>\n    <div [eclHidden]=\"!hasNonEuLanguageListItems\" class=\"ecl-row ecl-language-list__non-eu\">\n        <div class=\"ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2\">\n            {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n        </div>\n        <div class=\"ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2\">\n            <ul #nonEuLeftContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n        <div class=\"ecl-language-list__column ecl-col-12 ecl-col-l-4\">\n            <ul #nonEuRightContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclHiddenDirective, selector: "[eclHidden]", inputs: ["eclHidden"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclLanguageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclLanguageListComponent, selector: "ecl-language-list", inputs: { isOverlay: "isOverlay", selectedLanguageCode: "selectedLanguageCode", isHidden: "isHidden" }, outputs: { languageSelected: "languageSelected", close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLanguageListItems", predicate: EclLanguageListItemComponent }], viewQueries: [{ propertyName: "euLeftContainer", first: true, predicate: ["euLeftContainer"], descendants: true }, { propertyName: "euRightContainer", first: true, predicate: ["euRightContainer"], descendants: true }, { propertyName: "nonEuLeftContainer", first: true, predicate: ["nonEuLeftContainer"], descendants: true }, { propertyName: "nonEuRightContainer", first: true, predicate: ["nonEuRightContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<header *ngIf=\"isSplash\" class=\"ecl-language-list__header\">\n    <img class=\"ecl-language-list__logo\" src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\" alt=\"European Commission logo\" />\n</header>\n<div class=\"ecl-language-list__container ecl-container\">\n    <div *ngIf=\"isOverlay\" class=\"ecl-row\">\n        <div class=\"ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2\">\n            <button eclButton type=\"ghost\" (click)=\"onCloseClick($event)\" styleClass=\"ecl-language-list__close-button\">\n                <span eclButtonLabel>\n                    {{ 'ecl.common.CLOSE' | translate }}\n                </span>\n                <ecl-icon icon=\"close\" size=\"s\" class=\"ecl-icon--fluid\"></ecl-icon>\n            </button>\n        </div>\n        <div class=\"ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2\">\n            <ecl-icon size=\"m\" class=\"ecl-language-list__title-icon\" icon=\"generic-lang\"></ecl-icon>\n            {{ 'ecl.language-list.SELECT-LANGUAGE' | translate }}\n        </div>\n    </div>\n    <div [eclHidden]=\"!hasEuLanguageListItems\" class=\"ecl-row ecl-language-list__eu\">\n        <div class=\"ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2\">\n            {{ 'ecl.language-list.EU-LANGUAGES' | translate }}\n        </div>\n        <div class=\"ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2\">\n            <ul #euLeftContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n        <div class=\"ecl-language-list__column ecl-col-12 ecl-col-l-4\">\n            <ul #euRightContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n    </div>\n    <div [eclHidden]=\"!hasNonEuLanguageListItems\" class=\"ecl-row ecl-language-list__non-eu\">\n        <div class=\"ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2\">\n            {{ 'ecl.language-list.NON-EU-LANGUAGES' | translate }}\n        </div>\n        <div class=\"ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2\">\n            <ul #nonEuLeftContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n        <div class=\"ecl-language-list__column ecl-col-12 ecl-col-l-4\">\n            <ul #nonEuRightContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclHiddenDirective, selector: "[eclHidden]", inputs: ["eclHidden"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclLanguageListComponent.prototype, "isOverlay", void 0);
@@ -1057,7 +1067,7 @@ class EclSiteHeaderLoginComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclSiteHeaderLoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderLoginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderLoginComponent, selector: "ecl-site-header-login", inputs: { isLoggedIn: "isLoggedIn" }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header__login-toggle\"\n       aria-controls=\"login-box-id\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderLoginComponent, selector: "ecl-site-header-login", inputs: { isLoggedIn: "isLoggedIn" }, outputs: { login: "login", loginBoxToggle: "loginBoxToggle" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header__login-toggle\"\n       aria-controls=\"login-box-id\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header__login-toggle .ecl-site-header__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclSiteHeaderLoginComponent.prototype, "isLoggedIn", void 0);
@@ -1244,7 +1254,7 @@ class EclSearchFormComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclSearchFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSearchFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSearchFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: { formControlName: "formControlName", searchInputText: "searchInputText", placeholder: "placeholder", searchButtonLabel: "searchButtonLabel", searchButtonIcon: "searchButtonIcon" }, outputs: { search: "search" }, host: { listeners: { "keydown.enter": "onEnterKeyDown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<ecl-form-group [formGroup]=\"fg\">\n    <label \n        eclFormLabel \n        for=\"search-input\"\n        class=\"ecl-search-form__label\">\n        {{ 'ecl.common.SEARCH' | translate }}\n    </label>\n    <input eclTextInput\n            formControlName=\"keyword\"\n            type=\"search\"\n            name=\"search-input\"\n            placeholder=\"{{ placeholder || 'ecl.common.SEARCH' | translate }}\"\n            class=\"ecl-search-form__text-input\"/>\n</ecl-form-group>\n<button eclButton\n        aria-label=\"Search\"\n        variant=\"search\"\n        (click)=\"onSearchClick($event)\"\n        class=\"ecl-search-form__button\">\n    <span eclButtonLabel>\n        {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}\n    </span>\n    <ecl-icon [icon]=\"searchButtonIcon\" size=\"xs\"></ecl-icon>\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group" }, { kind: "component", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: ["isOptional", "isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclTextInputDirective, selector: "input[eclTextInput]", inputs: ["eclSize", "isInvalid"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSearchFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: { formControlName: "formControlName", searchInputText: "searchInputText", placeholder: "placeholder", searchButtonLabel: "searchButtonLabel", searchButtonIcon: "searchButtonIcon" }, outputs: { search: "search" }, host: { listeners: { "keydown.enter": "onEnterKeyDown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<ecl-form-group [formGroup]=\"fg\">\n    <label \n        eclFormLabel \n        for=\"search-input\"\n        class=\"ecl-search-form__label\">\n        {{ 'ecl.common.SEARCH' | translate }}\n    </label>\n    <input eclTextInput\n            formControlName=\"keyword\"\n            type=\"search\"\n            name=\"search-input\"\n            placeholder=\"{{ placeholder || 'ecl.common.SEARCH' | translate }}\"\n            class=\"ecl-search-form__text-input\"/>\n</ecl-form-group>\n<button eclButton\n        aria-label=\"Search\"\n        variant=\"search\"\n        (click)=\"onSearchClick($event)\"\n        class=\"ecl-search-form__button\">\n    <span eclButtonLabel>\n        {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}\n    </span>\n    <ecl-icon [icon]=\"searchButtonIcon\" size=\"xs\"></ecl-icon>\n</button>\n", dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group" }, { kind: "component", type: EclFormLabelComponent, selector: "[eclFormLabel]", inputs: ["isOptional", "isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: EclTextInputDirective, selector: "input[eclTextInput]", inputs: ["eclSize", "isInvalid"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSearchFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-search-form', providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR], template: "<ecl-form-group [formGroup]=\"fg\">\n    <label \n        eclFormLabel \n        for=\"search-input\"\n        class=\"ecl-search-form__label\">\n        {{ 'ecl.common.SEARCH' | translate }}\n    </label>\n    <input eclTextInput\n            formControlName=\"keyword\"\n            type=\"search\"\n            name=\"search-input\"\n            placeholder=\"{{ placeholder || 'ecl.common.SEARCH' | translate }}\"\n            class=\"ecl-search-form__text-input\"/>\n</ecl-form-group>\n<button eclButton\n        aria-label=\"Search\"\n        variant=\"search\"\n        (click)=\"onSearchClick($event)\"\n        class=\"ecl-search-form__button\">\n    <span eclButtonLabel>\n        {{ searchButtonLabel || 'ecl.common.SEARCH' | translate }}\n    </span>\n    <ecl-icon [icon]=\"searchButtonIcon\" size=\"xs\"></ecl-icon>\n</button>\n" }]
@@ -1309,7 +1319,7 @@ class EclSiteHeaderSearchComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclSiteHeaderSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderSearchComponent, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header__search-toggle\"\n   data-ecl-search-toggle=\"true\"\n   aria-controls=\"search-form-id\"\n   [attr.aria-expanded]=\"isSearchBoxActive\"\n   (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\"\n              size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 [searchInputText]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["formControlName", "searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderSearchComponent, selector: "ecl-site-header-search", inputs: { searchInputText: "searchInputText", searchInputPlaceholder: "searchInputPlaceholder", searchButtonLabel: "searchButtonLabel" }, outputs: { search: "search", searchToggle: "searchToggle" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header__search-toggle\"\n   data-ecl-search-toggle=\"true\"\n   aria-controls=\"search-form-id\"\n   [attr.aria-expanded]=\"isSearchBoxActive\"\n   (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\"\n              size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 [searchInputText]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["formControlName", "searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-search', template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header__search-toggle\"\n   data-ecl-search-toggle=\"true\"\n   aria-controls=\"search-form-id\"\n   [attr.aria-expanded]=\"isSearchBoxActive\"\n   (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\"\n              size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 [searchInputText]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"] }]
@@ -1342,7 +1352,7 @@ class EclSiteHeaderLanguageComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclSiteHeaderLanguageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderLanguageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderLanguageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderLanguageComponent, selector: "ecl-site-header-language", inputs: { languageLabel: "languageLabel", languageCode: "languageCode" }, outputs: { languageClick: "languageClick" }, usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header__language-selector\"\n   aria-controls=\"language-list-overlay\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        <span class=\"ecl-site-header__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderLanguageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderLanguageComponent, selector: "ecl-site-header-language", inputs: { languageLabel: "languageLabel", languageCode: "languageCode" }, outputs: { languageClick: "languageClick" }, usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header__language-selector\"\n   aria-controls=\"language-list-overlay\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        <span class=\"ecl-site-header__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderLanguageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-language', template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header__language-selector\"\n   aria-controls=\"language-list-overlay\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header__icon\"></ecl-icon>\n        <span class=\"ecl-site-header__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"] }]
@@ -1800,7 +1810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
 class EclSiteHeaderCoreLanguageComponent extends EclSiteHeaderLanguageComponentBase {
 }
 /** @nocollapse */ EclSiteHeaderCoreLanguageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderCoreLanguageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderCoreLanguageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderCoreLanguageComponent, selector: "ecl-site-header-core-language", usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n    variant=\"standalone\" \n    class=\"ecl-button ecl-button--ghost ecl-site-header-core__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-core__language-icon\">\n        <ecl-icon icon=\"language\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-core__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderCoreLanguageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderCoreLanguageComponent, selector: "ecl-site-header-core-language", usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n    variant=\"standalone\" \n    class=\"ecl-button ecl-button--ghost ecl-site-header-core__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-core__language-icon\">\n        <ecl-icon icon=\"language\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-core__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderCoreLanguageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-core-language', template: "<a href=\"#\"\n    variant=\"standalone\" \n    class=\"ecl-button ecl-button--ghost ecl-site-header-core__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-core__language-icon\">\n        <ecl-icon icon=\"language\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-core__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>" }]
@@ -1822,7 +1832,7 @@ class EclSiteHeaderCoreLoginComponent extends EclSiteHeaderLoginComponentBase {
     }
 }
 /** @nocollapse */ EclSiteHeaderCoreLoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderCoreLoginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderCoreLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderCoreLoginComponent, selector: "ecl-site-header-core-login", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n        variant=\"standalone\" \n        class=\"ecl-button ecl-button--ghost ecl-site-header-core__login-toggle\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-core__login-toggle\" \n        aria-controls=\"login-box-id\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header-core__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-core__login-toggle .ecl-site-header-core__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderCoreLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderCoreLoginComponent, selector: "ecl-site-header-core-login", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n        variant=\"standalone\" \n        class=\"ecl-button ecl-button--ghost ecl-site-header-core__login-toggle\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-core__login-toggle\" \n        aria-controls=\"login-box-id\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header-core__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-core__login-toggle .ecl-site-header-core__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderCoreLoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-core-login', template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n        variant=\"standalone\" \n        class=\"ecl-button ecl-button--ghost ecl-site-header-core__login-toggle\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-core__login-toggle\" \n        aria-controls=\"login-box-id\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header-core__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header-core__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-core__login-toggle .ecl-site-header-core__login-arrow{display:inline-flex}\n"] }]
@@ -1847,7 +1857,7 @@ class EclSiteHeaderCoreSearchComponent extends EclSiteHeaderSearchComponentBase
     }
 }
 /** @nocollapse */ EclSiteHeaderCoreSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderCoreSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderCoreSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderCoreSearchComponent, selector: "ecl-site-header-core-search", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    variant=\"standalone\" \n    class=\"ecl-site-header-core__search-toggle\" \n    data-ecl-search-toggle=\"true\" \n    aria-controls=\"search-form-id\" \n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form \n    (search)=\"onSearch($event)\" \n    [placeholder]=\"searchInputPlaceholder\"\n    [searchInputText]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["formControlName", "searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderCoreSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderCoreSearchComponent, selector: "ecl-site-header-core-search", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    variant=\"standalone\" \n    class=\"ecl-site-header-core__search-toggle\" \n    data-ecl-search-toggle=\"true\" \n    aria-controls=\"search-form-id\" \n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form \n    (search)=\"onSearch($event)\" \n    [placeholder]=\"searchInputPlaceholder\"\n    [searchInputText]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["formControlName", "searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderCoreSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-core-search', template: "<a eclLink \n    variant=\"standalone\" \n    class=\"ecl-site-header-core__search-toggle\" \n    data-ecl-search-toggle=\"true\" \n    aria-controls=\"search-form-id\" \n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form \n    (search)=\"onSearch($event)\" \n    [placeholder]=\"searchInputPlaceholder\"\n    [searchInputText]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"] }]
@@ -2017,7 +2027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
 class EclSiteHeaderHarmonisedLanguageComponent extends EclSiteHeaderLanguageComponentBase {
 }
 /** @nocollapse */ EclSiteHeaderHarmonisedLanguageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderHarmonisedLanguageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderHarmonisedLanguageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderHarmonisedLanguageComponent, selector: "ecl-site-header-harmonised-language", usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__language-selector\"\n   aria-controls=\"language-list-overlay\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-harmonised__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-harmonised__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderHarmonisedLanguageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderHarmonisedLanguageComponent, selector: "ecl-site-header-harmonised-language", usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__language-selector\"\n   aria-controls=\"language-list-overlay\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-harmonised__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-harmonised__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderHarmonisedLanguageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-harmonised-language', template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__language-selector\"\n   aria-controls=\"language-list-overlay\"\n   (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-harmonised__language-icon\">\n        <ecl-icon icon=\"language\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-harmonised__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"] }]
@@ -2039,7 +2049,7 @@ class EclSiteHeaderHarmonisedLoginComponent extends EclSiteHeaderLoginComponentB
     }
 }
 /** @nocollapse */ EclSiteHeaderHarmonisedLoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderHarmonisedLoginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderHarmonisedLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderHarmonisedLoginComponent, selector: "ecl-site-header-harmonised-login", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__login-toggle\"\n       aria-controls=\"login-box-id\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header-harmonised__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-harmonised__login-toggle .ecl-site-header-harmonised__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderHarmonisedLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderHarmonisedLoginComponent, selector: "ecl-site-header-harmonised-login", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__login-toggle\"\n       aria-controls=\"login-box-id\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header-harmonised__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-harmonised__login-toggle .ecl-site-header-harmonised__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderHarmonisedLoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-harmonised-login', template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__login-toggle\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n       class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__login-toggle\"\n       aria-controls=\"login-box-id\"\n       [attr.aria-expanded]=\"isLoginBoxActive\"\n       (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\"\n                  size=\"s\"\n                  class=\"ecl-site-header-harmonised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  class=\"ecl-site-header-harmonised__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-harmonised__login-toggle .ecl-site-header-harmonised__login-arrow{display:inline-flex}\n"] }]
@@ -2064,7 +2074,7 @@ class EclSiteHeaderHarmonisedSearchComponent extends EclSiteHeaderSearchComponen
     }
 }
 /** @nocollapse */ EclSiteHeaderHarmonisedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderHarmonisedSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderHarmonisedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderHarmonisedSearchComponent, selector: "ecl-site-header-harmonised-search", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__search-toggle\"\n   data-ecl-search-toggle=\"true\"\n   aria-controls=\"search-form-id\"\n   [attr.aria-expanded]=\"isSearchBoxActive\"\n   (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\"\n              size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 [searchInputText]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["formControlName", "searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderHarmonisedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderHarmonisedSearchComponent, selector: "ecl-site-header-harmonised-search", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__search-toggle\"\n   data-ecl-search-toggle=\"true\"\n   aria-controls=\"search-form-id\"\n   [attr.aria-expanded]=\"isSearchBoxActive\"\n   (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\"\n              size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 [searchInputText]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["formControlName", "searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderHarmonisedSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-harmonised-search', template: "<a href=\"#\"\n   class=\"ecl-button ecl-button--ghost ecl-site-header-harmonised__search-toggle\"\n   data-ecl-search-toggle=\"true\"\n   aria-controls=\"search-form-id\"\n   [attr.aria-expanded]=\"isSearchBoxActive\"\n   (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\"\n              size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form (search)=\"onSearch($event)\"\n                 [placeholder]=\"searchInputPlaceholder\"\n                 [searchInputText]=\"searchInputText\"\n                 [searchButtonLabel]=\"searchButtonLabel\"\n                 [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>", styles: [":host{display:block}\n"] }]
@@ -2257,7 +2267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
 class EclSiteHeaderStandardisedLanguageComponent extends EclSiteHeaderLanguageComponentBase {
 }
 /** @nocollapse */ EclSiteHeaderStandardisedLanguageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderStandardisedLanguageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderStandardisedLanguageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderStandardisedLanguageComponent, selector: "ecl-site-header-standardised-language", usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n    class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-standardised__language-icon\">\n        <ecl-icon icon=\"language\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-standardised__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderStandardisedLanguageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderStandardisedLanguageComponent, selector: "ecl-site-header-standardised-language", usesInheritance: true, ngImport: i0, template: "<a href=\"#\"\n    class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-standardised__language-icon\">\n        <ecl-icon icon=\"language\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-standardised__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderStandardisedLanguageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-standardised-language', template: "<a href=\"#\"\n    class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__language-selector\"\n    aria-controls=\"language-list-overlay\"\n    (click)=\"onLanguageClick($event)\">\n    <span class=\"ecl-site-header-standardised__language-icon\">\n        <ecl-icon icon=\"language\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        <span class=\"ecl-site-header-standardised__language-code\">{{ languageCode }}</span>\n    </span>\n    {{ languageLabel || 'ecl.language-list.ENGLISH' | translate }}\n</a>", styles: [":host{display:flex}\n"] }]
@@ -2276,7 +2286,7 @@ class EclSiteHeaderStandardisedLoginComponent extends EclSiteHeaderLoginComponen
     }
 }
 /** @nocollapse */ EclSiteHeaderStandardisedLoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderStandardisedLoginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderStandardisedLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderStandardisedLoginComponent, selector: "ecl-site-header-standardised-login", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle\" \n        aria-controls=\"login-box-id\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header-standardised__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-standardised__login-toggle .ecl-site-header-standardised__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderStandardisedLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderStandardisedLoginComponent, selector: "ecl-site-header-standardised-login", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle\" \n        aria-controls=\"login-box-id\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header-standardised__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-standardised__login-toggle .ecl-site-header-standardised__login-arrow{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderStandardisedLoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-standardised-login', template: "<ng-container *ngIf=\"!isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginClick($event)\">\n        <ecl-icon icon=\"log-in\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGIN' | translate }}\n    </a>\n</ng-container>\n<ng-container *ngIf=\"isLoggedIn\">\n    <a href=\"#\"\n        class=\"ecl-button ecl-button--ghost ecl-site-header-standardised__login-toggle\" \n        aria-controls=\"login-box-id\" \n        [attr.aria-expanded]=\"isLoginBoxActive\"\n        (click)=\"onLoginBoxToggle($event)\">\n        <ecl-icon icon=\"logged-in\" size=\"s\" class=\"ecl-site-header-standardised__icon\"></ecl-icon>\n        {{ 'ecl.site-header.LOGGED-IN' | translate }}\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" class=\"ecl-site-header-standardised__login-arrow\"></ecl-icon>\n    </a>\n    <div class=\"{{ getLoginBoxCssClasses() }}\">\n        <ng-content></ng-content>\n    </div>\n</ng-container>", styles: [".ecl-site-header-standardised__login-toggle .ecl-site-header-standardised__login-arrow{display:inline-flex}\n"] }]
@@ -2301,7 +2311,7 @@ class EclSiteHeaderStandardisedSearchComponent extends EclSiteHeaderSearchCompon
     }
 }
 /** @nocollapse */ EclSiteHeaderStandardisedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderStandardisedSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSiteHeaderStandardisedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderStandardisedSearchComponent, selector: "ecl-site-header-standardised-search", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    variant=\"standalone\" \n    class=\"ecl-site-header-standardised__search-toggle\" \n    data-ecl-search-toggle=\"true\" \n    aria-controls=\"search-form-id\" \n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form \n    (search)=\"onSearch($event)\" \n    [placeholder]=\"searchInputPlaceholder\"\n    [searchInputText]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["formControlName", "searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclSiteHeaderStandardisedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSiteHeaderStandardisedSearchComponent, selector: "ecl-site-header-standardised-search", host: { properties: { "class": "this.class" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    variant=\"standalone\" \n    class=\"ecl-site-header-standardised__search-toggle\" \n    data-ecl-search-toggle=\"true\" \n    aria-controls=\"search-form-id\" \n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form \n    (search)=\"onSearch($event)\" \n    [placeholder]=\"searchInputPlaceholder\"\n    [searchInputText]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclSearchFormComponent, selector: "ecl-search-form", inputs: ["formControlName", "searchInputText", "placeholder", "searchButtonLabel", "searchButtonIcon"], outputs: ["search"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSiteHeaderStandardisedSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-site-header-standardised-search', template: "<a eclLink \n    variant=\"standalone\" \n    class=\"ecl-site-header-standardised__search-toggle\" \n    data-ecl-search-toggle=\"true\" \n    aria-controls=\"search-form-id\" \n    [attr.aria-expanded]=\"isSearchBoxActive\"\n    (click)=\"onSearchBoxToggle($event)\">\n    <ecl-icon icon=\"search\" size=\"s\"></ecl-icon>\n    {{ 'ecl.common.SEARCH' | translate }}\n</a>\n\n<ecl-search-form \n    (search)=\"onSearch($event)\" \n    [placeholder]=\"searchInputPlaceholder\"\n    [searchInputText]=\"searchInputText\"\n    [searchButtonLabel]=\"searchButtonLabel\"\n    [class]=\"getSearchBoxCssClasses()\">\n</ecl-search-form>\n", styles: [":host{display:block}\n"] }]
@@ -2569,7 +2579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
-const COMPONENTS$8 = [
+const COMPONENTS$a = [
     EclSiteHeaderComponent,
     EclSiteHeaderActionComponent,
     EclSiteHeaderLoginComponent,
@@ -2626,10 +2636,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclSearchFormComponentModule
                     ],
                     exports: [
-                        ...COMPONENTS$8
+                        ...COMPONENTS$a
                     ],
                     declarations: [
-                        ...COMPONENTS$8
+                        ...COMPONENTS$a
                     ]
                 }]
         }] });
@@ -3215,7 +3225,7 @@ class EclBreadcrumbSegmentComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclBreadcrumbSegmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclBreadcrumbSegmentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclBreadcrumbSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", isCurrentPage: "isCurrentPage", isNegative: "isNegative", isHidden: "isHidden" }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.ecl-u-d-none": "this.isHidden", "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [isNegative]=\"isNegative\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [isNegative]=\"isNegative\"\n   [href]=\"href\"\n   tabindex\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\"\n          role=\"presentation\"\n          icon=\"corner-arrow\"\n          size=\"2xs\"\n          class=\"ecl-breadcrumb__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+/** @nocollapse */ EclBreadcrumbSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclBreadcrumbSegmentComponent, selector: "ecl-breadcrumb-segment", inputs: { routerLink: "routerLink", queryParams: "queryParams", href: "href", isCurrentPage: "isCurrentPage", isNegative: "isNegative", isHidden: "isHidden" }, outputs: { segmentClick: "segmentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.ecl-u-d-none": "this.isHidden", "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [isNegative]=\"isNegative\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [isNegative]=\"isNegative\"\n   [href]=\"href\"\n   tabindex\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\"\n          role=\"presentation\"\n          icon=\"corner-arrow\"\n          size=\"2xs\"\n          class=\"ecl-breadcrumb__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
 __decorate([
     coerceBoolean
 ], EclBreadcrumbSegmentComponent.prototype, "isCurrentPage", void 0);
@@ -3327,7 +3337,7 @@ class EclBreadcrumbCoreSegmentComponent extends EclBreadcrumbSegmentComponentBas
     }
 }
 /** @nocollapse */ EclBreadcrumbCoreSegmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclBreadcrumbCoreSegmentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclBreadcrumbCoreSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclBreadcrumbCoreSegmentComponent, selector: "ecl-breadcrumb-core-segment", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNegative]=\"true\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-core__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNegative]=\"true\"\n   [isNoVisited]=\"true\"\n   tabindex\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-core__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" \n    role=\"presentation\" \n    icon=\"corner-arrow\" \n    size=\"2xs\"\n    class=\"ecl-breadcrumb-core__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+/** @nocollapse */ EclBreadcrumbCoreSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclBreadcrumbCoreSegmentComponent, selector: "ecl-breadcrumb-core-segment", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNegative]=\"true\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-core__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNegative]=\"true\"\n   [isNoVisited]=\"true\"\n   tabindex\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-core__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" \n    role=\"presentation\" \n    icon=\"corner-arrow\" \n    size=\"2xs\"\n    class=\"ecl-breadcrumb-core__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclBreadcrumbCoreSegmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-breadcrumb-core-segment', template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNegative]=\"true\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-core__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNegative]=\"true\"\n   [isNoVisited]=\"true\"\n   tabindex\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-core__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" \n    role=\"presentation\" \n    icon=\"corner-arrow\" \n    size=\"2xs\"\n    class=\"ecl-breadcrumb-core__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
@@ -3415,7 +3425,7 @@ class EclBreadcrumbHarmonisedSegmentComponent extends EclBreadcrumbSegmentCompon
     }
 }
 /** @nocollapse */ EclBreadcrumbHarmonisedSegmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclBreadcrumbHarmonisedSegmentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclBreadcrumbHarmonisedSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclBreadcrumbHarmonisedSegmentComponent, selector: "ecl-breadcrumb-harmonised-segment", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-harmonised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-harmonised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\"\n          role=\"presentation\"\n          icon=\"corner-arrow\"\n          size=\"2xs\"\n          class=\"ecl-breadcrumb-harmonised__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+/** @nocollapse */ EclBreadcrumbHarmonisedSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclBreadcrumbHarmonisedSegmentComponent, selector: "ecl-breadcrumb-harmonised-segment", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-harmonised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-harmonised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\"\n          role=\"presentation\"\n          icon=\"corner-arrow\"\n          size=\"2xs\"\n          class=\"ecl-breadcrumb-harmonised__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclBreadcrumbHarmonisedSegmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-breadcrumb-harmonised-segment', template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-harmonised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-harmonised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\"\n          role=\"presentation\"\n          icon=\"corner-arrow\"\n          size=\"2xs\"\n          class=\"ecl-breadcrumb-harmonised__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>" }]
@@ -3503,7 +3513,7 @@ class EclBreadcrumbStandardisedSegmentComponent extends EclBreadcrumbSegmentComp
     }
 }
 /** @nocollapse */ EclBreadcrumbStandardisedSegmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclBreadcrumbStandardisedSegmentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclBreadcrumbStandardisedSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclBreadcrumbStandardisedSegmentComponent, selector: "ecl-breadcrumb-standardised-segment", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-standardised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-standardised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" \n    role=\"presentation\" \n    icon=\"corner-arrow\" \n    size=\"2xs\"\n    class=\"ecl-breadcrumb-standardised__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+/** @nocollapse */ EclBreadcrumbStandardisedSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclBreadcrumbStandardisedSegmentComponent, selector: "ecl-breadcrumb-standardised-segment", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-standardised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-standardised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" \n    role=\"presentation\" \n    icon=\"corner-arrow\" \n    size=\"2xs\"\n    class=\"ecl-breadcrumb-standardised__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclBreadcrumbStandardisedSegmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-breadcrumb-standardised-segment', template: "<a *ngIf=\"!isCurrentPage && href\"\n   eclLink\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-standardised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n<a *ngIf=\"!isCurrentPage && !href\"\n   eclLink\n   [routerLink]=\"routerLink\"\n   [queryParams]=\"queryParams\"\n   variant=\"standalone\"\n   [isNoVisited]=\"true\"\n   [href]=\"href\"\n   (click)=\"onSegmentClick($event)\"\n   class=\"ecl-breadcrumb-standardised__link\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrentPage\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-container>\n<ecl-icon *ngIf=\"!isCurrentPage\" \n    role=\"presentation\" \n    icon=\"corner-arrow\" \n    size=\"2xs\"\n    class=\"ecl-breadcrumb-standardised__icon ecl-icon--rotate-90\">\n</ecl-icon>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
@@ -3684,7 +3694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
-const COMPONENTS$7 = [
+const COMPONENTS$9 = [
     EclBreadcrumbComponent,
     EclBreadcrumbSegmentComponent
 ];
@@ -3713,8 +3723,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLinkDirectiveModule,
                         EclIconComponentModule
                     ],
-                    exports: [...COMPONENTS$7],
-                    declarations: [...COMPONENTS$7],
+                    exports: [...COMPONENTS$9],
+                    declarations: [...COMPONENTS$9],
                     entryComponents: [EclBreadcrumbSegmentComponent]
                 }]
         }] });
@@ -3840,7 +3850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
-const COMPONENTS$6 = [
+const COMPONENTS$8 = [
     EclCardComponent,
     EclCardBodyComponent,
     EclCardImageDirective,
@@ -3870,10 +3880,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLabelDirectiveModule,
                     ],
                     exports: [
-                        ...COMPONENTS$6
+                        ...COMPONENTS$8
                     ],
                     declarations: [
-                        ...COMPONENTS$6
+                        ...COMPONENTS$8
                     ],
                 }]
         }] });
@@ -4018,7 +4028,7 @@ class EclCategoryFilterItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclCategoryFilterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclCategoryFilterItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclCategoryFilterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclCategoryFilterItemComponent, selector: "ecl-category-filter-item", inputs: { href: "href", id: "id" }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.ecl-category-filter__list-item": "this.className", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "eclCategoryList", first: true, predicate: i0.forwardRef(function () { return EclCategoryFilterListComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"href\"\n   class=\"ecl-category-filter__item {{ levelClass }}\"\n   [class.ecl-category-filter__item--has-children]=\"hasChildren\"\n   [class.ecl-category-filter__item--current]=\"isCurrent\"\n   (click)=\"onItemClick($event)\">\n    <ng-container *ngIf=\"isChildItemWithChildren\">\n        <ecl-icon icon=\"solid-arrow\"\n                  size=\"m\"\n                  transform=\"rotate-90\"\n                  class=\"ecl-category-filter__item-icon\">\n        </ecl-icon>\n    </ng-container>\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"isRootItemWithChildren\">\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  transform=\"rotate-180\"\n                  class=\"ecl-category-filter__item-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<ng-content select=\"ecl-category-filter-list\"></ng-content>", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+/** @nocollapse */ EclCategoryFilterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclCategoryFilterItemComponent, selector: "ecl-category-filter-item", inputs: { href: "href", id: "id" }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.ecl-category-filter__list-item": "this.className", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "eclCategoryList", first: true, predicate: i0.forwardRef(function () { return EclCategoryFilterListComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"href\"\n   class=\"ecl-category-filter__item {{ levelClass }}\"\n   [class.ecl-category-filter__item--has-children]=\"hasChildren\"\n   [class.ecl-category-filter__item--current]=\"isCurrent\"\n   (click)=\"onItemClick($event)\">\n    <ng-container *ngIf=\"isChildItemWithChildren\">\n        <ecl-icon icon=\"solid-arrow\"\n                  size=\"m\"\n                  transform=\"rotate-90\"\n                  class=\"ecl-category-filter__item-icon\">\n        </ecl-icon>\n    </ng-container>\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"isRootItemWithChildren\">\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  transform=\"rotate-180\"\n                  class=\"ecl-category-filter__item-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<ng-content select=\"ecl-category-filter-list\"></ng-content>", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclCategoryFilterItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-category-filter-item', template: "<a [href]=\"href\"\n   class=\"ecl-category-filter__item {{ levelClass }}\"\n   [class.ecl-category-filter__item--has-children]=\"hasChildren\"\n   [class.ecl-category-filter__item--current]=\"isCurrent\"\n   (click)=\"onItemClick($event)\">\n    <ng-container *ngIf=\"isChildItemWithChildren\">\n        <ecl-icon icon=\"solid-arrow\"\n                  size=\"m\"\n                  transform=\"rotate-90\"\n                  class=\"ecl-category-filter__item-icon\">\n        </ecl-icon>\n    </ng-container>\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"isRootItemWithChildren\">\n        <ecl-icon icon=\"corner-arrow\"\n                  size=\"xs\"\n                  transform=\"rotate-180\"\n                  class=\"ecl-category-filter__item-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<ng-content select=\"ecl-category-filter-list\"></ng-content>", styles: [":host{display:list-item}\n"] }]
@@ -4217,7 +4227,7 @@ class EclCheckboxLabelComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclCheckboxLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclCheckboxLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclCheckboxLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: { isInvalid: "isInvalid", isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-checkbox__box\"\n    [class.ecl-checkbox__box--disabled]=\"isDisabled\"\n    [class.ecl-checkbox__box--invalid]=\"isInvalid\">\n    <ecl-icon size=\"s\" icon=\"check\" class=\"ecl-checkbox__icon\"></ecl-icon>\n</span>\n\n<ng-content></ng-content>\n", styles: [".ecl-checkbox__label{margin-top:0;margin-bottom:0}.ecl-checkbox__help{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ EclCheckboxLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: { isInvalid: "isInvalid", isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"ecl-checkbox__box\"\n    [class.ecl-checkbox__box--disabled]=\"isDisabled\"\n    [class.ecl-checkbox__box--invalid]=\"isInvalid\">\n    <ecl-icon size=\"s\" icon=\"check\" class=\"ecl-checkbox__icon\"></ecl-icon>\n</span>\n\n<ng-content></ng-content>\n", styles: [".ecl-checkbox__label{margin-top:0;margin-bottom:0}.ecl-checkbox__help{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     coerceBoolean
 ], EclCheckboxLabelComponent.prototype, "isInvalid", void 0);
@@ -4722,7 +4732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
-const COMPONENTS$5 = [
+const COMPONENTS$7 = [
     EclContentBlockComponent,
     EclContentBlockTitleDirective,
     EclContentBlockDescriptionDirective,
@@ -4788,10 +4798,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         CommonModule,
                     ],
                     exports: [
-                        ...COMPONENTS$5
+                        ...COMPONENTS$7
                     ],
                     declarations: [
-                        ...COMPONENTS$5
+                        ...COMPONENTS$7
                     ]
                 }]
         }] });
@@ -4943,7 +4953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
-const COMPONENTS$4 = [
+const COMPONENTS$6 = [
     EclContentItemComponent,
     EclContentItemImageDirective,
     EclContentItemPictureDirective
@@ -4967,10 +4977,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         RouterModule,
                     ],
                     exports: [
-                        ...COMPONENTS$4
+                        ...COMPONENTS$6
                     ],
                     declarations: [
-                        ...COMPONENTS$4
+                        ...COMPONENTS$6
                     ],
                 }]
         }] });
@@ -5210,7 +5220,7 @@ class EclExpandableComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclExpandableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclExpandableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclExpandableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclExpandableComponent, selector: "ecl-expandable", inputs: { isExpanded: "isExpanded", collapsedLabel: "collapsedLabel", expandedLabel: "expandedLabel" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<button eclButton\n  variant=\"secondary\"\n  class=\"ecl-expandable__toggle\"\n  [attr.aria-expanded]=\"isExpanded\"\n  (click)=\"onButtonClick()\">\n    <span eclButtonLabel>\n      <ng-container *ngIf=\"!isExpanded\">\n        {{ collapsedLabel || 'ecl.common.EXPAND' | translate }}\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        {{ expandedLabel || 'ecl.common.COLLAPSE' | translate }}\n      </ng-container>\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<div class=\"ecl-expandable__content\" [hidden]=\"!isExpanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclExpandableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclExpandableComponent, selector: "ecl-expandable", inputs: { isExpanded: "isExpanded", collapsedLabel: "collapsedLabel", expandedLabel: "expandedLabel" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<button eclButton\n  variant=\"secondary\"\n  class=\"ecl-expandable__toggle\"\n  [attr.aria-expanded]=\"isExpanded\"\n  (click)=\"onButtonClick()\">\n    <span eclButtonLabel>\n      <ng-container *ngIf=\"!isExpanded\">\n        {{ collapsedLabel || 'ecl.common.EXPAND' | translate }}\n      </ng-container>\n      <ng-container *ngIf=\"isExpanded\">\n        {{ expandedLabel || 'ecl.common.COLLAPSE' | translate }}\n      </ng-container>\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<div class=\"ecl-expandable__content\" [hidden]=\"!isExpanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclExpandableComponent.prototype, "isExpanded", void 0);
@@ -5913,15 +5923,18 @@ class EclFileComponent extends ECLBaseDirective {
             evt.preventDefault();
         }
     }
+    getDownloadFileName() {
+        return this.downloadFileName || this.href.split('/').pop();
+    }
 }
 /** @nocollapse */ EclFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclFileComponent, selector: "ecl-file", inputs: { eclTitle: "eclTitle", description: "description", label: "label", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta", thumbnailUrl: "thumbnailUrl", href: "href", ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { itemDownload: "itemDownload" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-file__container\">\n    <ecl-icon *ngIf=\"!isThumbnail\" icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n    <div *ngIf=\"isThumbnail\" class=\"ecl-file__detail\">\n        <div class=\"ecl-file__detail-info\">\n            <div class=\"ecl-file__label\" *ngIf=\"labelInfo\"><span eclLabel variant=\"highlight\">{{ labelInfo }}</span></div>\n            <div class=\"ecl-file__detail-meta\">\n                <span class=\"ecl-file__detail-meta-item\" *ngFor=\"let el of detailMeta\">{{ el }}</span></div>\n            <div class=\"ecl-file__title\">{{ eclTitle }}</div>\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        </div>\n        <img class=\"ecl-file__image\" [src]=\"thumbnailUrl\" alt=\"thumbnail\" />\n    </div>\n    <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    <div class=\"ecl-file__info\">\n        <div *ngIf=\"!isThumbnail\" class=\"ecl-file__title\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__language\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n    </div>\n    <a eclLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [download]=\"href\"\n        class=\"ecl-file__download\"\n        (click)=\"onItemClick($event)\" [attr.aria-label]=\"ariaLabel\">\n        <span class=\"ecl-link__label\">{{ label || 'ecl.common.DOWNLOAD' | translate }}</span>&nbsp;\n        <ecl-icon icon=\"download\" size=\"fluid\"></ecl-icon>\n    </a>\n</div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclFileComponent, selector: "ecl-file", inputs: { eclTitle: "eclTitle", description: "description", label: "label", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta", thumbnailUrl: "thumbnailUrl", href: "href", downloadFileName: "downloadFileName", ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { itemDownload: "itemDownload" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-file__container\">\n    <ecl-icon *ngIf=\"!isThumbnail\" icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n    <div *ngIf=\"isThumbnail\" class=\"ecl-file__detail\">\n        <div class=\"ecl-file__detail-info\">\n            <div class=\"ecl-file__label\" *ngIf=\"labelInfo\"><span eclLabel variant=\"highlight\">{{ labelInfo }}</span></div>\n            <div class=\"ecl-file__detail-meta\">\n                <span class=\"ecl-file__detail-meta-item\" *ngFor=\"let el of detailMeta\">{{ el }}</span></div>\n            <div class=\"ecl-file__title\">{{ eclTitle }}</div>\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        </div>\n        <img class=\"ecl-file__image\" [src]=\"thumbnailUrl\" alt=\"thumbnail\" />\n    </div>\n    <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    <div class=\"ecl-file__info\">\n        <div *ngIf=\"!isThumbnail\" class=\"ecl-file__title\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__language\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n    </div>\n    <a eclLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [download]=\"getDownloadFileName()\"\n        class=\"ecl-file__download\"\n        (click)=\"onItemClick($event)\" [attr.aria-label]=\"ariaLabel\">\n        <span class=\"ecl-link__label\">{{ label || 'ecl.common.DOWNLOAD' | translate }}</span>&nbsp;\n        <ecl-icon icon=\"download\" size=\"fluid\"></ecl-icon>\n    </a>\n</div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceArray
 ], EclFileComponent.prototype, "meta", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-file', template: "<div class=\"ecl-file__container\">\n    <ecl-icon *ngIf=\"!isThumbnail\" icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n    <div *ngIf=\"isThumbnail\" class=\"ecl-file__detail\">\n        <div class=\"ecl-file__detail-info\">\n            <div class=\"ecl-file__label\" *ngIf=\"labelInfo\"><span eclLabel variant=\"highlight\">{{ labelInfo }}</span></div>\n            <div class=\"ecl-file__detail-meta\">\n                <span class=\"ecl-file__detail-meta-item\" *ngFor=\"let el of detailMeta\">{{ el }}</span></div>\n            <div class=\"ecl-file__title\">{{ eclTitle }}</div>\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        </div>\n        <img class=\"ecl-file__image\" [src]=\"thumbnailUrl\" alt=\"thumbnail\" />\n    </div>\n    <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    <div class=\"ecl-file__info\">\n        <div *ngIf=\"!isThumbnail\" class=\"ecl-file__title\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__language\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n    </div>\n    <a eclLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [download]=\"href\"\n        class=\"ecl-file__download\"\n        (click)=\"onItemClick($event)\" [attr.aria-label]=\"ariaLabel\">\n        <span class=\"ecl-link__label\">{{ label || 'ecl.common.DOWNLOAD' | translate }}</span>&nbsp;\n        <ecl-icon icon=\"download\" size=\"fluid\"></ecl-icon>\n    </a>\n</div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-file', template: "<div class=\"ecl-file__container\">\n    <ecl-icon *ngIf=\"!isThumbnail\" icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n    <div *ngIf=\"isThumbnail\" class=\"ecl-file__detail\">\n        <div class=\"ecl-file__detail-info\">\n            <div class=\"ecl-file__label\" *ngIf=\"labelInfo\"><span eclLabel variant=\"highlight\">{{ labelInfo }}</span></div>\n            <div class=\"ecl-file__detail-meta\">\n                <span class=\"ecl-file__detail-meta-item\" *ngFor=\"let el of detailMeta\">{{ el }}</span></div>\n            <div class=\"ecl-file__title\">{{ eclTitle }}</div>\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        </div>\n        <img class=\"ecl-file__image\" [src]=\"thumbnailUrl\" alt=\"thumbnail\" />\n    </div>\n    <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    <div class=\"ecl-file__info\">\n        <div *ngIf=\"!isThumbnail\" class=\"ecl-file__title\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__language\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n    </div>\n    <a eclLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [download]=\"getDownloadFileName()\"\n        class=\"ecl-file__download\"\n        (click)=\"onItemClick($event)\" [attr.aria-label]=\"ariaLabel\">\n        <span class=\"ecl-link__label\">{{ label || 'ecl.common.DOWNLOAD' | translate }}</span>&nbsp;\n        <ecl-icon icon=\"download\" size=\"fluid\"></ecl-icon>\n    </a>\n</div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { eclTitle: [{
                 type: Input
             }], description: [{
@@ -5940,6 +5953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 type: Input
             }], href: [{
                 type: Input
+            }], downloadFileName: [{
+                type: Input
             }], ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
@@ -5975,9 +5990,12 @@ class EclFileItemComponent extends ECLBaseDirective {
             evt.preventDefault();
         }
     }
+    getDownloadFileName() {
+        return this.downloadFileName || this.href.split('/').pop();
+    }
 }
 /** @nocollapse */ EclFileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclFileItemComponent, deps: [{ token: EclFileComponent }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclFileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: "isDescription", eclTitle: "eclTitle", language: "language", description: "description", meta: "meta", label: "label", langDetail: "langDetail", href: "href", ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { itemDownload: "itemDownload" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"!isDescription\">\n    <div *ngIf=\"isThumbnail\" class=\"ecl-file__translation-detail\">\n        <div class=\"ecl-file__translation-title\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-description\" [attr.lang]=\"langDetail\">{{ description }}</div>\n    </div>\n    <div class=\"ecl-file__translation-info\">\n        <div *ngIf=\"isThumbnail\" class=\"ecl-file__translation-language\">{{ language }}</div>\n        <div *ngIf=\"!isThumbnail\" class=\"ecl-file__translation-title\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n    </div>\n    <a eclLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [download]=\"href\"\n        class=\"ecl-file__translation-download\"\n        (click)=\"onItemClick($event)\" [attr.aria-label]=\"ariaLabel\">\n        <span class=\"ecl-link__label\">{{ label || 'ecl.common.DOWNLOAD' | translate }}</span>&nbsp;\n        <ecl-icon icon=\"download\" size=\"fluid\"></ecl-icon>\n    </a>\n</ng-template>\n<ng-template [ngIf]=\"isDescription\">\n    <ng-content></ng-content>\n</ng-template>\n\n\n\n\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclFileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: "isDescription", eclTitle: "eclTitle", language: "language", description: "description", meta: "meta", label: "label", langDetail: "langDetail", href: "href", downloadFileName: "downloadFileName", ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { itemDownload: "itemDownload" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"!isDescription\">\n    <div *ngIf=\"isThumbnail\" class=\"ecl-file__translation-detail\">\n        <div class=\"ecl-file__translation-title\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-description\" [attr.lang]=\"langDetail\">{{ description }}</div>\n    </div>\n    <div class=\"ecl-file__translation-info\">\n        <div *ngIf=\"isThumbnail\" class=\"ecl-file__translation-language\">{{ language }}</div>\n        <div *ngIf=\"!isThumbnail\" class=\"ecl-file__translation-title\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n    </div>\n    <a eclLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [download]=\"getDownloadFileName()\"\n        class=\"ecl-file__translation-download\"\n        (click)=\"onItemClick($event)\" [attr.aria-label]=\"ariaLabel\">\n        <span class=\"ecl-link__label\">{{ label || 'ecl.common.DOWNLOAD' | translate }}</span>&nbsp;\n        <ecl-icon icon=\"download\" size=\"fluid\"></ecl-icon>\n    </a>\n</ng-template>\n<ng-template [ngIf]=\"isDescription\">\n    <ng-content></ng-content>\n</ng-template>\n\n\n\n\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclFileItemComponent.prototype, "isDescription", void 0);
@@ -5986,7 +6004,7 @@ __decorate([
 ], EclFileItemComponent.prototype, "meta", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclFileItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-file-item', template: "<ng-template [ngIf]=\"!isDescription\">\n    <div *ngIf=\"isThumbnail\" class=\"ecl-file__translation-detail\">\n        <div class=\"ecl-file__translation-title\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-description\" [attr.lang]=\"langDetail\">{{ description }}</div>\n    </div>\n    <div class=\"ecl-file__translation-info\">\n        <div *ngIf=\"isThumbnail\" class=\"ecl-file__translation-language\">{{ language }}</div>\n        <div *ngIf=\"!isThumbnail\" class=\"ecl-file__translation-title\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n    </div>\n    <a eclLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [download]=\"href\"\n        class=\"ecl-file__translation-download\"\n        (click)=\"onItemClick($event)\" [attr.aria-label]=\"ariaLabel\">\n        <span class=\"ecl-link__label\">{{ label || 'ecl.common.DOWNLOAD' | translate }}</span>&nbsp;\n        <ecl-icon icon=\"download\" size=\"fluid\"></ecl-icon>\n    </a>\n</ng-template>\n<ng-template [ngIf]=\"isDescription\">\n    <ng-content></ng-content>\n</ng-template>\n\n\n\n\n" }]
+            args: [{ selector: 'ecl-file-item', template: "<ng-template [ngIf]=\"!isDescription\">\n    <div *ngIf=\"isThumbnail\" class=\"ecl-file__translation-detail\">\n        <div class=\"ecl-file__translation-title\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-description\" [attr.lang]=\"langDetail\">{{ description }}</div>\n    </div>\n    <div class=\"ecl-file__translation-info\">\n        <div *ngIf=\"isThumbnail\" class=\"ecl-file__translation-language\">{{ language }}</div>\n        <div *ngIf=\"!isThumbnail\" class=\"ecl-file__translation-title\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n    </div>\n    <a eclLink\n        variant=\"standalone\"\n        [href]=\"href\"\n        [download]=\"getDownloadFileName()\"\n        class=\"ecl-file__translation-download\"\n        (click)=\"onItemClick($event)\" [attr.aria-label]=\"ariaLabel\">\n        <span class=\"ecl-link__label\">{{ label || 'ecl.common.DOWNLOAD' | translate }}</span>&nbsp;\n        <ecl-icon icon=\"download\" size=\"fluid\"></ecl-icon>\n    </a>\n</ng-template>\n<ng-template [ngIf]=\"isDescription\">\n    <ng-content></ng-content>\n</ng-template>\n\n\n\n\n" }]
         }], ctorParameters: function () { return [{ type: EclFileComponent }]; }, propDecorators: { isDescription: [{
                 type: Input
             }], eclTitle: [{
@@ -6003,6 +6021,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 type: Input
             }], href: [{
                 type: Input
+            }], downloadFileName: [{
+                type: Input
             }], ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
@@ -6043,7 +6063,7 @@ class EclFileItemsComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclFileItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclFileItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclFileItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclFileItemsComponent, selector: "ecl-file-items", inputs: { label: "label", isExpanded: "isExpanded" }, outputs: { toggle: "toggle" }, host: { properties: { "attr.aria-expanded": "this.isExpanded", "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: EclFileItemComponent }], usesInheritance: true, ngImport: i0, template: "<button eclButton variant=\"ghost\" class=\"ecl-file__translation-toggle\" (click)=\"onToggleClick($event)\">\n    <span eclButtonLabel>\n        {{ label || 'ecl.file.OTHER-LANGUAGES' | translate:{ count: getItemsCount() } }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<ul class=\"ecl-file__translation-list\">\n    <ng-content></ng-content>\n</ul>", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclFileItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclFileItemsComponent, selector: "ecl-file-items", inputs: { label: "label", isExpanded: "isExpanded" }, outputs: { toggle: "toggle" }, host: { properties: { "attr.aria-expanded": "this.isExpanded", "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: EclFileItemComponent }], usesInheritance: true, ngImport: i0, template: "<button eclButton variant=\"ghost\" class=\"ecl-file__translation-toggle\" (click)=\"onToggleClick($event)\">\n    <span eclButtonLabel>\n        {{ label || 'ecl.file.OTHER-LANGUAGES' | translate:{ count: getItemsCount() } }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<ul class=\"ecl-file__translation-list\">\n    <ng-content></ng-content>\n</ul>", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclFileItemsComponent.prototype, "isExpanded", void 0);
@@ -6228,7 +6248,7 @@ class EclGalleryItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclGalleryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclGalleryItemComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclGalleryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { mediaType: "mediaType", src: "src", label: "label", meta: "meta", description: "description", icon: "icon" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onItemClick($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "mediaChild", first: true, predicate: EclGalleryMediaDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\"\n    class=\"ecl-gallery__item-link\"\n    [attr.aria-label]=\"label\">\n    <figure class=\"ecl-gallery__image-container\">\n        <ng-content></ng-content>\n        <ecl-icon *ngIf=\"icon\" class=\"ecl-gallery__image-icon\" [icon]=\"icon\" size=\"l\"></ecl-icon>\n        <figcaption class=\"ecl-gallery__description\">\n            {{ description }}\n            <ecl-icon *ngIf=\"icon\" class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>\n", styles: [".ecl-gallery__description{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+/** @nocollapse */ EclGalleryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { mediaType: "mediaType", src: "src", label: "label", meta: "meta", description: "description", icon: "icon" }, outputs: { itemClick: "itemClick" }, host: { listeners: { "click": "onItemClick($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "mediaChild", first: true, predicate: EclGalleryMediaDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\"\n    class=\"ecl-gallery__item-link\"\n    [attr.aria-label]=\"label\">\n    <figure class=\"ecl-gallery__image-container\">\n        <ng-content></ng-content>\n        <ecl-icon *ngIf=\"icon\" class=\"ecl-gallery__image-icon\" [icon]=\"icon\" size=\"l\"></ecl-icon>\n        <figcaption class=\"ecl-gallery__description\">\n            {{ description }}\n            <ecl-icon *ngIf=\"icon\" class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>\n", styles: [".ecl-gallery__description{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclGalleryItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-gallery-item', template: "<a [href]=\"src\"\n    class=\"ecl-gallery__item-link\"\n    [attr.aria-label]=\"label\">\n    <figure class=\"ecl-gallery__image-container\">\n        <ng-content></ng-content>\n        <ecl-icon *ngIf=\"icon\" class=\"ecl-gallery__image-icon\" [icon]=\"icon\" size=\"l\"></ecl-icon>\n        <figcaption class=\"ecl-gallery__description\">\n            {{ description }}\n            <ecl-icon *ngIf=\"icon\" class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>\n", styles: [".ecl-gallery__description{width:100%}\n"] }]
@@ -6453,7 +6473,7 @@ class EclGalleryComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclGalleryComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclGalleryComponent, selector: "ecl-gallery", inputs: { isDownloadable: "isDownloadable", isShareable: "isShareable" }, outputs: { show: "show", hide: "hide", download: "download", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ propertyName: "videoChild", first: true, predicate: ["video"], descendants: true }, { propertyName: "imageChild", first: true, predicate: ["image"], descendants: true }, { propertyName: "externalVideoChild", first: true, predicate: ["externalVideo"], descendants: true }, { propertyName: "overlayChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "headerChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-gallery__list\">\n    <ng-content></ng-content>\n</ul>\n\n<div class=\"ecl-gallery__info\">\n    <strong>{{ itemsCount }}</strong> {{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n</div>\n\n<button eclButton\n    variant=\"ghost\"\n    class=\"ecl-gallery__view-all\"\n    (click)=\"onViewAll($event)\">{{ 'ecl.gallery.VIEW-ALL' | translate }}</button>\n\n<ng-content select=\"ecl-gallery-footer\"></ng-content>\n\n<dialog #overlay [attr.open]=\"isDialogVisible || null\"\n    class=\"ecl-gallery__overlay\">\n    <header #header class=\"ecl-gallery__close\">\n        <button (click)=\"onClose($event)\"\n            eclButton\n            class=\"ecl-gallery__close-button\"\n            variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close-filled\"\n                eclSize=\"s\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            <div #externalVideo class=\"ecl-gallery__slider-embed\"\n                *ngIf=\"item?.isExternalVideo\">\n                <iframe [src]=\"item?.getUrlExternalVideo()\"\n                    frameborder=\"0\">\n                </iframe>\n            </div>\n            <img #image *ngIf=\"item?.isImage\"\n                [attr.alt]=\"item?.label || null\"\n                class=\"ecl-gallery__slider-image\"\n                [src]=\"item?.src\">\n            <video #video\n                *ngIf=\"item?.isVideo\"\n                controls=\"controls\"\n                class=\"ecl-gallery__slider-video\"\n                [attr.poster]=\"item.mediaChild?.poster\">\n                <source *ngFor=\"let item of item.mediaChild?.sources\"\n                    [attr.src]=\"item\"\n                    [attr.type]=\"item.type\" />\n                <track *ngFor=\"let item of item.mediaChild?.tracks\"\n                    [attr.src]=\"item\"\n                    [attr.kind]=\"item.kind\"\n                    [attr.srcLang]=\"item.srcLang\"\n                    [attr.label]=\"item.label\" />\n            </video>\n        </div>\n        <button eclButton\n            class=\"ecl-gallery__slider-previous\"\n            variant=\"ghost\"\n            (click)=\"onPrevious($event)\">\n            <ecl-icon icon=\"corner-arrow\"\n                size=\"s\"\n                transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel>\n                {{ 'ecl.common.PREVIOUS' | translate }}\n            </span>\n        </button>\n        <button eclButton\n            class=\"ecl-gallery__slider-next\"\n            variant=\"ghost\"\n            (click)=\"onNext($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\"\n                size=\"s\"\n                transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-gallery__detail-counter\">\n            <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n        </div>\n        <div class=\"ecl-gallery__detail-actions\">\n            <a *ngIf=\"canBeDownloaded()\"\n                eclLink\n                variant=\"standalone\"\n                class=\"ecl-gallery__download\"\n                [download]=\"item?.src\"\n                [href]=\"item?.getDownloadLink()\"\n                (click)=\"onDownload($event)\">\n                <span eclLinkLabel>{{ 'ecl.common.DOWNLOAD' | translate }}</span>\n                <ecl-icon icon=\"download\"\n                    transform=\"fluid\"\n                    focusable=\"false\"></ecl-icon>\n            </a>\n            <a *ngIf=\"canBeShared()\"\n                eclLink\n                variant=\"standalone\"\n                class=\"ecl-gallery__share\"\n                href=\"\"\n                (click)=\"onShare($event)\">\n                <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n                <ecl-icon icon=\"share\"\n                    transform=\"fluid\"\n                    focusable=\"false\"></ecl-icon>\n            </a>\n        </div>\n        <div *ngIf=\"item?.description\"\n            class=\"ecl-gallery__detail-description\">{{ item?.description }}</div>\n        <div *ngIf=\"item?.meta\"\n            class=\"ecl-gallery__detail-meta\">{{ item?.meta }}</div>\n    </footer>\n</dialog>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclGalleryComponent, selector: "ecl-gallery", inputs: { isDownloadable: "isDownloadable", isShareable: "isShareable" }, outputs: { show: "show", hide: "hide", download: "download", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryItems", predicate: EclGalleryItemComponent }], viewQueries: [{ propertyName: "videoChild", first: true, predicate: ["video"], descendants: true }, { propertyName: "imageChild", first: true, predicate: ["image"], descendants: true }, { propertyName: "externalVideoChild", first: true, predicate: ["externalVideo"], descendants: true }, { propertyName: "overlayChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "headerChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerChild", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ecl-gallery__list\">\n    <ng-content></ng-content>\n</ul>\n\n<div class=\"ecl-gallery__info\">\n    <strong>{{ itemsCount }}</strong> {{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n</div>\n\n<button eclButton\n    variant=\"ghost\"\n    class=\"ecl-gallery__view-all\"\n    (click)=\"onViewAll($event)\">{{ 'ecl.gallery.VIEW-ALL' | translate }}</button>\n\n<ng-content select=\"ecl-gallery-footer\"></ng-content>\n\n<dialog #overlay [attr.open]=\"isDialogVisible || null\"\n    class=\"ecl-gallery__overlay\">\n    <header #header class=\"ecl-gallery__close\">\n        <button (click)=\"onClose($event)\"\n            eclButton\n            class=\"ecl-gallery__close-button\"\n            variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close-filled\"\n                eclSize=\"s\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            <div #externalVideo class=\"ecl-gallery__slider-embed\"\n                *ngIf=\"item?.isExternalVideo\">\n                <iframe [src]=\"item?.getUrlExternalVideo()\"\n                    frameborder=\"0\">\n                </iframe>\n            </div>\n            <img #image *ngIf=\"item?.isImage\"\n                [attr.alt]=\"item?.label || null\"\n                class=\"ecl-gallery__slider-image\"\n                [src]=\"item?.src\">\n            <video #video\n                *ngIf=\"item?.isVideo\"\n                controls=\"controls\"\n                class=\"ecl-gallery__slider-video\"\n                [attr.poster]=\"item.mediaChild?.poster\">\n                <source *ngFor=\"let item of item.mediaChild?.sources\"\n                    [attr.src]=\"item\"\n                    [attr.type]=\"item.type\" />\n                <track *ngFor=\"let item of item.mediaChild?.tracks\"\n                    [attr.src]=\"item\"\n                    [attr.kind]=\"item.kind\"\n                    [attr.srcLang]=\"item.srcLang\"\n                    [attr.label]=\"item.label\" />\n            </video>\n        </div>\n        <button eclButton\n            class=\"ecl-gallery__slider-previous\"\n            variant=\"ghost\"\n            (click)=\"onPrevious($event)\">\n            <ecl-icon icon=\"corner-arrow\"\n                size=\"s\"\n                transform=\"rotate-270\"></ecl-icon>\n            <span eclButtonLabel>\n                {{ 'ecl.common.PREVIOUS' | translate }}\n            </span>\n        </button>\n        <button eclButton\n            class=\"ecl-gallery__slider-next\"\n            variant=\"ghost\"\n            (click)=\"onNext($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\"\n                size=\"s\"\n                transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-gallery__detail-counter\">\n            <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n        </div>\n        <div class=\"ecl-gallery__detail-actions\">\n            <a *ngIf=\"canBeDownloaded()\"\n                eclLink\n                variant=\"standalone\"\n                class=\"ecl-gallery__download\"\n                [download]=\"item?.src\"\n                [href]=\"item?.getDownloadLink()\"\n                (click)=\"onDownload($event)\">\n                <span eclLinkLabel>{{ 'ecl.common.DOWNLOAD' | translate }}</span>\n                <ecl-icon icon=\"download\"\n                    transform=\"fluid\"\n                    focusable=\"false\"></ecl-icon>\n            </a>\n            <a *ngIf=\"canBeShared()\"\n                eclLink\n                variant=\"standalone\"\n                class=\"ecl-gallery__share\"\n                href=\"\"\n                (click)=\"onShare($event)\">\n                <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n                <ecl-icon icon=\"share\"\n                    transform=\"fluid\"\n                    focusable=\"false\"></ecl-icon>\n            </a>\n        </div>\n        <div *ngIf=\"item?.description\"\n            class=\"ecl-gallery__detail-description\">{{ item?.description }}</div>\n        <div *ngIf=\"item?.meta\"\n            class=\"ecl-gallery__detail-meta\">{{ item?.meta }}</div>\n    </footer>\n</dialog>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclGalleryComponent.prototype, "isDownloadable", void 0);
@@ -6642,7 +6662,7 @@ class EclHeroBannerComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclHeroBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclHeroBannerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclHeroBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclHeroBannerComponent, selector: "ecl-hero-banner", inputs: { variant: "variant", description: "description", image: "image", isCentered: "isCentered", isFullWidth: "isFullWidth" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLinkComponents", predicate: i0.forwardRef(function () { return EclLinkDirective; }) }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"image\"\n     class=\"ecl-hero-banner__image\"\n     [ngStyle]=\"{'background-image': 'url(' + image + ')'}\"> </div>\n<div class=\"ecl-container\">\n    <div class=\"ecl-hero-banner__container\">\n        <div class=\"ecl-hero-banner__content\">\n            <ng-content select=\"[eclHeroBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclHeroBannerDescription]\"></ng-content>\n            <div *ngIf=\"hasCtaLink\" class=\"ecl-hero-banner__cta\">\n                <ng-content select=\"[eclLink]\"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+/** @nocollapse */ EclHeroBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclHeroBannerComponent, selector: "ecl-hero-banner", inputs: { variant: "variant", description: "description", image: "image", isCentered: "isCentered", isFullWidth: "isFullWidth" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLinkComponents", predicate: i0.forwardRef(function () { return EclLinkDirective; }) }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"image\"\n     class=\"ecl-hero-banner__image\"\n     [ngStyle]=\"{'background-image': 'url(' + image + ')'}\"> </div>\n<ng-content select=\"[eclHeroBannerCredit]\"></ng-content>\n<div class=\"ecl-container\">\n    <div class=\"ecl-hero-banner__container\">\n        <div class=\"ecl-hero-banner__content\">\n            <ng-content select=\"[eclHeroBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclHeroBannerDescription]\"></ng-content>\n            <div *ngIf=\"hasCtaLink\" class=\"ecl-hero-banner__cta\">\n                <ng-content select=\"[eclLink]\"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 __decorate([
     coerceBoolean
 ], EclHeroBannerComponent.prototype, "isCentered", void 0);
@@ -6651,7 +6671,7 @@ __decorate([
 ], EclHeroBannerComponent.prototype, "isFullWidth", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclHeroBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-hero-banner', template: "<div *ngIf=\"image\"\n     class=\"ecl-hero-banner__image\"\n     [ngStyle]=\"{'background-image': 'url(' + image + ')'}\"> </div>\n<div class=\"ecl-container\">\n    <div class=\"ecl-hero-banner__container\">\n        <div class=\"ecl-hero-banner__content\">\n            <ng-content select=\"[eclHeroBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclHeroBannerDescription]\"></ng-content>\n            <div *ngIf=\"hasCtaLink\" class=\"ecl-hero-banner__cta\">\n                <ng-content select=\"[eclLink]\"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'ecl-hero-banner', template: "<div *ngIf=\"image\"\n     class=\"ecl-hero-banner__image\"\n     [ngStyle]=\"{'background-image': 'url(' + image + ')'}\"> </div>\n<ng-content select=\"[eclHeroBannerCredit]\"></ng-content>\n<div class=\"ecl-container\">\n    <div class=\"ecl-hero-banner__container\">\n        <div class=\"ecl-hero-banner__content\">\n            <ng-content select=\"[eclHeroBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclHeroBannerDescription]\"></ng-content>\n            <div *ngIf=\"hasCtaLink\" class=\"ecl-hero-banner__cta\">\n                <ng-content select=\"[eclLink]\"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], description: [{
@@ -6692,17 +6712,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
+class EclHeroBannerCreditDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = 'ecl-hero-banner__credit';
+    }
+}
+/** @nocollapse */ EclHeroBannerCreditDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclHeroBannerCreditDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ EclHeroBannerCreditDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclHeroBannerCreditDirective, selector: "[eclHeroBannerCredit]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclHeroBannerCreditDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[eclHeroBannerCredit]`
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+const COMPONENTS$5 = [
+    EclHeroBannerComponent,
+    EclHeroBannerTitleDirective,
+    EclHeroBannerDescriptionDirective,
+    EclHeroBannerCreditDirective,
+    // @deprecated
+    EclHeroBannerCtaLinkDirective,
+];
 class EclHeroBannerComponentModule {
 }
 /** @nocollapse */ EclHeroBannerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclHeroBannerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 /** @nocollapse */ EclHeroBannerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclHeroBannerComponentModule, declarations: [EclHeroBannerComponent,
         EclHeroBannerTitleDirective,
         EclHeroBannerDescriptionDirective,
+        EclHeroBannerCreditDirective,
         // @deprecated
         EclHeroBannerCtaLinkDirective], imports: [CommonModule,
         EclLinkDirectiveModule], exports: [EclHeroBannerComponent,
         EclHeroBannerTitleDirective,
         EclHeroBannerDescriptionDirective,
+        EclHeroBannerCreditDirective,
         // @deprecated
         EclHeroBannerCtaLinkDirective] });
 /** @nocollapse */ EclHeroBannerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclHeroBannerComponentModule, imports: [CommonModule,
@@ -6715,18 +6763,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLinkDirectiveModule,
                     ],
                     exports: [
-                        EclHeroBannerComponent,
-                        EclHeroBannerTitleDirective,
-                        EclHeroBannerDescriptionDirective,
-                        // @deprecated
-                        EclHeroBannerCtaLinkDirective,
+                        ...COMPONENTS$5
                     ],
                     declarations: [
-                        EclHeroBannerComponent,
-                        EclHeroBannerTitleDirective,
-                        EclHeroBannerDescriptionDirective,
-                        // @deprecated
-                        EclHeroBannerCtaLinkDirective,
+                        ...COMPONENTS$5
                     ],
                 }]
         }] });
@@ -6920,7 +6960,7 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclInpageNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclInpageNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclInpageNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container>\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclInpageNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container>\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"], dependencies: [{ kind: "component", type: EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclInpageNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container>\n    <nav class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div class=\"ecl-inpage-navigation__title\">\n            {{ eclTitle || 'ecl.inpage-navigation.PAGE-CONTENTS' | translate }}\n        </div>\n        <div class=\"ecl-inpage-navigation__body\">\n            <button\n                type=\"button\"\n                class=\"ecl-inpage-navigation__trigger\"\n                aria-controls=\"ecl-inpage-navigation-list\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                (click)=\"onExpandButtonClick($event)\">\n                <span class=\"ecl-inpage-navigation__trigger-current\">\n                    {{ currentNavigationLinkItem?.label }}\n                </span>\n                <ecl-icon \n                    icon=\"corner-arrow\" \n                    size=\"s\" \n                    transform=\"rotate-180\" \n                    class=\"ecl-inpage-navigation__trigger-icon\">\n                </ecl-icon>\n            </button>\n            <ul class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [attr.aria-expanded]=\"isButtonExpanded\"\n                aria-labelledby=\"ecl-inpage-navigation-trigger\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </nav>\n</ecl-sticky-container>\n", styles: ["@media (min-width: 996px){.ecl-inpage-navigation__list{display:block!important}}\n"] }]
@@ -7295,7 +7335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class.ecl-description-list__definition-item']
             }] } });
-const COMPONENTS$3 = [
+const COMPONENTS$4 = [
     EclOrderedListDirective,
     EclOrderedListItemDirective,
     EclUnorderedListDirective,
@@ -7331,10 +7371,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         CommonModule,
                     ],
                     exports: [
-                        ...COMPONENTS$3
+                        ...COMPONENTS$4
                     ],
                     declarations: [
-                        ...COMPONENTS$3
+                        ...COMPONENTS$4
                     ]
                 }]
         }] });
@@ -7606,7 +7646,7 @@ class EclMenuItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", href: "href", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus" }, host: { properties: { "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(function () { return EclMenuMegaComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"href\" \n    [href]=\"href\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<a *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<ng-content></ng-content>\n", styles: [":host{display:list-item}.ecl-menu__link{box-sizing:unset}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+/** @nocollapse */ EclMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuItemComponent, selector: "ecl-menu-item", inputs: { id: "id", label: "label", routerLink: "routerLink", queryParams: "queryParams", href: "href", isCurrent: "isCurrent" }, outputs: { menuItemSelect: "menuItemSelect", menuItemHover: "menuItemHover", menuItemHoverOut: "menuItemHoverOut", menuMegaItemSelect: "menuMegaItemSelect", menuItemFocus: "menuItemFocus" }, host: { properties: { "class": "this.cssClasses", "class.ecl-menu__item--has-children": "this.hasEclChildrenDataAttribute", "attr.aria-haspopup": "this.hasEclChildrenDataAttribute", "attr.aria-expanded": "this.isAriaExpanded" } }, queries: [{ propertyName: "submenu", first: true, predicate: i0.forwardRef(function () { return EclMenuMegaComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"href\" \n    [href]=\"href\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<a *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<ng-content></ng-content>\n", styles: [":host{display:list-item}.ecl-menu__link{box-sizing:unset}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu-item', template: "<a *ngIf=\"href\" \n    [href]=\"href\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<a *ngIf=\"!href\"\n    [routerLink]=\"routerLink\"\n    [queryParams]=\"queryParams\"\n    class=\"ecl-menu__link\"\n    [class.ecl-menu__link--current]=\"isCurrent\"\n    (click)=\"onItemClick($event)\"\n    (mouseenter)=\"onItemMouseEnter($event)\"\n    (mouseleave)=\"onItemMouseLeave($event)\"\n    (focus)=\"onItemFocus($event)\">\n    {{ label }}\n    <ng-container *ngIf=\"hasChildren\">\n        <ecl-icon\n            icon=\"corner-arrow\"\n            size=\"xs\"\n            transform=\"rotate-90\"\n            class=\"ecl-menu__link-icon\">\n        </ecl-icon>\n    </ng-container>\n</a>\n<ng-content></ng-content>\n", styles: [":host{display:list-item}.ecl-menu__link{box-sizing:unset}\n"] }]
@@ -7711,10 +7751,14 @@ class EclMenuComponent extends ECLBaseDirective {
         this.observeRootMenuItemsChanges();
     }
     onSwipeLeft(evt) {
-        this.openHamburgerMenu();
+        if (this.isMobileBreakpoint) {
+            this.openHamburgerMenu();
+        }
     }
     onSwipeRight(evt) {
-        this.closeHamburgerMenu();
+        if (this.isMobileBreakpoint) {
+            this.closeHamburgerMenu();
+        }
     }
     onOverlayClick(evt) {
         this.closeHamburgerMenu();
@@ -7916,7 +7960,7 @@ class EclMenuComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuComponent, deps: [{ token: i0.IterableDiffers }, { token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuComponent, selector: "ecl-menu", inputs: { group: "group" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick($event)\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink\n        href=\"#\"\n        variant=\"standalone\"\n        class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\" size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section class=\"ecl-menu__inner\" [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"text\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\" size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__back\"\n                    (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n\n        <ul class=\"ecl-menu__list\" (eclClickOutside)=\"onClickOutsideMenu($event)\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "directive", type: ECLClickOutsideDirective, selector: "[eclClickOutside]", outputs: ["eclClickOutside"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMenuComponent, selector: "ecl-menu", inputs: { group: "group" }, outputs: { menuItemSelect: "menuItemSelect" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class": "this.cssClasses", "attr.aria-expanded": "this.isHamburgerMenuOpened", "class.ecl-menu--forced-mobile": "this.isMobileBreakpoint", "class.ecl-menu--forced-close": "this.isMenuHidden" } }, queries: [{ propertyName: "eclRootMenuItems", predicate: EclMenuItemComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick($event)\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink\n        href=\"#\"\n        variant=\"standalone\"\n        class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\" size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section class=\"ecl-menu__inner\" [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"text\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\" size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__back\"\n                    (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n\n        <ul class=\"ecl-menu__list\" (eclClickOutside)=\"onClickOutsideMenu($event)\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "directive", type: ECLClickOutsideDirective, selector: "[eclClickOutside]", outputs: ["eclClickOutside"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-menu', template: "<div class=\"ecl-menu__overlay\" (click)=\"onOverlayClick($event)\"></div>\n<div class=\"ecl-container ecl-menu__container\">\n    <a eclLink\n        href=\"#\"\n        variant=\"standalone\"\n        class=\"ecl-menu__open\"\n        (click)=\"onMenuOpenClick($event)\">\n        <ecl-icon icon=\"hamburger\" size=\"s\"></ecl-icon> {{ 'ecl.menu.MENU' | translate }}\n    </a>\n\n    <section class=\"ecl-menu__inner\" [class.ecl-menu__inner--expanded]=\"isMenuExpandedInMobile\">\n        <header class=\"ecl-menu__inner-header\">\n            <button\n                eclButton\n                variant=\"text\"\n                class=\"ecl-menu__close\"\n                containerStyleClass=\"ecl-menu__close-container\"\n                (click)=\"onMenuCloseClick($event)\">\n                <ecl-icon icon=\"close-filled\" size=\"s\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.CLOSE' | translate }}</span>\n            </button>\n\n            <div class=\"ecl-menu__title\">{{ 'ecl.menu.MENU' | translate }}</div>\n\n            <button eclButton\n                    variant=\"text\"\n                    class=\"ecl-menu__back\"\n                    (click)=\"onMenuBackClick($event)\">\n                <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n                <span eclButtonLabel>{{ 'ecl.common.BACK' | translate }}</span>\n            </button>\n        </header>\n\n        <ul class=\"ecl-menu__list\" (eclClickOutside)=\"onClickOutsideMenu($event)\">\n            <ng-content></ng-content>\n        </ul>\n    </section>\n</div>\n", styles: [":host{display:block}\n"] }]
@@ -8057,7 +8101,7 @@ class EclMessageComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMessageComponent, selector: "ecl-message", inputs: { messageTitle: "messageTitle", variant: "variant", isVisible: "isVisible", isCloseable: "isCloseable" }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ecl-icon size=\"l\" class=\"ecl-message__icon\" [icon]=\"getIcon()\"></ecl-icon>\n\n<div class=\"ecl-message__content\">\n    <button \n        *ngIf=\"isCloseable\"\n        eclButton \n        class=\"ecl-message__close\"\n        (click)=\"onCloseClick($event)\"\n        variant=\"ghost\">\n        <span eclButtonLabel>\n            {{ 'ecl.common.CLOSE' | translate }}\n        </span>\n        <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n    </button>\n\n    <ng-content select=\"[eclMessageTitle]\"></ng-content>\n    <div class=\"ecl-message__description\"><ng-content></ng-content></div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclMessageComponent, selector: "ecl-message", inputs: { messageTitle: "messageTitle", variant: "variant", isVisible: "isVisible", isCloseable: "isCloseable" }, outputs: { close: "close" }, host: { properties: { "attr.role": "this.role", "class.ecl-u-d-none": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ecl-icon size=\"l\" class=\"ecl-message__icon\" [icon]=\"getIcon()\"></ecl-icon>\n\n<div class=\"ecl-message__content\">\n    <button \n        *ngIf=\"isCloseable\"\n        eclButton \n        class=\"ecl-message__close\"\n        (click)=\"onCloseClick($event)\"\n        variant=\"ghost\">\n        <span eclButtonLabel>\n            {{ 'ecl.common.CLOSE' | translate }}\n        </span>\n        <ecl-icon icon=\"close\" size=\"s\"></ecl-icon>\n    </button>\n\n    <ng-content select=\"[eclMessageTitle]\"></ng-content>\n    <div class=\"ecl-message__description\"><ng-content></ng-content></div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclMessageComponent.prototype, "isVisible", void 0);
@@ -8695,7 +8739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
-const COMPONENTS$2 = [
+const COMPONENTS$3 = [
     EclNavigationListComponent,
     EclNavigationListItemComponent,
     EclNavigationListImageDirective
@@ -8716,10 +8760,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         CommonModule,
                     ],
                     exports: [
-                        ...COMPONENTS$2
+                        ...COMPONENTS$3
                     ],
                     declarations: [
-                        ...COMPONENTS$2
+                        ...COMPONENTS$3
                     ]
                 }]
         }] });
@@ -8912,7 +8956,7 @@ class EclNewsTickerComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclNewsTickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclNewsTickerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclNewsTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclNewsTickerComponent, selector: "ecl-news-ticker", outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n<ecl-icon icon=\"information\"\n    size=\"m\"\n    class=\"ecl-news-ticker__icon\"></ecl-icon>\n<div class=\"ecl-news-ticker__counter\">\n    <span class=\"ecl-news-ticker__counter--current\">{{ itemIndex }}</span> of {{ itemsCount }}\n</div>\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-270\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__toggle\"\n        (click)=\"togglePlay()\">\n        <ecl-icon [icon]=\"playing ? 'pause' : 'play'\"\n            size=\"m\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-90\">\n        </ecl-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item" }] });
+/** @nocollapse */ EclNewsTickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclNewsTickerComponent, selector: "ecl-news-ticker", outputs: { itemSwitch: "itemSwitch" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "newsTickerItems", predicate: EclNewsTickerItemComponent }], viewQueries: [{ propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-news-ticker__container\"\n    [style.height.px]=\"containerHeight\">\n    <div class=\"ecl-news-ticker__content\"\n        [style.height.px]=\"contentHeight\">\n        <ul class=\"ecl-news-ticker__slides\"\n            [style.transition-duration.s]=\"transitionDuration\"\n            [style.transform]=\"slidesTransform\"\n            #slidesContainer >\n            <ecl-news-ticker-item #firstHiddenItem></ecl-news-ticker-item>\n            <ng-content></ng-content>\n            <ecl-news-ticker-item #lastHiddenItem></ecl-news-ticker-item>\n        </ul>\n    </div>\n</div>\n<ecl-icon icon=\"information\"\n    size=\"m\"\n    class=\"ecl-news-ticker__icon\"></ecl-icon>\n<div class=\"ecl-news-ticker__counter\">\n    <span class=\"ecl-news-ticker__counter--current\">{{ itemIndex }}</span> of {{ itemsCount }}\n</div>\n<div class=\"ecl-news-ticker__controls\">\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__prev\"\n        (click)=\"onPrevious()\">\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-270\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__toggle\"\n        (click)=\"togglePlay()\">\n        <ecl-icon [icon]=\"playing ? 'pause' : 'play'\"\n            size=\"m\"></ecl-icon>\n    </button>\n    <button eclButton\n        variant=\"primary\"\n        tabindex=\"-1\"\n        class=\"ecl-news-ticker__next\"\n        (click)=\"onNext()\">\n        <ecl-icon icon=\"corner-arrow\"\n            size=\"m\"\n            transform=\"rotate-90\">\n        </ecl-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclNewsTickerItemComponent, selector: "ecl-news-ticker-item" }] });
 __decorate([
     coerceElement
 ], EclNewsTickerComponent.prototype, "slidesContainer", void 0);
@@ -9040,7 +9084,7 @@ class EclPageBannerComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclPageBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPageBannerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclPageBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPageBannerComponent, selector: "ecl-page-banner", inputs: { variant: "variant", image: "image", isCentered: "isCentered", isFullWidth: "isFullWidth" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLinkComponents", predicate: i0.forwardRef(function () { return EclLinkDirective; }) }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"image\"\n     class=\"ecl-page-banner__image\"\n     [ngStyle]=\"{'background-image': 'url(' + image + ')'}\"></div>\n<div class=\"ecl-container\">\n    <div class=\"ecl-page-banner__container\">\n        <div class=\"ecl-page-banner__content\">\n            <ng-content select=\"[eclPageBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclPageBannerDescription]\"></ng-content>\n            <div *ngIf=\"hasCtaLink\" class=\"ecl-page-banner__cta\">\n                <ng-content select=\"[eclLink]\"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+/** @nocollapse */ EclPageBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPageBannerComponent, selector: "ecl-page-banner", inputs: { variant: "variant", image: "image", isCentered: "isCentered", isFullWidth: "isFullWidth" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclLinkComponents", predicate: i0.forwardRef(function () { return EclLinkDirective; }) }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"image\"\n     class=\"ecl-page-banner__image\"\n     [ngStyle]=\"{'background-image': 'url(' + image + ')'}\"></div>\n<ng-content select=\"[eclPageBannerCredit]\"></ng-content>\n<div class=\"ecl-container\">\n    <div class=\"ecl-page-banner__container\">\n        <div class=\"ecl-page-banner__content\">\n            <ng-content select=\"[eclPageBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclPageBannerDescription]\"></ng-content>\n            <div *ngIf=\"hasCtaLink\" class=\"ecl-page-banner__cta\">\n                <ng-content select=\"[eclLink]\"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 __decorate([
     coerceBoolean
 ], EclPageBannerComponent.prototype, "isCentered", void 0);
@@ -9049,7 +9093,7 @@ __decorate([
 ], EclPageBannerComponent.prototype, "isFullWidth", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPageBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-page-banner', template: "<div *ngIf=\"image\"\n     class=\"ecl-page-banner__image\"\n     [ngStyle]=\"{'background-image': 'url(' + image + ')'}\"></div>\n<div class=\"ecl-container\">\n    <div class=\"ecl-page-banner__container\">\n        <div class=\"ecl-page-banner__content\">\n            <ng-content select=\"[eclPageBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclPageBannerDescription]\"></ng-content>\n            <div *ngIf=\"hasCtaLink\" class=\"ecl-page-banner__cta\">\n                <ng-content select=\"[eclLink]\"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'ecl-page-banner', template: "<div *ngIf=\"image\"\n     class=\"ecl-page-banner__image\"\n     [ngStyle]=\"{'background-image': 'url(' + image + ')'}\"></div>\n<ng-content select=\"[eclPageBannerCredit]\"></ng-content>\n<div class=\"ecl-container\">\n    <div class=\"ecl-page-banner__container\">\n        <div class=\"ecl-page-banner__content\">\n            <ng-content select=\"[eclPageBannerTitle]\"></ng-content>\n            <ng-content select=\"[eclPageBannerDescription]\"></ng-content>\n            <div *ngIf=\"hasCtaLink\" class=\"ecl-page-banner__cta\">\n                <ng-content select=\"[eclLink]\"></ng-content>\n            </div>\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], image: [{
@@ -9088,16 +9132,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 args: ['class']
             }] } });
+class EclPageBannerCreditDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.className = 'ecl-page-banner__credit';
+    }
+}
+/** @nocollapse */ EclPageBannerCreditDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPageBannerCreditDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ EclPageBannerCreditDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPageBannerCreditDirective, selector: "[eclPageBannerCredit]", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPageBannerCreditDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[eclPageBannerCredit]`
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+const COMPONENTS$2 = [
+    EclPageBannerComponent,
+    EclPageBannerTitleDirective,
+    EclPageBannerDescriptionDirective,
+    EclPageBannerCreditDirective,
+    // @deprecated
+    EclPageBannerCtaLinkDirective,
+];
 class EclPageBannerComponentModule {
 }
 /** @nocollapse */ EclPageBannerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPageBannerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 /** @nocollapse */ EclPageBannerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPageBannerComponentModule, declarations: [EclPageBannerComponent,
         EclPageBannerTitleDirective,
         EclPageBannerDescriptionDirective,
+        EclPageBannerCreditDirective,
+        // @deprecated
         EclPageBannerCtaLinkDirective], imports: [CommonModule,
         EclLinkDirectiveModule], exports: [EclPageBannerComponent,
         EclPageBannerTitleDirective,
         EclPageBannerDescriptionDirective,
+        EclPageBannerCreditDirective,
+        // @deprecated
         EclPageBannerCtaLinkDirective] });
 /** @nocollapse */ EclPageBannerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPageBannerComponentModule, imports: [CommonModule,
         EclLinkDirectiveModule] });
@@ -9109,16 +9183,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EclLinkDirectiveModule,
                     ],
                     exports: [
-                        EclPageBannerComponent,
-                        EclPageBannerTitleDirective,
-                        EclPageBannerDescriptionDirective,
-                        EclPageBannerCtaLinkDirective,
+                        ...COMPONENTS$2
                     ],
                     declarations: [
-                        EclPageBannerComponent,
-                        EclPageBannerTitleDirective,
-                        EclPageBannerDescriptionDirective,
-                        EclPageBannerCtaLinkDirective,
+                        ...COMPONENTS$2
                     ]
                 }]
         }] });
@@ -9976,7 +10044,7 @@ class EclPaginationItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclPaginationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclPaginationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclPaginationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrent\"\n    eclLink\n    (click)=\"onPageClick($event)\"\n    variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate:{ pageNumber: label} }}\"\n    [href]=\"href\"\n    class=\"ecl-pagination__link\">\n    <ng-container *ngIf=\"isPrevious\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    </ng-container>\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    <ng-container *ngIf=\"isNext\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrent\">\n    <span class=\"ecl-pagination__text ecl-pagination__text--summary\"\n        attr.aria-label=\"{{ ariaLabel || 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclPaginationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclPaginationItemComponent, selector: "ecl-pagination-item", inputs: { label: "label", ariaLabel: "ariaLabel", isCurrent: "isCurrent", isNext: "isNext", isPrevious: "isPrevious", href: "href" }, outputs: { pageClick: "pageClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a *ngIf=\"!isCurrent\"\n    eclLink\n    (click)=\"onPageClick($event)\"\n    variant=\"standalone\"\n    attr.aria-label=\"{{ ariaLabel || geti18nPageAriaLabelKey() | translate:{ pageNumber: label} }}\"\n    [href]=\"href\"\n    class=\"ecl-pagination__link\">\n    <ng-container *ngIf=\"isPrevious\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-270\"></ecl-icon>\n    </ng-container>\n    <span eclLinkLabel>{{ label || geti18nPageLabelKey() | translate }}</span>\n    <ng-container *ngIf=\"isNext\">\n        <ecl-icon icon=\"corner-arrow\" size=\"xs\" transform=\"rotate-90\"></ecl-icon>\n    </ng-container>\n</a>\n\n<ng-container *ngIf=\"isCurrent\">\n    <span class=\"ecl-pagination__text ecl-pagination__text--summary\"\n        attr.aria-label=\"{{ ariaLabel || 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\"\n        aria-current=\"true\">\n        {{ label }}\n    </span>\n    <span class=\"ecl-pagination__text ecl-pagination__text--full\"\n        aria-current=\"true\">\n        {{ 'ecl.pagination.PAGE' | translate:{ pageNumber: label} }}\n    </span>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceBoolean
 ], EclPaginationItemComponent.prototype, "isCurrent", void 0);
@@ -12090,7 +12158,7 @@ class EclSocialMediaFollowItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclSocialMediaFollowItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaFollowItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSocialMediaFollowItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaFollowItemComponent, selector: "ecl-social-media-follow-item", inputs: { icon: "icon", href: "href", target: "target", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-follow__link\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-follow__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}_hover\" [size]=\"size\" class=\"ecl-social-media-follow__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] });
+/** @nocollapse */ EclSocialMediaFollowItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaFollowItemComponent, selector: "ecl-social-media-follow-item", inputs: { icon: "icon", href: "href", target: "target", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-follow__link\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-follow__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}_hover\" [size]=\"size\" class=\"ecl-social-media-follow__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaFollowItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-social-media-follow-item', template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-follow__link\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}\" [size]=\"size\" class=\"ecl-social-media-follow__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{ icon }}_hover\" [size]=\"size\" class=\"ecl-social-media-follow__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"] }]
@@ -12163,7 +12231,7 @@ class EclSocialMediaShareItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclSocialMediaShareItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaShareItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclSocialMediaShareItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaShareItemComponent, selector: "ecl-social-media-share-item", inputs: { icon: "icon", href: "href", target: "target" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-share__link ecl-social-media-share__link--{{ icon }}\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}\" size=\"xl\" class=\"ecl-social-media-share__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}_hover\" size=\"xl\" class=\"ecl-social-media-share__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+/** @nocollapse */ EclSocialMediaShareItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclSocialMediaShareItemComponent, selector: "ecl-social-media-share-item", inputs: { icon: "icon", href: "href", target: "target" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-share__link ecl-social-media-share__link--{{ icon }}\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}\" size=\"xl\" class=\"ecl-social-media-share__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}_hover\" size=\"xl\" class=\"ecl-social-media-share__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclSocialMediaShareItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-social-media-share-item', template: "<a eclLink \n    (click)=\"onItemClick($event)\"\n    variant=\"standalone\"\n    [href]=\"href\" \n    [attr.target]=\"target\"\n    class=\"ecl-social-media-share__link ecl-social-media-share__link--{{ icon }}\">\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}\" size=\"xl\" class=\"ecl-social-media-share__icon\"></ecl-icon>\n  <ecl-icon *ngIf=\"icon\" iconSet=\"social\" icon=\"{{icon}}_hover\" size=\"xl\" class=\"ecl-social-media-share__icon-hover\"></ecl-icon>\n\n  <span class=\"ecl-link__label\">\n    <ng-content></ng-content>\n  </span>\n</a>\n", styles: [":host{display:list-item}\n"] }]
@@ -12767,7 +12835,7 @@ class EclTabsComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTabsComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTabsComponent, selector: "ecl-tabs", inputs: { activeTabIndex: "activeTabIndex", bodyClass: "bodyClass" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.ecl-tabs": "this.cmpClass", "attr.role": "this.role" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return EclTabComponent; }) }], viewQueries: [{ propertyName: "moreButtonElement", first: true, predicate: ["moreButton"], descendants: true, read: ElementRef }, { propertyName: "tabsListElement", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "dropdownListElement", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-tabs__container\">\n    <ul #tabsList class=\"ecl-tabs__list\">\n        <ng-content select=\"ecl-tab\"></ng-content>\n\n        <ecl-tab [isMore]=\"true\" [isHidden]=\"false\">\n            <ecl-tab-label>\n                <button \n                    #moreButton\n                    eclButton \n                    (click)=\"onMoreToggle()\"\n                    variant=\"secondary\" \n                    [attr.aria-expanded]=\"false\"\n                    class=\"ecl-tabs__toggle\">\n                    {{ 'ecl.common.MORE' | translate }}\n                </button>\n                <ul #dropdownList class=\"ecl-tabs__dropdown\">\n\n                </ul>\n            </ecl-tab-label>\n        </ecl-tab>\n    </ul>\n</div>\n<div class=\"ecl-tabs__controls\">\n    <button eclButton (click)=\"onScrollPrev()\" class=\"ecl-tabs__prev\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            color=\"inverted\" \n            transform=\"rotate-270\" \n            size=\"m\"\n            class=\"ecl-u-d-block\">\n        </ecl-icon>\n    </button>\n    <button eclButton (click)=\"onScrollNext()\" class=\"ecl-tabs__next\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            color=\"inverted\" \n            transform=\"rotate-90\" \n            size=\"m\"\n            class=\"ecl-u-d-block\">\n        </ecl-icon>\n    </button>\n</div>\n\n<ng-container *ngFor=\"let c of tabs.toArray()\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"c.isActive\">\n        <ng-container *ngTemplateOutlet=\"c.tabContentTemplate\"></ng-container>\n    </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab", inputs: ["id", "isHidden", "isActive", "isMore"], outputs: ["select"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+/** @nocollapse */ EclTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTabsComponent, selector: "ecl-tabs", inputs: { activeTabIndex: "activeTabIndex", bodyClass: "bodyClass" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.ecl-tabs": "this.cmpClass", "attr.role": "this.role" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return EclTabComponent; }) }], viewQueries: [{ propertyName: "moreButtonElement", first: true, predicate: ["moreButton"], descendants: true, read: ElementRef }, { propertyName: "tabsListElement", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "dropdownListElement", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-tabs__container\">\n    <ul #tabsList class=\"ecl-tabs__list\">\n        <ng-content select=\"ecl-tab\"></ng-content>\n\n        <ecl-tab [isMore]=\"true\" [isHidden]=\"false\">\n            <ecl-tab-label>\n                <button \n                    #moreButton\n                    eclButton \n                    (click)=\"onMoreToggle()\"\n                    variant=\"secondary\" \n                    [attr.aria-expanded]=\"false\"\n                    class=\"ecl-tabs__toggle\">\n                    {{ 'ecl.common.MORE' | translate }}\n                </button>\n                <ul #dropdownList class=\"ecl-tabs__dropdown\">\n\n                </ul>\n            </ecl-tab-label>\n        </ecl-tab>\n    </ul>\n</div>\n<div class=\"ecl-tabs__controls\">\n    <button eclButton (click)=\"onScrollPrev()\" class=\"ecl-tabs__prev\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            color=\"inverted\" \n            transform=\"rotate-270\" \n            size=\"m\"\n            class=\"ecl-u-d-block\">\n        </ecl-icon>\n    </button>\n    <button eclButton (click)=\"onScrollNext()\" class=\"ecl-tabs__next\">\n        <ecl-icon \n            icon=\"corner-arrow\" \n            color=\"inverted\" \n            transform=\"rotate-90\" \n            size=\"m\"\n            class=\"ecl-u-d-block\">\n        </ecl-icon>\n    </button>\n</div>\n\n<ng-container *ngFor=\"let c of tabs.toArray()\">\n    <div class=\"{{ bodyClass }}\" *ngIf=\"c.isActive\">\n        <ng-container *ngTemplateOutlet=\"c.tabContentTemplate\"></ng-container>\n    </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab", inputs: ["id", "isHidden", "isActive", "isMore"], outputs: ["select"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 __decorate([
     coerceElement
 ], EclTabsComponent.prototype, "moreButtonElement", void 0);
@@ -12878,7 +12946,7 @@ class EclTagComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant" }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<span *ngIf=\"isRemovable\" class=\"ecl-tag__icon\" (click)=\"onRemoveClick($event)\">\n  <ecl-icon icon=\"close\" class=\"ecl-tag__icon-close\"></ecl-icon>\n  <ecl-icon icon=\"close-filled\" class=\"ecl-tag__icon-close-filled\"></ecl-icon>\n</span>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }] });
+/** @nocollapse */ EclTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTagComponent, selector: "ecl-tag, [eclTag]", inputs: { variant: "variant" }, outputs: { remove: "remove" }, host: { properties: { "attr.hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<span *ngIf=\"isRemovable\" class=\"ecl-tag__icon\" (click)=\"onRemoveClick($event)\">\n  <ecl-icon icon=\"close\" class=\"ecl-tag__icon-close\"></ecl-icon>\n  <ecl-icon icon=\"close-filled\" class=\"ecl-tag__icon-close-filled\"></ecl-icon>\n</span>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-tag, [eclTag]', template: "<ng-content></ng-content>\n\n<span *ngIf=\"isRemovable\" class=\"ecl-tag__icon\" (click)=\"onRemoveClick($event)\">\n  <ecl-icon icon=\"close\" class=\"ecl-tag__icon-close\"></ecl-icon>\n  <ecl-icon icon=\"close-filled\" class=\"ecl-tag__icon-close-filled\"></ecl-icon>\n</span>" }]
@@ -13079,7 +13147,7 @@ class EclTimelineItemComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclTimelineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EclTimelineItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclTimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTimelineItemComponent, selector: "ecl-timeline-item", inputs: { label: "label", eclTitle: "eclTitle", toggleButtonLabel: "toggleButtonLabel", isTogglerExpanded: "isTogglerExpanded", isCollapsed: "isCollapsed", isToggler: "isToggler", toggleGroup: "toggleGroup" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses", "class.ecl-timeline__item--collapsed": "this.isCollapsed", "class.ecl-timeline__item--toggle": "this.isToggler" } }, queries: [{ propertyName: "timelineItemToggler", first: true, predicate: i0.forwardRef(function () { return EclTimelineItemTogglerComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"label\" class=\"ecl-timeline__label\">{{ label }}</div>\n<ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n<div *ngIf=\"eclTitle\" class=\"ecl-timeline__title\">{{ eclTitle }}</div>\n<ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n<div class=\"ecl-timeline__content\">\n  <button eclButton *ngIf=\"hasDefaultToggler()\" (click)=\"onTogglerClick($event)\" type=\"secondary\">\n    <span eclButtonLabel>\n        {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded ? 'rotate-180' : ''\"></ecl-icon>\n  </button>\n\n  <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n  <ng-content></ng-content>\n</div>\n", styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ EclTimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EclTimelineItemComponent, selector: "ecl-timeline-item", inputs: { label: "label", eclTitle: "eclTitle", toggleButtonLabel: "toggleButtonLabel", isTogglerExpanded: "isTogglerExpanded", isCollapsed: "isCollapsed", isToggler: "isToggler", toggleGroup: "toggleGroup" }, outputs: { toggle: "toggle" }, host: { properties: { "class": "this.cssClasses", "class.ecl-timeline__item--collapsed": "this.isCollapsed", "class.ecl-timeline__item--toggle": "this.isToggler" } }, queries: [{ propertyName: "timelineItemToggler", first: true, predicate: i0.forwardRef(function () { return EclTimelineItemTogglerComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"label\" class=\"ecl-timeline__label\">{{ label }}</div>\n<ng-content select=\"[eclTimelineItemLabel]\"></ng-content>\n\n<div *ngIf=\"eclTitle\" class=\"ecl-timeline__title\">{{ eclTitle }}</div>\n<ng-content select=\"[eclTimelineItemTitle]\"></ng-content>\n\n<div class=\"ecl-timeline__content\">\n  <button eclButton *ngIf=\"hasDefaultToggler()\" (click)=\"onTogglerClick($event)\" type=\"secondary\">\n    <span eclButtonLabel>\n        {{ toggleButtonLabel || 'ecl.timeline.TOGGLE-ITEMS' | translate }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" size=\"fluid\" [transform]=\"!isTogglerExpanded ? 'rotate-180' : ''\"></ecl-icon>\n  </button>\n\n  <ng-content select=\"ecl-timeline-item-toggler\"></ng-content>\n\n  <ng-content></ng-content>\n</div>\n", styles: ["ecl-timeline-item{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     coerceBoolean
 ], EclTimelineItemComponent.prototype, "isTogglerExpanded", void 0);
@@ -13524,5 +13592,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
  * Generated bundle index. Do not edit.
  */
-export { ECLClickOutsideDirective, ECL_DATE_PICKER_VALUE_ACCESSOR, ECL_SEARCH_FORM_VALUE_ACCESSOR, EclAccordionComponent, EclAccordionComponentModule, EclAccordionItemComponent, EclAccordionToggleEvent, EclAllModule, EclAppComponent, EclAppComponentBase, EclAppComponentModule, EclAppCoreComponent, EclAppCoreComponentModule, EclAppHarmonisedComponent, EclAppHarmonisedComponentModule, EclAppLanguageDismissEvent, EclAppStandardisedComponent, EclAppStandardisedComponentModule, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBreadcrumbComponent, EclBreadcrumbComponentBase, EclBreadcrumbComponentModule, EclBreadcrumbCoreComponent, EclBreadcrumbCoreComponentModule, EclBreadcrumbCoreSegmentComponent, EclBreadcrumbHarmonisedComponent, EclBreadcrumbHarmonisedComponentModule, EclBreadcrumbHarmonisedSegmentComponent, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclBreadcrumbSegmentComponentBase, EclBreadcrumbStandardisedComponent, EclBreadcrumbStandardisedComponentModule, EclBreadcrumbStandardisedSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageDirective, EclCarouselComponent, EclCarouselComponentModule, EclCategoryFilterComponent, EclCategoryFilterItemComponent, EclCategoryFilterItemSelectEvent, EclCategoryFilterListComponent, EclCategoryFilterModule, EclCheckboxDirective, EclCheckboxHelpComponent, EclCheckboxInputDirective, EclCheckboxLabelComponent, EclCheckboxModule, EclClickOutsideModule, EclContentBlockComponent, EclContentBlockComponentModule, EclContentBlockDescriptionDirective, EclContentBlockLabelDirective, EclContentBlockLabelsDirective, EclContentBlockLinkDirective, EclContentBlockLinksContainerDirective, EclContentBlockLinksDirective, EclContentBlockListContainerDirective, EclContentBlockListDirective, EclContentBlockPrimaryMetaDirective, EclContentBlockPrimaryMetasDirective, EclContentBlockSecondaryMetaDirective, EclContentBlockSecondaryMetaIconDirective, EclContentBlockSecondaryMetaLabelDirective, EclContentBlockSecondaryMetasDirective, EclContentBlockTagDirective, EclContentBlockTagsDirective, EclContentBlockTitleDirective, EclContentItemComponent, EclContentItemComponentModule, EclContentItemImageDirective, EclContentItemPictureDirective, EclDateBlockComponent, EclDateBlockComponentModule, EclDatePickerDatePickedEvent, EclDatePickerDirective, EclDatePickerDirectiveModule, EclDefaultLanguageService, EclDescriptionListDefinitionDirective, EclDescriptionListDefinitionItemDirective, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadEvent, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFileTaxonomyComponent, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFooterComponentBase, EclFooterCoreColumntDirective, EclFooterCoreComponent, EclFooterCoreComponentModule, EclFooterCoreDescriptionDirective, EclFooterCoreLinkDirective, EclFooterCoreListDirective, EclFooterCoreListItemDirective, EclFooterCoreSectionDirective, EclFooterCoreTitleDirective, EclFooterCoreTitleLinkDirective, EclFooterHarmonisedColumnDirective, EclFooterHarmonisedComponent, EclFooterHarmonisedComponentModule, EclFooterHarmonisedContentDirective, EclFooterHarmonisedDescriptionDirective, EclFooterHarmonisedLinkDirective, EclFooterHarmonisedListDirective, EclFooterHarmonisedListItemDirective, EclFooterHarmonisedLogoDirective, EclFooterHarmonisedLogoImageDesktopDirective, EclFooterHarmonisedLogoItemDirective, EclFooterHarmonisedLogoLinkDirective, EclFooterHarmonisedLogoListDirective, EclFooterHarmonisedRowDirective, EclFooterHarmonisedSectionDirective, EclFooterHarmonisedTitleDirective, EclFooterHarmonisedTitleLinkDirective, EclFooterStandardisedColumnDirective, EclFooterStandardisedComponent, EclFooterStandardisedComponentModule, EclFooterStandardisedContentDirective, EclFooterStandardisedDescriptionDirective, EclFooterStandardisedLinkDirective, EclFooterStandardisedListDirective, EclFooterStandardisedListItemDirective, EclFooterStandardisedLogoImageDesktopDirective, EclFooterStandardisedLogoLinkDirective, EclFooterStandardisedRowDirective, EclFooterStandardisedSectionDirective, EclFooterStandardisedTitleDirective, EclFooterStandardisedTitleLinkDirective, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryDownloadEvent, EclGalleryFooterComponent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryShareEvent, EclGalleryShowEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHeroBannerComponent, EclHeroBannerComponentModule, EclHeroBannerCtaLinkDirective, EclHeroBannerDescriptionDirective, EclHeroBannerTitleDirective, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationSectionEnterEvent, EclLabelDirective, EclLabelDirectiveModule, EclLanguageListCloseEvent, EclLanguageListComponent, EclLanguageListComponentModule, EclLanguageListItemClickEvent, EclLanguageListItemComponent, EclLanguageListLanguageSelectedEvent, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerItemDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclMessageCloseEvent, EclMessageComponent, EclMessageComponentModule, EclMessageTitleDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclOrderedListDirective, EclOrderedListItemDirective, EclPageBannerComponent, EclPageBannerComponentModule, EclPageBannerCtaLinkDirective, EclPageBannerDescriptionDirective, EclPageBannerTitleDirective, EclPageHeaderComponent, EclPageHeaderComponentBase, EclPageHeaderComponentModule, EclPageHeaderCoreComponent, EclPageHeaderCoreComponentModule, EclPageHeaderCoreDescriptionContainerDirective, EclPageHeaderCoreDescriptionDirective, EclPageHeaderCoreDescriptionThumbnailDirective, EclPageHeaderCoreMetaDirective, EclPageHeaderCoreMetaItemDirective, EclPageHeaderCoreTitleDirective, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderHarmonisedComponent, EclPageHeaderHarmonisedComponentModule, EclPageHeaderHarmonisedDescriptionContainerDirective, EclPageHeaderHarmonisedDescriptionDirective, EclPageHeaderHarmonisedDescriptionThumbnailDirective, EclPageHeaderHarmonisedMetaDirective, EclPageHeaderHarmonisedMetaItemDirective, EclPageHeaderHarmonisedTitleDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderStandardisedComponent, EclPageHeaderStandardisedComponentModule, EclPageHeaderStandardisedDescriptionContainerDirective, EclPageHeaderStandardisedDescriptionDirective, EclPageHeaderStandardisedDescriptionThumbnailDirective, EclPageHeaderStandardisedMetaDirective, EclPageHeaderStandardisedMetaItemDirective, EclPageHeaderStandardisedTitleDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectDirective, EclSelectDirectiveModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDesktopDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderActionComponentBase, EclSiteHeaderBannerTopComponent, EclSiteHeaderBannerTopComponentBase, EclSiteHeaderComponent, EclSiteHeaderComponentBase, EclSiteHeaderComponentModule, EclSiteHeaderCoreActionComponent, EclSiteHeaderCoreComponent, EclSiteHeaderCoreComponentModule, EclSiteHeaderCoreLanguageComponent, EclSiteHeaderCoreLoginComponent, EclSiteHeaderCoreLoginDescriptionDirective, EclSiteHeaderCoreLoginSeparatorDirective, EclSiteHeaderCoreSearchComponent, EclSiteHeaderEnvironmentComponent, EclSiteHeaderHarmonisedActionComponent, EclSiteHeaderHarmonisedBannerTopComponent, EclSiteHeaderHarmonisedComponent, EclSiteHeaderHarmonisedComponentModule, EclSiteHeaderHarmonisedLanguageComponent, EclSiteHeaderHarmonisedLoginComponent, EclSiteHeaderHarmonisedLoginDescriptionDirective, EclSiteHeaderHarmonisedLoginSeparatorDirective, EclSiteHeaderHarmonisedSearchComponent, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageComponentBase, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginComponentBase, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderSearchComponent, EclSiteHeaderSearchComponentBase, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSiteHeaderStandardisedActionComponent, EclSiteHeaderStandardisedBannerTopComponent, EclSiteHeaderStandardisedComponent, EclSiteHeaderStandardisedComponentModule, EclSiteHeaderStandardisedCtaDirective, EclSiteHeaderStandardisedLanguageComponent, EclSiteHeaderStandardisedLoginComponent, EclSiteHeaderStandardisedLoginDescriptionDirective, EclSiteHeaderStandardisedLoginSeparatorDirective, EclSiteHeaderStandardisedSearchComponent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSortTableEvent, EclSpinnerComponent, EclSpinnerComponentModule, EclSpinnerLabelDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableRowDirective, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagRemoveEvent, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
+export { ECLClickOutsideDirective, ECL_DATE_PICKER_VALUE_ACCESSOR, ECL_SEARCH_FORM_VALUE_ACCESSOR, EclAccordionComponent, EclAccordionComponentModule, EclAccordionItemComponent, EclAccordionToggleEvent, EclAllModule, EclAppComponent, EclAppComponentBase, EclAppComponentModule, EclAppCoreComponent, EclAppCoreComponentModule, EclAppHarmonisedComponent, EclAppHarmonisedComponentModule, EclAppLanguageDismissEvent, EclAppStandardisedComponent, EclAppStandardisedComponentModule, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBreadcrumbComponent, EclBreadcrumbComponentBase, EclBreadcrumbComponentModule, EclBreadcrumbCoreComponent, EclBreadcrumbCoreComponentModule, EclBreadcrumbCoreSegmentComponent, EclBreadcrumbHarmonisedComponent, EclBreadcrumbHarmonisedComponentModule, EclBreadcrumbHarmonisedSegmentComponent, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclBreadcrumbSegmentComponentBase, EclBreadcrumbStandardisedComponent, EclBreadcrumbStandardisedComponentModule, EclBreadcrumbStandardisedSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageDirective, EclCarouselComponent, EclCarouselComponentModule, EclCategoryFilterComponent, EclCategoryFilterItemComponent, EclCategoryFilterItemSelectEvent, EclCategoryFilterListComponent, EclCategoryFilterModule, EclCheckboxDirective, EclCheckboxHelpComponent, EclCheckboxInputDirective, EclCheckboxLabelComponent, EclCheckboxModule, EclClickOutsideModule, EclContentBlockComponent, EclContentBlockComponentModule, EclContentBlockDescriptionDirective, EclContentBlockLabelDirective, EclContentBlockLabelsDirective, EclContentBlockLinkDirective, EclContentBlockLinksContainerDirective, EclContentBlockLinksDirective, EclContentBlockListContainerDirective, EclContentBlockListDirective, EclContentBlockPrimaryMetaDirective, EclContentBlockPrimaryMetasDirective, EclContentBlockSecondaryMetaDirective, EclContentBlockSecondaryMetaIconDirective, EclContentBlockSecondaryMetaLabelDirective, EclContentBlockSecondaryMetasDirective, EclContentBlockTagDirective, EclContentBlockTagsDirective, EclContentBlockTitleDirective, EclContentItemComponent, EclContentItemComponentModule, EclContentItemImageDirective, EclContentItemPictureDirective, EclDateBlockComponent, EclDateBlockComponentModule, EclDatePickerDatePickedEvent, EclDatePickerDirective, EclDatePickerDirectiveModule, EclDefaultLanguageService, EclDescriptionListDefinitionDirective, EclDescriptionListDefinitionItemDirective, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadEvent, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFileTaxonomyComponent, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFooterComponentBase, EclFooterCoreColumntDirective, EclFooterCoreComponent, EclFooterCoreComponentModule, EclFooterCoreDescriptionDirective, EclFooterCoreLinkDirective, EclFooterCoreListDirective, EclFooterCoreListItemDirective, EclFooterCoreSectionDirective, EclFooterCoreTitleDirective, EclFooterCoreTitleLinkDirective, EclFooterHarmonisedColumnDirective, EclFooterHarmonisedComponent, EclFooterHarmonisedComponentModule, EclFooterHarmonisedContentDirective, EclFooterHarmonisedDescriptionDirective, EclFooterHarmonisedLinkDirective, EclFooterHarmonisedListDirective, EclFooterHarmonisedListItemDirective, EclFooterHarmonisedLogoDirective, EclFooterHarmonisedLogoImageDesktopDirective, EclFooterHarmonisedLogoItemDirective, EclFooterHarmonisedLogoLinkDirective, EclFooterHarmonisedLogoListDirective, EclFooterHarmonisedRowDirective, EclFooterHarmonisedSectionDirective, EclFooterHarmonisedTitleDirective, EclFooterHarmonisedTitleLinkDirective, EclFooterStandardisedColumnDirective, EclFooterStandardisedComponent, EclFooterStandardisedComponentModule, EclFooterStandardisedContentDirective, EclFooterStandardisedDescriptionDirective, EclFooterStandardisedLinkDirective, EclFooterStandardisedListDirective, EclFooterStandardisedListItemDirective, EclFooterStandardisedLogoImageDesktopDirective, EclFooterStandardisedLogoLinkDirective, EclFooterStandardisedRowDirective, EclFooterStandardisedSectionDirective, EclFooterStandardisedTitleDirective, EclFooterStandardisedTitleLinkDirective, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryDownloadEvent, EclGalleryFooterComponent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryShareEvent, EclGalleryShowEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHeroBannerComponent, EclHeroBannerComponentModule, EclHeroBannerCreditDirective, EclHeroBannerCtaLinkDirective, EclHeroBannerDescriptionDirective, EclHeroBannerTitleDirective, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationSectionEnterEvent, EclLabelDirective, EclLabelDirectiveModule, EclLanguageListCloseEvent, EclLanguageListComponent, EclLanguageListComponentModule, EclLanguageListItemClickEvent, EclLanguageListItemComponent, EclLanguageListLanguageSelectedEvent, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerItemDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclMessageCloseEvent, EclMessageComponent, EclMessageComponentModule, EclMessageTitleDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclOrderedListDirective, EclOrderedListItemDirective, EclPageBannerComponent, EclPageBannerComponentModule, EclPageBannerCreditDirective, EclPageBannerCtaLinkDirective, EclPageBannerDescriptionDirective, EclPageBannerTitleDirective, EclPageHeaderComponent, EclPageHeaderComponentBase, EclPageHeaderComponentModule, EclPageHeaderCoreComponent, EclPageHeaderCoreComponentModule, EclPageHeaderCoreDescriptionContainerDirective, EclPageHeaderCoreDescriptionDirective, EclPageHeaderCoreDescriptionThumbnailDirective, EclPageHeaderCoreMetaDirective, EclPageHeaderCoreMetaItemDirective, EclPageHeaderCoreTitleDirective, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderHarmonisedComponent, EclPageHeaderHarmonisedComponentModule, EclPageHeaderHarmonisedDescriptionContainerDirective, EclPageHeaderHarmonisedDescriptionDirective, EclPageHeaderHarmonisedDescriptionThumbnailDirective, EclPageHeaderHarmonisedMetaDirective, EclPageHeaderHarmonisedMetaItemDirective, EclPageHeaderHarmonisedTitleDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderStandardisedComponent, EclPageHeaderStandardisedComponentModule, EclPageHeaderStandardisedDescriptionContainerDirective, EclPageHeaderStandardisedDescriptionDirective, EclPageHeaderStandardisedDescriptionThumbnailDirective, EclPageHeaderStandardisedMetaDirective, EclPageHeaderStandardisedMetaItemDirective, EclPageHeaderStandardisedTitleDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectDirective, EclSelectDirectiveModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDesktopDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderActionComponentBase, EclSiteHeaderBannerTopComponent, EclSiteHeaderBannerTopComponentBase, EclSiteHeaderComponent, EclSiteHeaderComponentBase, EclSiteHeaderComponentModule, EclSiteHeaderCoreActionComponent, EclSiteHeaderCoreComponent, EclSiteHeaderCoreComponentModule, EclSiteHeaderCoreLanguageComponent, EclSiteHeaderCoreLoginComponent, EclSiteHeaderCoreLoginDescriptionDirective, EclSiteHeaderCoreLoginSeparatorDirective, EclSiteHeaderCoreSearchComponent, EclSiteHeaderEnvironmentComponent, EclSiteHeaderHarmonisedActionComponent, EclSiteHeaderHarmonisedBannerTopComponent, EclSiteHeaderHarmonisedComponent, EclSiteHeaderHarmonisedComponentModule, EclSiteHeaderHarmonisedLanguageComponent, EclSiteHeaderHarmonisedLoginComponent, EclSiteHeaderHarmonisedLoginDescriptionDirective, EclSiteHeaderHarmonisedLoginSeparatorDirective, EclSiteHeaderHarmonisedSearchComponent, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguageComponentBase, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginComponentBase, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderSearchComponent, EclSiteHeaderSearchComponentBase, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSiteHeaderStandardisedActionComponent, EclSiteHeaderStandardisedBannerTopComponent, EclSiteHeaderStandardisedComponent, EclSiteHeaderStandardisedComponentModule, EclSiteHeaderStandardisedCtaDirective, EclSiteHeaderStandardisedLanguageComponent, EclSiteHeaderStandardisedLoginComponent, EclSiteHeaderStandardisedLoginDescriptionDirective, EclSiteHeaderStandardisedLoginSeparatorDirective, EclSiteHeaderStandardisedSearchComponent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSortTableEvent, EclSpinnerComponent, EclSpinnerComponentModule, EclSpinnerLabelDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableRowDirective, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagRemoveEvent, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
 //# sourceMappingURL=eui-ecl.mjs.map