{"version":3,"file":"static/js/6df228ab6481ebcf9fdf.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/./src/themes/adventureworks/views/media-gallery.view.tsx?7d79","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}\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","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\n/* eslint-disable no-duplicate-imports */\nimport { getCatalogId, IActionContext, IImageData, IImageSettings } from '@msdyn365-commerce/core';\nimport { MediaLocation, SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { getMediaLocationsForSelectedVariant, MediaLocationsForSelectedVariantInput } from '@msdyn365-commerce-modules/retail-actions';\n\nexport async function getValidProductImages(\n    productId: number, channelId: number,\n    actionContext: IActionContext, imageSettings: IImageSettings,\n    selectedProduct?: SimpleProduct): Promise<IImageData[]> {\n\n    const catalogId = getCatalogId(actionContext.requestContext);\n    const actionInput = new MediaLocationsForSelectedVariantInput(\n        productId,\n        channelId,\n        selectedProduct,\n        catalogId\n    );\n\n    return getMediaLocationsForSelectedVariant(actionInput, actionContext)\n        .then(mediaLocations => {\n            if (mediaLocations) {\n                return Promise.all(mediaLocations.map((mediaLocation) => validateMediaLocaionAsync(mediaLocation, imageSettings)))\n                    .then(pairs => {\n                        return pairs.filter(pair => pair[1]).map(pair => pair[0]);\n                    });\n            }\n\n            return [];\n        }).catch(error => {\n            actionContext.telemetry.exception(error);\n            actionContext.telemetry.debug('Unable to get Media Locations for Selected Variant');\n            return [];\n        });\n}\n\nexport async function validateProductImages(mediaLocations: MediaLocation[], actionContext: IActionContext, imageSettings: IImageSettings): Promise<IImageData[]> {\n    return Promise.all(mediaLocations.map((mediaLocation) => validateMediaLocaionAsync(mediaLocation, imageSettings)))\n        .then(pairs => {\n            return pairs.filter(pair => pair[1]).map(pair => pair[0]);\n        }).catch(error => {\n            actionContext.telemetry.exception(error);\n            actionContext.telemetry.debug('Unable to validate prodcut images');\n            return [];\n        });\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-unused-vars-experimental -- .\nasync function validateMediaLocaionAsync(mediaLocation: MediaLocation, imageSettings?: IImageSettings): Promise<[IImageData, boolean]> {\n    const imageData = {\n        src: mediaLocation.Uri || '',\n        altText: mediaLocation.AltText || ''\n    };\n\n    if (imageData.src === '') {\n        return [imageData, false];\n    }\n\n    return new Promise<[IImageData, boolean]>((resolve) => {\n        try {\n            const http = new XMLHttpRequest();\n            http.open('HEAD', imageData.src, true);\n\n            http.addEventListener('load', () => {\n                resolve([imageData, http.status === 200 || http.status === 201]);\n            });\n\n            http.addEventListener('error', () => {\n                resolve([imageData, false]);\n            });\n\n            http.send();\n        } catch {\n            resolve([imageData, false]);\n        }\n    });\n}\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\n/* eslint-disable no-duplicate-imports */\nimport { Carousel, ICarouselProps } from '@msdyn365-commerce/components';\nimport { IImageData, IImageSettings, Image } from '@msdyn365-commerce/core';\nimport { SimpleProduct } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, 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 { getValidProductImages, validateProductImages } from './utils';\n\nexport interface IMediaGalleryState {\n    animating: boolean;\n    activeIndex: number;\n    isImageZoomed: boolean;\n    modalIsOpen: boolean;\n    lastUpdate?: number;\n    isMobileImageZoomed?: boolean;\n    mediaGalleryItems?: IImageData[];\n}\n\nexport interface IMediaGalleryThumbnailsViewProps {\n    ThumbnailsContainerProps: INodeProps;\n    SingleSlideCarouselComponentProps: INodeProps;\n    items?: IMediaGalleryThumbnailItemViewProps[];\n}\n\nexport interface IMediaGalleryThumbnailItemViewProps {\n    ThumbnailItemContainerProps: INodeProps;\n    Picture: React.ReactElement;\n}\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 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        this.state = { activeIndex: 0, animating: false, isImageZoomed: false, modalIsOpen: false };\n\n        this._zoomedImageSettings = props.config.zoomedImageSettings ??\n            props.config.galleryImageSettings ??\n            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\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                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                this._setImages(images);\n            } else {\n                this._setImages([]);\n            }\n\n            reaction(\n                () => {\n                    const product = this.props.data.product.result;\n                    if (!product) {\n                        return null;\n                    }\n\n                    if (!shouldUpdateOnPartialDimensionSelection || ObjectExtensions.isNullOrUndefined(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                    if (product) {\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                            shouldUpdateOnPartialDimensionSelection ? product.productVariant : undefined\n                        );\n                        this._setImages(images);\n                    } else {\n                        this._setImages([]);\n                    }\n                }\n            );\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            this._setImages(images);\n        }\n\n    }\n\n    public shouldComponentUpdate(nextProps: IMediaGalleryProps<IMediaGalleryData>,\n        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 {\n            id,\n            config,\n            resources\n        } = this.props;\n\n        const { className, showPaginationTooltip } = config;\n\n        const isVertical: boolean = config.thumbnailsOrientation === thumbnailsOrientation.vertical;\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\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    /**\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\n    private readonly goToIndex = (index: number): void => {\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 { items: [this._getEmptyThumbnailItem(thumbnailImageSettings, defaultKey, this.state.activeIndex)], keys: ['empty'] };\n            }\n            return { items: [], keys: [] };\n        }\n\n        return {\n            items: [\n                ...mediaGalleryItems!.map((item: IImageData, index: number) => this._getThumbnailItem(\n                    item, thumbnailImageSettings ?? this.defaultThumbnailImageSettings, index, this.state.activeIndex))\n            ],\n            keys: [...mediaGalleryItems!.map(item => item.src)]\n        };\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                ...mediaGalleryItems!.map((item: IImageData, index: number) => this._renderCarouselItemImageView(\n                    zoomView, item, galleryImageSettings ?? this.defaultGalleryImageSettings, index))\n            ],\n            keys: [...mediaGalleryItems!.map(item => item.src)]\n        };\n    }\n\n    private _setImages(images?: IImageData[]): void {\n        const curatedImage = this.props.config.images || [];\n        const shouldHidePrimaryImages = this.props.config.shouldHideMasterProductImagesForVariant ?? true;\n\n        let imagesToSet = images ?? [];\n        if (shouldHidePrimaryImages) {\n            // Currently returned image response is having duplicate image\n            // along with non-selected variant and previous selection is not getting cleared. With the help of index we\n            // select item from 0 index till it is having non repeating image source name ending with index number.\n            // Here we are keeping '.' to make sure that we are considering any digit just before '.' in image source path\n            imagesToSet = imagesToSet.filter((item, index) => {\n                let incrementedIndex = index;\n                const imageIndex = `${++incrementedIndex}.`;\n                return item.src?.includes(imageIndex);\n            });\n        }\n\n        this.setState({\n            mediaGalleryItems: [...imagesToSet, ...curatedImage],\n            activeIndex: 0,\n            lastUpdate: Date.now()\n        });\n    }\n\n    private _renderCarouselItemImageView(\n        zoomView: string, image: IImageData, imageSettings: IImageSettings, index: number,\n        isInPopup: boolean = false): React.ReactNode {\n\n        if (this.isMobile()) {\n            if (isInPopup) {\n                return this._renderImageInContainerOnZoom(image, this._zoomedImageSettings, index);\n            }\n            return this._renderImageFullScreenOnZoom(image, imageSettings, index);\n        }\n\n        switch (zoomView) {\n            case 'container': {\n                return this._renderImageInContainerOnZoom(image, this._zoomedImageSettings, index);\n            }\n            case 'inline': {\n                return this._renderImageInlineOnZoom(image, this._zoomedImageSettings, index);\n            }\n            case 'fullscreen': {\n                return this._renderImageFullScreenOnZoom(image, imageSettings, index);\n            }\n\n        // No default\n        }\n        return (<>\n            {this._getCarouselItem(image, imageSettings, index, isInPopup)}\n        </>);\n\n    }\n\n    private readonly _getCarouselItem = (image: IImageData, imageSettings: IImageSettings, index: number, isInPopup: boolean = false): React.ReactNode => (\n        <Image\n            requestContext={this.props.context.actionContext.requestContext}\n            className='ms-media-gallery__item'\n            {...image}\n            gridSettings={this.props.context.request.gridSettings!}\n            imageSettings={imageSettings}\n            loadFailureBehavior='default'\n            id={`${this.props.id}__carousel-item__${index}`}\n            shouldSkipToMainImage={isInPopup}\n        />\n    );\n\n    private readonly _getThumbnailItem = (image: IImageData, imageSettings: IImageSettings, index: number, modifiedActiveIndex: number): 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                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='default'\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                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__item'\n                    {...image}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='default'\n                    onClick={this._onInlineImageClick}\n                    onMouseOver={this.state.isImageZoomed && this._inlineZoomImageOnHover || undefined}\n                    id={`${this.props.id}__carousel-item__${index}`}\n                    shouldSkipToMainImage\n                />\n                <Image\n                    role='presentation'\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-inline-zoom__zoomedImg'\n                    {...image}\n                    onClick={this._onImageMouseOut}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='default'\n                    id={`${this.props.id}__zoom__${index}`}\n                    onMouseMove={this.state.isImageZoomed && inlineZoomImageOnMouseMove || undefined}\n                    shouldSkipToMainImage\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 = 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) { // $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\n    private _onContainerZoomImageClick(event: React.MouseEvent<HTMLImageElement>): void {\n        if (window.innerWidth <= 768) { // $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' role='presentation' onMouseOut={this._onMouseOutLensContainer}\n                    onClick={this._onMouseOutLensContainer} onMouseMove={this.state.isImageZoomed && onMouseMoveLensContainer || undefined} />\n                <Image\n                    requestContext={this.props.context.actionContext.requestContext}\n                    className='ms-media-gallery__item'\n                    {...image}\n                    gridSettings={this.props.context.request.gridSettings!}\n                    onClick={this._onContainerZoomImageClick}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='default'\n                    onMouseOver={this.state.isImageZoomed && onMouseOverImageContainer || undefined}\n                    id={`${this.props.id}__carousel-item__${index}`}\n                    shouldSkipToMainImage\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                    gridSettings={this.props.context.request.gridSettings!}\n                    imageSettings={imageSettings}\n                    loadFailureBehavior='default'\n                />\n                <div className='ms-fullscreen-section__overlay'>\n                    <a\n                        href='javascript:void(0);' title={this.props.resources.fullScreenTitleText} role='button'\n                        onClick={this.openModalDialog} className='ms-fullscreen-section__magnifying-glass-icon' />\n                </div>\n\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(imageSettings: IImageSettings | undefined, index: number, modifiedActiveIndex: number): 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            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) => this._renderCarouselItemImageView(\n                    ZoomView, item, this._zoomedImageSettings, index, true)),\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\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\nexport default MediaGallery;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\n/* eslint-disable no-duplicate-imports */\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IMediaGalleryThumbnailItemViewProps, IMediaGalleryThumbnailsViewProps, IMediaGalleryViewProps } from '@msdyn365-commerce-modules/media-gallery';\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}>\n                {items && items.map(_renderThumbnailItem)}\n            </Node>\n        </Node>\n    );\n};\n\nconst _renderThumbnailItem = (thumbnail: IMediaGalleryThumbnailItemViewProps): JSX.Element => {\n    const { ThumbnailItemContainerProps, Picture } = thumbnail;\n\n    return (\n        <Node {...ThumbnailItemContainerProps}>\n            {Picture}\n        </Node>\n    );\n};\n\nexport default MediaGalleryView;\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt 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 { IMediaGalleryThumbnailItemViewProps, IMediaGalleryThumbnailsViewProps, IMediaGalleryViewProps } 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}>\r\n                {items && items.map(_renderThumbnailItem)}\r\n            </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 (\r\n        <Node {...ThumbnailItemContainerProps}>\r\n            {Picture}\r\n        </Node>\r\n    );\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['__local__|__local__|themes|adventureworks|views|media-gallery'] = {\n                c: () => require('partner/themes/adventureworks/views/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: 'listitem',\n            key: imageId\n        },\n        Picture: (\n            <Node className='ms-fullscreen-section'>\n                <Button\n                    aria-label={image.altText}\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: 'listitem',\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: 'listitem',\n            tabIndex: 0,\n            key: 0,\n            'aria-label': ''\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\n    // The thumbnails in AW theme aren't used as tabs\n    const NewSingleSlideCarouselComponentProps = { ...Thumbnails.SingleSlideCarouselComponentProps, useTabList: false };\n    const NewThumbnails = { ...Thumbnails, SingleSlideCarouselComponentProps: NewSingleSlideCarouselComponentProps };\n\n    return (\n        <Module {...MediaGallery}>\n            <Node {...CarouselProps} />\n            {Modal}\n            {renderThumbnails(NewThumbnails, 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","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","gridSettings","request","loadFailureBehavior","id","shouldSkipToMainImage","_getThumbnailItem","modifiedActiveIndex","ThumbnailItemContainerProps","tag","classnames","role","tabIndex","key","onClick","_generateOnThumbnailClick","onKeyDown","_generateOnThumbnailKeyDown","Picture","_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","config","zoomedImageSettings","galleryImageSettings","_onImageMouseOut","_inlineZoomImageOnHover","_onInlineImageClick","_onContainerZoomImageClick","_onMouseOutLensContainer","isMobile","variant","VariantType","Viewport","source","pageContext","shouldUpdateOnPartialDimensionSelection","mediaLocationsForSelectedVariant","_this$props$config$th","thumbnailImageSettings","_setImages","RecordId","apiSettings","productVariant","reaction","_product$productVaria","ObjectExtensions","isNullOrUndefined","_this$props$config$th2","shouldComponentUpdate","nextProps","nextState","render","isVertical","vertical","isFullscreenAllowed","allowFullScreen","zoomViewMode","inline","container","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","ArrayExtensions","hasElements","lastUpdate","defaultKey","_getEmptyThumbnailItem","zoomView","_renderEmptyImage","_this$props$config$sh","curatedImage","imagesToSet","shouldHideMasterProductImagesForVariant","_item$src","incrementedIndex","imageIndex","includes","Date","now","_renderImageInContainerOnZoom","_renderImageFullScreenOnZoom","_renderImageInlineOnZoom","_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","PrimaryImageUrl","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","fallbackImage","emptyPlaceHolderImage","app","placeholderImageName","_props$context$reques","getFallbackImageUrl","ItemId","OmniChannelMedia","_props$callbackToggle","_props$callbackThumbn","call","handleKeyDown","keyCode","Button","imageFallbackOptimize","shouldUseOptimizedImage","fallBackSrc","bypassHideOnFailure","playVideoTitleText","GetEmptyThumbnailItemComponent","_props$context$app$co2","_props$config$thumbna2","_props$context$reques3","skipImageValidation","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","NewSingleSlideCarouselComponentProps","NewThumbnails","module","exports","ReactDOM"],"sourceRoot":""}