{"version":3,"file":"static/js/46c99b7ebe9e476c9c82.bundle.js","mappings":"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","sources":["webpack://Msdyn365.Commerce.Online/./src/modules/media-gallery/media-gallery.props.autogenerated.ts?53ce","webpack://Msdyn365.Commerce.Online/./src/modules/media-gallery/utils/get-valid-product-images.ts?e579","webpack://Msdyn365.Commerce.Online/./src/modules/media-gallery/media-gallery.tsx?d0cb","webpack://Msdyn365.Commerce.Online/./src/modules/media-gallery/media-gallery.view.tsx?d842","webpack://Msdyn365.Commerce.Online/./lib/media-gallery/module-registration.js?47e5","webpack://Msdyn365.Commerce.Online/./src/modules/media-gallery/media-gallery.view.tsx?5061","webpack://Msdyn365.Commerce.Online/./src/modules/media-gallery/utils/helper.ts?b895","webpack://Msdyn365.Commerce.Online/./src/modules/media-gallery/media-gallery.tsx?24d7","webpack://Msdyn365.Commerce.Online/./src/modules/adventureworks/views/media-gallery.view.tsx?7624","webpack://Msdyn365.Commerce.Online/external var \"React\"?0d3b","webpack://Msdyn365.Commerce.Online/external var \"ReactDOM\"?853b"],"sourcesContent":["/**\r\n * Copyright (c) Microsoft Corporation\r\n * All rights reserved. See License.txt in the project root for license information.\r\n * IMediaGallery contentModule Interface Properties\r\n * THIS FILE IS AUTO-GENERATED - MANUAL MODIFICATIONS WILL BE LOST\r\n */\r\n\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\n\r\nexport const enum imageSource {\r\n    pageContext = 'pageContext',\r\n    productId = 'productId'\r\n}\r\n\r\nexport const enum imageZoom {\r\n    inline = 'inline',\r\n    container = 'container'\r\n}\r\n\r\nexport const enum thumbnailsOrientation {\r\n    vertical = 'vertical',\r\n    horizontal = 'horizontal'\r\n}\r\n\r\nexport interface IMediaGalleryConfig extends Msdyn365.IModuleConfig {\r\n    imageSource?: imageSource;\r\n    images?: Msdyn365.IImageData[];\r\n    productId?: string;\r\n    imageZoom?: imageZoom;\r\n    allowFullScreen?: boolean;\r\n    dataScale?: string;\r\n    zoomedImageSettings?: Msdyn365.IImageSettings;\r\n    thumbnailsOrientation?: thumbnailsOrientation;\r\n    thumbnailImageSettings?: Msdyn365.IImageSettings;\r\n    galleryImageSettings?: Msdyn365.IImageSettings;\r\n    shouldHideMasterProductImagesForVariant?: boolean;\r\n    showPaginationTooltip?: boolean;\r\n    shouldUpdateOnPartialDimensionSelection?: boolean;\r\n    className?: string;\r\n    skipImageValidation?: boolean;\r\n    clientRender?: boolean;\r\n}\r\n\r\nexport interface IMediaGalleryResources {\r\n    nextScreenshotFlipperText: string;\r\n    previousScreenshotFlipperText: string;\r\n    fullScreenTitleText: string;\r\n    ariaLabelForSlide: string;\r\n}\r\n\r\nexport interface IMediaGalleryProps<T> extends Msdyn365.IModule<T> {\r\n    resources: IMediaGalleryResources;\r\n    config: IMediaGalleryConfig;\r\n}\r\n","/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport { getCatalogId, IActionContext, IImageData, IImageSettings } from '@msdyn365-commerce/core';\r\nimport { MediaLocation, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\r\nimport { getMediaLocationsForSelectedVariant, MediaLocationsForSelectedVariantInput } from '@msdyn365-commerce-modules/retail-actions';\r\n\r\nexport async function getValidProductImages(\r\n    productId: number,\r\n    channelId: number,\r\n    actionContext: IActionContext,\r\n    imageSettings: IImageSettings,\r\n    selectedProduct?: SimpleProduct\r\n): Promise<IImageData[]> {\r\n    const catalogId = getCatalogId(actionContext.requestContext);\r\n    const actionInput = new MediaLocationsForSelectedVariantInput(productId, channelId, selectedProduct, catalogId);\r\n\r\n    return getMediaLocationsForSelectedVariant(actionInput, actionContext)\r\n        .then(mediaLocations => {\r\n            if (mediaLocations) {\r\n                return Promise.all(mediaLocations.map(mediaLocation => validateMediaLocaionAsync(mediaLocation, imageSettings))).then(\r\n                    pairs => {\r\n                        return pairs.filter(pair => pair[1]).map(pair => pair[0]);\r\n                    }\r\n                );\r\n            }\r\n\r\n            return [];\r\n        })\r\n        .catch(error => {\r\n            actionContext.telemetry.exception(error);\r\n            actionContext.telemetry.debug('Unable to get Media Locations for Selected Variant');\r\n            return [];\r\n        });\r\n}\r\n\r\nexport async function validateProductImages(\r\n    mediaLocations: MediaLocation[],\r\n    actionContext: IActionContext,\r\n    imageSettings: IImageSettings\r\n): Promise<IImageData[]> {\r\n    return Promise.all(mediaLocations.map(mediaLocation => validateMediaLocaionAsync(mediaLocation, imageSettings)))\r\n        .then(pairs => {\r\n            return pairs.filter(pair => pair[1]).map(pair => pair[0]);\r\n        })\r\n        .catch(error => {\r\n            actionContext.telemetry.exception(error);\r\n            actionContext.telemetry.debug('Unable to validate prodcut images');\r\n            return [];\r\n        });\r\n}\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-unused-vars-experimental -- .\r\nasync function validateMediaLocaionAsync(mediaLocation: MediaLocation, imageSettings?: IImageSettings): Promise<[IImageData, boolean]> {\r\n    const imageData = {\r\n        src: mediaLocation.Uri || '',\r\n        altText: mediaLocation.AltText || ''\r\n    };\r\n\r\n    if (imageData.src === '') {\r\n        return [imageData, false];\r\n    }\r\n\r\n    return new Promise<[IImageData, boolean]>(resolve => {\r\n        try {\r\n            const http = new XMLHttpRequest();\r\n            http.open('HEAD', imageData.src, true);\r\n\r\n            http.addEventListener('load', () => {\r\n                resolve([imageData, http.status === 200 || http.status === 201]);\r\n            });\r\n\r\n            http.addEventListener('error', () => {\r\n                resolve([imageData, false]);\r\n            });\r\n\r\n            http.send();\r\n        } catch {\r\n            resolve([imageData, false]);\r\n        }\r\n    });\r\n}\r\n","/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport { Carousel, ICarouselProps } from '@msdyn365-commerce/components';\r\nimport { IImageData, IImageSettings, Image } from '@msdyn365-commerce/core';\r\nimport { MediaLocation, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\r\nimport { ArrayExtensions, getFallbackImageUrl, ObjectExtensions, ISelectedProduct } from '@msdyn365-commerce-modules/retail-actions';\r\n\r\nimport {\r\n    defaultDataScale,\r\n    IComponentNodeProps,\r\n    ImagefullView,\r\n    IModalViewProps,\r\n    IModuleProps,\r\n    inlineZoomImageOnHover,\r\n    inlineZoomImageOnMouseMove,\r\n    inlineZoomImageOnMouseOut,\r\n    inlineZoomInitClick,\r\n    INodeProps,\r\n    ISingleSlideCarouselProps,\r\n    isMobile,\r\n    KeyCodes,\r\n    NodeTag,\r\n    onContainerZoomInit,\r\n    onMouseMoveLensContainer,\r\n    onMouseOutLensContainer,\r\n    onMouseOverImageContainer,\r\n    removeContainerZoomStyle,\r\n    removeInlineZoomStyle,\r\n    SingleSlideCarousel,\r\n    VariantType\r\n} from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport { reaction } from 'mobx';\r\nimport * as React from 'react';\r\n\r\nimport { IMediaGalleryData } from './media-gallery.data';\r\nimport { imageSource, imageZoom, IMediaGalleryProps, thumbnailsOrientation } from './media-gallery.props.autogenerated';\r\nimport { getValidProductImages, validateProductImages } from './utils';\r\n\r\n/**\r\n * IMediaGalleryState Interface.\r\n */\r\nexport interface IMediaGalleryState {\r\n    animating: boolean;\r\n    activeIndex: number;\r\n    isImageZoomed: boolean;\r\n    modalIsOpen: boolean;\r\n    lastUpdate?: number;\r\n    isMobileImageZoomed?: boolean;\r\n    mediaGalleryItems?: IImageData[];\r\n    isInitialLoad?: boolean;\r\n    shouldUseOptimizedImage?: boolean;\r\n    lastSelectedProduct?: ISelectedProduct;\r\n}\r\n\r\n/**\r\n * IMediaGalleryThumbnailsViewProps Interface.\r\n */\r\nexport interface IMediaGalleryThumbnailsViewProps {\r\n    ThumbnailsContainerProps: INodeProps;\r\n    SingleSlideCarouselComponentProps: INodeProps;\r\n    items?: IMediaGalleryThumbnailItemViewProps[];\r\n}\r\n\r\n/**\r\n * IMediaGalleryThumbnailItemViewProps Interface.\r\n */\r\nexport interface IMediaGalleryThumbnailItemViewProps {\r\n    ThumbnailItemContainerProps: INodeProps;\r\n    Picture: React.ReactElement;\r\n}\r\n\r\n/**\r\n * IMediaGalleryViewProps Interface.\r\n */\r\nexport interface IMediaGalleryViewProps extends IMediaGalleryProps<IMediaGalleryData> {\r\n    state: IMediaGalleryState;\r\n    MediaGallery: IModuleProps;\r\n    CarouselProps: INodeProps;\r\n    Thumbnails: IMediaGalleryThumbnailsViewProps;\r\n    Modal?: React.ReactElement | null;\r\n    callbackToggle?(): void;\r\n    callbackThumbnailClick?(index: number): void;\r\n    callbackThumbnailKeyDown?(index: number): void;\r\n}\r\n\r\n/**\r\n * Props for carousel.\r\n */\r\ninterface IMediaGalleryCarouselItems<ItemType> {\r\n    items: ItemType[];\r\n    keys: (string | undefined)[];\r\n}\r\n\r\n/**\r\n * Media gallery component.\r\n */\r\nclass MediaGallery extends React.Component<IMediaGalleryProps<IMediaGalleryData>, IMediaGalleryState> {\r\n    private readonly _inlineZoomDivRef: Map<number, HTMLDivElement> = new Map();\r\n\r\n    private readonly fullScreenOverlayButtonRef: React.RefObject<HTMLAnchorElement> = React.createRef();\r\n\r\n    private mediaGalleryImages: IImageData[] = [];\r\n\r\n    private fallbackImage?: string;\r\n\r\n    private readonly defaultGalleryImageSettings: IImageSettings = {\r\n        viewports: {\r\n            xs: { q: 'w=767&h=767&m=8', w: 0, h: 0 },\r\n            sm: { q: 'w=600&h=600&m=8', w: 0, h: 0 },\r\n            md: { q: 'w=600&h=772&m=8', w: 0, h: 0 },\r\n            lg: { q: 'h=772&m=8', w: 0, h: 0 }\r\n        },\r\n        lazyload: true,\r\n        cropFocalRegion: true\r\n    };\r\n\r\n    private readonly defaultThumbnailImageSettings: IImageSettings = {\r\n        viewports: {\r\n            xs: { q: 'w=100&m=8', w: 100, h: 0 },\r\n            lg: { q: 'w=100&m=8', w: 100, h: 0 }\r\n        },\r\n        lazyload: true,\r\n        cropFocalRegion: true\r\n    };\r\n\r\n    private readonly _zoomedImageSettings: IImageSettings;\r\n\r\n    public constructor(props: IMediaGalleryProps<IMediaGalleryData>) {\r\n        super(props);\r\n        this._toggleModal = this._toggleModal.bind(this);\r\n        this.state = {\r\n            activeIndex: 0,\r\n            animating: false,\r\n            isImageZoomed: false,\r\n            modalIsOpen: false,\r\n            isInitialLoad: true,\r\n            shouldUseOptimizedImage: !!this.props.config.skipImageValidation\r\n        };\r\n\r\n        this._zoomedImageSettings =\r\n            props.config.zoomedImageSettings ?? props.config.galleryImageSettings ?? this.defaultGalleryImageSettings;\r\n\r\n        this._onImageMouseOut = this._onImageMouseOut.bind(this);\r\n        this._inlineZoomImageOnHover = this._inlineZoomImageOnHover.bind(this);\r\n        this._onInlineImageClick = this._onInlineImageClick.bind(this);\r\n        this._onContainerZoomImageClick = this._onContainerZoomImageClick.bind(this);\r\n        this._onMouseOutLensContainer = this._onMouseOutLensContainer.bind(this);\r\n    }\r\n\r\n    public isMobile(): boolean {\r\n        const size = isMobile({ variant: VariantType.Viewport, context: this.props.context.request });\r\n        return size === 'xs';\r\n    }\r\n\r\n    public async componentDidMount(): Promise<void> {\r\n        const source = this.props.config.imageSource ?? imageSource.pageContext;\r\n        const shouldUpdateOnPartialDimensionSelection = this.props.config.shouldUpdateOnPartialDimensionSelection;\r\n        this._setRenderType();\r\n        if (source === imageSource.pageContext) {\r\n            if (this.state.mediaGalleryItems === undefined && this.props.data.mediaLocationsForSelectedVariant.result) {\r\n                const images = await validateProductImages(\r\n                    this.props.data.mediaLocationsForSelectedVariant.result,\r\n                    this.props.context.actionContext,\r\n                    this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings\r\n                );\r\n                this._setImages(images);\r\n            } else if (this.state.mediaGalleryItems === undefined && this.props.data.product.result) {\r\n                const product = this.props.data.product.result;\r\n                const images = await getValidProductImages(\r\n                    product.RecordId,\r\n                    +this.props.context.request.apiSettings.channelId,\r\n                    this.props.context.actionContext,\r\n                    this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\r\n                    product.productVariant\r\n                );\r\n                this._setImages(images);\r\n            } else {\r\n                this._setImages([]);\r\n            }\r\n\r\n            reaction(\r\n                () => {\r\n                    const product = this.props.data.product.result;\r\n                    if (!product) {\r\n                        return null;\r\n                    }\r\n\r\n                    if (!shouldUpdateOnPartialDimensionSelection || ObjectExtensions.isNullOrUndefined(product.productVariant?.RecordId)) {\r\n                        return `${product.RecordId}`;\r\n                    }\r\n\r\n                    return `${product.RecordId}-${product.productVariant!.RecordId}`;\r\n                },\r\n                async () => {\r\n                    const product = this.props.data.product.result;\r\n                    if (product) {\r\n                        const { lastSelectedProduct } = this.state;\r\n                        let differsBeyondSize = false;\r\n                        if (!lastSelectedProduct) {\r\n                            differsBeyondSize = true;\r\n                        } else {\r\n                            // check previous variant's dimensions against new one\r\n                            product?.Dimensions?.forEach(dimension => {\r\n                                const lastSelectedDimension = lastSelectedProduct?.Dimensions?.find(\r\n                                    lastDimension =>\r\n                                        dimension.DimensionTypeValue === lastDimension.DimensionTypeValue &&\r\n                                        dimension.DimensionValue?.Value !== lastDimension.DimensionValue?.Value\r\n                                );\r\n                                // there'll only be a dimension to look at if it had a different value\r\n                                // 3 = size dimeension inside D365\r\n                                if (lastSelectedDimension && lastSelectedDimension.DimensionTypeValue !== 3) {\r\n                                    differsBeyondSize = true;\r\n                                }\r\n                            });\r\n                        }\r\n\r\n                        this.setState({ lastSelectedProduct: product });\r\n                        // only set new images if they differ beyond size\r\n                        if (differsBeyondSize) {\r\n                            const images = await getValidProductImages(\r\n                                product.RecordId,\r\n                                +this.props.context.request.apiSettings.channelId,\r\n                                this.props.context.actionContext,\r\n                                this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\r\n                                shouldUpdateOnPartialDimensionSelection ? product.productVariant : undefined\r\n                            );\r\n                            this._setImages(images);\r\n                        }\r\n                    } else {\r\n                        this._setImages([]);\r\n                    }\r\n                }\r\n            );\r\n        }\r\n\r\n        if (source === imageSource.productId && this.props.data.mediaLocations.result) {\r\n            const images = await validateProductImages(\r\n                this.props.data.mediaLocations.result,\r\n                this.props.context.actionContext,\r\n                this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings\r\n            );\r\n            this._setImages(images);\r\n        }\r\n    }\r\n\r\n    public shouldComponentUpdate(nextProps: IMediaGalleryProps<IMediaGalleryData>, nextState: IMediaGalleryState): boolean {\r\n        if (this.state === nextState && this.props.data === nextProps.data) {\r\n            return false;\r\n        }\r\n        return true;\r\n    }\r\n\r\n    public render(): JSX.Element {\r\n        const { id, config, resources } = this.props;\r\n\r\n        const { className, showPaginationTooltip } = config;\r\n\r\n        const isVertical: boolean = config.thumbnailsOrientation === thumbnailsOrientation.vertical;\r\n        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- || is required.\r\n        const isFullscreenAllowed: boolean = this.isMobile() || config.allowFullScreen || false;\r\n        const zoomViewMode: string =\r\n            config.imageZoom === imageZoom.inline ? imageZoom.inline : config.imageZoom === imageZoom.container ? imageZoom.container : '';\r\n        const source = this.props.config.imageSource ?? imageSource.pageContext;\r\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Site level config can be of any type.\r\n        const emptyPlaceHolderImage = this.props.context.app.config?.placeholderImageName as string;\r\n        if (this.props.data.product.result) {\r\n            this.fallbackImage = getFallbackImageUrl(this.props.data.product.result.ItemId, this.props.context.request.apiSettings);\r\n        }\r\n        if (emptyPlaceHolderImage && this.fallbackImage) {\r\n            this.fallbackImage = `${this.fallbackImage},${emptyPlaceHolderImage}`;\r\n        }\r\n        if (this.props.config.skipImageValidation && !this.state.mediaGalleryItems && this.state.isInitialLoad) {\r\n            let images: IImageData[] = [];\r\n            let mediaLocations: MediaLocation[] = [];\r\n            if (source === imageSource.pageContext && this.props.data.mediaLocationsForSelectedVariant.result) {\r\n                mediaLocations = this.props.data.mediaLocationsForSelectedVariant.result;\r\n            } else if (source === imageSource.productId && this.props.data.mediaLocations.result) {\r\n                mediaLocations = this.props.data.mediaLocations.result;\r\n            }\r\n            images = mediaLocations.map(mediaLocation => {\r\n                return {\r\n                    src: mediaLocation.Uri ?? '',\r\n                    altText: mediaLocation.AltText ?? ''\r\n                };\r\n            });\r\n            const curatedImages = this.props.config.images ?? [];\r\n            this.mediaGalleryImages = [...this._filterMasterImageFromVariant(images), ...curatedImages];\r\n        }\r\n        const mediaGalleryCarouselItems = this._getMediaGalleryItems(isFullscreenAllowed, zoomViewMode);\r\n        const mediaGalleryThumbnailCarouselItems = this._getMediaGalleryThumbnailItems();\r\n        const viewProps: IMediaGalleryViewProps = {\r\n            ...(this.props as IMediaGalleryProps<IMediaGalleryData>),\r\n            state: this.state,\r\n            MediaGallery: {\r\n                moduleProps: this.props,\r\n                className: classnames(`ms-media-gallery ${isVertical ? 'vertical' : ''}`, className)\r\n            },\r\n            Modal: isFullscreenAllowed ? this.imageModalSlider(zoomViewMode) : null,\r\n            callbackToggle: this.openModalDialog,\r\n            callbackThumbnailClick: this._generateOnThumbnailClick,\r\n            callbackThumbnailKeyDown: this._generateOnThumbnailKeyDown,\r\n            CarouselProps: {\r\n                tag: Carousel,\r\n                className: 'ms-media-gallery__carousel',\r\n                items: mediaGalleryCarouselItems.items,\r\n                activeIndex: this.state.activeIndex,\r\n                next: this.next,\r\n                previous: this.previous,\r\n                interval: false,\r\n                directionTextPrev: resources.previousScreenshotFlipperText,\r\n                directionTextNext: resources.nextScreenshotFlipperText,\r\n                onIndicatorsClickHandler: this.goToIndex,\r\n                showPaginationTooltip: showPaginationTooltip === true,\r\n                indicatorAriaText: resources.ariaLabelForSlide,\r\n                handleOnExited: this.onExited,\r\n                handleOnExiting: this.onExiting,\r\n                key: mediaGalleryCarouselItems.keys\r\n            } as IComponentNodeProps<ICarouselProps>,\r\n            Thumbnails: {\r\n                ThumbnailsContainerProps: { className: 'ms-media-gallery__thumbnails-container' },\r\n                SingleSlideCarouselComponentProps: {\r\n                    tag: SingleSlideCarousel,\r\n                    className: 'ms-media-gallery__thumbnails',\r\n                    vertical: isVertical,\r\n                    flipperPrevLabel: resources.previousScreenshotFlipperText,\r\n                    flipperNextLabel: resources.nextScreenshotFlipperText,\r\n                    parentId: id,\r\n                    useTabList: true,\r\n                    key: JSON.stringify(mediaGalleryThumbnailCarouselItems.keys)\r\n                } as IComponentNodeProps<ISingleSlideCarouselProps>,\r\n                items: mediaGalleryThumbnailCarouselItems.items\r\n            }\r\n        };\r\n\r\n        return this.props.renderView(viewProps) as React.ReactElement;\r\n    }\r\n\r\n    /**\r\n     * Zoomed out image on previous/next click.\r\n     */\r\n    public updateZoomedInImage(): void {\r\n        this.setState({ isImageZoomed: false });\r\n    }\r\n\r\n    private readonly onExiting = () => {\r\n        this.setState({ animating: true });\r\n    };\r\n\r\n    private readonly onExited = () => {\r\n        this.setState({ animating: false });\r\n    };\r\n\r\n    /**\r\n     * On click next in carousel.\r\n     */\r\n    private readonly next = (): void => {\r\n        removeInlineZoomStyle();\r\n        if (this.isLastItem() === undefined) {\r\n            return;\r\n        }\r\n\r\n        const nextIndex = this.isLastItem() ? 0 : this.state.activeIndex + 1;\r\n        this.goToIndex(nextIndex);\r\n\r\n        this.updateZoomedInImage();\r\n    };\r\n\r\n    /**\r\n     * On click previous in carousel.\r\n     */\r\n    private readonly previous = (): void => {\r\n        removeInlineZoomStyle();\r\n        const images = this.state.mediaGalleryItems;\r\n        const nextIndex = this.isFirstItem() ? (images ? images.length - 1 : 0) : this.state.activeIndex - 1;\r\n        this.goToIndex(nextIndex);\r\n        this.updateZoomedInImage();\r\n    };\r\n\r\n    private readonly goToIndex = (index: number): void => {\r\n        this.setState({ activeIndex: index });\r\n    };\r\n\r\n    private _getMediaGalleryThumbnailItems(): IMediaGalleryCarouselItems<IMediaGalleryThumbnailItemViewProps> {\r\n        const mediaGalleryItems = this.state.mediaGalleryItems ?? this.mediaGalleryImages;\r\n        const thumbnailImageSettings = this.props.config.thumbnailImageSettings;\r\n        if (thumbnailImageSettings) {\r\n            thumbnailImageSettings.cropFocalRegion = true;\r\n        }\r\n\r\n        const hasMediaGalleryItems = ArrayExtensions.hasElements(mediaGalleryItems);\r\n\r\n        if (!hasMediaGalleryItems) {\r\n            if (this.state.lastUpdate) {\r\n                const defaultKey = 0;\r\n                return {\r\n                    items: [this._getEmptyThumbnailItem(thumbnailImageSettings, defaultKey, this.state.activeIndex)],\r\n                    keys: ['empty']\r\n                };\r\n            }\r\n            return { items: [], keys: [] };\r\n        }\r\n\r\n        return {\r\n            items: [\r\n                // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n                ...mediaGalleryItems!.map((item: IImageData, index: number) =>\r\n                    this._getThumbnailItem(\r\n                        item,\r\n                        thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\r\n                        index,\r\n                        this.state.activeIndex\r\n                    )\r\n                )\r\n            ],\r\n            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n            keys: [...mediaGalleryItems!.map(item => item.src)]\r\n        };\r\n    }\r\n\r\n    private _getMediaGalleryItems(isFullscreenAllowed: boolean, zoomViewMode: string): IMediaGalleryCarouselItems<React.ReactNode> {\r\n        const mediaGalleryItems = this.state.mediaGalleryItems ?? this.mediaGalleryImages;\r\n        const galleryImageSettings = this.props.config.galleryImageSettings;\r\n        if (galleryImageSettings) {\r\n            galleryImageSettings.cropFocalRegion = true;\r\n        }\r\n\r\n        const zoomView = isFullscreenAllowed ? 'fullscreen' : zoomViewMode;\r\n\r\n        const hasMediaGalleryItems = ArrayExtensions.hasElements(mediaGalleryItems);\r\n\r\n        if (!hasMediaGalleryItems) {\r\n            if (this.state.lastUpdate) {\r\n                return { items: [this._renderEmptyImage(galleryImageSettings)], keys: ['empty'] };\r\n            }\r\n            return { items: [], keys: [] };\r\n        }\r\n\r\n        return {\r\n            items: [\r\n                // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n                ...mediaGalleryItems!.map((item: IImageData, index: number) =>\r\n                    this._renderCarouselItemImageView(zoomView, item, galleryImageSettings ?? this.defaultGalleryImageSettings, index)\r\n                )\r\n            ],\r\n            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n            keys: [...mediaGalleryItems!.map(item => item.src)]\r\n        };\r\n    }\r\n\r\n    private _setImages(images?: IImageData[]): void {\r\n        const curatedImage = this.props.config.images ?? [];\r\n        const shouldHidePrimaryImages = this.props.config.shouldHideMasterProductImagesForVariant ?? true;\r\n\r\n        let imagesToSet = images ?? [];\r\n        if (shouldHidePrimaryImages) {\r\n            // Currently returned image response is having duplicate image\r\n            // along with non-selected variant and previous selection is not getting cleared. With the help of index we\r\n            // select item from 0 index till it is having non repeating image source name ending with index number.\r\n            // Here we are keeping '.' to make sure that we are considering any digit just before '.' in image source path\r\n            imagesToSet = imagesToSet.filter((item, index) => {\r\n                let incrementedIndex = index;\r\n                const imageIndex = `${++incrementedIndex}.`;\r\n                return item.src?.includes(imageIndex);\r\n            });\r\n        }\r\n        this.setState({\r\n            mediaGalleryItems: [...imagesToSet, ...curatedImage],\r\n            activeIndex: 0,\r\n            lastUpdate: Date.now(),\r\n            shouldUseOptimizedImage: false\r\n        });\r\n    }\r\n\r\n    private _setRenderType(): void {\r\n        this.setState({\r\n            isInitialLoad: false\r\n        });\r\n    }\r\n\r\n    private _renderCarouselItemImageView(\r\n        zoomView: string,\r\n        image: IImageData,\r\n        imageSettings: IImageSettings,\r\n        index: number,\r\n        isInPopup: boolean = false\r\n    ): React.ReactNode {\r\n        if (this.isMobile()) {\r\n            if (isInPopup) {\r\n                return this._renderImageInContainerOnZoom(image, this._zoomedImageSettings, index);\r\n            }\r\n            return this._renderImageFullScreenOnZoom(image, imageSettings, index);\r\n        }\r\n\r\n        switch (zoomView) {\r\n            case 'container': {\r\n                return this._renderImageInContainerOnZoom(image, this._zoomedImageSettings, index);\r\n            }\r\n            case 'inline': {\r\n                return this._renderImageInlineOnZoom(image, this._zoomedImageSettings, index);\r\n            }\r\n            case 'fullscreen': {\r\n                return this._renderImageFullScreenOnZoom(image, imageSettings, index);\r\n            }\r\n\r\n            // No default\r\n        }\r\n        return <>{this._getCarouselItem(image, imageSettings, index, isInPopup)}</>;\r\n    }\r\n\r\n    private _filterMasterImageFromVariant(images?: IImageData[]): IImageData[] {\r\n        const shouldHidePrimaryImages = this.props.config.shouldHideMasterProductImagesForVariant ?? true;\r\n        let variantImages = images ?? [];\r\n        const isVariantProduct =\r\n            !ObjectExtensions.isNullOrUndefined(this.props.data.product.result?.MasterProductId) ||\r\n            !ObjectExtensions.isNullOrUndefined(this.props.data.product.result?.productVariant);\r\n        const itemId = this.props.data.product.result?.ItemId;\r\n        if (shouldHidePrimaryImages && isVariantProduct && itemId) {\r\n            // Currently returned image response is having duplicate image\r\n            // along with non-selected variant and previous selection is not getting cleared. With the help of index we\r\n            // select item from 0 index till it is having non repeating image source name ending with index number.\r\n            // Here we are keeping '.' to make sure that we are considering any digit just before '.' in image source path\r\n            variantImages = variantImages.filter(item => {\r\n                const imagePattern = `${itemId}_000`;\r\n                return !item.src?.includes(imagePattern);\r\n            });\r\n            if (!ArrayExtensions.hasElements(variantImages)) {\r\n                variantImages = images ?? [];\r\n            }\r\n        }\r\n        return variantImages;\r\n    }\r\n\r\n    private readonly _getCarouselItem = (\r\n        image: IImageData,\r\n        imageSettings: IImageSettings,\r\n        index: number,\r\n        isInPopup: boolean = false\r\n    ): React.ReactNode => (\r\n        <Image\r\n            requestContext={this.props.context.actionContext.requestContext}\r\n            className='ms-media-gallery__item'\r\n            {...image}\r\n            fallBackSrc={index === 0 ? this.fallbackImage : image.src}\r\n            gridSettings={this.props.context.request.gridSettings!}\r\n            imageSettings={imageSettings}\r\n            loadFailureBehavior='hide'\r\n            id={`${this.props.id}__carousel-item__${index}`}\r\n            shouldSkipToMainImage={isInPopup}\r\n            bypassHideOnFailure={index === 0}\r\n        />\r\n    );\r\n\r\n    private readonly _getThumbnailItem = (\r\n        image: IImageData,\r\n        imageSettings: IImageSettings,\r\n        index: number,\r\n        modifiedActiveIndex: number\r\n    ): IMediaGalleryThumbnailItemViewProps => {\r\n        const classes = classnames(\r\n            'ms-media-gallery__thumbnail-item',\r\n            modifiedActiveIndex === index ? 'ms-media-gallery__thumbnail-item-active' : ''\r\n        );\r\n\r\n        return {\r\n            ThumbnailItemContainerProps: {\r\n                tag: 'li' as NodeTag,\r\n                className: classes,\r\n                role: 'tab',\r\n                tabIndex: 0,\r\n                key: index,\r\n                'aria-label': image.altText,\r\n                'aria-selected': modifiedActiveIndex === index,\r\n                onClick: this._generateOnThumbnailClick(index),\r\n                onKeyDown: this._generateOnThumbnailKeyDown(index)\r\n            },\r\n            Picture: (\r\n                <Image\r\n                    requestContext={this.props.context.actionContext.requestContext}\r\n                    className='ms-media-gallery__thumbnail'\r\n                    {...image}\r\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\r\n                    gridSettings={this.props.context.request.gridSettings!}\r\n                    imageSettings={imageSettings}\r\n                    loadFailureBehavior='hide'\r\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage}\r\n                    bypassHideOnFailure={index === 0}\r\n                />\r\n            )\r\n        };\r\n    };\r\n\r\n    /**\r\n     * Ref Handler.\r\n     * @param index -Remove item click function.\r\n     * @returns Set inline zoom.\r\n     */\r\n    private readonly _refHandler = (index: number) => (divRef: HTMLDivElement) => {\r\n        this._inlineZoomDivRef.set(index, divRef);\r\n    };\r\n\r\n    private readonly _generateOnThumbnailKeyDown = (index: number) => {\r\n        return (event: React.KeyboardEvent) => {\r\n            if (event.which === KeyCodes.Enter || event.which === KeyCodes.Space) {\r\n                event.preventDefault();\r\n\r\n                this.goToIndex(index);\r\n            }\r\n        };\r\n    };\r\n\r\n    private readonly _generateOnThumbnailClick = (index: number) => {\r\n        return (event: React.MouseEvent<HTMLLIElement>) => {\r\n            event.preventDefault();\r\n\r\n            this.goToIndex(index);\r\n        };\r\n    };\r\n\r\n    private _renderImageInlineOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\r\n        return (\r\n            <div\r\n                className={`ms-inline-zoom ${this.state.isImageZoomed ? 'zoomed' : ''}`}\r\n                ref={this._refHandler(index)}\r\n                data-scale={this.props.config.dataScale ?? defaultDataScale}\r\n            >\r\n                <Image\r\n                    requestContext={this.props.context.actionContext.requestContext}\r\n                    className='ms-media-gallery__item'\r\n                    {...image}\r\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\r\n                    gridSettings={this.props.context.request.gridSettings!}\r\n                    imageSettings={imageSettings}\r\n                    loadFailureBehavior='hide'\r\n                    onClick={this._onInlineImageClick}\r\n                    onMouseOver={(this.state.isImageZoomed && this._inlineZoomImageOnHover) || undefined}\r\n                    id={`${this.props.id}__carousel-item__${index}`}\r\n                    shouldSkipToMainImage\r\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage && !this.props.config.allowFullScreen}\r\n                    bypassHideOnFailure={index === 0}\r\n                />\r\n                <Image\r\n                    role='presentation'\r\n                    requestContext={this.props.context.actionContext.requestContext}\r\n                    className='ms-inline-zoom__zoomedImg'\r\n                    {...image}\r\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\r\n                    onClick={this._onImageMouseOut}\r\n                    gridSettings={this.props.context.request.gridSettings!}\r\n                    imageSettings={imageSettings}\r\n                    loadFailureBehavior='hide'\r\n                    id={`${this.props.id}__zoom__${index}`}\r\n                    onMouseMove={(this.state.isImageZoomed && inlineZoomImageOnMouseMove) || undefined}\r\n                    shouldSkipToMainImage\r\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage && !this.props.config.allowFullScreen}\r\n                    bypassHideOnFailure={index === 0}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n\r\n    private _inlineZoomImageOnHover(event: React.MouseEvent<HTMLImageElement>): void {\r\n        inlineZoomImageOnHover(event, this.props.config.dataScale ?? String(defaultDataScale));\r\n    }\r\n\r\n    private _handleMobileViewZoomedImageClick(event: React.MouseEvent<HTMLImageElement>) {\r\n        const target = this.state.shouldUseOptimizedImage ? (event.target as HTMLImageElement) : event.currentTarget;\r\n        const mobileZoomedInImageClassName = 'msc-mobile-zoomed-in';\r\n        if (!this.state.isMobileImageZoomed) {\r\n            const bounds = target.getBoundingClientRect();\r\n            const dataScale = Number(this.props.config.dataScale ?? defaultDataScale);\r\n\r\n            const positionX = event.clientX - bounds.left;\r\n            const positionY = event.clientY - bounds.top;\r\n            const scaledPositionX = positionX * dataScale;\r\n            const scaledPositionY = positionY * dataScale;\r\n\r\n            target.style.transform = `scale(${dataScale})`;\r\n            target.classList.add(mobileZoomedInImageClassName);\r\n            target.parentElement!.style.overflow = 'auto';\r\n            target.parentElement!.scrollTo(scaledPositionX - positionX, scaledPositionY - positionY);\r\n            this.setState({\r\n                isMobileImageZoomed: true\r\n            });\r\n        } else {\r\n            target.style.transform = '';\r\n            target.classList.remove(mobileZoomedInImageClassName);\r\n            target.parentElement!.style.overflow = '';\r\n            this.setState({\r\n                isMobileImageZoomed: false\r\n            });\r\n        }\r\n    }\r\n\r\n    private _onInlineImageClick(event: React.MouseEvent<HTMLImageElement>): void {\r\n        if (window.innerWidth <= 768) {\r\n            // $msv-breakpoint-m\r\n            this._handleMobileViewZoomedImageClick(event);\r\n            return;\r\n        }\r\n        inlineZoomInitClick(event, this.props.config.dataScale ?? String(defaultDataScale));\r\n        this.setState({\r\n            isImageZoomed: true\r\n        });\r\n    }\r\n\r\n    private _onImageMouseOut(event: React.MouseEvent<HTMLImageElement, MouseEvent>): void {\r\n        inlineZoomImageOnMouseOut(event);\r\n        this.setState({\r\n            isImageZoomed: false\r\n        });\r\n    }\r\n\r\n    private _onContainerZoomImageClick(event: React.MouseEvent<HTMLImageElement>): void {\r\n        if (window.innerWidth <= 768) {\r\n            // $msv-breakpoint-m\r\n            this._handleMobileViewZoomedImageClick(event);\r\n            return;\r\n        }\r\n\r\n        onContainerZoomInit(event);\r\n\r\n        this.setState({\r\n            isImageZoomed: true\r\n        });\r\n    }\r\n\r\n    private _onMouseOutLensContainer(event: React.MouseEvent<HTMLImageElement>): void {\r\n        onMouseOutLensContainer(event);\r\n\r\n        this.setState({\r\n            isImageZoomed: false\r\n        });\r\n    }\r\n\r\n    private _renderImageInContainerOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\r\n        return (\r\n            <div className='ms-containerZoom__container'>\r\n                <div\r\n                    data-scale={this.props.config.dataScale ?? defaultDataScale}\r\n                    className='ms-containerZoom__zoom-lens'\r\n                    role='presentation'\r\n                    onMouseOut={this._onMouseOutLensContainer}\r\n                    onClick={this._onMouseOutLensContainer}\r\n                    onMouseMove={(this.state.isImageZoomed && onMouseMoveLensContainer) || undefined}\r\n                />\r\n                <Image\r\n                    requestContext={this.props.context.actionContext.requestContext}\r\n                    className='ms-media-gallery__item'\r\n                    {...image}\r\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\r\n                    gridSettings={this.props.context.request.gridSettings!}\r\n                    onClick={this._onContainerZoomImageClick}\r\n                    imageSettings={imageSettings}\r\n                    loadFailureBehavior='hide'\r\n                    onMouseOver={(this.state.isImageZoomed && onMouseOverImageContainer) || undefined}\r\n                    id={`${this.props.id}__carousel-item__${index}`}\r\n                    shouldSkipToMainImage\r\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage && !this.props.config.allowFullScreen}\r\n                    bypassHideOnFailure={index === 0}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n\r\n    private _renderImageFullScreenOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\r\n        return (\r\n            <div className='ms-fullscreen-section'>\r\n                <Image\r\n                    requestContext={this.props.context.actionContext.requestContext}\r\n                    className='ms-media-gallery__item'\r\n                    {...image}\r\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\r\n                    gridSettings={this.props.context.request.gridSettings!}\r\n                    imageSettings={imageSettings}\r\n                    loadFailureBehavior='hide'\r\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage}\r\n                    bypassHideOnFailure={index === 0}\r\n                />\r\n                <div className='ms-fullscreen-section__overlay'>\r\n                    {}\r\n                    <a\r\n                        href='javascript:void(0);'\r\n                        title={this.props.resources.fullScreenTitleText}\r\n                        role='button'\r\n                        ref={this.fullScreenOverlayButtonRef}\r\n                        onClick={this.openModalDialog}\r\n                        className='ms-fullscreen-section__magnifying-glass-icon'\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    private _mapProductToImageData(product: SimpleProduct): IImageData {\r\n        return {\r\n            src: product.PrimaryImageUrl ?? ''\r\n        };\r\n    }\r\n\r\n    private _renderEmptyImage(imageSettings: IImageSettings | undefined): React.ReactNode {\r\n        return (\r\n            <div className='ms-media-gallery__item'>\r\n                <Image\r\n                    requestContext={this.props.context.actionContext.requestContext}\r\n                    className='ms-media-gallery__item__image'\r\n                    src='empty'\r\n                    gridSettings={this.props.context.request.gridSettings!}\r\n                    imageSettings={imageSettings ?? this.defaultGalleryImageSettings}\r\n                    loadFailureBehavior='empty'\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n\r\n    private _getEmptyThumbnailItem(\r\n        imageSettings: IImageSettings | undefined,\r\n        index: number,\r\n        modifiedActiveIndex: number\r\n    ): IMediaGalleryThumbnailItemViewProps {\r\n        const classes = classnames(\r\n            'ms-media-gallery__thumbnail-item',\r\n            modifiedActiveIndex === index ? 'ms-media-gallery__thumbnail-item-active' : ''\r\n        );\r\n        return {\r\n            ThumbnailItemContainerProps: {\r\n                tag: 'li' as NodeTag,\r\n                className: classes,\r\n                role: 'tab',\r\n                tabIndex: 0,\r\n                key: 'empty',\r\n                'aria-label': '',\r\n                'aria-selected': modifiedActiveIndex === index,\r\n                onClick: this._generateOnThumbnailClick(index),\r\n                onKeyDown: this._generateOnThumbnailKeyDown(index)\r\n            },\r\n            Picture: (\r\n                <Image\r\n                    requestContext={this.props.context.actionContext.requestContext}\r\n                    className='ms-media-gallery__thumbnail-item__image'\r\n                    src='empty'\r\n                    gridSettings={this.props.context.request.gridSettings!}\r\n                    imageSettings={imageSettings ?? this.defaultThumbnailImageSettings}\r\n                    loadFailureBehavior='empty'\r\n                />\r\n            )\r\n        };\r\n    }\r\n\r\n    private readonly isFirstItem = () => this.state.activeIndex === 0;\r\n\r\n    private readonly isLastItem = () => {\r\n        const images = this.state.mediaGalleryItems;\r\n        return images && this.state.activeIndex === images.length - 1;\r\n    };\r\n\r\n    private readonly openModalDialog = (): void => {\r\n        this._toggleModal();\r\n    };\r\n\r\n    private _toggleModal(): void {\r\n        if (this.state.modalIsOpen) {\r\n            this.fullScreenOverlayButtonRef.current?.focus();\r\n            const parentDiv = this._inlineZoomDivRef.get(this.state.activeIndex);\r\n            if (parentDiv && parentDiv.children && parentDiv.children.length >= 2) {\r\n                const image = parentDiv.children[1].querySelector('img');\r\n                if (image) {\r\n                    image.removeAttribute('style');\r\n                }\r\n            }\r\n            this.setState({\r\n                isImageZoomed: false\r\n            });\r\n        }\r\n        this.setState({\r\n            isImageZoomed: false,\r\n            modalIsOpen: !this.state.modalIsOpen\r\n        });\r\n        removeInlineZoomStyle();\r\n        removeContainerZoomStyle();\r\n    }\r\n\r\n    private readonly imageModalSlider = (ZoomView: string): React.ReactElement => {\r\n        const {\r\n            data: {\r\n                product: { result: product }\r\n            },\r\n            resources\r\n        } = this.props;\r\n        let mediaGalleryItems = this.state.mediaGalleryItems;\r\n\r\n        if (!mediaGalleryItems && product) {\r\n            mediaGalleryItems = [this._mapProductToImageData(product)];\r\n        }\r\n        const carouselprops = {\r\n            tag: Carousel,\r\n            className: 'ms-media-gallery__carousel',\r\n            items:\r\n                mediaGalleryItems &&\r\n                mediaGalleryItems.map((item: IImageData, index: number) =>\r\n                    this._renderCarouselItemImageView(ZoomView, item, this._zoomedImageSettings, index, true)\r\n                ),\r\n            activeIndex: this.state.activeIndex,\r\n            next: this.next,\r\n            previous: this.previous,\r\n            interval: false,\r\n            directionTextPrev: resources.previousScreenshotFlipperText,\r\n            directionTextNext: resources.nextScreenshotFlipperText,\r\n            onIndicatorsClickHandler: this.goToIndex,\r\n            showPaginationTooltip: true,\r\n            hideIndicator: false,\r\n            keyboard: false,\r\n            handleOnExited: this.onExited,\r\n            handleOnExiting: this.onExiting,\r\n            isDisabledFunctionality: this.state.isMobileImageZoomed\r\n        } as IComponentNodeProps<ICarouselProps>;\r\n        const carousel = <Carousel {...carouselprops} />;\r\n\r\n        const imageModalSliderProps: IModalViewProps = {\r\n            modalIsOpen: this.state.modalIsOpen,\r\n            ontoggle: this._toggleModal,\r\n            galleryCarousel: carousel,\r\n            classNames: classnames('ms-media-gallery__modal', 'msc-modal-input-required')\r\n        };\r\n        return ImagefullView(imageModalSliderProps) as React.ReactElement;\r\n    };\r\n}\r\n\r\nexport default MediaGallery;\r\n","/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\r\nimport * as React from 'react';\r\n\r\nimport {\r\n    IMediaGalleryThumbnailItemViewProps,\r\n    IMediaGalleryThumbnailsViewProps,\r\n    IMediaGalleryViewProps\r\n} from '@msdyn365-commerce-modules/media-gallery';\r\n\r\nconst MediaGalleryView: React.FC<IMediaGalleryViewProps> = props => {\r\n    const { CarouselProps, Thumbnails, MediaGallery, Modal } = props;\r\n\r\n    return (\r\n        <Module {...MediaGallery}>\r\n            <Node {...CarouselProps} />\r\n            {Modal}\r\n            {_renderThumbnails(Thumbnails)}\r\n        </Module>\r\n    );\r\n};\r\n\r\nconst _renderThumbnails = (thumbnails: IMediaGalleryThumbnailsViewProps): JSX.Element => {\r\n    const { ThumbnailsContainerProps, SingleSlideCarouselComponentProps, items } = thumbnails;\r\n\r\n    return (\r\n        <Node {...ThumbnailsContainerProps}>\r\n            <Node {...SingleSlideCarouselComponentProps}>{items && items.map(_renderThumbnailItem)}</Node>\r\n        </Node>\r\n    );\r\n};\r\n\r\nconst _renderThumbnailItem = (thumbnail: IMediaGalleryThumbnailItemViewProps): JSX.Element => {\r\n    const { ThumbnailItemContainerProps, Picture } = thumbnail;\r\n\r\n    return <Node {...ThumbnailItemContainerProps}>{Picture}</Node>;\r\n};\r\n\r\nexport default MediaGalleryView;\r\n","const binding = { modules: {}, dataActions: {} };\n\n    const registerActionId = (actionPath) => {\n        if (binding.dataActions[actionPath] &&\n            binding.dataActions[actionPath].default &&\n            binding.dataActions[actionPath].default.prototype &&\n            binding.dataActions[actionPath].default.prototype.id) {\n            binding.dataActions[binding.dataActions[actionPath].default.prototype.id] = binding.dataActions[actionPath];\n        } else {\n            Object.keys(binding.dataActions[actionPath] || {}).forEach(exportName => {\n                if (binding.dataActions[actionPath][exportName] &&\n                    binding.dataActions[actionPath][exportName].prototype &&\n                    binding.dataActions[actionPath][exportName].prototype.Action) {\n                    binding.dataActions[binding.dataActions[actionPath][exportName].prototype.id] = binding.dataActions[actionPath][exportName];\n                }\n            })\n        }\n    };\n\n    const registerSanitizedActionPath = (sanitizedActionPath, dataAction) => {\n        if (process.env.NODE_ENV === 'development') {\n            if (!dataAction.default) {\n                throw new Error('Data action path does not have a default export');\n            }\n            if (!(dataAction.default.prototype.id && binding.dataActions[dataAction.default.prototype.id]) || !binding.dataActions[sanitizedActionPath]) {\n                binding.dataActions[sanitizedActionPath] = dataAction;\n            }\n        } else {\n            binding.dataActions[sanitizedActionPath] = dataAction;\n            if (!binding.dataActions[sanitizedActionPath].default) {\n                throw new Error('Data action path ' + sanitizedActionPath + ' does not have a default export');\n            }\n            binding.dataActions[sanitizedActionPath].default.prototype.RegistrationId = sanitizedActionPath;\n            if (binding.dataActions[sanitizedActionPath].default.prototype.id) {\n                binding.dataActions[binding.dataActions[sanitizedActionPath].default.prototype.id] = sanitizedActionPath;\n            }\n        }\n    };\n    \n\n    (binding.modules['media-gallery'] = {\n        c: () => require('partner/modules/media-gallery/media-gallery.tsx'),\n        $type: 'contentModule',\n        da: [{name:'mediaLocations',  path:'@msdyn365-commerce-modules/retail-actions/dist/lib/get-media-locations-by-id', runOn: 0},{name:'mediaLocationsForSelectedVariant',  path:'@msdyn365-commerce-modules/retail-actions/dist/lib/get-media-locations-for-selected-variant', runOn: 0},{name:'product',  path:'@msdyn365-commerce-modules/retail-actions/dist/lib/get-selected-variant', runOn: 0}],\n        \n        iNM: false,\n        ns: '__local__',\n        n: 'media-gallery',\n        p: '__local__',\n        \n        pdp: '',\n        \n        \n        md: 'src/modules/media-gallery'\n    });\n        \n\n        {\n            const sanitizedActionPath = '@msdyn365-commerce-modules/retail-actions/dist/lib/get-media-locations-by-id';\n            let dataAction = require('@msdyn365-commerce-modules/retail-actions/dist/lib/get-media-locations-by-id');\n            registerSanitizedActionPath(sanitizedActionPath, dataAction);\n        }\n            \n\n        {\n            const sanitizedActionPath = '@msdyn365-commerce-modules/retail-actions/dist/lib/get-media-locations-for-selected-variant';\n            let dataAction = require('@msdyn365-commerce-modules/retail-actions/dist/lib/get-media-locations-for-selected-variant');\n            registerSanitizedActionPath(sanitizedActionPath, dataAction);\n        }\n            \n\n        {\n            const sanitizedActionPath = '@msdyn365-commerce-modules/retail-actions/dist/lib/get-selected-variant';\n            let dataAction = require('@msdyn365-commerce-modules/retail-actions/dist/lib/get-selected-variant');\n            registerSanitizedActionPath(sanitizedActionPath, dataAction);\n        }\n            \n\n        \n    window.__bindings__ = window.__bindings__ || {};\n    window.__bindings__.modules = {\n        ...window.__bindings__.modules || {},\n        ...binding.modules\n    };\n    \n        window.__bindings__.dataActions = {\n        ...window.__bindings__.dataActions || {},\n        ...binding.dataActions\n    };\n                        export const viewDictionary = {};\n                        viewDictionary['__local__|__local__|modules|media-gallery|media-gallery'] = {\n                c: () => require('partner/modules/media-gallery/media-gallery.view.tsx'),\n                cn: '__local__-__local__-media-gallery'\n            };\nviewDictionary['@msdyn365-commerce-modules|media-gallery|modules|media-gallery|media-gallery'] = {\n                c: () => require('@msdyn365-commerce-modules/media-gallery/dist/lib/modules/media-gallery/media-gallery.view.js'),\n                cn: '@msdyn365-commerce-modules-media-gallery-media-gallery'\n            };\nviewDictionary['@msdyn365-commerce-theme|adventureworks-theme-kit|modules|adventureworks|views|media-gallery'] = {\n                c: () => require('@msdyn365-commerce-theme/adventureworks-theme-kit/dist/lib/modules/adventureworks/views/media-gallery.view.js'),\n                cn: '@msdyn365-commerce-theme-adventureworks-theme-kit-media-gallery'\n            };\nwindow.__bindings__ = window.__bindings__ || {};\nwindow.__bindings__.viewDictionary = {\n                        ...window.__bindings__.viewDictionary || {},\n                        ...viewDictionary\n                    };","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IMediaGalleryThumbnailItemViewProps, IMediaGalleryThumbnailsViewProps, IMediaGalleryViewProps } from '../..';\n\nconst MediaGalleryView: React.FC<IMediaGalleryViewProps> = props => {\n    const { CarouselProps, Thumbnails, MediaGallery, Modal } = props;\n\n    return (\n        <Module {...MediaGallery}>\n            <Node {...CarouselProps} />\n            {Modal}\n            {_renderThumbnails(Thumbnails)}\n        </Module>\n    );\n};\n\nconst _renderThumbnails = (thumbnails: IMediaGalleryThumbnailsViewProps): JSX.Element => {\n    const { ThumbnailsContainerProps, SingleSlideCarouselComponentProps, items } = thumbnails;\n\n    return (\n        <Node {...ThumbnailsContainerProps}>\n            <Node {...SingleSlideCarouselComponentProps}>{items && items.map(_renderThumbnailItem)}</Node>\n        </Node>\n    );\n};\n\nconst _renderThumbnailItem = (thumbnail: IMediaGalleryThumbnailItemViewProps): JSX.Element => {\n    const { ThumbnailItemContainerProps, Picture } = thumbnail;\n\n    return <Node {...ThumbnailItemContainerProps}>{Picture}</Node>;\n};\n\nexport default MediaGalleryView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IImageData, IRequestContext, IVideoData } from '@msdyn365-commerce/core';\n\nexport enum MediaType {\n    /**\n     * The None.\n     */\n    None = 0,\n    /**\n     * The Image type.\n     */\n    Image = 1,\n    /**\n     * The video type.\n     */\n    Video = 2,\n    /**\n     * The file type.\n     */\n    File = 3\n}\n\nexport interface IMediaData extends IImageData {\n    mediaTypeValue?: MediaType;\n    displayOrder?: number;\n    videoData?: IVideoData;\n}\n\n/**\n * Gets correct alt text for image based on configuration of site.\n * @param productName Product name.\n * @param context Current request context.\n * @param imageAltText Alt-text from CMS image.\n */\nexport function getAltText(\n    context: IRequestContext,\n    shouldUseCmsAltText: boolean,\n    productName?: string,\n    imageAltText?: string\n): string | undefined {\n    if (!context?.app?.config?.OmniChannelMedia) {\n        return productName;\n    }\n    if (shouldUseCmsAltText) {\n        return imageAltText;\n    }\n    return productName;\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Carousel, ICarouselProps, Player, IPlayerData, IPlayerOptions, IVideoMetadata } from '@msdyn365-commerce/components';\nimport { IImageData, IImageSettings, Image, Video } from '@msdyn365-commerce/core';\nimport { MediaLocation, MediaType, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, getFallbackImageUrl, ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n    defaultDataScale,\n    IComponentNodeProps,\n    ImagefullView,\n    IModalViewProps,\n    IModuleProps,\n    inlineZoomImageOnHover,\n    inlineZoomImageOnMouseMove,\n    inlineZoomImageOnMouseOut,\n    inlineZoomInitClick,\n    INodeProps,\n    ISingleSlideCarouselProps,\n    isMobile,\n    KeyCodes,\n    NodeTag,\n    onContainerZoomInit,\n    onMouseMoveLensContainer,\n    onMouseOutLensContainer,\n    onMouseOverImageContainer,\n    removeContainerZoomStyle,\n    removeInlineZoomStyle,\n    SingleSlideCarousel,\n    VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport { reaction } from 'mobx';\nimport * as React from 'react';\n\nimport { IMediaGalleryData } from './media-gallery.data';\nimport { imageSource, imageZoom, IMediaGalleryProps, thumbnailsOrientation } from './media-gallery.props.autogenerated';\nimport { getProductImages, getValidProductImages, getVideoMetadataFromApi, validateProductImages } from './utils';\nimport { getAltText, IMediaData } from './utils/helper';\n\n/**\n * IMediaGalleryState Interface.\n */\nexport interface IMediaGalleryState {\n    animating: boolean;\n    activeIndex: number;\n    isImageZoomed: boolean;\n    modalIsOpen: boolean;\n    lastUpdate?: number;\n    isMobileImageZoomed?: boolean;\n    mediaGalleryItems?: IMediaData[];\n    isInitialLoad?: boolean;\n    shouldUseOptimizedImage?: boolean;\n}\n\n/**\n * IMediaGalleryThumbnailsViewProps Interface.\n */\nexport interface IMediaGalleryThumbnailsViewProps {\n    ThumbnailsContainerProps: INodeProps;\n    SingleSlideCarouselComponentProps: INodeProps;\n    items?: IMediaGalleryThumbnailItemViewProps[];\n}\n\n/**\n * IMediaGalleryThumbnailItemViewProps Interface.\n */\nexport interface IMediaGalleryThumbnailItemViewProps {\n    ThumbnailItemContainerProps: INodeProps;\n    Picture: React.ReactElement;\n}\n\n/**\n * IMediaGalleryViewProps Interface.\n */\nexport interface IMediaGalleryViewProps extends IMediaGalleryProps<IMediaGalleryData> {\n    state: IMediaGalleryState;\n    MediaGallery: IModuleProps;\n    CarouselProps: INodeProps;\n    Thumbnails: IMediaGalleryThumbnailsViewProps;\n    Modal?: React.ReactElement | null;\n    callbackToggle?(): void;\n    callbackThumbnailClick?(index: number): void;\n    callbackThumbnailKeyDown?(index: number): void;\n}\n\n/**\n * Props for carousel.\n */\ninterface IMediaGalleryCarouselItems<ItemType> {\n    items: ItemType[];\n    keys: (string | undefined)[];\n}\n\n/**\n * Media gallery component.\n */\nclass MediaGallery extends React.Component<IMediaGalleryProps<IMediaGalleryData>, IMediaGalleryState> {\n    private readonly _inlineZoomDivRef: Map<number, HTMLDivElement> = new Map();\n\n    private readonly fullScreenOverlayButtonRef: React.RefObject<HTMLAnchorElement & HTMLButtonElement> = React.createRef();\n    private readonly player: React.RefObject<Player> = React.createRef<Player>();\n    private fallbackImage?: string;\n\n    private readonly defaultGalleryImageSettings: IImageSettings = {\n        viewports: {\n            xs: { q: 'w=767&h=767&m=8', w: 0, h: 0 },\n            sm: { q: 'w=600&h=600&m=8', w: 0, h: 0 },\n            md: { q: 'w=600&h=772&m=8', w: 0, h: 0 },\n            lg: { q: 'h=772&m=8', w: 0, h: 0 }\n        },\n        lazyload: true,\n        cropFocalRegion: true\n    };\n\n    private readonly defaultThumbnailImageSettings: IImageSettings = {\n        viewports: {\n            xs: { q: 'w=100&m=8', w: 100, h: 0 },\n            lg: { q: 'w=100&m=8', w: 100, h: 0 }\n        },\n        lazyload: true,\n        cropFocalRegion: true\n    };\n\n    private readonly _zoomedImageSettings: IImageSettings;\n\n    public constructor(props: IMediaGalleryProps<IMediaGalleryData>) {\n        super(props);\n        this._toggleModal = this._toggleModal.bind(this);\n        const mediaGalleryImages = this.getImagesData();\n        this.state = {\n            activeIndex: 0,\n            animating: false,\n            isImageZoomed: false,\n            modalIsOpen: false,\n            isInitialLoad: true,\n            shouldUseOptimizedImage: !!this.props.config.skipImageValidation,\n            mediaGalleryItems: mediaGalleryImages\n        };\n\n        this._zoomedImageSettings =\n            props.config.zoomedImageSettings ?? props.config.galleryImageSettings ?? this.defaultGalleryImageSettings;\n\n        this._onImageMouseOut = this._onImageMouseOut.bind(this);\n        this._inlineZoomImageOnHover = this._inlineZoomImageOnHover.bind(this);\n        this._onInlineImageClick = this._onInlineImageClick.bind(this);\n        this._onContainerZoomImageClick = this._onContainerZoomImageClick.bind(this);\n        this._onMouseOutLensContainer = this._onMouseOutLensContainer.bind(this);\n    }\n\n    public isMobile(): boolean {\n        const size = isMobile({ variant: VariantType.Viewport, context: this.props.context.request });\n        return size === 'xs';\n    }\n\n    public async componentDidMount(): Promise<void> {\n        const source = this.props.config.imageSource ?? imageSource.pageContext;\n        const shouldUpdateOnPartialDimensionSelection = this.props.config.shouldUpdateOnPartialDimensionSelection;\n        this._setRenderType();\n        if (!this.props.context.request.app?.config?.OmniChannelMedia) {\n            if (source === imageSource.pageContext) {\n                if (this.state.mediaGalleryItems === undefined && this.props.data.mediaLocationsForSelectedVariant.result) {\n                    const images = await validateProductImages(\n                        this.props.data.mediaLocationsForSelectedVariant.result,\n                        this.props.context.actionContext,\n                        this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings\n                    );\n                    await this._setImages(images);\n                } else if (this.state.mediaGalleryItems === undefined && this.props.data.product.result) {\n                    const product = this.props.data.product.result;\n                    const images = await getValidProductImages(\n                        product.RecordId,\n                        +this.props.context.request.apiSettings.channelId,\n                        this.props.context.actionContext,\n                        this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n                        product.productVariant\n                    );\n\n                    await this._setImages(images);\n                } else {\n                    await this._setImages([]);\n                }\n            }\n        }\n\n        reaction(\n            () => {\n                const product = this.props.data.product.result;\n                if (!product) {\n                    return null;\n                }\n\n                if (!shouldUpdateOnPartialDimensionSelection || !product.productVariant?.RecordId) {\n                    return `${product.RecordId}`;\n                }\n\n                return `${product.RecordId}-${product.productVariant.RecordId}`;\n            },\n            async () => {\n                const product = this.props.data.product.result;\n                let images: IImageData[] = [];\n                if (product) {\n                    if (this.props.context.app?.config?.OmniChannelMedia) {\n                        images = await getProductImages(\n                            product.RecordId,\n                            this.shouldUseCmsAltText(),\n                            +this.props.context.request.apiSettings.channelId,\n                            this.props.context.actionContext,\n                            product.Name,\n                            shouldUpdateOnPartialDimensionSelection ? product.productVariant : undefined\n                        );\n                    } else {\n                        images = await getValidProductImages(\n                            product.RecordId,\n                            +this.props.context.request.apiSettings.channelId,\n                            this.props.context.actionContext,\n                            this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n                            shouldUpdateOnPartialDimensionSelection ? product.productVariant : undefined\n                        );\n                    }\n                    await this._setImages(images);\n                } else {\n                    await this._setImages([]);\n                }\n            },\n            { fireImmediately: true }\n        );\n\n        if (source === imageSource.productId && this.props.data.mediaLocations.result) {\n            const images = await validateProductImages(\n                this.props.data.mediaLocations.result,\n                this.props.context.actionContext,\n                this.props.config.thumbnailImageSettings ?? this.defaultThumbnailImageSettings\n            );\n            await this._setImages(images);\n        }\n    }\n\n    public shouldComponentUpdate(nextProps: IMediaGalleryProps<IMediaGalleryData>, nextState: IMediaGalleryState): boolean {\n        if (this.state === nextState && this.props.data === nextProps.data) {\n            return false;\n        }\n        return true;\n    }\n\n    public render(): JSX.Element {\n        const { id, config, resources } = this.props;\n\n        const { className, showPaginationTooltip } = config;\n\n        const isVertical: boolean = config.thumbnailsOrientation === thumbnailsOrientation.vertical;\n        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- || is required.\n        const isFullscreenAllowed: boolean = this.isMobile() || config.allowFullScreen || false;\n        const zoomViewMode: string =\n            config.imageZoom === imageZoom.inline ? imageZoom.inline : config.imageZoom === imageZoom.container ? imageZoom.container : '';\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Site level config can be of any type.\n        const emptyPlaceHolderImage = this.props.context.app.config?.placeholderImageName as string;\n        if (this.props.data.product.result) {\n            this.fallbackImage = getFallbackImageUrl(\n                this.props.data.product.result.ItemId,\n                this.props.context.request.apiSettings,\n                this.props.context.request.app?.config?.OmniChannelMedia\n            );\n        }\n        if (emptyPlaceHolderImage && this.fallbackImage) {\n            this.fallbackImage = `${this.fallbackImage},${emptyPlaceHolderImage}`;\n        }\n\n        const mediaGalleryCarouselItems = this._getMediaGalleryItems(isFullscreenAllowed, zoomViewMode);\n        const mediaGalleryThumbnailCarouselItems = this._getMediaGalleryThumbnailItems();\n        const viewProps: IMediaGalleryViewProps = {\n            ...(this.props as IMediaGalleryProps<IMediaGalleryData>),\n            state: this.state,\n            MediaGallery: {\n                moduleProps: this.props,\n                className: classnames(`ms-media-gallery ${isVertical ? 'vertical' : ''}`, className)\n            },\n            Modal: isFullscreenAllowed ? this.imageModalSlider(zoomViewMode) : null,\n            callbackToggle: this.openModalDialog,\n            callbackThumbnailClick: this._generateOnThumbnailClick,\n            callbackThumbnailKeyDown: this._generateOnThumbnailKeyDown,\n            CarouselProps: {\n                tag: Carousel,\n                className: 'ms-media-gallery__carousel',\n                items: mediaGalleryCarouselItems.items,\n                activeIndex: this.state.activeIndex,\n                next: this.next,\n                previous: this.previous,\n                interval: false,\n                directionTextPrev: resources.previousScreenshotFlipperText,\n                directionTextNext: resources.nextScreenshotFlipperText,\n                onIndicatorsClickHandler: this.goToIndex,\n                showPaginationTooltip: showPaginationTooltip === true,\n                indicatorAriaText: resources.ariaLabelForSlide,\n                handleOnExited: this.onExited,\n                handleOnExiting: this.onExiting,\n                key: mediaGalleryCarouselItems.keys\n            } as IComponentNodeProps<ICarouselProps>,\n            Thumbnails: {\n                ThumbnailsContainerProps: { className: 'ms-media-gallery__thumbnails-container' },\n                SingleSlideCarouselComponentProps: {\n                    tag: SingleSlideCarousel,\n                    className: 'ms-media-gallery__thumbnails',\n                    vertical: isVertical,\n                    flipperPrevLabel: resources.previousScreenshotFlipperText,\n                    flipperNextLabel: resources.nextScreenshotFlipperText,\n                    parentId: id,\n                    useTabList: true,\n                    key: JSON.stringify(mediaGalleryThumbnailCarouselItems.keys)\n                } as IComponentNodeProps<ISingleSlideCarouselProps>,\n                items: mediaGalleryThumbnailCarouselItems.items\n            }\n        };\n\n        return this.props.renderView(viewProps) as React.ReactElement;\n    }\n\n    /**\n     * Zoomed out image on previous/next click.\n     */\n    public updateZoomedInImage(): void {\n        this.setState({ isImageZoomed: false });\n    }\n\n    private readonly onExiting = () => {\n        this.setState({ animating: true });\n    };\n\n    private readonly onExited = () => {\n        this.setState({ animating: false });\n    };\n\n    /**\n     * On click next in carousel.\n     */\n    private readonly next = (): void => {\n        removeInlineZoomStyle();\n        if (this.isLastItem() === undefined) {\n            return;\n        }\n\n        const nextIndex = this.isLastItem() ? 0 : this.state.activeIndex + 1;\n        this.goToIndex(nextIndex);\n\n        this.updateZoomedInImage();\n    };\n\n    /**\n     * On click previous in carousel.\n     */\n    private readonly previous = (): void => {\n        removeInlineZoomStyle();\n        const images = this.state.mediaGalleryItems;\n        const nextIndex = this.isFirstItem() ? (images ? images.length - 1 : 0) : this.state.activeIndex - 1;\n        this.goToIndex(nextIndex);\n        this.updateZoomedInImage();\n    };\n\n    private readonly goToIndex = (index: number): void => {\n        const { autoplay } = this.props.config;\n        const currentIndex = this.state.activeIndex;\n        const mediaItems = this.state.mediaGalleryItems;\n        if (autoplay && mediaItems) {\n            if (mediaItems[`${index}`]?.mediaTypeValue === MediaType.Video) {\n                this.player.current?.play();\n            } else if (mediaItems[`${currentIndex}`].mediaTypeValue === MediaType.Video) {\n                this.player.current?.pause();\n            }\n        }\n        this.setState({ activeIndex: index });\n    };\n\n    private _getMediaGalleryThumbnailItems(): IMediaGalleryCarouselItems<IMediaGalleryThumbnailItemViewProps> {\n        const mediaGalleryItems = this.state.mediaGalleryItems;\n        const thumbnailImageSettings = this.props.config.thumbnailImageSettings;\n        if (thumbnailImageSettings) {\n            thumbnailImageSettings.cropFocalRegion = true;\n        }\n\n        const hasMediaGalleryItems = ArrayExtensions.hasElements(mediaGalleryItems);\n\n        if (!hasMediaGalleryItems) {\n            if (this.state.lastUpdate) {\n                const defaultKey = 0;\n                return {\n                    items: [this._getEmptyThumbnailItem(thumbnailImageSettings, defaultKey, this.state.activeIndex)],\n                    keys: ['empty']\n                };\n            }\n            return { items: [], keys: [] };\n        }\n\n        return {\n            items: [\n                // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n                ...mediaGalleryItems!.map((item: IMediaData, index: number) => {\n                    if (item.mediaTypeValue === MediaType.Video) {\n                        return this.getVideoThumbNailItem(\n                            item,\n                            thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n                            index,\n                            this.state.activeIndex\n                        );\n                    } else {\n                        return this._getThumbnailItem(\n                            item,\n                            thumbnailImageSettings ?? this.defaultThumbnailImageSettings,\n                            index,\n                            this.state.activeIndex\n                        );\n                    }\n                })\n            ],\n            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n            keys: [...mediaGalleryItems!.map(item => item.src)]\n        };\n    }\n\n    private getImagesData = (): IImageData[] => {\n        if (this.props.config.skipImageValidation || this.props.context.request.app?.config?.OmniChannelMedia) {\n            const source = this.props.config.imageSource ?? imageSource.pageContext;\n            let images: IImageData[] = [];\n            let mediaLocations: MediaLocation[] = [];\n            if (source === imageSource.pageContext && this.props.data.mediaLocationsForSelectedVariant.result) {\n                mediaLocations = this.props.data.mediaLocationsForSelectedVariant.result;\n            } else if (source === imageSource.productId && this.props.data.mediaLocations.result) {\n                mediaLocations = this.props.data.mediaLocations.result;\n            }\n            images = mediaLocations.map(mediaLocation => {\n                return {\n                    src: mediaLocation.Uri ?? '',\n                    altText: getAltText(\n                        this.props.context.actionContext.requestContext,\n                        this.shouldUseCmsAltText(),\n                        this.props.data.product.result?.Name,\n                        mediaLocation.AltText\n                    ),\n                    additionalProperties: mediaLocation.IsApplicableForChildEntities\n                        ? {\n                              isApplicableForChildEntities: 'true'\n                          }\n                        : undefined\n                };\n            });\n            const curatedImages = this.props.config.images ?? [];\n\n            return [...this._filterMasterImageFromVariant(images), ...curatedImages];\n        }\n        return [];\n    };\n\n    private _getMediaGalleryItems(isFullscreenAllowed: boolean, zoomViewMode: string): IMediaGalleryCarouselItems<React.ReactNode> {\n        const mediaGalleryItems = this.state.mediaGalleryItems;\n        const galleryImageSettings = this.props.config.galleryImageSettings;\n        if (galleryImageSettings) {\n            galleryImageSettings.cropFocalRegion = true;\n        }\n\n        const zoomView = isFullscreenAllowed ? 'fullscreen' : zoomViewMode;\n\n        const hasMediaGalleryItems = ArrayExtensions.hasElements(mediaGalleryItems);\n\n        if (!hasMediaGalleryItems) {\n            if (this.state.lastUpdate) {\n                return { items: [this._renderEmptyImage(galleryImageSettings)], keys: ['empty'] };\n            }\n            return { items: [], keys: [] };\n        }\n\n        return {\n            items: [\n                // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n                ...mediaGalleryItems!.map((item: IMediaData, index: number) => {\n                    return this._renderCarouselItemImageView(\n                        zoomView,\n                        item,\n                        galleryImageSettings ?? this.defaultGalleryImageSettings,\n                        index\n                    );\n                })\n            ],\n            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n            keys: [...mediaGalleryItems!.map(item => item.src)]\n        };\n    }\n\n    private async _setImages(images?: IMediaData[]): Promise<void> {\n        const curatedImage = this.props.config.images || [];\n        const mediaToSet: IMediaData[] = this._filterMasterImageFromVariant(images);\n\n        void Promise.all(\n            mediaToSet.map(async mediaData => {\n                if (mediaData.mediaTypeValue === MediaType.Video && mediaData.src) {\n                    try {\n                        const url = new URL(mediaData.src);\n                        const videoId = url.searchParams.get('CVID');\n                        if (videoId) {\n                            mediaData.videoData = await getVideoMetadataFromApi(videoId, this.props.context.actionContext);\n                        }\n                    } catch (error) {\n                        if (this.props.telemetry) {\n                            this.props.telemetry.debug('Error while fetching videoId');\n                        }\n                    }\n                }\n                return mediaData;\n            })\n        ).then(mediaData => {\n            const mediaItems = mediaData.filter(element => {\n                return (\n                    element.mediaTypeValue !== MediaType.Video ||\n                    (element.mediaTypeValue === MediaType.Video && element.videoData !== undefined)\n                );\n            });\n\n            this.setState({\n                mediaGalleryItems: [...mediaItems, ...curatedImage],\n                activeIndex: 0,\n                lastUpdate: Date.now(),\n                shouldUseOptimizedImage: false\n            });\n        });\n\n        this.setState({\n            mediaGalleryItems: [...mediaToSet, ...curatedImage],\n            activeIndex: 0,\n            lastUpdate: Date.now(),\n            shouldUseOptimizedImage: false\n        });\n    }\n\n    private _setRenderType(): void {\n        this.setState({\n            isInitialLoad: false\n        });\n    }\n\n    private _renderCarouselItemImageView(\n        zoomView: string,\n        media: IMediaData,\n        imageSettings: IImageSettings,\n        index: number,\n        isInPopup: boolean = false\n    ): React.ReactNode {\n        if (media.mediaTypeValue === MediaType.Video) {\n            if (isInPopup || zoomView !== 'fullscreen') {\n                return <>{this._renderCarouselItemVideo(media, index, imageSettings)}</>;\n            }\n            return <>{this._renderVideoThumbnail(media, index, imageSettings)}</>;\n        } else {\n            if (this.isMobile()) {\n                if (isInPopup) {\n                    return this._renderImageInContainerOnZoom(media, this._zoomedImageSettings, index);\n                }\n                return this._renderImageFullScreenOnZoom(media, imageSettings, index);\n            }\n\n            switch (zoomView) {\n                case 'container': {\n                    return this._renderImageInContainerOnZoom(media, this._zoomedImageSettings, index);\n                }\n                case 'inline': {\n                    return this._renderImageInlineOnZoom(media, this._zoomedImageSettings, index);\n                }\n                case 'fullscreen': {\n                    return this._renderImageFullScreenOnZoom(media, imageSettings, index);\n                }\n\n                // No default\n            }\n            return <>{this._getCarouselItem(media, imageSettings, index, isInPopup)}</>;\n        }\n    }\n\n    private _filterMasterImageFromVariant(images?: IImageData[]): IImageData[] {\n        const shouldHidePrimaryImages = this.props.config.shouldHideMasterProductImagesForVariant ?? true;\n        let variantImages = images ?? [];\n        const isVariantProduct =\n            !ObjectExtensions.isNullOrUndefined(this.props.data.product.result?.MasterProductId) ||\n            !ObjectExtensions.isNullOrUndefined(this.props.data.product.result?.productVariant);\n        const itemId = this.props.data.product.result?.ItemId;\n        if (shouldHidePrimaryImages && isVariantProduct && itemId) {\n            variantImages = variantImages.filter(item => {\n                const isApplicableForChildEntities = item.additionalProperties?.isApplicableForChildEntities;\n                return !isApplicableForChildEntities;\n            });\n            if (!ArrayExtensions.hasElements(variantImages)) {\n                variantImages = images ?? [];\n            }\n        }\n        return variantImages;\n    }\n\n    private readonly _renderCarouselItemVideo = (mediaData: IMediaData, index: number, imageSettings: IImageSettings): React.ReactNode => {\n        const videoData = mediaData.videoData;\n        if (videoData) {\n            const options: IPlayerOptions = this.props.config as IPlayerOptions;\n            const playerResources = this.props.resources;\n            const videoMetaData: IVideoMetadata = {};\n            videoMetaData.videoId = videoData.id;\n            videoMetaData.title = videoData.title;\n            videoMetaData.duration = videoData.playTime;\n            if (videoData.thumbnail) {\n                videoMetaData.posterframeUrl = videoData.thumbnail.src;\n            }\n            if (videoData._links?.binaryReferences) {\n                videoMetaData.videoBinaryReferences = videoData._links.binaryReferences;\n            }\n            const videoPlayerData: IPlayerData = { options, metaData: videoMetaData };\n            const attributes = {\n                id: `${this.props.id}__carousel-item__${index}`\n            };\n            return (\n                <Video className='ms-media-gallery__player' editProps={{ key: videoData, requestContext: this.props.context.request }}>\n                    <Player\n                        ref={this.player}\n                        playerData={videoPlayerData}\n                        isEditor={this.props.context.request.params.isEditor}\n                        playerResources={playerResources}\n                        {...attributes}\n                    />\n                </Video>\n            );\n        }\n        return this._renderEmptyImage(imageSettings);\n    };\n\n    private readonly _getCarouselItem = (\n        image: IImageData,\n        imageSettings: IImageSettings,\n        index: number,\n        isInPopup: boolean = false\n    ): React.ReactNode => (\n        <Image\n            requestContext={this.props.context.actionContext.requestContext}\n            className='ms-media-gallery__item'\n            {...image}\n            fallBackSrc={this.props.context.request.app?.config?.OmniChannelMedia ? '' : index === 0 ? this.fallbackImage : image.src}\n            gridSettings={this.props.context.request.gridSettings!}\n            imageSettings={imageSettings}\n            loadFailureBehavior='hide'\n            id={`${this.props.id}__carousel-item__${index}`}\n            shouldSkipToMainImage={isInPopup}\n            bypassHideOnFailure={index === 0}\n        />\n    );\n\n    private readonly _getThumbnailItem = (\n        image: IImageData,\n        imageSettings: IImageSettings,\n        index: number,\n        modifiedActiveIndex: number\n    ): IMediaGalleryThumbnailItemViewProps => {\n        const classes = classnames(\n            'ms-media-gallery__thumbnail-item',\n            modifiedActiveIndex === index ? 'ms-media-gallery__thumbnail-item-active' : ''\n        );\n\n        return {\n            ThumbnailItemContainerProps: {\n                tag: 'li' as NodeTag,\n                className: classes,\n                role: 'tab',\n                tabIndex: 0,\n                key: index,\n                'aria-label': image.altText,\n                'aria-selected': modifiedActiveIndex === index,\n                onClick: this._generateOnThumbnailClick(index),\n                onKeyDown: this._generateOnThumbnailKeyDown(index)\n            },\n            Picture: (\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__thumbnail'\n                    {...image}\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='hide'\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage}\n                    bypassHideOnFailure={index === 0}\n                />\n            )\n        };\n    };\n\n    /**\n     * Gets the video thumbnail item to display media gallery.\n     * @param props - The Media gallery view props from business layer.\n     * @returns Return thumbnail view props which will be used to render video.\n     */\n    private readonly getVideoThumbNailItem = (\n        mediaData: IMediaData,\n        imageSettings: IImageSettings,\n        index: number,\n        modifiedActiveIndex: number\n    ): IMediaGalleryThumbnailItemViewProps => {\n        const classes = classnames(\n            'ms-media-gallery__thumbnail-item',\n            modifiedActiveIndex === index ? 'ms-media-gallery__thumbnail-item-active' : ''\n        );\n\n        const videoData = mediaData.videoData;\n        let image: IImageData;\n        if (videoData?.thumbnail) {\n            image = videoData.thumbnail;\n        } else {\n            image = {\n                src: 'empty'\n            };\n        }\n\n        return {\n            ThumbnailItemContainerProps: {\n                tag: 'li' as NodeTag,\n                className: classes,\n                role: 'tab',\n                tabIndex: 0,\n                key: index,\n                'aria-label': image.altText,\n                'aria-selected': modifiedActiveIndex === index,\n                onClick: this._generateOnThumbnailClick(index),\n                onKeyDown: this._generateOnThumbnailKeyDown(index)\n            },\n            Picture: (\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__thumbnail'\n                    {...image}\n                    fallBackSrc={image.src}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='hide'\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage}\n                    bypassHideOnFailure={index === 0}\n                />\n            )\n        };\n    };\n\n    /**\n     * Ref Handler.\n     * @param index -Remove item click function.\n     * @returns Set inline zoom.\n     */\n    private readonly _refHandler = (index: number) => (divRef: HTMLDivElement) => {\n        this._inlineZoomDivRef.set(index, divRef);\n    };\n\n    private readonly _generateOnThumbnailKeyDown = (index: number) => {\n        return (event: React.KeyboardEvent) => {\n            if (event.which === KeyCodes.Enter || event.which === KeyCodes.Space) {\n                event.preventDefault();\n\n                this.goToIndex(index);\n            }\n        };\n    };\n\n    private readonly _generateOnThumbnailClick = (index: number) => {\n        return (event: React.MouseEvent<HTMLLIElement>) => {\n            event.preventDefault();\n\n            this.goToIndex(index);\n        };\n    };\n\n    private _renderImageInlineOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n        return (\n            <div\n                className={`ms-inline-zoom ${this.state.isImageZoomed ? 'zoomed' : ''}`}\n                ref={this._refHandler(index)}\n                data-scale={this.props.config.dataScale ?? defaultDataScale}\n            >\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__item'\n                    {...image}\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='hide'\n                    onClick={this._onInlineImageClick}\n                    onMouseOver={(this.state.isImageZoomed && this._inlineZoomImageOnHover) || undefined}\n                    id={`${this.props.id}__carousel-item__${index}`}\n                    shouldSkipToMainImage\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage && !this.props.config.allowFullScreen}\n                    bypassHideOnFailure={index === 0}\n                />\n                <Image\n                    role='presentation'\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-inline-zoom__zoomedImg'\n                    {...image}\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\n                    onClick={this._onImageMouseOut}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='hide'\n                    id={`${this.props.id}__zoom__${index}`}\n                    onMouseMove={(this.state.isImageZoomed && inlineZoomImageOnMouseMove) || undefined}\n                    shouldSkipToMainImage\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage && !this.props.config.allowFullScreen}\n                    bypassHideOnFailure={index === 0}\n                />\n            </div>\n        );\n    }\n\n    private _inlineZoomImageOnHover(event: React.MouseEvent<HTMLImageElement>): void {\n        inlineZoomImageOnHover(event, this.props.config.dataScale ?? String(defaultDataScale));\n    }\n\n    private _handleMobileViewZoomedImageClick(event: React.MouseEvent<HTMLImageElement>) {\n        const target = this.state.shouldUseOptimizedImage ? (event.target as HTMLImageElement) : event.currentTarget;\n        const mobileZoomedInImageClassName = 'msc-mobile-zoomed-in';\n        if (!this.state.isMobileImageZoomed) {\n            const bounds = target.getBoundingClientRect();\n            const dataScale = Number(this.props.config.dataScale ?? defaultDataScale);\n\n            const positionX = event.clientX - bounds.left;\n            const positionY = event.clientY - bounds.top;\n            const scaledPositionX = positionX * dataScale;\n            const scaledPositionY = positionY * dataScale;\n\n            target.style.transform = `scale(${dataScale})`;\n            target.classList.add(mobileZoomedInImageClassName);\n            target.parentElement!.style.overflow = 'auto';\n            target.parentElement!.scrollTo(scaledPositionX - positionX, scaledPositionY - positionY);\n            this.setState({\n                isMobileImageZoomed: true\n            });\n        } else {\n            target.style.transform = '';\n            target.classList.remove(mobileZoomedInImageClassName);\n            target.parentElement!.style.overflow = '';\n            this.setState({\n                isMobileImageZoomed: false\n            });\n        }\n    }\n\n    private _onInlineImageClick(event: React.MouseEvent<HTMLImageElement>): void {\n        if (window.innerWidth <= 768) {\n            // $msv-breakpoint-m\n            this._handleMobileViewZoomedImageClick(event);\n            return;\n        }\n        inlineZoomInitClick(event, this.props.config.dataScale ?? String(defaultDataScale));\n        this.setState({\n            isImageZoomed: true\n        });\n    }\n\n    private _onImageMouseOut(event: React.MouseEvent<HTMLImageElement, MouseEvent>): void {\n        inlineZoomImageOnMouseOut(event);\n        this.setState({\n            isImageZoomed: false\n        });\n    }\n\n    private _onContainerZoomImageClick(event: React.MouseEvent<HTMLImageElement>): void {\n        if (window.innerWidth <= 768) {\n            // $msv-breakpoint-m\n            this._handleMobileViewZoomedImageClick(event);\n            return;\n        }\n\n        onContainerZoomInit(event);\n\n        this.setState({\n            isImageZoomed: true\n        });\n    }\n\n    private _onMouseOutLensContainer(event: React.MouseEvent<HTMLImageElement>): void {\n        onMouseOutLensContainer(event);\n\n        this.setState({\n            isImageZoomed: false\n        });\n    }\n\n    private _renderImageInContainerOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n        return (\n            <div className='ms-containerZoom__container'>\n                <div\n                    data-scale={this.props.config.dataScale ?? defaultDataScale}\n                    className='ms-containerZoom__zoom-lens'\n                    role='presentation'\n                    onMouseOut={this._onMouseOutLensContainer}\n                    onClick={this._onMouseOutLensContainer}\n                    onMouseMove={(this.state.isImageZoomed && onMouseMoveLensContainer) || undefined}\n                />\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__item'\n                    {...image}\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    onClick={this._onContainerZoomImageClick}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='hide'\n                    onMouseOver={(this.state.isImageZoomed && onMouseOverImageContainer) || undefined}\n                    id={`${this.props.id}__carousel-item__${index}`}\n                    shouldSkipToMainImage\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage && !this.props.config.allowFullScreen}\n                    bypassHideOnFailure={index === 0}\n                />\n            </div>\n        );\n    }\n\n    private _renderImageFullScreenOnZoom(image: IImageData, imageSettings: IImageSettings, index: number): React.ReactNode {\n        return (\n            <div className='ms-fullscreen-section'>\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__item'\n                    {...image}\n                    fallBackSrc={index === 0 ? this.fallbackImage : image.src}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='hide'\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage}\n                    bypassHideOnFailure={index === 0}\n                />\n                <div className='ms-fullscreen-section__overlay'>\n                    {}\n                    <a\n                        href='javascript:void(0);'\n                        title={this.props.resources.fullScreenTitleText}\n                        role='button'\n                        ref={this.fullScreenOverlayButtonRef}\n                        onClick={this.openModalDialog}\n                        className='ms-fullscreen-section__magnifying-glass-icon'\n                    />\n                </div>\n            </div>\n        );\n    }\n\n    /**\n     * Render the video thumbnail in full screen.\n     * @param mediaData - Media Data.\n     * @param index - Index\n     * @param imageSettings - Image settings.\n     * @returns - JSX.Element\n     */\n    private readonly _renderVideoThumbnail = (mediaData: IMediaData, index: number, imageSettings: IImageSettings): React.ReactNode => {\n        const videoData = mediaData.videoData;\n        let image: IImageData;\n        if (videoData?.thumbnail) {\n            image = videoData.thumbnail;\n        } else {\n            image = {\n                src: 'empty'\n            };\n        }\n\n        return (\n            <div className='ms-fullscreen-section'>\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-fullscreen-section__video'\n                    {...image}\n                    fallBackSrc={image.src}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='hide'\n                    imageFallbackOptimize={this.state.shouldUseOptimizedImage}\n                    bypassHideOnFailure={index === 0}\n                />\n                <div className='ms-fullscreen-section__video-overlay'>\n                    {}\n                    <button\n                        title={this.props.resources.fullScreenTitleText}\n                        role='button'\n                        ref={this.fullScreenOverlayButtonRef}\n                        onClick={this.openModalDialog}\n                        className='ms-fullscreen-section__video-play-icon'\n                    />\n                </div>\n            </div>\n        );\n    };\n\n    private _mapProductToImageData(product: SimpleProduct): IImageData {\n        return {\n            src: product.PrimaryImageUrl ?? ''\n        };\n    }\n\n    private _renderEmptyImage(imageSettings: IImageSettings | undefined): React.ReactNode {\n        return (\n            <div className='ms-media-gallery__item'>\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__item__image'\n                    src='empty'\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings ?? this.defaultGalleryImageSettings}\n                    loadFailureBehavior='empty'\n                />\n            </div>\n        );\n    }\n\n    private _getEmptyThumbnailItem(\n        imageSettings: IImageSettings | undefined,\n        index: number,\n        modifiedActiveIndex: number\n    ): IMediaGalleryThumbnailItemViewProps {\n        const classes = classnames(\n            'ms-media-gallery__thumbnail-item',\n            modifiedActiveIndex === index ? 'ms-media-gallery__thumbnail-item-active' : ''\n        );\n        return {\n            ThumbnailItemContainerProps: {\n                tag: 'li' as NodeTag,\n                className: classes,\n                role: 'tab',\n                tabIndex: 0,\n                key: 'empty',\n                'aria-label': '',\n                'aria-selected': modifiedActiveIndex === index,\n                onClick: this._generateOnThumbnailClick(index),\n                onKeyDown: this._generateOnThumbnailKeyDown(index)\n            },\n            Picture: (\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__thumbnail-item__image'\n                    src='empty'\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings ?? this.defaultThumbnailImageSettings}\n                    loadFailureBehavior='empty'\n                />\n            )\n        };\n    }\n\n    private readonly isFirstItem = () => this.state.activeIndex === 0;\n\n    private readonly isLastItem = () => {\n        const images = this.state.mediaGalleryItems;\n        return images && this.state.activeIndex === images.length - 1;\n    };\n\n    private readonly openModalDialog = (): void => {\n        this._toggleModal();\n    };\n\n    private _toggleModal(): void {\n        if (this.state.modalIsOpen) {\n            this.fullScreenOverlayButtonRef.current?.focus();\n            const parentDiv = this._inlineZoomDivRef.get(this.state.activeIndex);\n            if (parentDiv && parentDiv.children && parentDiv.children.length >= 2) {\n                const image = parentDiv.children[1].querySelector('img');\n                if (image) {\n                    image.removeAttribute('style');\n                }\n            }\n            this.setState({\n                isImageZoomed: false\n            });\n        }\n        this.setState({\n            isImageZoomed: false,\n            modalIsOpen: !this.state.modalIsOpen\n        });\n        removeInlineZoomStyle();\n        removeContainerZoomStyle();\n    }\n\n    private readonly imageModalSlider = (ZoomView: string): React.ReactElement => {\n        const {\n            data: {\n                product: { result: product }\n            },\n            resources\n        } = this.props;\n        let mediaGalleryItems = this.state.mediaGalleryItems;\n\n        if (!mediaGalleryItems && product) {\n            mediaGalleryItems = [this._mapProductToImageData(product)];\n        }\n        const carouselprops = {\n            tag: Carousel,\n            className: 'ms-media-gallery__carousel',\n            items:\n                mediaGalleryItems &&\n                mediaGalleryItems.map((item: IImageData, index: number) =>\n                    this._renderCarouselItemImageView(ZoomView, item, this._zoomedImageSettings, index, true)\n                ),\n            activeIndex: this.state.activeIndex,\n            next: this.next,\n            previous: this.previous,\n            interval: false,\n            directionTextPrev: resources.previousScreenshotFlipperText,\n            directionTextNext: resources.nextScreenshotFlipperText,\n            onIndicatorsClickHandler: this.goToIndex,\n            showPaginationTooltip: true,\n            hideIndicator: false,\n            keyboard: false,\n            handleOnExited: this.onExited,\n            handleOnExiting: this.onExiting,\n            isDisabledFunctionality: this.state.isMobileImageZoomed\n        } as IComponentNodeProps<ICarouselProps>;\n        const carousel = <Carousel {...carouselprops} />;\n\n        const imageModalSliderProps: IModalViewProps = {\n            modalIsOpen: this.state.modalIsOpen,\n            ontoggle: this._toggleModal,\n            galleryCarousel: carousel,\n            classNames: classnames('ms-media-gallery__modal', 'msc-modal-input-required')\n        };\n        return ImagefullView(imageModalSliderProps) as React.ReactElement;\n    };\n\n    private shouldUseCmsAltText = (): boolean => {\n        if (this.props.config.altTextSource === 'product') {\n            return false;\n        } else {\n            return true;\n        }\n    };\n}\n\nexport default MediaGallery;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IImageData, IImageSettings, Image, Video } from '@msdyn365-commerce/core';\nimport {\n    IMediaData,\n    IMediaGalleryThumbnailItemViewProps,\n    IMediaGalleryThumbnailsViewProps,\n    IMediaGalleryViewProps,\n    MediaType\n} from '@msdyn365-commerce-modules/media-gallery';\nimport { ArrayExtensions, getFallbackImageUrl } from '@msdyn365-commerce-modules/retail-actions';\nimport { Button, KeyCodes, Module, Node, NodeTag } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport React from 'react';\nimport { IPlayerData, IPlayerOptions, IVideoMetadata, Player } from '@msdyn365-commerce-modules/video-player-utilities';\n\ninterface IMediaGalleryItemsProps extends IMediaGalleryThumbnailItemViewProps {\n    Video?: React.ReactElement;\n}\n\n/**\n * Render the thumbnail item images.\n * @param thumbnail - The carousel thumbnail line props.\n * @returns Return HTML having thumbnail container props with image.\n */\nconst renderThumbnailItem = (thumbnail: IMediaGalleryItemsProps): JSX.Element => {\n    // eslint-disable-next-line @typescript-eslint/naming-convention --  Dependency from media-gallery.tsx file\n    const { ThumbnailItemContainerProps, Picture, Video } = thumbnail;\n\n    return <Node {...ThumbnailItemContainerProps}>{Video ? Video : Picture}</Node>;\n};\n\n/**\n * Gets the thumbnail item to display media gallery images.\n * @param image - The media gallery images.\n * @param imageSettings - Image settings for the image gallery items.\n * @param imageId - Image id.\n * @param modifiedActiveIndex - Modified Index of the images when selection changes.\n * @param props - The Media gallery view props from business layer.\n * @returns Return thumbnail view props which will be used to render images.\n */\nconst GetThumbnailItemComponent = (\n    image: IImageData,\n    imageSettings: IImageSettings,\n    imageId: number,\n    modifiedActiveIndex: number,\n    props: IMediaGalleryViewProps,\n    mediaTypeValue?: MediaType\n): IMediaGalleryThumbnailItemViewProps => {\n    let fallbackImage: string | undefined = '';\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Site level config can be of any type.\n    const emptyPlaceHolderImage = props.context.app.config?.placeholderImageName as string;\n    if (props.data.product.result) {\n        fallbackImage = getFallbackImageUrl(\n            props.data.product.result.ItemId,\n            props.context.request.apiSettings,\n            props.context.request.app?.config?.OmniChannelMedia\n        );\n    }\n    if (emptyPlaceHolderImage && fallbackImage) {\n        fallbackImage = `${fallbackImage},${emptyPlaceHolderImage}`;\n    }\n\n    /**\n     * OnClick method of media gallery item.\n     */\n    const onClick = () => {\n        props.callbackToggle?.();\n        props.callbackThumbnailClick?.(imageId);\n        props.state.activeIndex = imageId;\n    };\n\n    const classes = classnames(\n        'ms-media-gallery__thumbnail-item',\n        modifiedActiveIndex === imageId ? 'ms-media-gallery__thumbnail-item-active' : ''\n    );\n\n    /**\n     * Keydown event of media gallery item.\n     * @param event - React.KeyboardEvent.\n     */\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.keyCode === KeyCodes.Enter) {\n            event.preventDefault();\n            onClick();\n        }\n    };\n    const defaultIndex = 0;\n    return {\n        ThumbnailItemContainerProps: {\n            tag: 'li' as NodeTag,\n            className: classes,\n            role: 'presentation',\n            key: imageId\n        },\n        Picture: (\n            <Node className='ms-fullscreen-section'>\n                <Button\n                    role='tab'\n                    aria-label={image.altText}\n                    aria-selected={modifiedActiveIndex === imageId}\n                    aria-controls={`${props.id}__carousel-item__${imageId}`}\n                    className='msc-ss-carousel-vert-button-wrapper'\n                    onClick={onClick}\n                    onKeyDown={handleKeyDown}\n                >\n                    <Image\n                        requestContext={props.context.actionContext.requestContext}\n                        className='ms-media-gallery__thumbnail'\n                        {...image}\n                        gridSettings={props.context.request.gridSettings!}\n                        imageSettings={props.config.thumbnailImageSettings ?? imageSettings}\n                        loadFailureBehavior='hide'\n                        imageFallbackOptimize={props.state.shouldUseOptimizedImage}\n                        fallBackSrc={\n                            props.context.request.app?.config?.OmniChannelMedia ? '' : imageId === defaultIndex ? fallbackImage : image.src\n                        }\n                        bypassHideOnFailure={imageId === defaultIndex}\n                    />\n                </Button>\n                <Node\n                    className={\n                        mediaTypeValue === MediaType.Video ? 'ms-fullscreen-section__video-overlay' : 'ms-fullscreen-section__overlay'\n                    }\n                >\n                    <Button\n                        onKeyDown={handleKeyDown}\n                        title={\n                            mediaTypeValue === MediaType.Video ? props.resources.playVideoTitleText : props.resources.fullScreenTitleText\n                        }\n                        role='button'\n                        className={\n                            mediaTypeValue === MediaType.Video\n                                ? 'ms-fullscreen-section__video-play-icon'\n                                : 'ms-fullscreen-section__magnifying-glass-icon'\n                        }\n                        onClick={onClick}\n                    />\n                </Node>\n            </Node>\n        )\n    };\n};\n\n/**\n * Render the video player.\n * @param mediaData - Media Data\n * @param index - Index of the video\n * @param activeIndex - Active Index\n * @param imageSettings - Image settings\n * @param props - Media gallery view props\n * @returns - JSX.Element.\n */\nconst RenderVideo = (\n    mediaData: IMediaData,\n    index: number,\n    activeIndex: number,\n    imageSettings: IImageSettings,\n    props: IMediaGalleryViewProps\n): IMediaGalleryItemsProps => {\n    const videoData = mediaData.videoData;\n    if (videoData) {\n        const options: IPlayerOptions = props.config as IPlayerOptions;\n        const playerResources = props.resources;\n        const videoMetaData: IVideoMetadata = {};\n        videoMetaData.videoId = videoData.id;\n        videoMetaData.title = videoData.title;\n        videoMetaData.duration = videoData.playTime;\n        if (videoData.thumbnail) {\n            videoMetaData.posterframeUrl = videoData.thumbnail.src;\n        }\n        if (videoData._links?.binaryReferences) {\n            videoMetaData.videoBinaryReferences = videoData._links.binaryReferences;\n        }\n        const videoPlayerData: IPlayerData = { options, metaData: videoMetaData };\n\n        const classes = classnames(\n            'ms-media-gallery__thumbnail-item',\n            index === activeIndex ? 'ms-media-gallery__thumbnail-item-active' : ''\n        );\n\n        return {\n            ThumbnailItemContainerProps: {\n                tag: 'li' as NodeTag,\n                className: classes,\n                role: 'presentation',\n                key: index\n            },\n            Picture: <></>,\n            Video: (\n                <Video className='ms-media-gallery__player' editProps={{ key: videoData, requestContext: props.context.request }}>\n                    <Player\n                        playerData={videoPlayerData}\n                        isEditor={props.context.request.params.isEditor}\n                        playerResources={playerResources}\n                    />\n                </Video>\n            )\n        };\n    }\n    return GetEmptyThumbnailItemComponent(imageSettings, props);\n};\n\n/**\n * Gets the empty thumbnail item to display media gallery images.\n * @param imageSettings - Image settings for the image gallery items.\n * @param props - The Media gallery view props from business layer.\n * @returns Return thumbnail view props which will be used to render empty images.\n */\nconst GetEmptyThumbnailItemComponent = (\n    imageSettings: IImageSettings,\n    props: IMediaGalleryViewProps\n): IMediaGalleryThumbnailItemViewProps => {\n    let fallbackImage: string | undefined = '';\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Site level config can be of any type.\n    const emptyPlaceHolderImage = props.context.app.config?.placeholderImageName as string;\n\n    if (props.data.product.result) {\n        fallbackImage = getFallbackImageUrl(\n            props.data.product.result.ItemId,\n            props.context.request.apiSettings,\n            props.context.request.app?.config?.OmniChannelMedia\n        );\n    }\n    if (emptyPlaceHolderImage && fallbackImage) {\n        fallbackImage = `${fallbackImage},${emptyPlaceHolderImage}`;\n    }\n\n    return {\n        ThumbnailItemContainerProps: {\n            tag: 'li' as NodeTag,\n            className: 'ms-media-gallery__thumbnail-item',\n            role: 'tab',\n            tabIndex: 0,\n            key: 0,\n            'aria-label': '',\n            'aria-selected': true\n        },\n        Picture: (\n            <Image\n                requestContext={props.context.actionContext.requestContext}\n                className='ms-media-gallery__thumbnail-item__image'\n                src='empty'\n                gridSettings={props.context.request.gridSettings!}\n                imageSettings={props.config.thumbnailImageSettings ?? imageSettings}\n                loadFailureBehavior='empty'\n                imageFallbackOptimize={!!props.config.skipImageValidation}\n                fallBackSrc={fallbackImage}\n            />\n        )\n    };\n};\n\n/**\n * Update media gallery items method.\n * @param items - The media gallery thumbnail item view props.\n * @returns The IImageData array.\n */\nconst getMediaGalleryItems = (items?: IMediaData[]): IMediaData[] | undefined => {\n    return items?.map(item => {\n        return {\n            displayOrder: item.displayOrder,\n            mediaTypeValue: item.mediaTypeValue,\n            altText: item.altText,\n            src: item.src,\n            videoData: item.videoData\n        };\n    });\n};\n\nconst defaultThumbnailImageSettings: IImageSettings = {\n    viewports: {\n        xs: { q: 'w=295&h=295&q=80&m=6&f=jpg', w: 295, h: 295 },\n        xl: { q: 'w=295&h=295&q=80&m=6&f=jpg', w: 295, h: 295 }\n    },\n    lazyload: true,\n    cropFocalRegion: true\n};\n\n/**\n * Render the Media gallery thumbnails to represent images in grid view.\n * @param thumbnails - The thumbnail view props.\n * @param props - The media gallery view props.\n * @returns - The single slide carousel component to render as media gallery image.\n */\nconst renderThumbnails = (thumbnails: IMediaGalleryThumbnailsViewProps, props: IMediaGalleryViewProps): JSX.Element => {\n    // eslint-disable-next-line @typescript-eslint/naming-convention --  Dependency from media-gallery.tsx file\n    const { ThumbnailsContainerProps, SingleSlideCarouselComponentProps } = thumbnails;\n    const { state } = props;\n    const mediaGalleryItems = getMediaGalleryItems(state.mediaGalleryItems);\n\n    const items: IMediaGalleryItemsProps[] | undefined =\n        // eslint-disable-next-line multiline-ternary -- need multiline for easy code reading\n        state.lastUpdate && ArrayExtensions.hasElements(mediaGalleryItems) && mediaGalleryItems[0].src === 'empty'\n            ? [GetEmptyThumbnailItemComponent(defaultThumbnailImageSettings, props)]\n            : // eslint-disable-next-line @typescript-eslint/naming-convention -- Dependency from media-gallery\n              mediaGalleryItems?.map((item: IMediaData, id: number) => {\n                  if (item.mediaTypeValue === MediaType.Video) {\n                      if (props.config.allowFullScreen) {\n                          const videoThumbnail = item.videoData?.thumbnail;\n                          if (videoThumbnail) {\n                              return GetThumbnailItemComponent(\n                                  videoThumbnail,\n                                  defaultThumbnailImageSettings,\n                                  id,\n                                  state.activeIndex,\n                                  props,\n                                  item.mediaTypeValue\n                              );\n                          } else {\n                              return GetEmptyThumbnailItemComponent(defaultThumbnailImageSettings, props);\n                          }\n                      } else {\n                          return RenderVideo(item, id, state.activeIndex, defaultThumbnailImageSettings, props);\n                      }\n                  } else {\n                      return GetThumbnailItemComponent(item, defaultThumbnailImageSettings, id, state.activeIndex, props);\n                  }\n              });\n\n    return (\n        <Node {...ThumbnailsContainerProps}>\n            <Node {...SingleSlideCarouselComponentProps}>{items?.map(renderThumbnailItem)}</Node>\n        </Node>\n    );\n};\n\n/**\n * Render the Media gallery items using viewprops.\n * @param props - The media gallery view props.\n * @returns The media gallery module wrapping up images node.\n */\nconst mediaGalleryView: React.FC<IMediaGalleryViewProps> = props => {\n    // eslint-disable-next-line @typescript-eslint/naming-convention --  Dependency from media-gallery.tsx file\n    const { CarouselProps, Thumbnails, MediaGallery, Modal } = props;\n    return (\n        <Module {...MediaGallery}>\n            <Node {...CarouselProps} />\n            {Modal}\n            {renderThumbnails(Thumbnails, props)}\n        </Module>\n    );\n};\n\nexport default mediaGalleryView;\n","module.exports = React;","module.exports = ReactDOM;"],"names":["imageSource","imageZoom","thumbnailsOrientation","async","getValidProductImages","productId","channelId","actionContext","imageSettings","selectedProduct","catalogId","getCatalogId","requestContext","actionInput","MediaLocationsForSelectedVariantInput","getMediaLocationsForSelectedVariant","then","mediaLocations","Promise","all","map","mediaLocation","validateMediaLocaionAsync","pairs","filter","pair","catch","error","telemetry","exception","debug","validateProductImages","imageData","src","Uri","altText","AltText","resolve","http","XMLHttpRequest","open","addEventListener","status","send","_unused","MediaGallery","React","constructor","props","_this","_ref","_props$config$zoomedI","super","this","_inlineZoomDivRef","Map","fullScreenOverlayButtonRef","mediaGalleryImages","defaultGalleryImageSettings","viewports","xs","q","w","h","sm","md","lg","lazyload","cropFocalRegion","defaultThumbnailImageSettings","onExiting","setState","animating","onExited","next","removeInlineZoomStyle","undefined","isLastItem","nextIndex","state","activeIndex","goToIndex","updateZoomedInImage","previous","images","mediaGalleryItems","isFirstItem","length","index","_getCarouselItem","image","isInPopup","arguments","Image","Object","assign","context","className","fallBackSrc","fallbackImage","gridSettings","request","loadFailureBehavior","id","shouldSkipToMainImage","bypassHideOnFailure","_getThumbnailItem","modifiedActiveIndex","ThumbnailItemContainerProps","tag","classnames","role","tabIndex","key","onClick","_generateOnThumbnailClick","onKeyDown","_generateOnThumbnailKeyDown","Picture","imageFallbackOptimize","shouldUseOptimizedImage","_refHandler","divRef","set","event","which","KeyCodes","Enter","Space","preventDefault","openModalDialog","_toggleModal","imageModalSlider","ZoomView","data","product","result","resources","_mapProductToImageData","carouselprops","Carousel","items","item","_renderCarouselItemImageView","_zoomedImageSettings","interval","directionTextPrev","previousScreenshotFlipperText","directionTextNext","nextScreenshotFlipperText","onIndicatorsClickHandler","showPaginationTooltip","hideIndicator","keyboard","handleOnExited","handleOnExiting","isDisabledFunctionality","isMobileImageZoomed","carousel","imageModalSliderProps","modalIsOpen","ontoggle","galleryCarousel","classNames","ImagefullView","bind","isImageZoomed","isInitialLoad","config","skipImageValidation","zoomedImageSettings","galleryImageSettings","_onImageMouseOut","_inlineZoomImageOnHover","_onInlineImageClick","_onContainerZoomImageClick","_onMouseOutLensContainer","isMobile","variant","VariantType","Viewport","_this$props$config$im","source","pageContext","shouldUpdateOnPartialDimensionSelection","_setRenderType","mediaLocationsForSelectedVariant","_this$props$config$th","thumbnailImageSettings","_setImages","_this$props$config$th2","RecordId","apiSettings","productVariant","reaction","_product$productVaria","ObjectExtensions","isNullOrUndefined","lastSelectedProduct","differsBeyondSize","_product$Dimensions","Dimensions","forEach","dimension","_lastSelectedProduct$","lastSelectedDimension","find","lastDimension","_dimension$DimensionV","_lastDimension$Dimens","DimensionTypeValue","DimensionValue","Value","_this$props$config$th3","_this$props$config$th4","shouldComponentUpdate","nextProps","nextState","render","_this$props$config$im2","_this$props$context$a","isVertical","vertical","isFullscreenAllowed","allowFullScreen","zoomViewMode","inline","container","emptyPlaceHolderImage","app","placeholderImageName","getFallbackImageUrl","ItemId","_this$props$config$im3","_mediaLocation$Uri","_mediaLocation$AltTex","curatedImages","_filterMasterImageFromVariant","mediaGalleryCarouselItems","_getMediaGalleryItems","mediaGalleryThumbnailCarouselItems","_getMediaGalleryThumbnailItems","viewProps","_objectSpread","moduleProps","Modal","callbackToggle","callbackThumbnailClick","callbackThumbnailKeyDown","CarouselProps","indicatorAriaText","ariaLabelForSlide","keys","Thumbnails","ThumbnailsContainerProps","SingleSlideCarouselComponentProps","SingleSlideCarousel","flipperPrevLabel","flipperNextLabel","parentId","useTabList","JSON","stringify","renderView","_this$state$mediaGall","ArrayExtensions","hasElements","lastUpdate","defaultKey","_getEmptyThumbnailItem","_this$state$mediaGall2","zoomView","_renderEmptyImage","_this$props$config$im4","_this$props$config$sh","curatedImage","imagesToSet","shouldHideMasterProductImagesForVariant","_item$src","incrementedIndex","imageIndex","includes","Date","now","_renderImageInContainerOnZoom","_renderImageFullScreenOnZoom","_renderImageInlineOnZoom","_this$props$config$sh2","_this$props$data$prod","_this$props$data$prod2","_this$props$data$prod3","shouldHidePrimaryImages","variantImages","isVariantProduct","MasterProductId","itemId","_item$src2","imagePattern","_this$props$config$da","ref","dataScale","defaultDataScale","onMouseOver","onMouseMove","inlineZoomImageOnMouseMove","_this$props$config$da2","inlineZoomImageOnHover","String","_handleMobileViewZoomedImageClick","target","currentTarget","mobileZoomedInImageClassName","style","transform","classList","remove","parentElement","overflow","_this$props$config$da3","bounds","getBoundingClientRect","Number","positionX","clientX","left","positionY","clientY","top","scaledPositionX","scaledPositionY","add","scrollTo","_this$props$config$da4","window","innerWidth","inlineZoomInitClick","inlineZoomImageOnMouseOut","onContainerZoomInit","onMouseOutLensContainer","_this$props$config$da5","onMouseOut","onMouseMoveLensContainer","onMouseOverImageContainer","href","title","fullScreenTitleText","_product$PrimaryImage","PrimaryImageUrl","_this$fullScreenOverl","current","focus","parentDiv","get","children","querySelector","removeAttribute","removeContainerZoomStyle","_renderThumbnails","thumbnails","Node","_renderThumbnailItem","thumbnail","Module","binding","modules","dataActions","registerSanitizedActionPath","sanitizedActionPath","dataAction","default","Error","prototype","RegistrationId","c","require","$type","da","name","path","runOn","iNM","ns","n","p","pdp","__bindings__","viewDictionary","cn","MediaType","renderThumbnailItem","Video","GetThumbnailItemComponent","imageId","mediaTypeValue","_props$context$app$co","_props$config$thumbna","_props$context$reques2","_props$context$reques","OmniChannelMedia","_props$callbackToggle","_props$callbackThumbn","call","handleKeyDown","keyCode","Button","playVideoTitleText","GetEmptyThumbnailItemComponent","_props$context$app$co2","_props$config$thumbna2","_props$context$reques3","xl","renderThumbnails","displayOrder","videoData","getMediaGalleryItems","_item$videoData","videoThumbnail","RenderVideo","mediaData","_videoData$_links","options","playerResources","videoMetaData","videoId","duration","playTime","posterframeUrl","_links","binaryReferences","videoBinaryReferences","videoPlayerData","metaData","editProps","Player","playerData","isEditor","params","module","exports","ReactDOM"],"sourceRoot":""}