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

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

@@ -1,21 +1,18 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, HostBinding, Component, afterNextRender, booleanAttribute, Directive, HostListener, ContentChild, PLATFORM_ID, numberAttribute, ViewChild, ContentChildren, Inject, NgModule } from '@angular/core';
-import * as i2$2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i2 from '@ngx-translate/core';
+import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
 import * as i3 from '@eui/ecl/components/ecl-button';
 import { EclButtonModule } from '@eui/ecl/components/ecl-button';
-import * as i2$1 from '@eui/ecl/components/ecl-icon';
+import * as i2 from '@eui/ecl/components/ecl-icon';
 import { EclIconModule } from '@eui/ecl/components/ecl-icon';
-import * as i5 from '@eui/ecl/components/ecl-link';
-import { EclLinkModule } from '@eui/ecl/components/ecl-link';
-import * as i1$1 from '@angular/cdk/layout';
+import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { Subject, delay } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
-import * as i1 from '@angular/platform-browser';
 
 class EclGalleryShowEvent extends EclBaseEvent {
 }
@@ -92,11 +89,11 @@ class EclGalleryFooterComponent {
         this.toggleItems.next(new EclGalleryToggleItemsEvent(this.isExpanded));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclGalleryFooterComponent, isStandalone: false, selector: "ecl-gallery-footer", inputs: { infoId: "infoId" }, outputs: { toggleItems: "toggleItems" }, host: { properties: { "class.ecl-gallery__footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"ecl-gallery__info\">\n    <div class=\"ecl-gallery__info-total\" [id]=\"infoId\">\n        <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n    </div>\n    @if(isShowToggleBtn) {\n    @if(!isExpanded) {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.gallery.VIEW-ALL' | translate }}\n    </button>\n    } @else {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.common.COLLAPSE' | translate }}\n    </button>\n    }\n    }\n</div>\n<hr class=\"ecl-gallery__footer-divider\" />\n<div class=\"ecl-gallery__footer-link\">\n    <ng-content></ng-content>\n</div>", dependencies: [{ kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclGalleryFooterComponent, isStandalone: true, selector: "ecl-gallery-footer", inputs: { infoId: "infoId" }, outputs: { toggleItems: "toggleItems" }, host: { properties: { "class.ecl-gallery__footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"ecl-gallery__info\">\n    <div class=\"ecl-gallery__info-total\" [id]=\"infoId\">\n        <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n    </div>\n    @if(isShowToggleBtn) {\n    @if(!isExpanded) {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.gallery.VIEW-ALL' | translate }}\n    </button>\n    } @else {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.common.COLLAPSE' | translate }}\n    </button>\n    }\n    }\n</div>\n<hr class=\"ecl-gallery__footer-divider\" />\n<div class=\"ecl-gallery__footer-link\">\n    <ng-content></ng-content>\n</div>", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-gallery-footer', standalone: false, template: "<div class=\"ecl-gallery__info\">\n    <div class=\"ecl-gallery__info-total\" [id]=\"infoId\">\n        <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n    </div>\n    @if(isShowToggleBtn) {\n    @if(!isExpanded) {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.gallery.VIEW-ALL' | translate }}\n    </button>\n    } @else {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.common.COLLAPSE' | translate }}\n    </button>\n    }\n    }\n</div>\n<hr class=\"ecl-gallery__footer-divider\" />\n<div class=\"ecl-gallery__footer-link\">\n    <ng-content></ng-content>\n</div>" }]
+            args: [{ selector: 'ecl-gallery-footer', imports: [TranslateModule, EclButtonModule], template: "<div class=\"ecl-gallery__info\">\n    <div class=\"ecl-gallery__info-total\" [id]=\"infoId\">\n        <strong>{{ itemsCount }}</strong>{{ 'ecl.gallery.MEDIA-FILES-COUNT' | translate }}\n    </div>\n    @if(isShowToggleBtn) {\n    @if(!isExpanded) {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.gallery.VIEW-ALL' | translate }}\n    </button>\n    } @else {\n    <button [attr.aria-describedby]=\"infoId\" eclButton variant=\"ghost\" class=\"ecl-gallery__view-all\"\n        (click)=\"onToggle()\">\n        {{ 'ecl.common.COLLAPSE' | translate }}\n    </button>\n    }\n    }\n</div>\n<hr class=\"ecl-gallery__footer-divider\" />\n<div class=\"ecl-gallery__footer-link\">\n    <ng-content></ng-content>\n</div>" }]
         }], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.ecl-gallery__footer']
@@ -173,13 +170,12 @@ class EclGalleryMediaDirective extends ECLBaseDirective {
         return this.el.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryMediaDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.14", type: EclGalleryMediaDirective, isStandalone: false, selector: "[eclGalleryMedia], [eclGalleryImage]", inputs: { poster: "poster", hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-video": "this.isVideo" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.14", type: EclGalleryMediaDirective, isStandalone: true, 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: "19.2.14", ngImport: i0, type: EclGalleryMediaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclGalleryMedia], [eclGalleryImage]',
-                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { poster: [{
                 type: Input
@@ -239,13 +235,12 @@ class EclGalleryPictureDirective extends ECLBaseDirective {
         return this.el.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryPictureDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclGalleryPictureDirective, isStandalone: false, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclGalleryPictureDirective, isStandalone: true, selector: "picture[eclGalleryPicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryPictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclGalleryPicture]',
-                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { cssClasses: [{
                 type: HostBinding,
@@ -263,13 +258,12 @@ class EclGalleryThumbnailDirective extends ECLBaseDirective {
         return [super.getCssClasses('ecl-picture ecl-gallery__thumbnail')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryThumbnailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.14", type: EclGalleryThumbnailDirective, isStandalone: false, selector: "picture[eclGalleryThumbnail]", inputs: { hasZoom: ["hasZoom", "hasZoom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "class.ecl-picture--zoom": "this.hasZoom" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.14", type: EclGalleryThumbnailDirective, isStandalone: true, 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: "19.2.14", ngImport: i0, type: EclGalleryThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclGalleryThumbnail]',
-                    standalone: false,
                 }]
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
@@ -379,13 +373,13 @@ class EclGalleryItemComponent extends ECLBaseDirective {
     onFocus() {
         this.renderer.selectRootElement(this.el.nativeElement.children[0], true).focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryItemComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclGalleryItemComponent, isStandalone: false, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute], mediaType: "mediaType", src: "src", 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: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryItemComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclGalleryItemComponent, isStandalone: true, selector: "ecl-gallery-item", inputs: { isShareable: ["isShareable", "isShareable", booleanAttribute], mediaType: "mediaType", src: "src", 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: "ngmodule", type: EclIconModule }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-gallery-item', standalone: false, 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.DomSanitizer }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { isShareable: [{
+            args: [{ selector: 'ecl-gallery-item', imports: [EclIconModule], 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$1.DomSanitizer }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { isShareable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], mediaType: [{
@@ -727,13 +721,13 @@ class EclGalleryComponent extends ECLBaseDirective {
     getVisibleItems() {
         return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclGalleryComponent, isStandalone: false, 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], columns: ["columns", "columns", numberAttribute], gridTemplate: "gridTemplate", ratio: "ratio" }, 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: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i5.EclLinkDirective, selector: "[eclLink]", inputs: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }, { kind: "directive", type: i5.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryComponent, deps: [{ token: i1$2.BreakpointObserver }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclGalleryComponent, isStandalone: true, 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], columns: ["columns", "columns", numberAttribute], gridTemplate: "gridTemplate", ratio: "ratio" }, 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-gallery', standalone: false, 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"] }]
-        }], ctorParameters: () => [{ type: i1$1.BreakpointObserver }, { type: undefined, decorators: [{
+            args: [{ selector: 'ecl-gallery', imports: [TranslateModule, NgTemplateOutlet, EclButtonModule, EclIconModule], 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"] }]
+        }], ctorParameters: () => [{ type: i1$2.BreakpointObserver }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }], propDecorators: { isOpenInFullScreenPossible: [{
@@ -811,33 +805,48 @@ const COMPONENTS = [
     EclGalleryPictureDirective,
     EclGalleryThumbnailDirective,
 ];
+/**
+ * Module that provides the EclGalleryComponent and its dependencies.
+ *
+ * @deprecated Use {@link EUI_ECL_GALLERY} instead.
+ */
 class EclGalleryModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryModule, declarations: [EclGalleryComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryModule, imports: [EclGalleryComponent,
             EclGalleryFooterComponent,
             EclGalleryItemComponent,
             EclGalleryMediaDirective,
             EclGalleryPictureDirective,
-            EclGalleryThumbnailDirective], imports: [CommonModule, TranslateModule, EclButtonModule, EclIconModule, EclLinkModule], exports: [EclGalleryComponent,
+            EclGalleryThumbnailDirective], exports: [EclGalleryComponent,
             EclGalleryFooterComponent,
             EclGalleryItemComponent,
             EclGalleryMediaDirective,
             EclGalleryPictureDirective,
             EclGalleryThumbnailDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryModule, imports: [CommonModule, TranslateModule, EclButtonModule, EclIconModule, EclLinkModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryModule, imports: [EclGalleryComponent,
+            EclGalleryFooterComponent,
+            EclGalleryItemComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclGalleryModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, TranslateModule, EclButtonModule, EclIconModule, EclLinkModule],
+                    imports: [...COMPONENTS],
                     exports: [...COMPONENTS],
-                    declarations: [...COMPONENTS],
                 }]
         }] });
 
+const EUI_ECL_GALLERY = [
+    EclGalleryComponent,
+    EclGalleryFooterComponent,
+    EclGalleryItemComponent,
+    EclGalleryMediaDirective,
+    EclGalleryPictureDirective,
+    EclGalleryThumbnailDirective,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EclGalleryComponent, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryModule, EclGalleryPictureDirective, EclGalleryPictureImage, EclGalleryPictureSource, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryThumbnailDirective, EclGalleryToggleItemsEvent };
+export { EUI_ECL_GALLERY, EclGalleryComponent, EclGalleryFooterComponent, EclGalleryFullScreenEvent, EclGalleryHideEvent, EclGalleryItemClickEvent, EclGalleryItemComponent, EclGalleryItemEvent, EclGalleryMediaDirective, EclGalleryMediaSource, EclGalleryMediaTrack, EclGalleryModule, EclGalleryPictureDirective, EclGalleryPictureImage, EclGalleryPictureSource, EclGalleryShareEvent, EclGalleryShowEvent, EclGalleryThumbnailDirective, EclGalleryToggleItemsEvent };
 //# sourceMappingURL=eui-ecl-components-ecl-gallery.mjs.map