@eui/ecl 17.0.0-next.21 → 17.0.0-next.22

package/esm2022/lib/components/ecl-gallery/ecl-gallery-media.directive.mjs

@@ -38,10 +38,10 @@ export class EclGalleryMediaDirective extends ECLBaseDirective {
     getHostElement() {
         return this.el.nativeElement;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryMediaDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclGalleryMediaDirective, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryMediaDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclGalleryMediaDirective, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryMediaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclGalleryMedia], [eclGalleryImage]',
@@ -56,10 +56,10 @@ export class EclGalleryPictureDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-gallery__picture')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclGalleryPictureDirective, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclGalleryPictureDirective, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryPictureDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclGalleryPicture]',

package/esm2022/lib/components/ecl-gallery/ecl-gallery.component.mjs

@@ -288,8 +288,8 @@ export class EclGalleryComponent extends ECLBaseDirective {
     getVisibleItems() {
         return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclGalleryComponent, selector: "ecl-gallery", inputs: { isDownloadable: "isDownloadable", isOpenInFullScreenPossible: "isOpenInFullScreenPossible", isShareable: "isShareable", isFullWidth: "isFullWidth", isNoOverlay: "isNoOverlay", maxVisibleItems: "maxVisibleItems" }, outputs: { show: "show", hide: "hide", download: "download", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "iframeResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { 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<ng-content select=\"ecl-gallery-footer\"></ng-content>\n\n<dialog\n    #overlay\n    [attr.open]=\"isDialogVisible || null\"\n    class=\"ecl-gallery__overlay\"\n    [attr.aria-label]=\"'ecl.gallery.FULL-SIZE-DISPLAY' | translate\">\n    <header #header class=\"ecl-gallery__close\">\n        <button (click)=\"onClose($event)\" eclButton class=\"ecl-gallery__close-button\" variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close-filled\" 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\" *ngIf=\"item?.isExternalVideo\">\n                <iframe\n                    [src]=\"item?.getUrlExternalVideo()\"\n                    [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\"\n                    frameborder=\"0\">\n                </iframe>\n            </div>\n            <picture #image *ngIf=\"item?.isImage\" class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                <img [attr.alt]=\"item?.label || null\" [src]=\"item?.src\" />\n            </picture>\n            <video\n                #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\" [attr.src]=\"item.src\" [attr.type]=\"item.type\" />\n                <track\n                    *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    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-gallery__detail-actions\">\n                <!-- @deprecated [download]=\"item?.src\" -->\n                <a\n                    *ngIf=\"canBeDownloaded()\"\n                    eclLink\n                    variant=\"standalone\"\n                    class=\"ecl-gallery__download\"\n                    [href]=\"item?.getDownloadLink()\"\n                    [download]=\"item?.src\"\n                    target=\"_blank\"\n                    (click)=\"onDownload($event)\">\n                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>\n                    <ecl-icon icon=\"fullscreen\" transform=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                <a *ngIf=\"canBeShared()\" eclLink variant=\"standalone\" class=\"ecl-gallery__share\" href=\"\" (click)=\"onShare($event)\">\n                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n                    <ecl-icon icon=\"share\" transform=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n            </div>\n\n            <div *ngIf=\"item?.description\" class=\"ecl-gallery__detail-description\">{{ item?.description }}</div>\n\n            <div *ngIf=\"item?.meta\" class=\"ecl-gallery__detail-meta\">{{ item?.meta }}</div>\n\n            <div class=\"ecl-gallery__pager\">\n                <button eclButton class=\"ecl-gallery__slider-previous\" variant=\"ghost\" (click)=\"onPrevious($event)\">\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\"></ecl-icon>\n                    <span eclButtonLabel class=\"ecl-u-sr-only\">\n                        {{ 'ecl.common.PREVIOUS' | translate }}\n                    </span>\n                </button>\n                <div class=\"ecl-gallery__detail-counter\">\n                    <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                </div>\n                <button eclButton class=\"ecl-gallery__slider-next\" variant=\"ghost\" (click)=\"onNext($event)\">\n                    <span eclButtonLabel class=\"ecl-u-sr-only\">\n                        {{ 'ecl.common.NEXT' | translate }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\"></ecl-icon>\n                </button>\n            </div>\n        </div>\n    </footer>\n</dialog>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i6.EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: i7.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclGalleryComponent, selector: "ecl-gallery", inputs: { isDownloadable: "isDownloadable", isOpenInFullScreenPossible: "isOpenInFullScreenPossible", isShareable: "isShareable", isFullWidth: "isFullWidth", isNoOverlay: "isNoOverlay", maxVisibleItems: "maxVisibleItems" }, outputs: { show: "show", hide: "hide", download: "download", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler($event)", "window:resize": "iframeResize($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true }, { 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<ng-content select=\"ecl-gallery-footer\"></ng-content>\n\n<dialog\n    #overlay\n    [attr.open]=\"isDialogVisible || null\"\n    class=\"ecl-gallery__overlay\"\n    [attr.aria-label]=\"'ecl.gallery.FULL-SIZE-DISPLAY' | translate\">\n    <header #header class=\"ecl-gallery__close\">\n        <button (click)=\"onClose($event)\" eclButton class=\"ecl-gallery__close-button\" variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close-filled\" 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\" *ngIf=\"item?.isExternalVideo\">\n                <iframe\n                    [src]=\"item?.getUrlExternalVideo()\"\n                    [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\"\n                    frameborder=\"0\">\n                </iframe>\n            </div>\n            <picture #image *ngIf=\"item?.isImage\" class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                <img [attr.alt]=\"item?.label || null\" [src]=\"item?.src\" />\n            </picture>\n            <video\n                #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\" [attr.src]=\"item.src\" [attr.type]=\"item.type\" />\n                <track\n                    *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    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-gallery__detail-actions\">\n                <!-- @deprecated [download]=\"item?.src\" -->\n                <a\n                    *ngIf=\"canBeDownloaded()\"\n                    eclLink\n                    variant=\"standalone\"\n                    class=\"ecl-gallery__download\"\n                    [href]=\"item?.getDownloadLink()\"\n                    [download]=\"item?.src\"\n                    target=\"_blank\"\n                    (click)=\"onDownload($event)\">\n                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>\n                    <ecl-icon icon=\"fullscreen\" transform=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                <a *ngIf=\"canBeShared()\" eclLink variant=\"standalone\" class=\"ecl-gallery__share\" href=\"\" (click)=\"onShare($event)\">\n                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n                    <ecl-icon icon=\"share\" transform=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n            </div>\n\n            <div *ngIf=\"item?.description\" class=\"ecl-gallery__detail-description\">{{ item?.description }}</div>\n\n            <div *ngIf=\"item?.meta\" class=\"ecl-gallery__detail-meta\">{{ item?.meta }}</div>\n\n            <div class=\"ecl-gallery__pager\">\n                <button eclButton class=\"ecl-gallery__slider-previous\" variant=\"ghost\" (click)=\"onPrevious($event)\">\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\"></ecl-icon>\n                    <span eclButtonLabel class=\"ecl-u-sr-only\">\n                        {{ 'ecl.common.PREVIOUS' | translate }}\n                    </span>\n                </button>\n                <div class=\"ecl-gallery__detail-counter\">\n                    <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                </div>\n                <button eclButton class=\"ecl-gallery__slider-next\" variant=\"ghost\" (click)=\"onNext($event)\">\n                    <span eclButtonLabel class=\"ecl-u-sr-only\">\n                        {{ 'ecl.common.NEXT' | translate }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\"></ecl-icon>\n                </button>\n            </div>\n        </div>\n    </footer>\n</dialog>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i6.EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "directive", type: i7.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     coerceBoolean
@@ -309,7 +309,7 @@ __decorate([
 __decorate([
     coerceNumber
 ], EclGalleryComponent.prototype, "maxVisibleItems", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-gallery', template: "<ul class=\"ecl-gallery__list\">\n    <ng-content></ng-content>\n</ul>\n\n<ng-content select=\"ecl-gallery-footer\"></ng-content>\n\n<dialog\n    #overlay\n    [attr.open]=\"isDialogVisible || null\"\n    class=\"ecl-gallery__overlay\"\n    [attr.aria-label]=\"'ecl.gallery.FULL-SIZE-DISPLAY' | translate\">\n    <header #header class=\"ecl-gallery__close\">\n        <button (click)=\"onClose($event)\" eclButton class=\"ecl-gallery__close-button\" variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close-filled\" 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\" *ngIf=\"item?.isExternalVideo\">\n                <iframe\n                    [src]=\"item?.getUrlExternalVideo()\"\n                    [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\"\n                    frameborder=\"0\">\n                </iframe>\n            </div>\n            <picture #image *ngIf=\"item?.isImage\" class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                <img [attr.alt]=\"item?.label || null\" [src]=\"item?.src\" />\n            </picture>\n            <video\n                #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\" [attr.src]=\"item.src\" [attr.type]=\"item.type\" />\n                <track\n                    *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    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-gallery__detail-actions\">\n                <!-- @deprecated [download]=\"item?.src\" -->\n                <a\n                    *ngIf=\"canBeDownloaded()\"\n                    eclLink\n                    variant=\"standalone\"\n                    class=\"ecl-gallery__download\"\n                    [href]=\"item?.getDownloadLink()\"\n                    [download]=\"item?.src\"\n                    target=\"_blank\"\n                    (click)=\"onDownload($event)\">\n                    <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>\n                    <ecl-icon icon=\"fullscreen\" transform=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n                <a *ngIf=\"canBeShared()\" eclLink variant=\"standalone\" class=\"ecl-gallery__share\" href=\"\" (click)=\"onShare($event)\">\n                    <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n                    <ecl-icon icon=\"share\" transform=\"fluid\" focusable=\"false\"></ecl-icon>\n                </a>\n            </div>\n\n            <div *ngIf=\"item?.description\" class=\"ecl-gallery__detail-description\">{{ item?.description }}</div>\n\n            <div *ngIf=\"item?.meta\" class=\"ecl-gallery__detail-meta\">{{ item?.meta }}</div>\n\n            <div class=\"ecl-gallery__pager\">\n                <button eclButton class=\"ecl-gallery__slider-previous\" variant=\"ghost\" (click)=\"onPrevious($event)\">\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\"></ecl-icon>\n                    <span eclButtonLabel class=\"ecl-u-sr-only\">\n                        {{ 'ecl.common.PREVIOUS' | translate }}\n                    </span>\n                </button>\n                <div class=\"ecl-gallery__detail-counter\">\n                    <span>{{ itemIndex }}</span> {{ 'ecl.common.OF' | translate }} <span>{{ itemsCount }}</span>\n                </div>\n                <button eclButton class=\"ecl-gallery__slider-next\" variant=\"ghost\" (click)=\"onNext($event)\">\n                    <span eclButtonLabel class=\"ecl-u-sr-only\">\n                        {{ 'ecl.common.NEXT' | translate }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-90\"></ecl-icon>\n                </button>\n            </div>\n        </div>\n    </footer>\n</dialog>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i1.BreakpointObserver }], propDecorators: { isDownloadable: [{

package/esm2022/lib/components/ecl-gallery/ecl-gallery.module.mjs

@@ -17,8 +17,8 @@ const COMPONENTS = [
     EclGalleryPictureDirective,
 ];
 export class EclGalleryComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryComponentModule, declarations: [EclGalleryComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryComponentModule, declarations: [EclGalleryComponent,
             EclGalleryFooterComponent,
             EclGalleryItemComponent,
             EclGalleryMediaDirective,
@@ -27,9 +27,9 @@ export class EclGalleryComponentModule {
             EclGalleryItemComponent,
             EclGalleryMediaDirective,
             EclGalleryPictureDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryComponentModule, imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclGalleryComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclGalleryComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule],

package/esm2022/lib/components/ecl-help-block/ecl-help-block.directive.mjs

@@ -12,13 +12,13 @@ export class EclHelpBlockDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-help-block'), this.isDisabled ? 'ecl-help-block--disabled' : ''].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclHelpBlockDirective, selector: "[eclHelpBlock]", inputs: { isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclHelpBlockDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclHelpBlockDirective, selector: "[eclHelpBlock]", inputs: { isDisabled: "isDisabled" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
     coerceBoolean
 ], EclHelpBlockDirective.prototype, "isDisabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclHelpBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclHelpBlock]',

package/esm2022/lib/components/ecl-help-block/ecl-help-block.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclHelpBlockDirective } from './ecl-help-block.directive';
 import * as i0 from "@angular/core";
 export class EclHelpBlockDirectiveModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirectiveModule, declarations: [EclHelpBlockDirective], imports: [CommonModule], exports: [EclHelpBlockDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirectiveModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclHelpBlockDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclHelpBlockDirectiveModule, declarations: [EclHelpBlockDirective], imports: [CommonModule], exports: [EclHelpBlockDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclHelpBlockDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclHelpBlockDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclHelpBlockDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-icon/ecl-icon.component.mjs

@@ -83,8 +83,8 @@ export class EclIconComponent extends ECLBaseDirective {
             }
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclIconComponent, deps: [{ token: i0.ElementRef }, { token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", 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, usesOnChanges: true, ngImport: i0, template: "<svg\n    #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$ | async\"></use>\n    <ng-content></ng-content>\n</svg>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclIconComponent, deps: [{ token: i0.ElementRef }, { token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", 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, usesOnChanges: true, ngImport: i0, template: "<svg\n    #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$ | async\"></use>\n    <ng-content></ng-content>\n</svg>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 __decorate([
     coerceBoolean
@@ -98,7 +98,7 @@ __decorate([
 __decorate([
     coerceElement
 ], EclIconComponent.prototype, "svgEl", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-icon', template: "<svg\n    #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$ | async\"></use>\n    <ng-content></ng-content>\n</svg>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EclThemeService }], propDecorators: { iconSet: [{

package/esm2022/lib/components/ecl-icon/ecl-icon.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclIconComponent } from './ecl-icon.component';
 import * as i0 from "@angular/core";
 export class EclIconComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclIconComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclIconComponentModule, declarations: [EclIconComponent], imports: [CommonModule], exports: [EclIconComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclIconComponentModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclIconComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclIconComponentModule, declarations: [EclIconComponent], imports: [CommonModule], exports: [EclIconComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclIconComponentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclIconComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclIconComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-inpage-navigation/ecl-inpage-navigation-item.component.mjs

@@ -23,10 +23,10 @@ export class EclInpageNavigationItemComponent extends ECLBaseDirective {
     get sectionElement() {
         return document.querySelector(`#${this.sectionId}`);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclInpageNavigationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" href=\"#\" class=\"ecl-inpage-navigation__link\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclInpageNavigationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclInpageNavigationItemComponent, selector: "ecl-inpage-navigation-item", inputs: { label: "label", sectionId: "sectionId", isActive: "isActive" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.ecl-inpage-navigation__item": "this.cmpClass", "class.ecl-inpage-navigation__item--active": "this.isActive" } }, usesInheritance: true, ngImport: i0, template: "<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" href=\"#\" class=\"ecl-inpage-navigation__link\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclInpageNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclInpageNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-inpage-navigation-item', template: "<a eclLink (click)=\"onItemClick($event)\" variant=\"standalone\" href=\"#\" class=\"ecl-inpage-navigation__link\">\n    {{ label }}\n</a>\n", styles: [":host{display:list-item}\n"] }]
         }], propDecorators: { cmpClass: [{

package/esm2022/lib/components/ecl-inpage-navigation/ecl-inpage-navigation.component.mjs

@@ -92,10 +92,10 @@ export class EclInpageNavigationComponent extends ECLBaseDirective {
     hasScrollHitBottom() {
         return window.pageYOffset + window.innerHeight === document.documentElement.scrollHeight;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclInpageNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav\n        aria-labelledby=\"ecl-inpage-navigation-default\"\n        class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div id=\"ecl-inpage-navigation-default\" 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                id=\"ecl-inpage-navigation-default-trigger\"\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 icon=\"corner-arrow\" size=\"s\" transform=\"rotate-180\" class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n            </button>\n            <ul\n                id=\"ecl-inpage-navigation-default-list\"\n                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: i1.EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclInpageNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav\n        aria-labelledby=\"ecl-inpage-navigation-default\"\n        class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div id=\"ecl-inpage-navigation-default\" 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                id=\"ecl-inpage-navigation-default-trigger\"\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 icon=\"corner-arrow\" size=\"s\" transform=\"rotate-180\" class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n            </button>\n            <ul\n                id=\"ecl-inpage-navigation-default-list\"\n                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: i1.EclStickyContainerComponent, selector: "ecl-sticky-container", inputs: ["isEnabled", "marginTop", "marginBottom"] }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclInpageNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclInpageNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-inpage-navigation', template: "<ecl-sticky-container [marginTop]=\"marginTop\" [marginBottom]=\"marginBottom\">\n    <nav\n        aria-labelledby=\"ecl-inpage-navigation-default\"\n        class=\"ecl-inpage-navigation\"\n        [class.ecl-inpage-navigation--visible]=\"currentSectionElement\">\n        <div id=\"ecl-inpage-navigation-default\" 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                id=\"ecl-inpage-navigation-default-trigger\"\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 icon=\"corner-arrow\" size=\"s\" transform=\"rotate-180\" class=\"ecl-inpage-navigation__trigger-icon\"> </ecl-icon>\n            </button>\n            <ul\n                id=\"ecl-inpage-navigation-default-list\"\n                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"] }]
         }], propDecorators: { eclTitle: [{

package/esm2022/lib/components/ecl-inpage-navigation/ecl-inpage-navigation.module.mjs

@@ -8,11 +8,11 @@ import { EclStickyContainerComponentModule } from '../ecl-sticky-container/ecl-s
 import { EclInpageNavigationComponent } from './ecl-inpage-navigation.component';
 import * as i0 from "@angular/core";
 export class EclInpageNavigationComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclInpageNavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclInpageNavigationComponentModule, declarations: [EclInpageNavigationComponent, EclInpageNavigationItemComponent], imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclInpageNavigationComponent, EclInpageNavigationItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclInpageNavigationComponentModule, imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclInpageNavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclInpageNavigationComponentModule, declarations: [EclInpageNavigationComponent, EclInpageNavigationItemComponent], imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule], exports: [EclInpageNavigationComponent, EclInpageNavigationItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclInpageNavigationComponentModule, imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclInpageNavigationComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclInpageNavigationComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule, EclStickyContainerComponentModule, EclLinkDirectiveModule, EclIconComponentModule],

package/esm2022/lib/components/ecl-label/ecl-label.directive.mjs

@@ -9,10 +9,10 @@ export class EclLabelDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-label'), `ecl-label--${this.variant}`].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclLabelDirective, selector: "[eclLabel]", inputs: { variant: "variant" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclLabelDirective, selector: "[eclLabel]", inputs: { variant: "variant" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclLabel]',

package/esm2022/lib/components/ecl-label/ecl-label.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EclLabelDirective } from './ecl-label.directive';
 import * as i0 from "@angular/core";
 export class EclLabelDirectiveModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLabelDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLabelDirectiveModule, declarations: [EclLabelDirective], imports: [CommonModule], exports: [EclLabelDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLabelDirectiveModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLabelDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLabelDirectiveModule, declarations: [EclLabelDirective], imports: [CommonModule], exports: [EclLabelDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLabelDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLabelDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLabelDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-language-list/ecl-language-list-item.component.mjs

@@ -32,13 +32,13 @@ export class EclLanguageListItemComponent extends ECLBaseDirective {
         }));
         evt.preventDefault();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLanguageListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", 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>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLanguageListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", 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>\n", styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }] }); }
 }
 __decorate([
     coerceBoolean
 ], EclLanguageListItemComponent.prototype, "isActive", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLanguageListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLanguageListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-language-list-item', 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>\n", styles: [":host{display:list-item}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isActive: [{

package/esm2022/lib/components/ecl-language-list/ecl-language-list.component.mjs

@@ -139,8 +139,8 @@ export class EclLanguageListComponent extends ECLBaseDirective {
             item.isActive = false;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLanguageListComponent, deps: [{ token: i1.EclLanguageService }, { token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", 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, usesOnChanges: true, ngImport: i0, template: "<header *ngIf=\"isSplash\" class=\"ecl-language-list__header\">\n    <img\n        *ngIf=\"eclThemeService.isEC$ | async\"\n        class=\"ecl-language-list__logo\"\n        src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n        alt=\"European Commission logo\" />\n    <img\n        *ngIf=\"eclThemeService.isEU$ | async\"\n        class=\"ecl-language-list__logo\"\n        src=\"./assets/images/ecl/eu/logo/logo-eu--mute.svg\"\n        alt=\"European Union logo\" />\n</header>\n<div class=\"ecl-language-list__container ecl-container\">\n    <div *ngIf=\"isOverlay\" class=\"ecl-language-list--overlay__header\">\n        <div class=\"ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-5 ecl-offset-m-1\">\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 ecl-col-m-5\">\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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-5 ecl-offset-m-1\">\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 ecl-col-m-5\">\n            <ul #nonEuRightContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i6.EclHiddenDirective, selector: "[eclHidden]", inputs: ["eclHidden"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLanguageListComponent, deps: [{ token: i1.EclLanguageService }, { token: i1.EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", 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, usesOnChanges: true, ngImport: i0, template: "<header *ngIf=\"isSplash\" class=\"ecl-language-list__header\">\n    <img\n        *ngIf=\"eclThemeService.isEC$ | async\"\n        class=\"ecl-language-list__logo\"\n        src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n        alt=\"European Commission logo\" />\n    <img\n        *ngIf=\"eclThemeService.isEU$ | async\"\n        class=\"ecl-language-list__logo\"\n        src=\"./assets/images/ecl/eu/logo/logo-eu--mute.svg\"\n        alt=\"European Union logo\" />\n</header>\n<div class=\"ecl-language-list__container ecl-container\">\n    <div *ngIf=\"isOverlay\" class=\"ecl-language-list--overlay__header\">\n        <div class=\"ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-5 ecl-offset-m-1\">\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 ecl-col-m-5\">\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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-5 ecl-offset-m-1\">\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 ecl-col-m-5\">\n            <ul #nonEuRightContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }, { kind: "directive", type: i6.EclHiddenDirective, selector: "[eclHidden]", inputs: ["eclHidden"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     coerceBoolean
@@ -148,7 +148,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EclLanguageListComponent.prototype, "isHidden", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLanguageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLanguageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-language-list', template: "<header *ngIf=\"isSplash\" class=\"ecl-language-list__header\">\n    <img\n        *ngIf=\"eclThemeService.isEC$ | async\"\n        class=\"ecl-language-list__logo\"\n        src=\"./assets/images/ecl/ec/logo/logo-ec--mute.svg\"\n        alt=\"European Commission logo\" />\n    <img\n        *ngIf=\"eclThemeService.isEU$ | async\"\n        class=\"ecl-language-list__logo\"\n        src=\"./assets/images/ecl/eu/logo/logo-eu--mute.svg\"\n        alt=\"European Union logo\" />\n</header>\n<div class=\"ecl-language-list__container ecl-container\">\n    <div *ngIf=\"isOverlay\" class=\"ecl-language-list--overlay__header\">\n        <div class=\"ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-5 ecl-offset-m-1\">\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 ecl-col-m-5\">\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 ecl-col-m-11 ecl-offset-m-1\">\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 ecl-col-m-5 ecl-offset-m-1\">\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 ecl-col-m-5\">\n            <ul #nonEuRightContainer class=\"ecl-language-list__list\"></ul>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.EclLanguageService }, { type: i1.EclThemeService }], propDecorators: { isOverlay: [{

package/esm2022/lib/components/ecl-language-list/ecl-language-list.module.mjs

@@ -12,11 +12,11 @@ import * as i0 from "@angular/core";
  * @deprecated Please use EclSiteHeader supporting languages dropdown instead
  */
 export class EclLanguageListComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLanguageListComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLanguageListComponentModule, declarations: [EclLanguageListComponent, EclLanguageListItemComponent], imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule, EclHiddenModule, TranslateModule], exports: [EclLanguageListComponent, EclLanguageListItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLanguageListComponentModule, imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule, EclHiddenModule, TranslateModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLanguageListComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLanguageListComponentModule, declarations: [EclLanguageListComponent, EclLanguageListItemComponent], imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule, EclHiddenModule, TranslateModule], exports: [EclLanguageListComponent, EclLanguageListItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLanguageListComponentModule, imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule, EclHiddenModule, TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLanguageListComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLanguageListComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EclButtonComponentModule, EclIconComponentModule, EclLinkDirectiveModule, EclHiddenModule, TranslateModule],

package/esm2022/lib/components/ecl-link/ecl-link-label.directive.mjs

@@ -5,10 +5,10 @@ export class EclLinkLabelDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-link__label')].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLinkLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclLinkLabelDirective, selector: "[eclLinkLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLinkLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclLinkLabelDirective, selector: "[eclLinkLabel]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLinkLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLinkLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclLinkLabel]',

package/esm2022/lib/components/ecl-link/ecl-link.directive.mjs

@@ -57,8 +57,8 @@ export class EclLinkDirective extends ECLBaseDirective {
             return false;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLinkDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclLinkDirective, selector: "[eclLink]", inputs: { variant: "variant", isNegative: "isNegative", isNoVisited: "isNoVisited" }, host: { properties: { "class.ecl-link--negative": "this.isNegative", "class.ecl-link--no-visited": "this.isNoVisited", "class": "this.cssClasses", "class.ecl-link--icon-after": "this.hasRightIcon", "class.ecl-link--icon-before": "this.hasLeftIcon", "class.ecl-link--icon": "this.hasIcon" } }, queries: [{ propertyName: "eclIconComponents", predicate: i0.forwardRef(() => EclIconComponent) }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLinkDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclLinkDirective, selector: "[eclLink]", inputs: { variant: "variant", isNegative: "isNegative", isNoVisited: "isNoVisited" }, host: { properties: { "class.ecl-link--negative": "this.isNegative", "class.ecl-link--no-visited": "this.isNoVisited", "class": "this.cssClasses", "class.ecl-link--icon-after": "this.hasRightIcon", "class.ecl-link--icon-before": "this.hasLeftIcon", "class.ecl-link--icon": "this.hasIcon" } }, queries: [{ propertyName: "eclIconComponents", predicate: i0.forwardRef(() => EclIconComponent) }], usesInheritance: true, ngImport: i0 }); }
 }
 __decorate([
     coerceBoolean
@@ -66,7 +66,7 @@ __decorate([
 __decorate([
     coerceBoolean
 ], EclLinkDirective.prototype, "isNoVisited", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclLink]',

package/esm2022/lib/components/ecl-link/ecl-link.module.mjs

@@ -4,11 +4,11 @@ import { EclLinkDirective } from './ecl-link.directive';
 import { EclLinkLabelDirective } from './ecl-link-label.directive';
 import * as i0 from "@angular/core";
 export class EclLinkDirectiveModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLinkDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLinkDirectiveModule, declarations: [EclLinkDirective, EclLinkLabelDirective], imports: [CommonModule], exports: [EclLinkDirective, EclLinkLabelDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLinkDirectiveModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLinkDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLinkDirectiveModule, declarations: [EclLinkDirective, EclLinkLabelDirective], imports: [CommonModule], exports: [EclLinkDirective, EclLinkLabelDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLinkDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclLinkDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclLinkDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/lib/components/ecl-list/ecl-description-list-definition/ecl-description-list-definition.component.mjs

@@ -57,10 +57,10 @@ export class EclDescriptionListDefinitionComponent extends ECLBaseDirective {
     getLastVisibleItem() {
         return this.eclListItems.filter((item, cnt) => cnt < this._maxVisibleItems).pop();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclDescriptionListDefinitionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclDescriptionListDefinitionComponent, selector: "[eclDescriptionListDefinition]", inputs: { variant: "variant" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclListItems", predicate: EclDescriptionListDefinitionItemDirective }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<a eclLink *ngIf=\"hasSeeAll\" class=\"ecl-description-list__see_more\" href (click)=\"onShowAllItems($event)\">{{\n    'ecl.list.SEE-ALL-ITEMS' | translate\n}}</a>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclDescriptionListDefinitionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclDescriptionListDefinitionComponent, selector: "[eclDescriptionListDefinition]", inputs: { variant: "variant" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclListItems", predicate: EclDescriptionListDefinitionItemDirective }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<a eclLink *ngIf=\"hasSeeAll\" class=\"ecl-description-list__see_more\" href (click)=\"onShowAllItems($event)\">{{\n    'ecl.list.SEE-ALL-ITEMS' | translate\n}}</a>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.EclLinkDirective, selector: "[eclLink]", inputs: ["variant", "isNegative", "isNoVisited"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclDescriptionListDefinitionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclDescriptionListDefinitionComponent, decorators: [{
             type: Component,
             args: [{ selector: '[eclDescriptionListDefinition]', template: "<ng-content></ng-content>\n<a eclLink *ngIf=\"hasSeeAll\" class=\"ecl-description-list__see_more\" href (click)=\"onShowAllItems($event)\">{{\n    'ecl.list.SEE-ALL-ITEMS' | translate\n}}</a>\n" }]
         }], propDecorators: { variant: [{

package/esm2022/lib/components/ecl-list/ecl-description-list-definition-item.directive.mjs

@@ -14,10 +14,10 @@ export class EclDescriptionListDefinitionItemDirective extends ECLBaseDirective
             this.isLastVisible ? 'ecl-description-list__definition-item--last-visible' : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclDescriptionListDefinitionItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EclDescriptionListDefinitionItemDirective, selector: "[eclDescriptionListDefinitionItem]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclDescriptionListDefinitionItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EclDescriptionListDefinitionItemDirective, selector: "[eclDescriptionListDefinitionItem]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EclDescriptionListDefinitionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EclDescriptionListDefinitionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclDescriptionListDefinitionItem]',