@fundamental-ngx/platform 0.43.0-rc.2 → 0.43.0-rc.21

package/fesm2020/fundamental-ngx-platform-thumbnail.mjs

@@ -80,9 +80,9 @@ class ThumbnailImageComponent {
         image.overlayRequired ? this.openDialog(image) : this.thumbnailClick(image, event);
     }
 }
-ThumbnailImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ThumbnailImageComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DialogService }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ThumbnailImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ThumbnailImageComponent, selector: "fdp-thumbnail-image", inputs: { mediaList: "mediaList", isHorizontal: "isHorizontal", maxImages: "maxImages", roleDescription: "roleDescription", thumbnailId: "thumbnailId" }, outputs: { thumbnailClicked: "thumbnailClicked", openDetailsDialog: "openDetailsDialog" }, viewQueries: [{ propertyName: "thumbnailImages", predicate: ["thumbnailImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fdp-thumbnail-image-container\" role=\"listbox\">\n    <div\n        #thumbnailImage\n        *ngFor=\"let image of mediaList | slice: 0:maxImages; let i = index\"\n        [class]=\"isHorizontal ? 'fdp-thumbnail-image--horizontal' : 'fdp-thumbnail-image'\"\n        [class.fdp-thumbnail-image--selected]=\"image.selected\"\n        [class.fdp-thumbnail-image--overlay]=\"image.overlayRequired\"\n        (click)=\"openImage(image)\"\n        (keydown.space)=\"openImage(image, $event)\"\n        tabindex=\"0\"\n        role=\"option\"\n        [attr.aria-roledescription]=\"roleDescription || ('platformThumbnail.roleDescription' | fdTranslate)\"\n        [attr.aria-selected]=\"image.selected\"\n        [attr.title]=\"image.label\"\n        [attr.aria-label]=\"image.label\"\n    >\n        <fd-avatar [image]=\"image.thumbnailUrl\" size=\"m\"></fd-avatar>\n        <div class=\"fdp-thumbnail-overflow\" *ngIf=\"image.overlayRequired\">+{{ mediaList.length - maxImages }}</div>\n    </div>\n</div>\n", styles: [".fdp-thumbnail-image-container{display:block}.fdp-thumbnail-image-container .fdp-thumbnail-image{width:4.625rem;height:4.625rem;border:.015rem solid transparent;border-radius:.25rem;margin:.688rem;position:relative}.fdp-thumbnail-image-container .fdp-thumbnail-image fd-avatar{width:4.625rem;height:4.625rem;max-width:4.625rem;max-height:4.625rem}.fdp-thumbnail-image-container .fdp-thumbnail-image:hover{cursor:pointer;border-color:var(--sapLink_Hover_Color)}.fdp-thumbnail-image-container .fdp-thumbnail-image:focus,.fdp-thumbnail-image-container .fdp-thumbnail-image.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal{display:inline-block;border:.015rem solid transparent;background-clip:border-box;margin:.688rem;position:relative}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal:hover{cursor:pointer;border-color:var(--sapLink_Hover_Color)}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal:focus,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-image-container .fdp-thumbnail-image--selected,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected{margin:0;width:5.75rem;height:5.5rem;border:.015rem solid;border-radius:.25rem;border-color:#085caf;border-color:var(--sapButton_Emphasized_Hover_BorderColor, #085caf);border-width:var(--sapButton_BorderWidth)}.fdp-thumbnail-image-container .fdp-thumbnail-image--selected fd-avatar,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected fd-avatar{width:5.75rem;height:5.5rem;max-width:5.75rem;max-height:5.5rem}.fdp-thumbnail-image-container .fdp-thumbnail-image--overlay,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--overlay{opacity:.5}.fdp-thumbnail-image-container .fdp-thumbnail-overflow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;color:var(--sapShell_TextColor, #fff)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.FdTranslatePipe, name: "fdTranslate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ThumbnailImageComponent, decorators: [{
+ThumbnailImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ThumbnailImageComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DialogService }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ThumbnailImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ThumbnailImageComponent, selector: "fdp-thumbnail-image", inputs: { mediaList: "mediaList", isHorizontal: "isHorizontal", maxImages: "maxImages", roleDescription: "roleDescription", thumbnailId: "thumbnailId" }, outputs: { thumbnailClicked: "thumbnailClicked", openDetailsDialog: "openDetailsDialog" }, viewQueries: [{ propertyName: "thumbnailImages", predicate: ["thumbnailImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fdp-thumbnail-image-container\" role=\"listbox\">\n    <div\n        #thumbnailImage\n        *ngFor=\"let image of mediaList | slice: 0:maxImages; let i = index\"\n        [class]=\"isHorizontal ? 'fdp-thumbnail-image--horizontal' : 'fdp-thumbnail-image'\"\n        [class.fdp-thumbnail-image--selected]=\"image.selected\"\n        [class.fdp-thumbnail-image--overlay]=\"image.overlayRequired\"\n        (click)=\"openImage(image)\"\n        (keydown.space)=\"openImage(image, $event)\"\n        tabindex=\"0\"\n        role=\"option\"\n        [attr.aria-roledescription]=\"roleDescription || ('platformThumbnail.roleDescription' | fdTranslate)\"\n        [attr.aria-selected]=\"image.selected\"\n        [attr.title]=\"image.label\"\n        [attr.aria-label]=\"image.label\"\n    >\n        <fd-avatar [image]=\"image.thumbnailUrl\" size=\"m\"></fd-avatar>\n        <div class=\"fdp-thumbnail-overflow\" *ngIf=\"image.overlayRequired\">+{{ mediaList.length - maxImages }}</div>\n    </div>\n</div>\n", styles: [".fdp-thumbnail-image-container{display:block}.fdp-thumbnail-image-container .fdp-thumbnail-image{width:4.625rem;height:4.625rem;border:.015rem solid transparent;border-radius:.25rem;margin:.688rem;position:relative}.fdp-thumbnail-image-container .fdp-thumbnail-image fd-avatar{width:4.625rem;height:4.625rem;max-width:4.625rem;max-height:4.625rem}.fdp-thumbnail-image-container .fdp-thumbnail-image:hover{cursor:pointer;border-color:var(--sapLink_Hover_Color)}.fdp-thumbnail-image-container .fdp-thumbnail-image:focus,.fdp-thumbnail-image-container .fdp-thumbnail-image.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal{display:inline-block;border:.015rem solid transparent;background-clip:border-box;margin:.688rem;position:relative}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal:hover{cursor:pointer;border-color:var(--sapLink_Hover_Color)}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal:focus,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-image-container .fdp-thumbnail-image--selected,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected{margin:0;width:5.75rem;height:5.5rem;border:.015rem solid;border-radius:.25rem;border-color:#085caf;border-color:var(--sapButton_Emphasized_Hover_BorderColor, #085caf);border-width:var(--sapButton_BorderWidth)}.fdp-thumbnail-image-container .fdp-thumbnail-image--selected fd-avatar,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected fd-avatar{width:5.75rem;height:5.5rem;max-width:5.75rem;max-height:5.5rem}.fdp-thumbnail-image-container .fdp-thumbnail-image--overlay,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--overlay{opacity:.5}.fdp-thumbnail-image-container .fdp-thumbnail-overflow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;color:var(--sapShell_TextColor, #fff)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.FdTranslatePipe, name: "fdTranslate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ThumbnailImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-thumbnail-image', template: "<div class=\"fdp-thumbnail-image-container\" role=\"listbox\">\n    <div\n        #thumbnailImage\n        *ngFor=\"let image of mediaList | slice: 0:maxImages; let i = index\"\n        [class]=\"isHorizontal ? 'fdp-thumbnail-image--horizontal' : 'fdp-thumbnail-image'\"\n        [class.fdp-thumbnail-image--selected]=\"image.selected\"\n        [class.fdp-thumbnail-image--overlay]=\"image.overlayRequired\"\n        (click)=\"openImage(image)\"\n        (keydown.space)=\"openImage(image, $event)\"\n        tabindex=\"0\"\n        role=\"option\"\n        [attr.aria-roledescription]=\"roleDescription || ('platformThumbnail.roleDescription' | fdTranslate)\"\n        [attr.aria-selected]=\"image.selected\"\n        [attr.title]=\"image.label\"\n        [attr.aria-label]=\"image.label\"\n    >\n        <fd-avatar [image]=\"image.thumbnailUrl\" size=\"m\"></fd-avatar>\n        <div class=\"fdp-thumbnail-overflow\" *ngIf=\"image.overlayRequired\">+{{ mediaList.length - maxImages }}</div>\n    </div>\n</div>\n", styles: [".fdp-thumbnail-image-container{display:block}.fdp-thumbnail-image-container .fdp-thumbnail-image{width:4.625rem;height:4.625rem;border:.015rem solid transparent;border-radius:.25rem;margin:.688rem;position:relative}.fdp-thumbnail-image-container .fdp-thumbnail-image fd-avatar{width:4.625rem;height:4.625rem;max-width:4.625rem;max-height:4.625rem}.fdp-thumbnail-image-container .fdp-thumbnail-image:hover{cursor:pointer;border-color:var(--sapLink_Hover_Color)}.fdp-thumbnail-image-container .fdp-thumbnail-image:focus,.fdp-thumbnail-image-container .fdp-thumbnail-image.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal{display:inline-block;border:.015rem solid transparent;background-clip:border-box;margin:.688rem;position:relative}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal:hover{cursor:pointer;border-color:var(--sapLink_Hover_Color)}.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal:focus,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-image-container .fdp-thumbnail-image--selected,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected{margin:0;width:5.75rem;height:5.5rem;border:.015rem solid;border-radius:.25rem;border-color:#085caf;border-color:var(--sapButton_Emphasized_Hover_BorderColor, #085caf);border-width:var(--sapButton_BorderWidth)}.fdp-thumbnail-image-container .fdp-thumbnail-image--selected fd-avatar,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected fd-avatar{width:5.75rem;height:5.5rem;max-width:5.75rem;max-height:5.5rem}.fdp-thumbnail-image-container .fdp-thumbnail-image--overlay,.fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--overlay{opacity:.5}.fdp-thumbnail-image-container .fdp-thumbnail-overflow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;color:var(--sapShell_TextColor, #fff)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DialogService }, { type: i2.RtlService, decorators: [{
@@ -231,9 +231,9 @@ class ThumbnailDetailsComponent {
         }
     }
 }
-ThumbnailDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ThumbnailDetailsComponent, deps: [{ token: i1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ThumbnailDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ThumbnailDetailsComponent, selector: "fdp-thumbnail-details", host: { listeners: { "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)" } }, viewQueries: [{ propertyName: "thumbnailImage", first: true, predicate: i0.forwardRef(function () { return ThumbnailImageComponent; }), descendants: true }], ngImport: i0, template: "<fd-dialog [attr.dir]=\"_data.rtl ? 'rtl' : 'ltr'\">\n    <fd-dialog-header>\n        <h5 [attr.id]=\"_data.thumbnailId\" [headerSize]=\"5\" fd-title>{{ _data.selectedMedia.title }}</h5>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        <button\n            class=\"fd-button fdp-thumbnail-button--left\"\n            [title]=\"'platformThumbnail.detailsGotoPreviousButtonTitle' | fdTranslate\"\n            [attr.aria-label]=\"'platformThumbnail.detailsGotoPreviousButtonTitle' | fdTranslate\"\n            (click)=\"_data.rtl ? next() : previous()\"\n            [disabled]=\"leftButtonDisabled\"\n            [style.z-index]=\"1\"\n            data-slide=\"previous\"\n        >\n            <i class=\"sap-icon--slim-arrow-left\"></i>\n        </button>\n        <div class=\"fdp-media-container\">\n            <img\n                *ngIf=\"_data.selectedMedia.mediaType === 'image'\"\n                class=\"fdp-dialog-media-thumbnail-img\"\n                [attr.aria-label]=\"_data.selectedMedia.label\"\n                [src]=\"_data.selectedMedia.thumbnailUrl\"\n                alt=\"first image\"\n            />\n\n            <video\n                *ngIf=\"_data.selectedMedia.mediaType === 'video'\"\n                [attr.aria-label]=\"_data.selectedMedia.label\"\n                [src]=\"_data.selectedMedia.mediaUrl\"\n                controls\n            >\n                {{ _data.selectedMedia.alt }}\n                <track\n                    [src]=\"_data.selectedMedia.captionFile\"\n                    kind=\"captions\"\n                    srclang=\"en\"\n                    [label]=\"_data.selectedMedia.label\"\n                />\n                <track\n                    [src]=\"_data.selectedMedia.audioDescFile\"\n                    kind=\"descriptions\"\n                    srclang=\"en\"\n                    [label]=\"_data.selectedMedia.label\"\n                />\n            </video>\n        </div>\n        <button\n            class=\"fd-button fdp-thumbnail-button--right\"\n            [title]=\"'platformThumbnail.detailsGotoNextButtonTitle' | fdTranslate\"\n            [attr.aria-label]=\"'platformThumbnail.detailsGotoNextButtonTitle' | fdTranslate\"\n            (click)=\"_data.rtl ? previous() : next()\"\n            [disabled]=\"rightButtonDisabled\"\n            [style.z-index]=\"1\"\n            data-slide=\"next\"\n        >\n            <i class=\"sap-icon--slim-arrow-right\"></i>\n        </button>\n        <fdp-thumbnail-image\n            [mediaList]=\"_data.mediaList\"\n            [isHorizontal]=\"true\"\n            [maxImages]=\"_data.mediaList.length\"\n            (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        ></fdp-thumbnail-image>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                [label]=\"'platformThumbnail.detailsDialogCloseBtnLabel' | fdTranslate\"\n                fdType=\"transparent\"\n                (click)=\"closeDialog()\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [":host ::ng-deep fd-dialog :after{width:84rem;height:45.5rem}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left{position:absolute;top:50%;left:2rem;border-radius:50%}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left:hover{cursor:pointer}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left:disabled{cursor:default}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right{right:2rem;position:absolute;top:50%;border-radius:50%}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right:hover{cursor:pointer}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right:disabled{cursor:default}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container{position:relative;height:33.125rem;display:flex;width:84rem;max-width:100%;justify-content:center}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container:focus,:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container img{max-width:33.125rem;max-height:33.125rem;max-width:100%;height:auto;position:absolute;padding:.688rem;bottom:0}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container video{max-width:33.125rem;max-height:33.125rem;width:33.125rem;height:33.125rem;position:absolute;padding:.688rem;bottom:0;left:0}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container{text-align:center}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image{width:4.625rem;height:4.625rem}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container fd-avatar{width:4.625rem;height:4.625rem}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image--selected,:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected{width:inherit!important;height:inherit!important;border:.015rem solid;border-radius:.25rem;border-color:#085caf;border-color:var(--sapButton_Emphasized_Hover_BorderColor, #085caf)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "component", type: i3$1.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: ThumbnailImageComponent, selector: "fdp-thumbnail-image", inputs: ["mediaList", "isHorizontal", "maxImages", "roleDescription", "thumbnailId"], outputs: ["thumbnailClicked", "openDetailsDialog"] }, { kind: "pipe", type: i5.FdTranslatePipe, name: "fdTranslate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ThumbnailDetailsComponent, decorators: [{
+ThumbnailDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ThumbnailDetailsComponent, deps: [{ token: i1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ThumbnailDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ThumbnailDetailsComponent, selector: "fdp-thumbnail-details", host: { listeners: { "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)" } }, viewQueries: [{ propertyName: "thumbnailImage", first: true, predicate: i0.forwardRef(function () { return ThumbnailImageComponent; }), descendants: true }], ngImport: i0, template: "<fd-dialog [attr.dir]=\"_data.rtl ? 'rtl' : 'ltr'\">\n    <fd-dialog-header>\n        <h5 [attr.id]=\"_data.thumbnailId\" [headerSize]=\"5\" fd-title>{{ _data.selectedMedia.title }}</h5>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        <button\n            class=\"fd-button fdp-thumbnail-button--left\"\n            [title]=\"'platformThumbnail.detailsGotoPreviousButtonTitle' | fdTranslate\"\n            [attr.aria-label]=\"'platformThumbnail.detailsGotoPreviousButtonTitle' | fdTranslate\"\n            (click)=\"_data.rtl ? next() : previous()\"\n            [disabled]=\"leftButtonDisabled\"\n            [style.z-index]=\"1\"\n            data-slide=\"previous\"\n        >\n            <i class=\"sap-icon--slim-arrow-left\"></i>\n        </button>\n        <div class=\"fdp-media-container\">\n            <img\n                *ngIf=\"_data.selectedMedia.mediaType === 'image'\"\n                class=\"fdp-dialog-media-thumbnail-img\"\n                [attr.aria-label]=\"_data.selectedMedia.label\"\n                [src]=\"_data.selectedMedia.thumbnailUrl\"\n                alt=\"first image\"\n            />\n\n            <video\n                *ngIf=\"_data.selectedMedia.mediaType === 'video'\"\n                [attr.aria-label]=\"_data.selectedMedia.label\"\n                [src]=\"_data.selectedMedia.mediaUrl\"\n                controls\n            >\n                {{ _data.selectedMedia.alt }}\n                <track\n                    [src]=\"_data.selectedMedia.captionFile\"\n                    kind=\"captions\"\n                    srclang=\"en\"\n                    [label]=\"_data.selectedMedia.label\"\n                />\n                <track\n                    [src]=\"_data.selectedMedia.audioDescFile\"\n                    kind=\"descriptions\"\n                    srclang=\"en\"\n                    [label]=\"_data.selectedMedia.label\"\n                />\n            </video>\n        </div>\n        <button\n            class=\"fd-button fdp-thumbnail-button--right\"\n            [title]=\"'platformThumbnail.detailsGotoNextButtonTitle' | fdTranslate\"\n            [attr.aria-label]=\"'platformThumbnail.detailsGotoNextButtonTitle' | fdTranslate\"\n            (click)=\"_data.rtl ? previous() : next()\"\n            [disabled]=\"rightButtonDisabled\"\n            [style.z-index]=\"1\"\n            data-slide=\"next\"\n        >\n            <i class=\"sap-icon--slim-arrow-right\"></i>\n        </button>\n        <fdp-thumbnail-image\n            [mediaList]=\"_data.mediaList\"\n            [isHorizontal]=\"true\"\n            [maxImages]=\"_data.mediaList.length\"\n            (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        ></fdp-thumbnail-image>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                [label]=\"'platformThumbnail.detailsDialogCloseBtnLabel' | fdTranslate\"\n                fdType=\"transparent\"\n                (click)=\"closeDialog()\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [":host ::ng-deep fd-dialog :after{width:84rem;height:45.5rem}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left{position:absolute;top:50%;left:2rem;border-radius:50%}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left:hover{cursor:pointer}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left:disabled{cursor:default}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right{right:2rem;position:absolute;top:50%;border-radius:50%}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right:hover{cursor:pointer}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right:disabled{cursor:default}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container{position:relative;height:33.125rem;display:flex;width:84rem;max-width:100%;justify-content:center}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container:focus,:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container img{max-width:33.125rem;max-height:33.125rem;max-width:100%;height:auto;position:absolute;padding:.688rem;bottom:0}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container video{max-width:33.125rem;max-height:33.125rem;width:33.125rem;height:33.125rem;position:absolute;padding:.688rem;bottom:0;left:0}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container{text-align:center}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image{width:4.625rem;height:4.625rem}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container fd-avatar{width:4.625rem;height:4.625rem}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image--selected,:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected{width:inherit!important;height:inherit!important;border:.015rem solid;border-radius:.25rem;border-color:#085caf;border-color:var(--sapButton_Emphasized_Hover_BorderColor, #085caf)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "component", type: i3$1.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: ThumbnailImageComponent, selector: "fdp-thumbnail-image", inputs: ["mediaList", "isHorizontal", "maxImages", "roleDescription", "thumbnailId"], outputs: ["thumbnailClicked", "openDetailsDialog"] }, { kind: "pipe", type: i5.FdTranslatePipe, name: "fdTranslate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ThumbnailDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-thumbnail-details', template: "<fd-dialog [attr.dir]=\"_data.rtl ? 'rtl' : 'ltr'\">\n    <fd-dialog-header>\n        <h5 [attr.id]=\"_data.thumbnailId\" [headerSize]=\"5\" fd-title>{{ _data.selectedMedia.title }}</h5>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        <button\n            class=\"fd-button fdp-thumbnail-button--left\"\n            [title]=\"'platformThumbnail.detailsGotoPreviousButtonTitle' | fdTranslate\"\n            [attr.aria-label]=\"'platformThumbnail.detailsGotoPreviousButtonTitle' | fdTranslate\"\n            (click)=\"_data.rtl ? next() : previous()\"\n            [disabled]=\"leftButtonDisabled\"\n            [style.z-index]=\"1\"\n            data-slide=\"previous\"\n        >\n            <i class=\"sap-icon--slim-arrow-left\"></i>\n        </button>\n        <div class=\"fdp-media-container\">\n            <img\n                *ngIf=\"_data.selectedMedia.mediaType === 'image'\"\n                class=\"fdp-dialog-media-thumbnail-img\"\n                [attr.aria-label]=\"_data.selectedMedia.label\"\n                [src]=\"_data.selectedMedia.thumbnailUrl\"\n                alt=\"first image\"\n            />\n\n            <video\n                *ngIf=\"_data.selectedMedia.mediaType === 'video'\"\n                [attr.aria-label]=\"_data.selectedMedia.label\"\n                [src]=\"_data.selectedMedia.mediaUrl\"\n                controls\n            >\n                {{ _data.selectedMedia.alt }}\n                <track\n                    [src]=\"_data.selectedMedia.captionFile\"\n                    kind=\"captions\"\n                    srclang=\"en\"\n                    [label]=\"_data.selectedMedia.label\"\n                />\n                <track\n                    [src]=\"_data.selectedMedia.audioDescFile\"\n                    kind=\"descriptions\"\n                    srclang=\"en\"\n                    [label]=\"_data.selectedMedia.label\"\n                />\n            </video>\n        </div>\n        <button\n            class=\"fd-button fdp-thumbnail-button--right\"\n            [title]=\"'platformThumbnail.detailsGotoNextButtonTitle' | fdTranslate\"\n            [attr.aria-label]=\"'platformThumbnail.detailsGotoNextButtonTitle' | fdTranslate\"\n            (click)=\"_data.rtl ? previous() : next()\"\n            [disabled]=\"rightButtonDisabled\"\n            [style.z-index]=\"1\"\n            data-slide=\"next\"\n        >\n            <i class=\"sap-icon--slim-arrow-right\"></i>\n        </button>\n        <fdp-thumbnail-image\n            [mediaList]=\"_data.mediaList\"\n            [isHorizontal]=\"true\"\n            [maxImages]=\"_data.mediaList.length\"\n            (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        ></fdp-thumbnail-image>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                [label]=\"'platformThumbnail.detailsDialogCloseBtnLabel' | fdTranslate\"\n                fdType=\"transparent\"\n                (click)=\"closeDialog()\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [":host ::ng-deep fd-dialog :after{width:84rem;height:45.5rem}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left{position:absolute;top:50%;left:2rem;border-radius:50%}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left:hover{cursor:pointer}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--left:disabled{cursor:default}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right{right:2rem;position:absolute;top:50%;border-radius:50%}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right:hover{cursor:pointer}:host ::ng-deep fd-dialog fd-dialog-body .fdp-thumbnail-button--right:disabled{cursor:default}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container{position:relative;height:33.125rem;display:flex;width:84rem;max-width:100%;justify-content:center}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container:focus,:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container img{max-width:33.125rem;max-height:33.125rem;max-width:100%;height:auto;position:absolute;padding:.688rem;bottom:0}:host ::ng-deep fd-dialog fd-dialog-body .fdp-media-container video{max-width:33.125rem;max-height:33.125rem;width:33.125rem;height:33.125rem;position:absolute;padding:.688rem;bottom:0;left:0}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container{text-align:center}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image{width:4.625rem;height:4.625rem}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container fd-avatar{width:4.625rem;height:4.625rem}:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image--selected,:host ::ng-deep fd-dialog .fdp-thumbnail-image-container .fdp-thumbnail-image--horizontal.fdp-thumbnail-image--selected{width:inherit!important;height:inherit!important;border:.015rem solid;border-radius:.25rem;border-color:#085caf;border-color:var(--sapButton_Emphasized_Hover_BorderColor, #085caf)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { thumbnailImage: [{
@@ -358,9 +358,9 @@ class ThumbnailComponent extends BaseComponent {
         this._cdr.detectChanges();
     }
 }
-ThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ThumbnailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DialogService }, { token: i2.RtlService, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ThumbnailComponent, selector: "fdp-thumbnail", inputs: { mediaList: "mediaList", isHorizontal: "isHorizontal", maxImagesDisplay: "maxImagesDisplay" }, outputs: { thumbnailClicked: "thumbnailClicked" }, host: { listeners: { "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)" } }, viewQueries: [{ propertyName: "thumbnailImage", first: true, predicate: i0.forwardRef(function () { return ThumbnailImageComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-thumbnail-container\" [class.fdp-thumbnail-container--horizontal]=\"isHorizontal\">\n    <fdp-thumbnail-image\n        *ngIf=\"!isHorizontal\"\n        [thumbnailId]=\"thumbnailId\"\n        [mediaList]=\"mediaList\"\n        [maxImages]=\"maxImagesDisplay\"\n        [isHorizontal]=\"isHorizontal\"\n        (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        (openDetailsDialog)=\"openDialog($event)\"\n    ></fdp-thumbnail-image>\n    <div class=\"fdp-media-container\">\n        <img\n            tabindex=\"0\"\n            *ngIf=\"selectedMedia.mediaType === 'image'\"\n            [attr.title]=\"selectedMedia.label\"\n            [attr.aria-label]=\"selectedMedia.label\"\n            [attr.src]=\"selectedMedia.mediaUrl\"\n            [attr.alt]=\"selectedMedia.alt\"\n            (click)=\"openDialog()\"\n            (keydown.space)=\"openDialog()\"\n        />\n        <video\n            tabindex=\"0\"\n            *ngIf=\"selectedMedia.mediaType === 'video'\"\n            [src]=\"selectedMedia.mediaUrl\"\n            (click)=\"openDialog()\"\n            (keydown.space)=\"openDialog()\"\n            [attr.aria-label]=\"selectedMedia.label\"\n        >\n            {{ selectedMedia.alt }}\n            <track [src]=\"selectedMedia.captionFile\" kind=\"captions\" srclang=\"en\" [label]=\"selectedMedia.label\" />\n            <track [src]=\"selectedMedia.audioDescFile\" kind=\"descriptions\" srclang=\"en\" [label]=\"selectedMedia.label\" />\n        </video>\n    </div>\n    <fdp-thumbnail-image\n        *ngIf=\"isHorizontal\"\n        [mediaList]=\"mediaList\"\n        [maxImages]=\"maxImagesDisplay\"\n        [isHorizontal]=\"isHorizontal\"\n        (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        (openDetailsDialog)=\"openDialog($event)\"\n    ></fdp-thumbnail-image>\n</div>\n", styles: [".fdp-thumbnail-container{display:inline-flex;width:100%;height:auto}.fdp-thumbnail-container.fdp-thumbnail-container--horizontal{display:block}.fdp-thumbnail-container.fdp-thumbnail-container--horizontal .fdp-media-container{width:100%;max-width:33.125rem;height:33.125rem;padding:.688rem;margin:1rem;inline-size:auto}.fdp-thumbnail-container img{width:100%;height:auto;max-width:33.125rem;max-height:33.125rem;position:absolute}.fdp-thumbnail-container img:focus,.fdp-thumbnail-container img.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-container video{width:100%;height:auto;max-width:33.125rem;max-height:33.125rem;position:absolute}.fdp-thumbnail-container video:focus,.fdp-thumbnail-container video.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-container .fdp-media-container{position:relative;width:100%;max-width:33.125rem;height:33.125rem;padding:.688rem;margin:1rem;background-color:var(--sapNeutralBackground)}[dir=rtl] .fdp-thumbnail-container .fdp-media-container{margin-left:0;margin-right:1rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThumbnailImageComponent, selector: "fdp-thumbnail-image", inputs: ["mediaList", "isHorizontal", "maxImages", "roleDescription", "thumbnailId"], outputs: ["thumbnailClicked", "openDetailsDialog"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ThumbnailComponent, decorators: [{
+ThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ThumbnailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DialogService }, { token: i2.RtlService, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ThumbnailComponent, selector: "fdp-thumbnail", inputs: { mediaList: "mediaList", isHorizontal: "isHorizontal", maxImagesDisplay: "maxImagesDisplay" }, outputs: { thumbnailClicked: "thumbnailClicked" }, host: { listeners: { "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)" } }, viewQueries: [{ propertyName: "thumbnailImage", first: true, predicate: i0.forwardRef(function () { return ThumbnailImageComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-thumbnail-container\" [class.fdp-thumbnail-container--horizontal]=\"isHorizontal\">\n    <fdp-thumbnail-image\n        *ngIf=\"!isHorizontal\"\n        [thumbnailId]=\"thumbnailId\"\n        [mediaList]=\"mediaList\"\n        [maxImages]=\"maxImagesDisplay\"\n        [isHorizontal]=\"isHorizontal\"\n        (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        (openDetailsDialog)=\"openDialog($event)\"\n    ></fdp-thumbnail-image>\n    <div class=\"fdp-media-container\">\n        <img\n            tabindex=\"0\"\n            *ngIf=\"selectedMedia.mediaType === 'image'\"\n            [attr.title]=\"selectedMedia.label\"\n            [attr.aria-label]=\"selectedMedia.label\"\n            [attr.src]=\"selectedMedia.mediaUrl\"\n            [attr.alt]=\"selectedMedia.alt\"\n            (click)=\"openDialog()\"\n            (keydown.space)=\"openDialog()\"\n        />\n        <video\n            tabindex=\"0\"\n            *ngIf=\"selectedMedia.mediaType === 'video'\"\n            [src]=\"selectedMedia.mediaUrl\"\n            (click)=\"openDialog()\"\n            (keydown.space)=\"openDialog()\"\n            [attr.aria-label]=\"selectedMedia.label\"\n        >\n            {{ selectedMedia.alt }}\n            <track [src]=\"selectedMedia.captionFile\" kind=\"captions\" srclang=\"en\" [label]=\"selectedMedia.label\" />\n            <track [src]=\"selectedMedia.audioDescFile\" kind=\"descriptions\" srclang=\"en\" [label]=\"selectedMedia.label\" />\n        </video>\n    </div>\n    <fdp-thumbnail-image\n        *ngIf=\"isHorizontal\"\n        [mediaList]=\"mediaList\"\n        [maxImages]=\"maxImagesDisplay\"\n        [isHorizontal]=\"isHorizontal\"\n        (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        (openDetailsDialog)=\"openDialog($event)\"\n    ></fdp-thumbnail-image>\n</div>\n", styles: [".fdp-thumbnail-container{display:inline-flex;width:100%;height:auto}.fdp-thumbnail-container.fdp-thumbnail-container--horizontal{display:block}.fdp-thumbnail-container.fdp-thumbnail-container--horizontal .fdp-media-container{width:100%;max-width:33.125rem;height:33.125rem;padding:.688rem;margin:1rem;inline-size:auto}.fdp-thumbnail-container img{width:100%;height:auto;max-width:33.125rem;max-height:33.125rem;position:absolute}.fdp-thumbnail-container img:focus,.fdp-thumbnail-container img.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-container video{width:100%;height:auto;max-width:33.125rem;max-height:33.125rem;position:absolute}.fdp-thumbnail-container video:focus,.fdp-thumbnail-container video.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-container .fdp-media-container{position:relative;width:100%;max-width:33.125rem;height:33.125rem;padding:.688rem;margin:1rem;background-color:var(--sapNeutralBackground)}[dir=rtl] .fdp-thumbnail-container .fdp-media-container{margin-left:0;margin-right:1rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThumbnailImageComponent, selector: "fdp-thumbnail-image", inputs: ["mediaList", "isHorizontal", "maxImages", "roleDescription", "thumbnailId"], outputs: ["thumbnailClicked", "openDetailsDialog"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-thumbnail', encapsulation: ViewEncapsulation.None, template: "<div class=\"fdp-thumbnail-container\" [class.fdp-thumbnail-container--horizontal]=\"isHorizontal\">\n    <fdp-thumbnail-image\n        *ngIf=\"!isHorizontal\"\n        [thumbnailId]=\"thumbnailId\"\n        [mediaList]=\"mediaList\"\n        [maxImages]=\"maxImagesDisplay\"\n        [isHorizontal]=\"isHorizontal\"\n        (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        (openDetailsDialog)=\"openDialog($event)\"\n    ></fdp-thumbnail-image>\n    <div class=\"fdp-media-container\">\n        <img\n            tabindex=\"0\"\n            *ngIf=\"selectedMedia.mediaType === 'image'\"\n            [attr.title]=\"selectedMedia.label\"\n            [attr.aria-label]=\"selectedMedia.label\"\n            [attr.src]=\"selectedMedia.mediaUrl\"\n            [attr.alt]=\"selectedMedia.alt\"\n            (click)=\"openDialog()\"\n            (keydown.space)=\"openDialog()\"\n        />\n        <video\n            tabindex=\"0\"\n            *ngIf=\"selectedMedia.mediaType === 'video'\"\n            [src]=\"selectedMedia.mediaUrl\"\n            (click)=\"openDialog()\"\n            (keydown.space)=\"openDialog()\"\n            [attr.aria-label]=\"selectedMedia.label\"\n        >\n            {{ selectedMedia.alt }}\n            <track [src]=\"selectedMedia.captionFile\" kind=\"captions\" srclang=\"en\" [label]=\"selectedMedia.label\" />\n            <track [src]=\"selectedMedia.audioDescFile\" kind=\"descriptions\" srclang=\"en\" [label]=\"selectedMedia.label\" />\n        </video>\n    </div>\n    <fdp-thumbnail-image\n        *ngIf=\"isHorizontal\"\n        [mediaList]=\"mediaList\"\n        [maxImages]=\"maxImagesDisplay\"\n        [isHorizontal]=\"isHorizontal\"\n        (thumbnailClicked)=\"thumbnailClickHandle($event)\"\n        (openDetailsDialog)=\"openDialog($event)\"\n    ></fdp-thumbnail-image>\n</div>\n", styles: [".fdp-thumbnail-container{display:inline-flex;width:100%;height:auto}.fdp-thumbnail-container.fdp-thumbnail-container--horizontal{display:block}.fdp-thumbnail-container.fdp-thumbnail-container--horizontal .fdp-media-container{width:100%;max-width:33.125rem;height:33.125rem;padding:.688rem;margin:1rem;inline-size:auto}.fdp-thumbnail-container img{width:100%;height:auto;max-width:33.125rem;max-height:33.125rem;position:absolute}.fdp-thumbnail-container img:focus,.fdp-thumbnail-container img.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-container video{width:100%;height:auto;max-width:33.125rem;max-height:33.125rem;position:absolute}.fdp-thumbnail-container video:focus,.fdp-thumbnail-container video.is-focus{outline-offset:.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fdp-thumbnail-container .fdp-media-container{position:relative;width:100%;max-width:33.125rem;height:33.125rem;padding:.688rem;margin:1rem;background-color:var(--sapNeutralBackground)}[dir=rtl] .fdp-thumbnail-container .fdp-media-container{margin-left:0;margin-right:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DialogService }, { type: i2.RtlService, decorators: [{
@@ -386,10 +386,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 class PlatformThumbnailModule {
 }
-PlatformThumbnailModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PlatformThumbnailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PlatformThumbnailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: PlatformThumbnailModule, declarations: [ThumbnailComponent, ThumbnailImageComponent, ThumbnailDetailsComponent], imports: [CommonModule, AvatarModule, DialogModule, CarouselModule, ButtonModule, I18nModule], exports: [ThumbnailComponent, ThumbnailImageComponent, ThumbnailDetailsComponent] });
-PlatformThumbnailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PlatformThumbnailModule, providers: [RtlService, DialogRef], imports: [CommonModule, AvatarModule, DialogModule, CarouselModule, ButtonModule, I18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PlatformThumbnailModule, decorators: [{
+PlatformThumbnailModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PlatformThumbnailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PlatformThumbnailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PlatformThumbnailModule, declarations: [ThumbnailComponent, ThumbnailImageComponent, ThumbnailDetailsComponent], imports: [CommonModule, AvatarModule, DialogModule, CarouselModule, ButtonModule, I18nModule], exports: [ThumbnailComponent, ThumbnailImageComponent, ThumbnailDetailsComponent] });
+PlatformThumbnailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PlatformThumbnailModule, providers: [RtlService, DialogRef], imports: [CommonModule, AvatarModule, DialogModule, CarouselModule, ButtonModule, I18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PlatformThumbnailModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ThumbnailComponent, ThumbnailImageComponent, ThumbnailDetailsComponent],