@eui/ecl 18.2.1 → 18.2.2-snapshot-1729246724590

package/fesm2022/eui-ecl.mjs

@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser, formatDate } from '@angular/common';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { ReplaySubject, Subject, takeUntil, map, switchMap, of, distinctUntilChanged, fromEvent, debounceTime, delay, interval } from 'rxjs';
+import { ReplaySubject, Subject, takeUntil, map, switchMap, of, distinctUntilChanged, fromEvent, debounceTime, delay, interval, timer, take } from 'rxjs';
 import * as i1 from '@eui/core';
 import { GLOBAL_CONFIG_TOKEN, CssUtils } from '@eui/core';
 import { takeUntil as takeUntil$1, mergeWith } from 'rxjs/operators';
@@ -6444,11 +6444,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }] });
 
 class EclCardPictureDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.hasZoom = false;
+    }
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-card__picture')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclCardPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: EclCardPictureDirective, selector: "picture[eclCardPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.8", type: EclCardPictureDirective, selector: "picture[eclCardPicture]", inputs: { hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-picture--zoom": "this.hasZoom" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclCardPictureDirective, decorators: [{
             type: Directive,
@@ -6458,6 +6462,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], hasZoom: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-picture--zoom']
             }] } });
 class EclCardImageDirective extends ECLBaseDirective {
     get cssClasses() {
@@ -6657,12 +6667,10 @@ class EclCarouselComponent extends ECLBaseDirective {
     }
     onPlayClick() {
         this.startPlaying();
-        this.showButton(this.pauseButton);
         this.focusOnButton(this.pauseButton);
     }
     onPauseClick() {
         this.stopPlaying();
-        this.showButton(this.playButton);
         this.focusOnButton(this.playButton);
     }
     onFirstCarouselElementPress(e) {
@@ -6705,9 +6713,6 @@ class EclCarouselComponent extends ECLBaseDirective {
         }
         return button.nativeElement.style.display === '';
     }
-    showButton(button) {
-        this.renderer2.setStyle(button.nativeElement, 'display', '');
-    }
     focusOnButton(button) {
         if (!button) {
             return;
@@ -7024,10 +7029,14 @@ class EclCarouselComponent extends ECLBaseDirective {
             const banner = slide.banner;
             if (banner) {
                 const bannerImage = slide.banner.eclBannerImage;
+                const bannerVideo = slide.banner.eclBannerVideo;
                 this.renderer2.setStyle(banner.el.nativeElement, 'height', '');
                 if (bannerImage) {
                     this.renderer2.setStyle(bannerImage.el.nativeElement, 'aspectRatio', '');
                 }
+                if (bannerVideo) {
+                    this.renderer2.setStyle(bannerVideo.el.nativeElement, 'aspectRatio', '');
+                }
             }
         });
         this.resetHiddenItems();
@@ -7039,11 +7048,11 @@ class EclCarouselComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclCarouselComponent, deps: [{ token: i1$4.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: EclRtlService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclCarouselComponent, selector: "ecl-carousel", inputs: { ariaLabel: ["aria-label", "ariaLabel"], isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute], playInterval: ["playInterval", "playInterval", numberAttribute] }, outputs: { slide: "slide" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-roledescription": "this.ariaRoleDescription", "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "navigationButtons", predicate: ["currButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclCarouselComponent, selector: "ecl-carousel", inputs: { ariaLabel: ["aria-label", "ariaLabel"], isAutoplay: ["isAutoplay", "isAutoplay", booleanAttribute], playInterval: ["playInterval", "playInterval", numberAttribute] }, outputs: { slide: "slide" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-roledescription": "this.ariaRoleDescription", "class": "this.cssClasses" } }, queries: [{ propertyName: "slides", predicate: i0.forwardRef(() => EclCarouselItemComponent) }], viewQueries: [{ propertyName: "carouselContainerElement", first: true, predicate: ["carouselContainer"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { propertyName: "firstHiddenItem", first: true, predicate: ["firstHiddenItem"], descendants: true }, { propertyName: "lastHiddenItem", first: true, predicate: ["lastHiddenItem"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "navigationButtons", predicate: ["currButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclCarouselItemComponent, selector: "ecl-carousel-item", inputs: ["id", "isCurrent"], outputs: ["slideClick"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-carousel', template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"] }]
+            args: [{ selector: 'ecl-carousel', template: "@if(hasControls()){\n<div class=\"ecl-carousel__controls\">\n    <div class=\"ecl-container\">\n        <div class=\"ecl-carousel__autoplay\">\n            <button #playButton class=\"ecl-button ecl-button--tertiary ecl-carousel__play ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'none' : 'flex'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPlayClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PLAY' | translate }}\n                    </span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\">\n                    </ecl-icon>\n                </span>\n            </button>\n\n            <button #pauseButton class=\"ecl-button ecl-button--tertiary ecl-carousel__pause ecl-button--icon-only\"\n                type=\"button\" [style.display]=\"isPlaying ? 'flex' : 'none'\" (keydown)=\"onPlayKeyboardPress($event)\"\n                (click)=\"onPauseClick()\">\n                <span class=\"ecl-button__container\">\n                    <span class=\"ecl-button__label\">\n                        {{ 'ecl.carousel.PAUSE' | translate }}\n                    </span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\" class=\"ecl-button__icon ecl-carousel__icon-default\"> </ecl-icon>\n                </span>\n\n            </button>\n        </div>\n\n        <div class=\"ecl-carousel__navigation\" role=\"tablist\" >\n            @for (slide of slides; let i = $index; track slide) {\n            <button #currButton [attr.aria-current]=\"i === getCurrentSlideIndex()\" [attr.tabindex]=\"i === getCurrentSlideIndex() ? null: -1\"\n                class=\"ecl-button ecl-button--tertiary ecl-carousel__navigation-item\" role=\"tab\" (click)=\"onSlideControlClick(slide)\"\n                (keydown)=\"onNavBtnKeyboardPress($event, i)\">\n                {{ i + 1 }}\n            </button>\n            }\n        </div>\n    </div>\n</div>\n}\n<div #carouselContainer class=\"ecl-carousel__container\" [class.ecl-carousel-container--padded]=\"isPadded()\">\n    <div #slidesContainer (keyup)=\"onFirstCarouselElementPress($event)\" class=\"ecl-carousel__slides\"\n        [style.width.px]=\"getCarouselSlidesWidth()\" [style.left.px]=\"!isRtl ? getCarouselSlidesOffsetLeft() : null\"\n        [style.right.px]=\"isRtl ? getCarouselSlidesOffsetRight() : null\"\n        [style.transition-duration.s]=\"transitionDuration\" (mouseover)=\"onSlideHover()\" (mouseout)=\"onSlideHoverout()\">\n\n        @if(hasControls()){\n        <ecl-carousel-item #firstHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n        <ng-content></ng-content>\n\n        @if(hasControls()){\n        <ecl-carousel-item #lastHiddenItem [style.width.%]=\"slideWidth\"></ecl-carousel-item>\n        }\n    </div>\n</div>", styles: [".ecl-carousel__slides{transition-duration:.4s}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: EclRtlService }], propDecorators: { ariaLabel: [{
                 type: HostBinding,
                 args: ['attr.aria-label']
@@ -7571,6 +7580,7 @@ class EclContentItemPictureDirective extends ECLBaseDirective {
         super(...arguments);
         this.size = 'large';
         this.position = 'left';
+        this.hasZoom = false;
     }
     get cssClasses() {
         return [
@@ -7582,7 +7592,7 @@ class EclContentItemPictureDirective extends ECLBaseDirective {
             .trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclContentItemPictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: EclContentItemPictureDirective, selector: "[eclContentItemPicture]", inputs: { size: "size", position: "position" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.8", type: EclContentItemPictureDirective, selector: "[eclContentItemPicture]", inputs: { size: "size", position: "position", hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class.ecl-picture--zoom": "this.hasZoom", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclContentItemPictureDirective, decorators: [{
             type: Directive,
@@ -7593,6 +7603,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], position: [{
                 type: Input
+            }], hasZoom: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-picture--zoom']
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -8255,36 +8271,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-class EclMediaContainerComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.isFullWidth = false;
-    }
-    get cssClasses() {
-        return [super.getCssClasses('ecl-media-container')].join(' ').trim();
-    }
-    ngAfterContentInit() {
-        if (this.expandable) {
-            this.expandable.class = [this.expandable.class, 'ecl-media-container__expandable'].join(' ');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclMediaContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.8", type: EclMediaContainerComponent, selector: "ecl-media-container", inputs: { isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "expandable", first: true, predicate: EclExpandableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<figure class=\"ecl-media-container__figure\" [class.ecl-media-container--full-width]=\"isFullWidth\">\n    <ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n    <ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n    <ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n\n    <figcaption class=\"ecl-media-container__caption\">\n        <ng-content></ng-content>\n    </figcaption>\n    <ng-content select=\"ecl-expandable\"></ng-content>\n</figure>\n", styles: [":host{display:block}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclMediaContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ecl-media-container', template: "<figure class=\"ecl-media-container__figure\" [class.ecl-media-container--full-width]=\"isFullWidth\">\n    <ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n    <ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n    <ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n\n    <figcaption class=\"ecl-media-container__caption\">\n        <ng-content></ng-content>\n    </figcaption>\n    <ng-content select=\"ecl-expandable\"></ng-content>\n</figure>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { isFullWidth: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], expandable: [{
-                type: ContentChild,
-                args: [EclExpandableComponent]
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 class EclMediaContainerIframeDirective extends ECLBaseDirective {
     get ratio() {
         return this.hasCustomRatio ? this.calculateCustomRatio() : null;
@@ -8352,7 +8338,6 @@ class EclMediaContainerItemDirective extends ECLBaseDirective {
             const iframe = this.el.nativeElement.lastChild;
             const iframeUrl = new URL(iframe.src);
             if (iframeUrl.host.includes('youtube')) {
-                iframeUrl.searchParams.set('disablekb', '1');
                 iframe.src = iframeUrl;
             }
         }
@@ -8375,6 +8360,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['class']
             }] } });
 
+class EclMediaContainerComponent extends ECLBaseDirective {
+    get cssClasses() {
+        return [super.getCssClasses('ecl-media-container')].join(' ').trim();
+    }
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.isFullWidth = false;
+        this.eclAutoplay = false;
+        this.isPlaying = false;
+        this.DELAY = 0;
+    }
+    ngAfterContentInit() {
+        if (this.hasVideo && this.eclAutoplay) {
+            const videoEl = this.eclMediaContainerItem.el.nativeElement;
+            this.renderer.listen(videoEl, 'play', () => {
+                this.isPlaying = true;
+            });
+            this.renderer.listen(videoEl, 'pause', () => {
+                this.isPlaying = false;
+            });
+            this.renderer.setAttribute(this.eclMediaContainerItem.el.nativeElement, 'loop', '');
+            this.renderer.setAttribute(this.eclMediaContainerItem.el.nativeElement, 'muted', '');
+            this.renderer.setProperty(this.eclMediaContainerItem.el.nativeElement, 'muted', true);
+            this.renderer.removeAttribute(this.eclMediaContainerItem.el.nativeElement, 'controls');
+        }
+        if (this.expandable) {
+            this.expandable.class = [this.expandable.class, 'ecl-media-container__expandable'].join(' ');
+        }
+    }
+    get hasVideo() {
+        return this.eclMediaContainerItem?.isVideo;
+    }
+    onVideoPlay() {
+        const videoEl = this.eclMediaContainerItem.el.nativeElement;
+        videoEl.play();
+        timer(this.DELAY).pipe(take(1)).subscribe(() => {
+            const pauseButton = this.eclButtons.find(button => button === this.pauseButton);
+            this.focusOnButton(pauseButton);
+        });
+    }
+    onVideoPause() {
+        const videoEl = this.eclMediaContainerItem.el.nativeElement;
+        videoEl.pause();
+        timer(this.DELAY).pipe(take(1)).subscribe(() => {
+            const playButton = this.eclButtons.find(button => button === this.playButton);
+            this.focusOnButton(playButton);
+        });
+    }
+    focusOnButton(button) {
+        if (!button) {
+            return;
+        }
+        button.onFocus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclMediaContainerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclMediaContainerComponent, selector: "ecl-media-container", inputs: { isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute], eclAutoplay: ["eclAutoplay", "eclAutoplay", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "expandable", first: true, predicate: EclExpandableComponent, descendants: true }, { propertyName: "eclMediaContainerItem", first: true, predicate: EclMediaContainerItemDirective, descendants: true }], viewQueries: [{ propertyName: "pauseButton", first: true, predicate: ["pauseButton"], descendants: true }, { propertyName: "playButton", first: true, predicate: ["playButton"], descendants: true }, { propertyName: "eclButtons", predicate: EclButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<figure class=\"ecl-media-container__figure\" [class.ecl-media-container--full-width]=\"isFullWidth\">\n    @if (hasVideo) {\n        <div class=\"ecl-media-container__video-wrapper\">\n            <ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n            @if (eclAutoplay) {\n                <button #playButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__play\" (click)=\"onVideoPlay()\"\n                        [style.display]=\"isPlaying ? 'none' : 'flex'\"  type=\"button\">\n                    <span eclButtonLabel>Play</span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n                </button>\n                <button #pauseButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__pause\" (click)=\"onVideoPause()\"\n                        [style.display]=\"isPlaying ? 'flex' : 'none'\" type=\"button\">\n                    <span eclButtonLabel>Pause</span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n                </button>\n            }\n        </div>\n    }\n        <ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n        <ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n\n    <figcaption class=\"ecl-media-container__caption\">\n        <ng-content></ng-content>\n    </figcaption>\n    <ng-content select=\"ecl-expandable\"></ng-content>\n</figure>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclMediaContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-media-container', template: "<figure class=\"ecl-media-container__figure\" [class.ecl-media-container--full-width]=\"isFullWidth\">\n    @if (hasVideo) {\n        <div class=\"ecl-media-container__video-wrapper\">\n            <ng-content select=\"video[eclMediaContainerItem]\"></ng-content>\n            @if (eclAutoplay) {\n                <button #playButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__play\" (click)=\"onVideoPlay()\"\n                        [style.display]=\"isPlaying ? 'none' : 'flex'\"  type=\"button\">\n                    <span eclButtonLabel>Play</span>\n                    <ecl-icon icon=\"play-outline\" size=\"m\"></ecl-icon>\n                </button>\n                <button #pauseButton eclButton variant=\"tertiary\" isIconOnly class=\"ecl-media-container__pause\" (click)=\"onVideoPause()\"\n                        [style.display]=\"isPlaying ? 'flex' : 'none'\" type=\"button\">\n                    <span eclButtonLabel>Pause</span>\n                    <ecl-icon icon=\"pause-outline\" size=\"m\"></ecl-icon>\n                </button>\n            }\n        </div>\n    }\n        <ng-content select=\"div[eclMediaContainerItem]\"></ng-content>\n        <ng-content select=\"picture[eclMediaContainerPicture]\"></ng-content>\n\n    <figcaption class=\"ecl-media-container__caption\">\n        <ng-content></ng-content>\n    </figcaption>\n    <ng-content select=\"ecl-expandable\"></ng-content>\n</figure>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { isFullWidth: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], eclAutoplay: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expandable: [{
+                type: ContentChild,
+                args: [EclExpandableComponent]
+            }], eclMediaContainerItem: [{
+                type: ContentChild,
+                args: [EclMediaContainerItemDirective]
+            }], eclButtons: [{
+                type: ViewChildren,
+                args: [EclButtonComponent]
+            }], pauseButton: [{
+                type: ViewChild,
+                args: ['pauseButton']
+            }], playButton: [{
+                type: ViewChild,
+                args: ['playButton']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class EclMediaContainerPictureDirective extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-media-container__picture')].join(' ').trim();
@@ -8422,17 +8494,17 @@ class EclMediaContainerComponentModule {
             EclMediaContainerItemDirective,
             EclMediaContainerIframeDirective,
             EclMediaContainerPictureDirective,
-            EclMediaContainerItemAudioDescriptionDirective], imports: [CommonModule, TranslateModule], exports: [EclMediaContainerComponent,
+            EclMediaContainerItemAudioDescriptionDirective], imports: [CommonModule, TranslateModule, EclIconComponentModule, EclButtonComponentModule], exports: [EclMediaContainerComponent,
             EclMediaContainerItemDirective,
             EclMediaContainerIframeDirective,
             EclMediaContainerPictureDirective,
             EclMediaContainerItemAudioDescriptionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclMediaContainerComponentModule, imports: [CommonModule, TranslateModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclMediaContainerComponentModule, imports: [CommonModule, TranslateModule, EclIconComponentModule, EclButtonComponentModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclMediaContainerComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, TranslateModule],
+                    imports: [CommonModule, TranslateModule, EclIconComponentModule, EclButtonComponentModule],
                     exports: [...COMPONENTS$m],
                     declarations: [...COMPONENTS$m],
                 }]
@@ -8964,11 +9036,11 @@ class EclFileComponent extends ECLBaseDirective {
         return !!this.eclPictureContent;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclFileComponent, deps: [{ token: EclThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclFileComponent, selector: "ecl-file", inputs: { description: "description", id: "id", langId: "langId", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <ul class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta; track el) {\n                <li class=\"ecl-file__detail-meta-item\" >{{ el }}</li>\n            }\n        </ul>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description) {\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n        <ng-content select=\"[eclFileDownload]\"></ng-content>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclFileComponent, selector: "ecl-file", inputs: { description: "description", id: "id", langId: "langId", labelInfo: "labelInfo", language: "language", detailMeta: "detailMeta", meta: "meta" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <ul class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta; track el) {\n                <li class=\"ecl-file__detail-meta-item\" >{{ el }}</li>\n            }\n        </ul>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description) {\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n        <div class=\"ecl-file__action\">\n            <ng-content select=\"[eclFilePreview]\"></ng-content>\n            <ng-content select=\"[eclFileDownload]\"></ng-content>\n        </div>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-file', template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <ul class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta; track el) {\n                <li class=\"ecl-file__detail-meta-item\" >{{ el }}</li>\n            }\n        </ul>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description) {\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n        <ng-content select=\"[eclFileDownload]\"></ng-content>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ecl-file', template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo }}</span>\n        </div>\n        }\n        @if(detailMeta) {\n        <ul class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta; track el) {\n                <li class=\"ecl-file__detail-meta-item\" >{{ el }}</li>\n            }\n        </ul>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description) {\n            <div class=\"ecl-file__description\">{{ description }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId\">{{ language }}</div>\n        <div class=\"ecl-file__meta\">{{ meta }}</div>\n        <div class=\"ecl-file__action\">\n            <ng-content select=\"[eclFilePreview]\"></ng-content>\n            <ng-content select=\"[eclFileDownload]\"></ng-content>\n        </div>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: EclThemeService }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -9007,11 +9079,11 @@ class EclFileItemComponent extends ECLBaseDirective {
         return this.eclFileComponent && this.eclFileComponent.isThumbnail;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclFileItemComponent, deps: [{ token: EclFileComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "@if (isDescription) {\n    <ng-content></ng-content>\n} @else {\n    <div class=\"ecl-file__translation-info\">\n        <div class=\"ecl-file__translation-title\" [id]=\"titleId\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n    </div>\n    <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n}\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclFileItemComponent, selector: "ecl-file-item", inputs: { isDescription: ["isDescription", "isDescription", booleanAttribute], eclTitle: "eclTitle", titleId: "titleId", meta: "meta", label: "label", langDetail: "langDetail" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "@if (isDescription) {\n    <ng-content></ng-content>\n} @else {\n    <div class=\"ecl-file__translation-info\">\n        <div class=\"ecl-file__translation-title\" [id]=\"titleId\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n    </div>\n    <div class=\"ecl-file__translation-action\">\n        <ng-content select=\"[eclFilePreview]\"></ng-content>\n        <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n    </div>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclFileItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-file-item', template: "@if (isDescription) {\n    <ng-content></ng-content>\n} @else {\n    <div class=\"ecl-file__translation-info\">\n        <div class=\"ecl-file__translation-title\" [id]=\"titleId\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n    </div>\n    <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n}\n" }]
+            args: [{ selector: 'ecl-file-item', template: "@if (isDescription) {\n    <ng-content></ng-content>\n} @else {\n    <div class=\"ecl-file__translation-info\">\n        <div class=\"ecl-file__translation-title\" [id]=\"titleId\" [attr.lang]=\"langDetail\">{{ eclTitle }}</div>\n        <div class=\"ecl-file__translation-meta\">{{ meta }}</div>\n    </div>\n    <div class=\"ecl-file__translation-action\">\n        <ng-content select=\"[eclFilePreview]\"></ng-content>\n        <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n    </div>\n}\n" }]
         }], ctorParameters: () => [{ type: EclFileComponent }], propDecorators: { isDescription: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -9129,6 +9201,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: HostBinding,
                 args: ['class.ecl-file__download']
             }] } });
+class EclFilePreviewDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.hasClass = true;
+        this.hasClassStandalone = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclFilePreviewDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: EclFilePreviewDirective, selector: "[eclFilePreview]", host: { properties: { "style.margin-inline-end.px": "24", "class.ecl-link": "this.hasClass", "class.ecl-link--standalone": "this.hasClassStandalone" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclFilePreviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclFilePreview]',
+                    host: {
+                        '[style.margin-inline-end.px]': '24',
+                    },
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-link']
+            }], hasClassStandalone: [{
+                type: HostBinding,
+                args: ['class.ecl-link--standalone']
+            }] } });
 
 const COMPONENTS$k = [
     EclFileComponent,
@@ -9140,6 +9236,7 @@ const COMPONENTS$k = [
     EclFileTranslationDownloadDirective,
     EclFilePictureDirective,
     EclFileImageDirective,
+    EclFilePreviewDirective,
 ];
 class EclFileComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclFileComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -9151,7 +9248,8 @@ class EclFileComponentModule {
             EclFileTitleDirective,
             EclFileTranslationDownloadDirective,
             EclFilePictureDirective,
-            EclFileImageDirective], imports: [CommonModule,
+            EclFileImageDirective,
+            EclFilePreviewDirective], imports: [CommonModule,
             EclLinkDirectiveModule,
             EclIconComponentModule,
             EclButtonComponentModule,
@@ -9164,7 +9262,8 @@ class EclFileComponentModule {
             EclFileTitleDirective,
             EclFileTranslationDownloadDirective,
             EclFilePictureDirective,
-            EclFileImageDirective] }); }
+            EclFileImageDirective,
+            EclFilePreviewDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclFileComponentModule, imports: [CommonModule,
             EclLinkDirectiveModule,
             EclIconComponentModule,
@@ -9253,11 +9352,15 @@ class EclGalleryPictureImage {
 }
 class EclGalleryMediaDirective extends ECLBaseDirective {
     get cssClasses() {
-        return [super.getCssClasses('ecl-gallery__image')].join(' ').trim();
+        return [
+            super.getCssClasses('ecl-gallery__image'),
+            this.hasZoom && this.isVideo ? 'ecl-video--zoom' : '',
+        ].join(' ').trim();
     }
     constructor(el) {
         super();
         this.el = el;
+        this.hasZoom = false;
         this.sources = [];
         this.tracks = [];
         this.isVideo = false;
@@ -9297,7 +9400,7 @@ class EclGalleryMediaDirective extends ECLBaseDirective {
         return this.el.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclGalleryMediaDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: EclGalleryMediaDirective, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster" }, host: { properties: { "class": "this.cssClasses", "class.ecl-video": "this.isVideo" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.8", type: EclGalleryMediaDirective, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster", hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-video": "this.isVideo" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclGalleryMediaDirective, decorators: [{
             type: Directive,
@@ -9306,6 +9409,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { poster: [{
                 type: Input
+            }], hasZoom: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -9321,6 +9427,7 @@ class EclGalleryPictureDirective extends ECLBaseDirective {
         super();
         this.el = el;
         this.cd = cd;
+        // TODO: to be removed in v19. Thumbnail should be added by user.
         this.isThumbnail = false;
         this.sources = [];
         this.img = {};
@@ -9367,11 +9474,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['class']
             }] } });
 class EclGalleryThumbnailDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.hasZoom = false;
+    }
     get cssClasses() {
         return [super.getCssClasses('ecl-picture ecl-gallery__thumbnail')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclGalleryThumbnailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: EclGalleryThumbnailDirective, selector: "picture[eclGalleryThumbnail]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.8", type: EclGalleryThumbnailDirective, selector: "picture[eclGalleryThumbnail]", inputs: { hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-picture--zoom": "this.hasZoom" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclGalleryThumbnailDirective, decorators: [{
             type: Directive,
@@ -9381,6 +9492,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], hasZoom: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-picture--zoom']
             }] } });
 
 class EclGalleryItemClickEvent extends EclBaseEvent {
@@ -9405,7 +9522,6 @@ class EclGalleryItemComponent extends ECLBaseDirective {
         if (this.isExternalVideo) {
             const iframeUrl = new URL(this.src);
             if (iframeUrl.host.includes('youtube')) {
-                iframeUrl.searchParams.set('disablekb', '1');
                 this.externalVideoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(iframeUrl.toString());
             }
             else {
@@ -9416,6 +9532,7 @@ class EclGalleryItemComponent extends ECLBaseDirective {
             this.itemId = crypto.randomUUID();
         }
     }
+    // TODO: to be removed in v19. Thumbnail should be added by user.
     ngAfterContentInit() {
         if (this.galleryPicture && !this.galleryThumbnail && !this.isImage) {
             this.galleryPicture.isThumbnail = true;
@@ -9462,11 +9579,11 @@ class EclGalleryItemComponent extends ECLBaseDirective {
         this.renderer.selectRootElement(this.el.nativeElement.children[0], true).focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclGalleryItemComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute], mediaType: "mediaType", src: "src", label: "label", meta: "meta", description: "description", srVideoAudioDescription: "srVideoAudioDescription", icon: "icon", title: "title", itemId: "itemId" }, 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 }, { propertyName: "galleryThumbnail", first: true, predicate: EclGalleryThumbnailDirective, descendants: true }, { propertyName: "galleryPicture", first: true, predicate: EclGalleryPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\">\n    <figure class=\"ecl-gallery__image-container\">\n        @if(mediaType !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon ecl-icon--inverted\" icon=\"play-filled\" size=\"l\"></ecl-icon>\n        </div>\n        }\n        @if(hasGalleryThumbnail) {\n            <picture class=\"ecl-picture ecl-gallery__thumbnail\">\n                @for(el of galleryPicture?.sources; track el.srcset ) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img class=\"ecl-gallery__image\"\n                     [attr.src]=\"galleryPicture?.img.src\"\n                     [attr.alt]=\"galleryPicture?.img.alt\" />\n            </picture>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryThumbnail], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            @if(title) {\n                <span class=\"ecl-gallery__title\" [id]=\"titleId\">{{title}}</span>\n            }\n            @if(description) {\n                <span class=\"ecl-gallery__caption\">{{ description }}</span>\n            }\n            @if(icon) {\n            <ecl-icon class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            }\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclGalleryItemComponent, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute], mediaType: "mediaType", src: "src", label: "label", meta: "meta", description: "description", srVideoAudioDescription: "srVideoAudioDescription", icon: "icon", title: "title", itemId: "itemId" }, 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 }, { propertyName: "galleryThumbnail", first: true, predicate: EclGalleryThumbnailDirective, descendants: true }, { propertyName: "galleryPicture", first: true, predicate: EclGalleryPictureDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\">\n    <figure class=\"ecl-gallery__image-container\">\n        @if(mediaType !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon ecl-icon--inverted\" icon=\"play-filled\" size=\"l\"></ecl-icon>\n        </div>\n        } \n        @if(hasGalleryThumbnail) { <!-- TODO: to be removed in v19. Thumbnail should be added by user. -->\n            <picture class=\"ecl-picture ecl-gallery__thumbnail\">\n                @for(el of galleryPicture?.sources; track el.srcset ) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img class=\"ecl-gallery__image\"\n                     [attr.src]=\"galleryPicture?.img.src\"\n                     [attr.alt]=\"galleryPicture?.img.alt\" />\n            </picture>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryThumbnail], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            @if(title) {\n                <span class=\"ecl-gallery__title\" [id]=\"titleId\">{{title}}</span>\n            }\n            @if(description) {\n                <span class=\"ecl-gallery__caption\">{{ description }}</span>\n            }\n            @if(icon) {\n            <ecl-icon class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            }\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclGalleryItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-gallery-item', template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\">\n    <figure class=\"ecl-gallery__image-container\">\n        @if(mediaType !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon ecl-icon--inverted\" icon=\"play-filled\" size=\"l\"></ecl-icon>\n        </div>\n        }\n        @if(hasGalleryThumbnail) {\n            <picture class=\"ecl-picture ecl-gallery__thumbnail\">\n                @for(el of galleryPicture?.sources; track el.srcset ) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img class=\"ecl-gallery__image\"\n                     [attr.src]=\"galleryPicture?.img.src\"\n                     [attr.alt]=\"galleryPicture?.img.alt\" />\n            </picture>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryThumbnail], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            @if(title) {\n                <span class=\"ecl-gallery__title\" [id]=\"titleId\">{{title}}</span>\n            }\n            @if(description) {\n                <span class=\"ecl-gallery__caption\">{{ description }}</span>\n            }\n            @if(icon) {\n            <ecl-icon class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            }\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>" }]
+            args: [{ selector: 'ecl-gallery-item', template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\">\n    <figure class=\"ecl-gallery__image-container\">\n        @if(mediaType !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon ecl-icon--inverted\" icon=\"play-filled\" size=\"l\"></ecl-icon>\n        </div>\n        } \n        @if(hasGalleryThumbnail) { <!-- TODO: to be removed in v19. Thumbnail should be added by user. -->\n            <picture class=\"ecl-picture ecl-gallery__thumbnail\">\n                @for(el of galleryPicture?.sources; track el.srcset ) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img class=\"ecl-gallery__image\"\n                     [attr.src]=\"galleryPicture?.img.src\"\n                     [attr.alt]=\"galleryPicture?.img.alt\" />\n            </picture>\n        }\n        <ng-content select=\"[eclGalleryPicture], [eclGalleryThumbnail], [eclGalleryMedia], [eclGalleryImage]\"></ng-content>\n        <figcaption class=\"ecl-gallery__description\">\n            @if(title) {\n                <span class=\"ecl-gallery__title\" [id]=\"titleId\">{{title}}</span>\n            }\n            @if(description) {\n                <span class=\"ecl-gallery__caption\">{{ description }}</span>\n            }\n            @if(icon) {\n            <ecl-icon class=\"ecl-gallery__description-icon\" [icon]=\"icon\"></ecl-icon>\n            }\n            <span class=\"ecl-gallery__meta\">\n                {{ meta }}\n            </span>\n        </figcaption>\n    </figure>\n</a>" }]
         }], ctorParameters: () => [{ type: i1$5.DomSanitizer }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { isShareable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -9537,7 +9654,7 @@ class EclGalleryComponent extends ECLBaseDirective {
         return [super.getCssClasses('ecl-gallery'),
             this.isFullWidth ? 'ecl-gallery--full-width' : '',
             this.isGrid ? 'ecl-gallery--grid' : '',
-            this.isGrid ? `ecl-gallery--col-${this.column}` : '',
+            this.isGrid ? `ecl-gallery--template-${this.gridTemplate}` : '',
             this.isGrid ? `ecl-gallery--ratio-${this.ratio}` : '',
             !this.isShowTitleOnHover ? 'ecl-gallery--no-hover' : '',
         ].join(' ').trim();
@@ -9552,10 +9669,11 @@ class EclGalleryComponent extends ECLBaseDirective {
         this.isNoOverlay = false;
         this.isShowTitleOnHover = true;
         this.isGrid = false;
-        this.column = 3;
         /**
          * @deprecated Not used anymore. To be removed in v19.
          */
+        this.column = 3;
+        this.gridTemplate = '0';
         this.ratio = '3-2';
         /**
          * @deprecated Not used anymore. To be removed in v19.
@@ -9783,7 +9901,7 @@ class EclGalleryComponent extends ECLBaseDirective {
             .map(item => item.videoLabel = this.videoLabel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclGalleryComponent, deps: [{ token: i1$4.BreakpointObserver }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclGalleryComponent, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute], isShareable: ["isShareable", "isShareable", booleanAttribute], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute], isShowTitleOnHover: ["isShowTitleOnHover", "isShowTitleOnHover", booleanAttribute], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute], isGrid: ["isGrid", "isGrid", booleanAttribute], column: ["column", "column", numberAttribute], ratio: "ratio", galleryPlayerTitle: "galleryPlayerTitle", videoAriaLabel: "videoAriaLabel", videoLabel: "videoLabel" }, outputs: { show: "show", hide: "hide", 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: "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 #overlay [attr.open]=\"isDialogVisible || null\" 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\" isIconOnly variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div class=\"ecl-gallery__slider-embed\">\n                @if (item?.srVideoAudioDescription) {\n                    <div class=\"ecl-gallery__slider-embed-audio\">{{item?.srVideoAudioDescription}}</div>\n                }\n                <iframe [src]=\"item?.getUrlExternalVideo()\" [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\" [attr.title]=\"item.title + ' - Video player'\" frameborder=\"0\">\n                </iframe>\n            </div>\n            }\n            @if(item?.isImage) {\n            <picture class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                @for(el of item.galleryPicture?.sources; track el.srcset) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img [attr.alt]=\"item?.galleryPicture?.img.alt || null\"\n                     [src]=\"item?.galleryPicture?.img.src\"\n                     [attr.loading]=\"item?.galleryPicture?.img.loading || null\" />\n            </picture>\n            }\n            @if(item?.isVideo) {\n            <video controls=\"controls\" class=\"ecl-gallery__slider-video\" [attr.aria-label]=\"item.title + ' - Video player'\"\n                [attr.poster]=\"item.mediaChild?.poster\">\n                @for (el of item.mediaChild?.sources; track el.src) {\n                <source [attr.src]=\"el.src\" [attr.type]=\"el.type\" />\n                }\n                @for (elem of item.mediaChild?.tracks; track elem.src) {\n                <track [attr.src]=\"elem.src\" [attr.kind]=\"elem.kind\" [attr.srcLang]=\"elem.srcLang\"\n                    [attr.label]=\"elem.label\" />\n                }\n            </video>\n            }\n        </div>\n    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-gallery__detail-container\">\n                <div class=\"ecl-gallery__pager\">\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__controls\">\n                        <button eclButton class=\"ecl-gallery__slider-previous\" variant=\"tertiary\" isIconOnly\n                            (click)=\"onPrevious($event)\">\n                            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\"></ecl-icon>\n                            <span eclButtonLabel>\n                                {{ 'ecl.common.PREVIOUS' | translate }}\n                            </span>\n                        </button>\n                        <button eclButton class=\"ecl-gallery__slider-next\" variant=\"tertiary\" isIconOnly\n                            (click)=\"onNext($event)\">\n                            <span eclButtonLabel>\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                <div class=\"ecl-gallery__detail-actions\">\n                    <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                </div>\n            </div>\n            <div class=\"ecl-gallery__detail-description\">\n                @if(isMobile) {\n                    <div class=\"ecl-gallery__detail-actions-mobile\">\n                        <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                    </div>\n                }\n                @if(item?.title) {\n                    <span class=\"ecl-gallery__title\" [id]=\"item?.itemId\">{{ item?.title }}</span>\n                }\n                @if(item?.description) {\n                    <span class=\"ecl-gallery__caption\">{{ item?.description }}</span>\n                }\n                @if(item?.meta) {\n                    <span class=\"ecl-gallery__meta\">{{ item?.meta }}</span>\n                }\n            </div>\n        </div>\n    </footer>\n</dialog>\n\n<ng-template #links>\n    @if(canBeOpenInFullScreen()) {\n        <a eclLink [attr.aria-describedby]=\"item?.titleId\" variant=\"standalone\"\n           class=\"ecl-gallery__download\" [href]=\"item?.getDownloadLink()\" target=\"_blank\"\n           (click)=\"onFullScreenOpen($event)\" isInverted>\n            <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>\n            <ecl-icon icon=\"fullscreen\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n        </a>\n    }\n    @if(canBeShared()) {\n        <a [attr.aria-describedby]=\"item?.titleId\" eclLink variant=\"standalone\" isInverted\n           class=\"ecl-gallery__share\" href=\"\" (click)=\"onShare($event)\">\n            <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n            <ecl-icon icon=\"share\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n        </a>\n    }\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: EclGalleryComponent, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: ["isOpenInFullScreenPossible", "isOpenInFullScreenPossible", booleanAttribute], isShareable: ["isShareable", "isShareable", booleanAttribute], isFullWidth: ["isFullWidth", "isFullWidth", booleanAttribute], isNoOverlay: ["isNoOverlay", "isNoOverlay", booleanAttribute], isShowTitleOnHover: ["isShowTitleOnHover", "isShowTitleOnHover", booleanAttribute], maxVisibleItems: ["maxVisibleItems", "maxVisibleItems", numberAttribute], isGrid: ["isGrid", "isGrid", booleanAttribute], column: ["column", "column", numberAttribute], gridTemplate: "gridTemplate", ratio: "ratio", galleryPlayerTitle: "galleryPlayerTitle", videoAriaLabel: "videoAriaLabel", videoLabel: "videoLabel" }, outputs: { show: "show", hide: "hide", 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: "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 #overlay [attr.open]=\"isDialogVisible || null\" 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\" isIconOnly variant=\"ghost\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    </header>\n    <section class=\"ecl-gallery__slider\">\n        <div class=\"ecl-gallery__slider-media-container\">\n            @if(item?.isExternalVideo) {\n            <div class=\"ecl-gallery__slider-embed\">\n                @if (item?.srVideoAudioDescription) {\n                    <div class=\"ecl-gallery__slider-embed-audio\">{{item?.srVideoAudioDescription}}</div>\n                }\n                <iframe [src]=\"item?.getUrlExternalVideo()\" [style.width.px]=\"getIframeWidth()\"\n                    [style.height.px]=\"getIframeHeight()\" [attr.title]=\"item.title + ' - Video player'\" frameborder=\"0\">\n                </iframe>\n            </div>\n            }\n            @if(item?.isImage) {\n            <picture class=\"ecl-picture ecl-gallery__picture ecl-gallery__slider-image\">\n                @for(el of item.galleryPicture?.sources; track el.srcset) {\n                    <source [attr.srcset]=\"el.srcset\" [attr.media]=\" el.media\">\n                }\n                <img [attr.alt]=\"item?.galleryPicture?.img.alt || null\"\n                     [src]=\"item?.galleryPicture?.img.src\"\n                     [attr.loading]=\"item?.galleryPicture?.img.loading || null\" />\n            </picture>\n            }\n            @if(item?.isVideo) {\n            <video controls=\"controls\" class=\"ecl-gallery__slider-video\" [attr.aria-label]=\"item.title + ' - Video player'\"\n                [attr.poster]=\"item.mediaChild?.poster\">\n                @for (el of item.mediaChild?.sources; track el.src) {\n                <source [attr.src]=\"el.src\" [attr.type]=\"el.type\" />\n                }\n                @for (elem of item.mediaChild?.tracks; track elem.src) {\n                <track [attr.src]=\"elem.src\" [attr.kind]=\"elem.kind\" [attr.srcLang]=\"elem.srcLang\"\n                    [attr.label]=\"elem.label\" />\n                }\n            </video>\n            }\n        </div>\n    </section>\n    <footer #footer class=\"ecl-gallery__detail\">\n        <div class=\"ecl-container\">\n            <div class=\"ecl-gallery__detail-container\">\n                <div class=\"ecl-gallery__pager\">\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__controls\">\n                        <button eclButton class=\"ecl-gallery__slider-previous\" variant=\"tertiary\" isIconOnly\n                            (click)=\"onPrevious($event)\">\n                            <ecl-icon icon=\"corner-arrow\" size=\"m\" transform=\"rotate-270\"></ecl-icon>\n                            <span eclButtonLabel>\n                                {{ 'ecl.common.PREVIOUS' | translate }}\n                            </span>\n                        </button>\n                        <button eclButton class=\"ecl-gallery__slider-next\" variant=\"tertiary\" isIconOnly\n                            (click)=\"onNext($event)\">\n                            <span eclButtonLabel>\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                <div class=\"ecl-gallery__detail-actions\">\n                    <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                </div>\n            </div>\n            <div class=\"ecl-gallery__detail-description\">\n                @if(isMobile) {\n                    <div class=\"ecl-gallery__detail-actions-mobile\">\n                        <ng-container *ngTemplateOutlet=\"links\"></ng-container>\n                    </div>\n                }\n                @if(item?.title) {\n                    <span class=\"ecl-gallery__title\" [id]=\"item?.itemId\">{{ item?.title }}</span>\n                }\n                @if(item?.description) {\n                    <span class=\"ecl-gallery__caption\">{{ item?.description }}</span>\n                }\n                @if(item?.meta) {\n                    <span class=\"ecl-gallery__meta\">{{ item?.meta }}</span>\n                }\n            </div>\n        </div>\n    </footer>\n</dialog>\n\n<ng-template #links>\n    @if(canBeOpenInFullScreen()) {\n        <a eclLink [attr.aria-describedby]=\"item?.titleId\" variant=\"standalone\"\n           class=\"ecl-gallery__download\" [href]=\"item?.getDownloadLink()\" target=\"_blank\"\n           (click)=\"onFullScreenOpen($event)\" isInverted>\n            <span eclLinkLabel>{{ 'ecl.gallery.VIEW-ORIGINAL' | translate }}</span>\n            <ecl-icon icon=\"fullscreen\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n        </a>\n    }\n    @if(canBeShared()) {\n        <a [attr.aria-describedby]=\"item?.titleId\" eclLink variant=\"standalone\" isInverted\n           class=\"ecl-gallery__share\" href=\"\" (click)=\"onShare($event)\">\n            <span eclLinkLabel>{{ 'ecl.common.SHARE' | translate }}</span>\n            <ecl-icon icon=\"share\" size=\"fluid\" focusable=\"false\"></ecl-icon>\n        </a>\n    }\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclGalleryComponent, decorators: [{
             type: Component,
@@ -9815,6 +9933,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }], column: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
+            }], gridTemplate: [{
+                type: Input
             }], ratio: [{
                 type: Input
             }], galleryPlayerTitle: [{
@@ -10084,6 +10204,7 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
         this.MIN_DISTANCE_TOP = 10;
         this.ICON_SIZE_EC_THEME = 'xs';
         this.ICON_SIZE_EU_THEME = 's';
+        this.TABLET_BREAKPOINT = 996;
         this.differ = this.differs.find([]).create();
         afterNextRender(() => {
             this.subscribeToCDKScrollEvent();
@@ -10156,8 +10277,12 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
         const viewportHeight = window.innerHeight;
         const viewportWidth = window.innerWidth;
         let topPosition = 0;
-        if (viewportWidth < 996) {
-            topPosition = this.togglerButton.nativeElement.getBoundingClientRect().bottom;
+        if (viewportWidth < this.TABLET_BREAKPOINT) {
+            const toggleWrapper = this.toggleWrapper.nativeElement;
+            if (toggleWrapper) {
+                topPosition = toggleWrapper.getBoundingClientRect().bottom +
+                    parseFloat(window.getComputedStyle(toggleWrapper).marginBottom);
+            }
         }
         else if (this.eclTitle) {
             topPosition = this.navTittle.nativeElement.getBoundingClientRect().bottom;
@@ -10274,11 +10399,11 @@ class EclInpageNavigationComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclInpageNavigationComponent, deps: [{ token: i0.ElementRef }, { token: EclRtlService }, { token: EclThemeService }, { token: i0.IterableDiffers }, { token: i2.ScrollDispatcher }, { token: i0.NgZone }, { token: i1$4.BreakpointObserver }, { token: i2.ViewportRuler }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], viewQueries: [{ propertyName: "togglerButton", first: true, predicate: ["togglerButton"], descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "navTittle", first: true, predicate: ["navTittle"], descendants: true }], 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]=\"hasActiveSection\"\n        [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n        <div #navTittle 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            <div class=\"ecl-inpage-navigation__trigger-wrapper\">\n                <button\n                    #togglerButton\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()\"\n                    (keydown)=\"onExpandButtonKeydown($event)\">\n                    <span class=\"ecl-inpage-navigation__trigger-current\">\n                        {{ currentNavigationLinkItem?.label }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n                        class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n                </button>\n             </div>\n            <ul\n                #listContainer\n                id=\"ecl-inpage-navigation-default-list\"\n                class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [style.max-height.px]=\"listMaxHeight\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\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", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: EclInpageNavigationComponent, selector: "ecl-inpage-navigation", inputs: { eclTitle: "eclTitle", marginTop: "marginTop", marginBottom: "marginBottom" }, outputs: { sectionEnter: "sectionEnter" }, queries: [{ propertyName: "eclNavigationLinkItems", predicate: EclInpageNavigationItemComponent }], viewQueries: [{ propertyName: "togglerButton", first: true, predicate: ["togglerButton"], descendants: true }, { propertyName: "toggleWrapper", first: true, predicate: ["toggleWrapper"], descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }, { propertyName: "navTittle", first: true, predicate: ["navTittle"], descendants: true }], 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]=\"hasActiveSection\"\n        [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n        <div #navTittle 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            <div #toggleWrapper class=\"ecl-inpage-navigation__trigger-wrapper\">\n                <button\n                    #togglerButton\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()\"\n                    (keydown)=\"onExpandButtonKeydown($event)\">\n                    <span class=\"ecl-inpage-navigation__trigger-current\">\n                        {{ currentNavigationLinkItem?.label }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n                        class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n                </button>\n             </div>\n            <ul\n                #listContainer\n                id=\"ecl-inpage-navigation-default-list\"\n                class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [style.max-height.px]=\"listMaxHeight\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\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", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", 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]=\"hasActiveSection\"\n        [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n        <div #navTittle 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            <div class=\"ecl-inpage-navigation__trigger-wrapper\">\n                <button\n                    #togglerButton\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()\"\n                    (keydown)=\"onExpandButtonKeydown($event)\">\n                    <span class=\"ecl-inpage-navigation__trigger-current\">\n                        {{ currentNavigationLinkItem?.label }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n                        class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n                </button>\n             </div>\n            <ul\n                #listContainer\n                id=\"ecl-inpage-navigation-default-list\"\n                class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [style.max-height.px]=\"listMaxHeight\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\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"] }]
+            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]=\"hasActiveSection\"\n        [class.ecl-inpage-navigation--rtl]=\"isRtl\">\n        <div #navTittle 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            <div #toggleWrapper class=\"ecl-inpage-navigation__trigger-wrapper\">\n                <button\n                    #togglerButton\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()\"\n                    (keydown)=\"onExpandButtonKeydown($event)\">\n                    <span class=\"ecl-inpage-navigation__trigger-current\">\n                        {{ currentNavigationLinkItem?.label }}\n                    </span>\n                    <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"\n                        class=\"ecl-inpage-navigation__trigger-icon\" title=\"Show full page table of contents\"> </ecl-icon>\n                </button>\n             </div>\n            <ul\n                #listContainer\n                id=\"ecl-inpage-navigation-default-list\"\n                class=\"ecl-inpage-navigation__list\"\n                [class.ecl-inpage-navigation__list--visible]=\"isButtonExpanded\"\n                [style.max-height.px]=\"listMaxHeight\"\n                [attr.aria-expanded]=\"isButtonExpanded\">\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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: EclRtlService }, { type: EclThemeService }, { type: i0.IterableDiffers }, { type: i2.ScrollDispatcher }, { type: i0.NgZone }, { type: i1$4.BreakpointObserver }, { type: i2.ViewportRuler }], propDecorators: { eclTitle: [{
                 type: Input
             }], marginTop: [{
@@ -10288,6 +10413,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }], togglerButton: [{
                 type: ViewChild,
                 args: ['togglerButton']
+            }], toggleWrapper: [{
+                type: ViewChild,
+                args: ['toggleWrapper']
             }], listContainer: [{
                 type: ViewChild,
                 args: ['listContainer']
@@ -14695,6 +14823,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
+class EclSeparatorDirective extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.hasClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclSeparatorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: EclSeparatorDirective, selector: "hr[eclSeparator]", host: { properties: { "class.ecl-separator": "this.hasClass" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'hr[eclSeparator]',
+                }]
+        }], propDecorators: { hasClass: [{
+                type: HostBinding,
+                args: ['class.ecl-separator']
+            }] } });
+
+class EclSeparatorModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclSeparatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: EclSeparatorModule, declarations: [EclSeparatorDirective], imports: [CommonModule], exports: [EclSeparatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclSeparatorModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EclSeparatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [EclSeparatorDirective],
+                    declarations: [EclSeparatorDirective],
+                }]
+        }] });
+
 class EclSocialMediaFollowComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -16766,6 +16926,7 @@ const MODULES = [
     EclRatingFieldComponentModule,
     EclSearchFormComponentModule,
     EclSelectDirectiveModule,
+    EclSeparatorModule,
     EclSiteFooterComponentModule,
     EclSiteHeaderComponentModule,
     EclSocialMediaFollowComponentModule,
@@ -16829,6 +16990,7 @@ class EclAllModule {
             EclRatingFieldComponentModule,
             EclSearchFormComponentModule,
             EclSelectDirectiveModule,
+            EclSeparatorModule,
             EclSiteFooterComponentModule,
             EclSiteHeaderComponentModule,
             EclSocialMediaFollowComponentModule,
@@ -16888,6 +17050,7 @@ class EclAllModule {
             EclRatingFieldComponentModule,
             EclSearchFormComponentModule,
             EclSelectDirectiveModule,
+            EclSeparatorModule,
             EclSiteFooterComponentModule,
             EclSiteHeaderComponentModule,
             EclSocialMediaFollowComponentModule,
@@ -16948,6 +17111,7 @@ class EclAllModule {
             EclRatingFieldComponentModule,
             EclSearchFormComponentModule,
             EclSelectDirectiveModule,
+            EclSeparatorModule,
             EclSiteFooterComponentModule,
             EclSiteHeaderComponentModule,
             EclSocialMediaFollowComponentModule,
@@ -16976,5 +17140,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ECLBaseDirective, ECLClickOutsideDirective, ECLFormLabelOptionalDirective, ECLTheme, ECL_DATE_PICKER_VALUE_ACCESSOR, ECL_RATINGFIELD_VALUE_ACCESSOR, ECL_SEARCH_FORM_VALUE_ACCESSOR, ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR, EclAccordionComponent, EclAccordionComponentModule, EclAccordionItemComponent, EclAccordionToggleEvent, EclAllModule, EclAppComponent, EclAppComponentModule, EclAppLanguageDismissEvent, EclBannerComponent, EclBannerComponentModule, EclBannerDescriptionDirective, EclBannerDescriptionLinkDirective, EclBannerDescriptionTextDirective, EclBannerImageDirective, EclBannerPictureDirective, EclBannerTitleDirective, EclBannerTitleLinkDirective, EclBannerTitleTextDirective, EclBannerVideoDirective, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBlockquotePictureDirective, EclBreadcrumbComponent, EclBreadcrumbComponentModule, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageDirective, EclCardPictureDirective, EclCarouselComponent, EclCarouselComponentModule, EclCarouselItemComponent, EclCategoryFilterComponent, EclCategoryFilterItemComponent, EclCategoryFilterItemSelectEvent, EclCategoryFilterListComponent, EclCategoryFilterModule, EclCheckboxDirective, EclCheckboxHelpComponent, EclCheckboxInputDirective, EclCheckboxLabelComponent, EclCheckboxModule, 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, EclDescriptionListDefinitionComponent, EclDescriptionListDefinitionItemDirective, EclDescriptionListDefinitionListDirective, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemFooterComponent, EclFeaturedItemFooterLinkDirective, EclFeaturedItemFooterPictureDirective, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadDirective, EclFileImageDirective, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFilePictureDirective, EclFileTaxonomyComponent, EclFileTitleDirective, EclFileTranslationDownloadDirective, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryPictureDirective, EclGalleryPictureImage, EclGalleryPictureSource, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryThumbnailDirective, EclGalleryToggleItemsEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationSectionEnterEvent, EclLabelDirective, EclLabelDirectiveModule, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclListIllustrationPictureDirective, EclLoadingIndicatorComponent, EclLoadingIndicatorComponentModule, EclLoadingIndicatorLabelDirective, EclLoadingIndicatorOverlayDirective, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerIframeDirective, EclMediaContainerItemAudioDescriptionDirective, EclMediaContainerItemDirective, EclMediaContainerPictureDirective, EclMegaMenuComponent, EclMegaMenuComponentModule, EclMegaMenuContainerDirective, EclMegaMenuFeaturedComponent, EclMegaMenuFeaturedImageDirective, EclMegaMenuFeaturedListDirective, EclMegaMenuFeaturedListItemDirective, EclMegaMenuFeaturedPictureDirective, EclMegaMenuInfoComponent, EclMegaMenuItemComponent, EclMegaMenuListDirective, EclMegaMenuSpacerDirective, EclMegaMenuSubitemComponent, EclMegaMenuSublistDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemCaretEvent, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemKeydownEvent, EclMenuItemParentFocusEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclModalBodyComponent, EclModalBodyFixedContentDirective, EclModalCloseDirective, EclModalCloseEvent, EclModalComponent, EclModalComponentModule, EclModalFooterComponent, EclModalHeaderComponent, EclModalOpenEvent, EclModalTriggerDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageComponent, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNavigationListPictureDirective, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerIconDirective, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclNotificationCloseEvent, EclNotificationComponent, EclNotificationComponentModule, EclNotificationTitleDirective, EclOrderedListDirective, EclOrderedListItemDirective, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderComponentModule, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderInfoDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclPopoverComponent, EclPopoverComponentModule, EclPopoverContentDirective, EclPopoverToggleDirective, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclRangeBubbleComponent, EclRangeDirective, EclRangeDirectiveModule, EclRangeEvent, EclRangeValueComponent, EclRatingChangeEvent, EclRatingFieldComponent, EclRatingFieldComponentModule, EclRtlService, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectContainerComponent, EclSelectDirective, EclSelectDirectiveModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterFixedContentECComponent, EclSiteFooterFixedContentEUComponent, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterPictureDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderAreaDataService, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderComponentModule, EclSiteHeaderCtaDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderImageDirective, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLinkDirective, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderNotificationComponent, EclSiteHeaderPictureDirective, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSlideEvent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaFollowLinkDirective, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSocialMediaShareLinkDirective, EclSortTableEvent, EclSplashPageComponent, EclSplashPageComponentModule, EclSplashPageLanguageCategoryComponent, EclSplashPageLanguageContainerComponent, EclSplashPageLanguageItemDirective, EclSplashPageLanguageLinkComponent, EclSplashPageLanguageListDirective, EclSplashPageLogoImageDirective, EclSplashPageLogoLinkDirective, EclSplashPagePictureDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCaptionDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableResponsiveDirective, EclTableRowDirective, EclTableSortButtonComponent, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagIconExternalDirective, EclTagRemoveEvent, EclTagSetDirective, EclTagSetItemDirective, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclThemeService, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, EclUserDeviceService, KeyCode, ShiftDirection, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
+export { ECLBaseDirective, ECLClickOutsideDirective, ECLFormLabelOptionalDirective, ECLTheme, ECL_DATE_PICKER_VALUE_ACCESSOR, ECL_RATINGFIELD_VALUE_ACCESSOR, ECL_SEARCH_FORM_VALUE_ACCESSOR, ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR, EclAccordionComponent, EclAccordionComponentModule, EclAccordionItemComponent, EclAccordionToggleEvent, EclAllModule, EclAppComponent, EclAppComponentModule, EclAppLanguageDismissEvent, EclBannerComponent, EclBannerComponentModule, EclBannerDescriptionDirective, EclBannerDescriptionLinkDirective, EclBannerDescriptionTextDirective, EclBannerImageDirective, EclBannerPictureDirective, EclBannerTitleDirective, EclBannerTitleLinkDirective, EclBannerTitleTextDirective, EclBannerVideoDirective, EclBaseEvent, EclBlockquoteComponent, EclBlockquoteComponentModule, EclBlockquoteImageDirective, EclBlockquotePictureDirective, EclBreadcrumbComponent, EclBreadcrumbComponentModule, EclBreadcrumbSegmentClickEvent, EclBreadcrumbSegmentComponent, EclButtonComponent, EclButtonComponentModule, EclButtonLabelDirective, EclCardBodyComponent, EclCardComponent, EclCardComponentModule, EclCardImageDirective, EclCardPictureDirective, EclCarouselComponent, EclCarouselComponentModule, EclCarouselItemComponent, EclCategoryFilterComponent, EclCategoryFilterItemComponent, EclCategoryFilterItemSelectEvent, EclCategoryFilterListComponent, EclCategoryFilterModule, EclCheckboxDirective, EclCheckboxHelpComponent, EclCheckboxInputDirective, EclCheckboxLabelComponent, EclCheckboxModule, 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, EclDescriptionListDefinitionComponent, EclDescriptionListDefinitionItemDirective, EclDescriptionListDefinitionListDirective, EclDescriptionListDirective, EclDescriptionListTermDirective, EclDomEvent, EclExpandableComponent, EclExpandableComponentModule, EclExpandableToggleEvent, EclFactFiguresComponent, EclFactFiguresComponentModule, EclFactFiguresDescriptionComponent, EclFactFiguresItemComponent, EclFactFiguresTitleComponent, EclFactFiguresValueComponent, EclFactFiguresViewAllComponent, EclFeaturedComponent, EclFeaturedItemComponent, EclFeaturedItemDescriptionComponent, EclFeaturedItemFooterComponent, EclFeaturedItemFooterLinkDirective, EclFeaturedItemFooterPictureDirective, EclFeaturedItemLinkDirective, EclFeaturedModule, EclFeedbackMessageDirective, EclFeedbackMessageDirectiveModule, EclFileComponent, EclFileComponentModule, EclFileDownloadDirective, EclFileImageDirective, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFilePictureDirective, EclFilePreviewDirective, EclFileTaxonomyComponent, EclFileTitleDirective, EclFileTranslationDownloadDirective, EclFileUploadDirective, EclFileUploadDirectiveModule, EclFileUploadFileSelectedEvent, EclFormGroupComponent, EclFormGroupComponentModule, EclFormLabelComponent, EclFormLabelComponentModule, EclGalleryComponent, EclGalleryComponentModule, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryPictureDirective, EclGalleryPictureImage, EclGalleryPictureSource, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryThumbnailDirective, EclGalleryToggleItemsEvent, EclHelpBlockDirective, EclHelpBlockDirectiveModule, EclHiddenDirective, EclHiddenModule, EclIconComponent, EclIconComponentModule, EclInpageNavigationComponent, EclInpageNavigationComponentModule, EclInpageNavigationItemClickEvent, EclInpageNavigationItemComponent, EclInpageNavigationSectionEnterEvent, EclLabelDirective, EclLabelDirectiveModule, EclLanguageService, EclLinkDirective, EclLinkDirectiveModule, EclLinkLabelDirective, EclListDirectiveModule, EclListIllustrationComponent, EclListIllustrationComponentModule, EclListIllustrationIconDirective, EclListIllustrationImageDirective, EclListIllustrationItemComponent, EclListIllustrationPictureDirective, EclLoadingIndicatorComponent, EclLoadingIndicatorComponentModule, EclLoadingIndicatorLabelDirective, EclLoadingIndicatorOverlayDirective, EclMediaContainerComponent, EclMediaContainerComponentModule, EclMediaContainerIframeDirective, EclMediaContainerItemAudioDescriptionDirective, EclMediaContainerItemDirective, EclMediaContainerPictureDirective, EclMegaMenuComponent, EclMegaMenuComponentModule, EclMegaMenuContainerDirective, EclMegaMenuFeaturedComponent, EclMegaMenuFeaturedImageDirective, EclMegaMenuFeaturedListDirective, EclMegaMenuFeaturedListItemDirective, EclMegaMenuFeaturedPictureDirective, EclMegaMenuInfoComponent, EclMegaMenuItemComponent, EclMegaMenuListDirective, EclMegaMenuSpacerDirective, EclMegaMenuSubitemComponent, EclMegaMenuSublistDirective, EclMenuComponent, EclMenuComponentModule, EclMenuItemCaretEvent, EclMenuItemComponent, EclMenuItemFocusEvent, EclMenuItemHoverEvent, EclMenuItemHoverOutEvent, EclMenuItemKeydownEvent, EclMenuItemParentFocusEvent, EclMenuItemSelectEvent, EclMenuMegaComponent, EclMenuMegaItemComponent, EclModalBodyComponent, EclModalBodyFixedContentDirective, EclModalCloseDirective, EclModalCloseEvent, EclModalComponent, EclModalComponentModule, EclModalFooterComponent, EclModalHeaderComponent, EclModalOpenEvent, EclModalTriggerDirective, EclMultiselectComponent, EclMultiselectComponentModule, EclMultiselectOptionDirective, EclNavigationListComponent, EclNavigationListComponentModule, EclNavigationListImageComponent, EclNavigationListImageDirective, EclNavigationListItemComponent, EclNavigationListPictureDirective, EclNewsTickerComponent, EclNewsTickerComponentModule, EclNewsTickerIconDirective, EclNewsTickerItemComponent, EclNewsTickerItemEvent, EclNotificationCloseEvent, EclNotificationComponent, EclNotificationComponentModule, EclNotificationTitleDirective, EclOrderedListDirective, EclOrderedListItemDirective, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderComponentModule, EclPageHeaderDescriptionContainerDirective, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderInfoDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderTitleDirective, EclPaginationComponent, EclPaginationComponentModule, EclPaginationEvent, EclPaginationItemClickEvent, EclPaginationItemComponent, EclPopoverComponent, EclPopoverComponentModule, EclPopoverContentDirective, EclPopoverToggleDirective, EclRadioDirective, EclRadioDirectiveModule, EclRadioHelpComponent, EclRadioInputDirective, EclRadioLabelComponent, EclRangeBubbleComponent, EclRangeDirective, EclRangeDirectiveModule, EclRangeEvent, EclRangeValueComponent, EclRatingChangeEvent, EclRatingFieldComponent, EclRatingFieldComponentModule, EclRtlService, EclSearchFormComponent, EclSearchFormComponentModule, EclSearchFormEvent, EclSelectContainerComponent, EclSelectDirective, EclSelectDirectiveModule, EclSeparatorDirective, EclSeparatorModule, EclSiteFooterColumnDirective, EclSiteFooterComponent, EclSiteFooterComponentModule, EclSiteFooterContentDirective, EclSiteFooterDescriptionDirective, EclSiteFooterFixedContentECComponent, EclSiteFooterFixedContentEUComponent, EclSiteFooterLinkDirective, EclSiteFooterListDirective, EclSiteFooterListItemDirective, EclSiteFooterLogoDirective, EclSiteFooterLogoImageDirective, EclSiteFooterLogoItemDirective, EclSiteFooterLogoLinkDirective, EclSiteFooterLogoListDirective, EclSiteFooterPictureDirective, EclSiteFooterRowDirective, EclSiteFooterSectionDirective, EclSiteFooterTitleDirective, EclSiteFooterTitleLinkDirective, EclSiteHeaderActionComponent, EclSiteHeaderAreaDataService, EclSiteHeaderBannerTopComponent, EclSiteHeaderComponent, EclSiteHeaderComponentModule, EclSiteHeaderCtaDirective, EclSiteHeaderEnvironmentComponent, EclSiteHeaderImageDirective, EclSiteHeaderLanguageClickEvent, EclSiteHeaderLanguageCloseEvent, EclSiteHeaderLanguageComponent, EclSiteHeaderLanguagePopoverComponent, EclSiteHeaderLanguageSelectedEvent, EclSiteHeaderLinkDirective, EclSiteHeaderLoginBoxToggleEvent, EclSiteHeaderLoginComponent, EclSiteHeaderLoginDescriptionDirective, EclSiteHeaderLoginEvent, EclSiteHeaderLoginSeparatorDirective, EclSiteHeaderLogoClickEvent, EclSiteHeaderNotificationComponent, EclSiteHeaderPictureDirective, EclSiteHeaderSearchComponent, EclSiteHeaderSearchEvent, EclSiteHeaderSearchToggleEvent, EclSlideEvent, EclSocialMediaFollowComponent, EclSocialMediaFollowComponentModule, EclSocialMediaFollowItemClickEvent, EclSocialMediaFollowItemComponent, EclSocialMediaFollowLinkDirective, EclSocialMediaShareComponent, EclSocialMediaShareComponentModule, EclSocialMediaShareItemClickEvent, EclSocialMediaShareItemComponent, EclSocialMediaShareLinkDirective, EclSortTableEvent, EclSplashPageComponent, EclSplashPageComponentModule, EclSplashPageLanguageCategoryComponent, EclSplashPageLanguageContainerComponent, EclSplashPageLanguageItemDirective, EclSplashPageLanguageLinkComponent, EclSplashPageLanguageListDirective, EclSplashPageLogoImageDirective, EclSplashPageLogoLinkDirective, EclSplashPagePictureDirective, EclStickyContainerComponent, EclStickyContainerComponentModule, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent, EclTabSelectEvent, EclTableBodyDirective, EclTableCaptionDirective, EclTableCellDirective, EclTableCellGroupDirective, EclTableDirective, EclTableDirectiveModule, EclTableHeadDirective, EclTableHeaderDirective, EclTableResponsiveDirective, EclTableRowDirective, EclTableSortButtonComponent, EclTabsComponent, EclTabsComponentModule, EclTagComponent, EclTagComponentModule, EclTagIconExternalDirective, EclTagRemoveEvent, EclTagSetDirective, EclTagSetItemDirective, EclTextAreaDirective, EclTextAreaDirectiveModule, EclTextInputDirective, EclTextInputDirectiveModule, EclThemeService, EclTimelineComponent, EclTimelineComponentModule, EclTimelineItemComponent, EclTimelineItemLabelDirective, EclTimelineItemTitleDirective, EclTimelineItemToggleEvent, EclTimelineItemTogglerComponent, EclUnorderedListDirective, EclUnorderedListItemDirective, EclUserDeviceService, KeyCode, ShiftDirection, SortOrder, hasNextSiblingWithAttribute, hasPreviousSiblingWithAttribute };
 //# sourceMappingURL=eui-ecl.mjs.map