@eui/ecl 23.0.0-alpha.6 → 23.0.0-alpha.8

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, HostBinding, Component, input, booleanAttribute, inject, ElementRef, afterNextRender, Directive, ChangeDetectorRef, Renderer2, HostListener, ContentChild, numberAttribute, output, PLATFORM_ID, DOCUMENT, ViewChild, ContentChildren } from '@angular/core';
+import { EventEmitter, Output, Input, HostBinding, Component, input, booleanAttribute, inject, ElementRef, afterNextRender, Directive, ChangeDetectorRef, contentChild, Renderer2, HostListener, numberAttribute, output, contentChildren, viewChild, PLATFORM_ID, DOCUMENT } from '@angular/core';
 import { TranslatePipe } from '@ngx-translate/core';
 import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
 import * as i1 from '@eui/ecl/components/ecl-button';
@@ -291,6 +291,10 @@ class EclGalleryItemComponent extends ECLBaseDirective {
         this.ariaLabel = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemClick = new EventEmitter();
+        this.mediaChild = contentChild(EclGalleryMediaDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mediaChild" }] : /* istanbul ignore next */ []));
+        this.galleryPicture = contentChild(EclGalleryPictureDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "galleryPicture" }] : /* istanbul ignore next */ []));
         /**
          * The role attribute of the item is 'listitem', should not be changed.
          */
@@ -365,7 +369,7 @@ class EclGalleryItemComponent extends ECLBaseDirective {
         this.renderer.selectRootElement(this.el.nativeElement.children[0], true).focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclGalleryItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclGalleryItemComponent, isStandalone: true, selector: "ecl-gallery-item", inputs: { isShareable: { classPropertyName: "isShareable", publicName: "isShareable", isSignal: true, isRequired: false, transformFunction: null }, mediaType: { classPropertyName: "mediaType", publicName: "mediaType", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: false, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, srVideoAudioDescription: { classPropertyName: "srVideoAudioDescription", publicName: "srVideoAudioDescription", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, 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: "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    [attr.aria-label]=\"ariaLabel()\">\n    <figure class=\"ecl-gallery__image-container\">\n        <div class=\"ecl-gallery__icon-zoom-wrapper\">\n            <ecl-icon class=\"ecl-gallery__icon-zoom\" icon=\"fullscreen\" size=\"s\"></ecl-icon>\n        </div>\n        @if(mediaType() !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon\" icon=\"play\" size=\"s\"></ecl-icon>\n        </div>\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: i1$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclGalleryItemComponent, isStandalone: true, selector: "ecl-gallery-item", inputs: { isShareable: { classPropertyName: "isShareable", publicName: "isShareable", isSignal: true, isRequired: false, transformFunction: null }, mediaType: { classPropertyName: "mediaType", publicName: "mediaType", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: false, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, srVideoAudioDescription: { classPropertyName: "srVideoAudioDescription", publicName: "srVideoAudioDescription", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, 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, isSignal: true }, { propertyName: "galleryPicture", first: true, predicate: EclGalleryPictureDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<a [href]=\"src\" class=\"ecl-gallery__item-link\" [class.ecl-gallery__item__link--frozen]=\"isNoOverlay\" [id]=\"itemId\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <figure class=\"ecl-gallery__image-container\">\n        <div class=\"ecl-gallery__icon-zoom-wrapper\">\n            <ecl-icon class=\"ecl-gallery__icon-zoom\" icon=\"fullscreen\" size=\"s\"></ecl-icon>\n        </div>\n        @if(mediaType() !== 'image') {\n        <div class=\"ecl-gallery__item-icon-wrapper\">\n            <ecl-icon isInverted class=\"ecl-gallery__item-icon\" icon=\"play\" size=\"s\"></ecl-icon>\n        </div>\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: i1$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclGalleryItemComponent, decorators: [{
             type: Component,
@@ -386,13 +390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{
                 type: Output
-            }], mediaChild: [{
-                type: ContentChild,
-                args: [EclGalleryMediaDirective]
-            }], galleryPicture: [{
-                type: ContentChild,
-                args: [EclGalleryPictureDirective]
-            }], cssClasses: [{
+            }], mediaChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclGalleryMediaDirective), { isSignal: true }] }], galleryPicture: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclGalleryPictureDirective), { isSignal: true }] }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], role: [{
@@ -446,7 +444,6 @@ class EclGalleryComponent extends ECLBaseDirective {
         /**
          * Emits event when user clicks on an item to expand it.
          */
-        // eslint-disable-next-line @angular-eslint/no-output-native
         this.show = output();
         /**
          * Emits event when an expanded item is closed.
@@ -464,6 +461,16 @@ class EclGalleryComponent extends ECLBaseDirective {
          * Emits event when user is browsing items, opened in an overlay.
          */
         this.itemSwitch = output();
+        this.galleryItems = contentChildren(EclGalleryItemComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "galleryItems" }] : /* istanbul ignore next */ []));
+        this.galleryFooter = contentChild(EclGalleryFooterComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "galleryFooter" }] : /* istanbul ignore next */ []));
+        this.overlayChild = viewChild('overlay', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayChild" }] : /* istanbul ignore next */ []));
+        this.headerChild = viewChild('header', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerChild" }] : /* istanbul ignore next */ []));
+        this.footerChild = viewChild('footer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerChild" }] : /* istanbul ignore next */ []));
         /**
          * The default role of the component is 'region' and should not be changed.
          */
@@ -503,13 +510,14 @@ class EclGalleryComponent extends ECLBaseDirective {
         }
     }
     ngAfterContentInit() {
-        this.itemsCount = this.galleryItems.length;
+        this.itemsCount = this.galleryItems().length;
         this.visibleItems = this.maxVisibleItems ? this.maxVisibleItems : this.itemsCount;
-        if (this.galleryFooter) {
-            this.galleryFooter.itemsCount = this.itemsCount;
-            this.galleryFooter.isShowToggleBtn = this.hasHiddenGaleryItems();
+        const galleryFooter = this.galleryFooter();
+        if (galleryFooter) {
+            galleryFooter.itemsCount = this.itemsCount;
+            galleryFooter.isShowToggleBtn = this.hasHiddenGaleryItems();
             // Subscribe to 'toggleItems' event from gallery footer, to show or collapse items.
-            this.galleryFooter.toggleItems.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+            galleryFooter.toggleItems.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
                 if (evt.expandAll) {
                     this.showAllItems();
                 }
@@ -520,11 +528,11 @@ class EclGalleryComponent extends ECLBaseDirective {
         }
         if (!this.isNoOverlay()) {
             // For each item, subscribe to 'itemClick' event.
-            this.galleryItems.forEach((item) => {
+            this.galleryItems().forEach((item) => {
                 item.itemClick.pipe(takeUntil(this.destroy$)).subscribe((_) => {
                     this.isDialogVisible = true;
                     this.item = item;
-                    this.itemIndex = this.findItemIndex(this.galleryItems.toArray(), item);
+                    this.itemIndex = this.findItemIndex(Array.from(this.galleryItems()), item);
                     this.show.emit(new EclGalleryShowEvent());
                     if (isPlatformBrowser(this.platformId)) {
                         setTimeout(() => this.setIframeDimensions());
@@ -533,7 +541,7 @@ class EclGalleryComponent extends ECLBaseDirective {
             });
         }
         else {
-            this.galleryItems.forEach((item) => (item.isNoOverlay = true));
+            this.galleryItems().forEach((item) => (item.isNoOverlay = true));
         }
         if (this.hasHiddenGaleryItems()) {
             this.collapseItems();
@@ -548,8 +556,8 @@ class EclGalleryComponent extends ECLBaseDirective {
      * @param evt
      */
     onPrevious(evt) {
-        this.item = this.findPreviousItem(this.galleryItems.toArray(), this.item);
-        this.itemIndex = this.findItemIndex(this.galleryItems.toArray(), this.item);
+        this.item = this.findPreviousItem(Array.from(this.galleryItems()), this.item);
+        this.itemIndex = this.findItemIndex(Array.from(this.galleryItems()), this.item);
         this.itemSwitch.emit(new EclGalleryItemEvent(this.item));
     }
     /**
@@ -557,8 +565,8 @@ class EclGalleryComponent extends ECLBaseDirective {
      * @param evt
      */
     onNext(evt) {
-        this.item = this.findNextItem(this.galleryItems.toArray(), this.item);
-        this.itemIndex = this.findItemIndex(this.galleryItems.toArray(), this.item);
+        this.item = this.findNextItem(Array.from(this.galleryItems()), this.item);
+        this.itemIndex = this.findItemIndex(Array.from(this.galleryItems()), this.item);
         this.itemSwitch.emit(new EclGalleryItemEvent(this.item));
     }
     /**
@@ -605,9 +613,9 @@ class EclGalleryComponent extends ECLBaseDirective {
     }
     getCalculatedIframeDimensions() {
         let width = window.innerWidth;
-        let height = this.overlayChild.nativeElement.clientHeight -
-            this.headerChild.nativeElement.clientHeight -
-            this.footerChild.nativeElement.clientHeight;
+        let height = this.overlayChild().nativeElement.clientHeight -
+            this.headerChild().nativeElement.clientHeight -
+            this.footerChild().nativeElement.clientHeight;
         if (width > height) {
             const scaledHeight = height * this.RESOLUTION_16_9_PROPOTION;
             if (scaledHeight > width) {
@@ -667,16 +675,18 @@ class EclGalleryComponent extends ECLBaseDirective {
     manageItemsMobile() {
         this.maxVisibleItems = this.MAX_VISIBLE_ITEMS_MOBILE;
         this.collapseItems();
-        if (this.galleryFooter) {
-            this.galleryFooter.isShowToggleBtn = this.hasHiddenGaleryItems();
+        const galleryFooter = this.galleryFooter();
+        if (galleryFooter) {
+            galleryFooter.isShowToggleBtn = this.hasHiddenGaleryItems();
         }
     }
     manageItemsDesktop() {
         this.maxVisibleItems = this.visibleItems;
         this.getVisibleItems().forEach((elem) => this.showGaleryItem(elem));
         this.collapseItems();
-        if (this.galleryFooter) {
-            this.galleryFooter.isShowToggleBtn = this.hasHiddenGaleryItems();
+        const galleryFooter = this.galleryFooter();
+        if (galleryFooter) {
+            galleryFooter.isShowToggleBtn = this.hasHiddenGaleryItems();
         }
     }
     hasHiddenGaleryItems() {
@@ -702,36 +712,21 @@ class EclGalleryComponent extends ECLBaseDirective {
         item.isHidden = false;
     }
     getHiddenItems() {
-        return this.galleryItems.filter((item, cnt) => cnt >= this.maxVisibleItems);
+        return this.galleryItems().filter((item, cnt) => cnt >= this.maxVisibleItems);
     }
     getVisibleItems() {
-        return this.galleryItems.filter((item, cnt) => cnt < this.maxVisibleItems);
+        return this.galleryItems().filter((item, cnt) => cnt < this.maxVisibleItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclGalleryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclGalleryComponent, isStandalone: true, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: { classPropertyName: "isOpenInFullScreenPossible", publicName: "isOpenInFullScreenPossible", isSignal: true, isRequired: false, transformFunction: null }, isShareable: { classPropertyName: "isShareable", publicName: "isShareable", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isNoOverlay: { classPropertyName: "isNoOverlay", publicName: "isNoOverlay", isSignal: true, isRequired: false, transformFunction: null }, isShowTitleOnHover: { classPropertyName: "isShowTitleOnHover", publicName: "isShowTitleOnHover", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: false, isRequired: false, transformFunction: numberAttribute }, isGrid: { classPropertyName: "isGrid", publicName: "isGrid", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, gridTemplate: { classPropertyName: "gridTemplate", publicName: "gridTemplate", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "show", hide: "hide", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()" }, 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=\"tertiary\" eclStyle=\"inverted\">\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()\" playsinline>\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i1$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclGalleryComponent, isStandalone: true, selector: "ecl-gallery", inputs: { isOpenInFullScreenPossible: { classPropertyName: "isOpenInFullScreenPossible", publicName: "isOpenInFullScreenPossible", isSignal: true, isRequired: false, transformFunction: null }, isShareable: { classPropertyName: "isShareable", publicName: "isShareable", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isNoOverlay: { classPropertyName: "isNoOverlay", publicName: "isNoOverlay", isSignal: true, isRequired: false, transformFunction: null }, isShowTitleOnHover: { classPropertyName: "isShowTitleOnHover", publicName: "isShowTitleOnHover", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: false, isRequired: false, transformFunction: numberAttribute }, isGrid: { classPropertyName: "isGrid", publicName: "isGrid", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, gridTemplate: { classPropertyName: "gridTemplate", publicName: "gridTemplate", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "show", hide: "hide", openFullScreen: "openFullScreen", share: "share", itemSwitch: "itemSwitch" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydownHandler()" }, properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "galleryItems", predicate: EclGalleryItemComponent, isSignal: true }, { propertyName: "galleryFooter", first: true, predicate: EclGalleryFooterComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayChild", first: true, predicate: ["overlay"], descendants: true, isSignal: true }, { propertyName: "headerChild", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerChild", first: true, predicate: ["footer"], descendants: true, isSignal: 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=\"tertiary\" eclStyle=\"inverted\">\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()\" playsinline>\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i1$1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i3.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }, { kind: "directive", type: i3.EclLinkLabelDirective, selector: "[eclLinkLabel]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-gallery', imports: [TranslatePipe, NgTemplateOutlet, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], 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=\"tertiary\" eclStyle=\"inverted\">\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()\" playsinline>\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"] }]
+            args: [{ selector: 'ecl-gallery', imports: [TranslatePipe, NgTemplateOutlet, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK], 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=\"tertiary\" eclStyle=\"inverted\">\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()\" playsinline>\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"] }]
         }], propDecorators: { isOpenInFullScreenPossible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpenInFullScreenPossible", required: false }] }], isShareable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShareable", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], isNoOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNoOverlay", required: false }] }], isShowTitleOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowTitleOnHover", required: false }] }], maxVisibleItems: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], isGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGrid", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], gridTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridTemplate", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], show: [{ type: i0.Output, args: ["show"] }], hide: [{ type: i0.Output, args: ["hide"] }], openFullScreen: [{ type: i0.Output, args: ["openFullScreen"] }], share: [{ type: i0.Output, args: ["share"] }], itemSwitch: [{ type: i0.Output, args: ["itemSwitch"] }], galleryItems: [{
-                type: ContentChildren,
-                args: [EclGalleryItemComponent]
-            }], galleryFooter: [{
-                type: ContentChild,
-                args: [EclGalleryFooterComponent]
-            }], overlayChild: [{
-                type: ViewChild,
-                args: ['overlay']
-            }], headerChild: [{
-                type: ViewChild,
-                args: ['header']
-            }], footerChild: [{
-                type: ViewChild,
-                args: ['footer']
-            }], cssClasses: [{
+            }], isGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGrid", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], gridTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridTemplate", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], show: [{ type: i0.Output, args: ["show"] }], hide: [{ type: i0.Output, args: ["hide"] }], openFullScreen: [{ type: i0.Output, args: ["openFullScreen"] }], share: [{ type: i0.Output, args: ["share"] }], itemSwitch: [{ type: i0.Output, args: ["itemSwitch"] }], galleryItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclGalleryItemComponent), { isSignal: true }] }], galleryFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclGalleryFooterComponent), { isSignal: true }] }], overlayChild: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], headerChild: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], footerChild: [{ type: i0.ViewChild, args: ['footer', { isSignal: true }] }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], role: [{