{"version":3,"file":"static/js/218b2ed75c1888842bb4.bundle.js","mappings":"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","sources":["webpack://@msdyn365-commerce-partners/fabrikam/./src/modules/actions/get-active-image-products.ts?0501","webpack://@msdyn365-commerce-partners/fabrikam/./src/modules/active-image-utilities/active-product.tsx?69b2","webpack://@msdyn365-commerce-partners/fabrikam/./src/modules/active-image-utilities/additional-content.tsx?6946","webpack://@msdyn365-commerce-partners/fabrikam/./src/modules/active-image-utilities/image-mapper.tsx?dd86","webpack://@msdyn365-commerce-partners/fabrikam/./src/modules/active-image/active-image.tsx?00d3","webpack://@msdyn365-commerce-partners/fabrikam/./src/modules/active-image/active-image.view.tsx?a935"],"sourcesContent":["/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport {\n    CacheType,\n    createObservableDataAction,\n    IAction,\n    IActionContext,\n    IActionInput,\n    ICreateActionContext\n} from '@msdyn365-commerce/core';\nimport { ProductLookupClause, ProductsDataActions, ProductSearchCriteria, ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\n\nimport { IActiveImageConfig, IActivePointsData } from '../active-image';\n\n/**\n * ActiveImageInput.\n */\nexport class ActiveImageInput implements IActionInput {\n\n    public config: IActiveImageConfig;\n\n    private readonly _cacheKey: string = 'ActiveImage';\n\n    public constructor(config: IActiveImageConfig) {\n        this.config = config;\n\n        if (this.config.activePoints && ArrayExtensions.hasElements(this.config.activePoints)) {\n            for (const activePointData of this.config.activePoints) {\n                if (activePointData.itemId) {\n                    this._cacheKey = (`${this._cacheKey}-${activePointData.itemId.toString()}`);\n                }\n            }\n        }\n    }\n\n    /**\n     * GetCacheObjectType.\n     * @returns - Returns string.\n     */\n    public getCacheObjectType = (): string => 'ActiveImageFullProductSearchResult';\n\n    /**\n     * GetCacheKey.\n     * @returns - Returns string.\n     */\n    public getCacheKey = (): string => this._cacheKey;\n\n    /**\n     * DataCacheType.\n     * @returns - CacheType string.\n     */\n    public dataCacheType = (): CacheType => 'application';\n}\n\n/**\n * CreateInput.\n * @param inputData - IActionContext.\n * @returns - IActionInput.\n */\nexport const createInput = (inputData: ICreateActionContext): IActionInput => {\n    return new ActiveImageInput(inputData.config as IActiveImageConfig);\n};\n\n/**\n * Action.\n * @param input - ActiveImageInput.\n * @param context - IActionContext.\n * @returns - ProductSearchResult[].\n */\nexport const getActiveImageproductAction = async (input: ActiveImageInput, context: IActionContext): Promise<ProductSearchResult[]> => {\n    const { config } = input;\n    const itemIds: ProductLookupClause[] = [];\n    if (config.activePoints) {\n        config.activePoints.map((activePointData: IActivePointsData) => itemIds.push({ ItemId: activePointData.itemId }));\n    }\n    const searchCriteriaInput: ProductSearchCriteria = {};\n    searchCriteriaInput.Context = { ChannelId: context.requestContext.apiSettings.channelId, CatalogId: context.requestContext.apiSettings.catalogId };\n    searchCriteriaInput.IncludeAttributes = true;\n    searchCriteriaInput.ItemIds = itemIds;\n    return await ProductsDataActions.searchByCriteriaAsync({ callerContext: context }, searchCriteriaInput);\n\n};\n\n/**\n * Action.\n * @param id - Id.\n * @param action - Action.\n * @returns - Results.\n */\nexport const actionDataAction = createObservableDataAction({\n    id: '@msdyn365-commerce-modules/active-image/get-active-image-products',\n    action: getActiveImageproductAction as IAction<ProductSearchResult[]>,\n    input: createInput\n});\n\nexport default actionDataAction;\n\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { PriceComponent, RatingComponent } from '@msdyn365-commerce/components';\nimport { IComponent, IComponentProps, ICoreContext, IGridSettings, IImageData, IImageSettings, Image, IRequestContext } from '@msdyn365-commerce/core';\nimport { ProductPrice, ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { format } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\n/**\n * IActiveProductProps interface.\n */\nexport interface IActiveProductProps extends IComponentProps<{ product?: ProductSearchResult }> {\n    className?: string;\n    imageSettings?: IImageSettings;\n    savingsText?: string;\n    freePriceText?: string;\n    originalPriceText?: string;\n    currentPriceText?: string;\n    ratingAriaLabel?: string;\n}\n\n/**\n * IActiveProduct interface.\n */\nexport interface IActiveProduct extends IComponent<IActiveProductProps> { }\n\n/**\n * RenderDescription function.\n * @param description - Product description string.\n * @returns - Returns JSX.Element | null.\n */\nfunction renderDescription(description?: string): JSX.Element | null {\n    return (\n        <p className='msc-active-image-product__text'>\n            {description}\n        </p>\n    );\n}\n\n/**\n * GetRatingAriaLabel function.\n * @param rating - Product rating number.\n * @param ratingAriaLabel - Product rating aria label.\n * @returns - Returns string.\n */\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\n    const numberTwo: number = 2;\n    if (rating && ratingAriaLabel) {\n        const roundedRating = rating.toFixed(numberTwo);\n        return format(ratingAriaLabel || '', roundedRating, '5');\n    }\n    return '';\n}\n\n/**\n * RenderRating function.\n * @param context - The core context.\n * @param typeName - The type name of the module.\n * @param ratingId - The rating id.\n * @param avgRating - The average rating.\n * @param totalRatings - The total ratings.\n * @param ariaLabel - The rating aria label.\n * @returns - Returns JSX.Element | null.\n */\nfunction renderRating(context: ICoreContext, typeName: string, ratingId: string,\n    avgRating?: number, totalRatings?: number, ariaLabel?: string): JSX.Element | null {\n    if (!avgRating) {\n        return null;\n    }\n\n    const numberRatings = (totalRatings?.toString()) ?? undefined;\n    const ratingAriaLabel = getRatingAriaLabel(avgRating, ariaLabel);\n\n    return (\n        <RatingComponent\n            context={context}\n            id={ratingId}\n            typeName={typeName}\n            avgRating={avgRating}\n            ratingCount={numberRatings}\n            readOnly\n            ariaLabel={ratingAriaLabel}\n            data={{}}\n        />\n    );\n}\n\n/**\n * RenderPrice function.\n * @param context - The core context.\n * @param typeName - The type name of the module.\n * @param productId - The product id.\n * @param basePrice - The base price of the product.\n * @param adjustedPrice - The adjusted price of the product.\n * @param savingsText - The savings text of the product.\n * @param freePriceText - The free price text.\n * @param originalPriceText - The original price text.\n * @returns - Returns JSX.Element | null.\n */\nfunction renderPrice(context: ICoreContext, typeName: string, productId: string,\n    basePrice?: number, adjustedPrice?: number, savingsText?: string, freePriceText?: string,\n    originalPriceText?: string): JSX.Element | null {\n    const price: ProductPrice = {\n        BasePrice: basePrice,\n        AdjustedPrice: adjustedPrice,\n        CustomerContextualPrice: adjustedPrice\n    };\n\n    return (\n        <PriceComponent\n            context={context}\n            id={productId}\n            typeName={typeName}\n            data={{ price }}\n            savingsText={savingsText}\n            freePriceText={freePriceText}\n            originalPriceText={originalPriceText}\n        />\n    );\n}\n\n/**\n * RenderProductPlacementImage function.\n * @param requestContext - RequestContext.\n * @param imageSettings - The product image settings.\n * @param gridSettings - The viewport gird settings.\n * @param imageUrl - The product image url.\n * @param altText - The product image alt text.\n * @returns - Returns JSX.Element | null.\n */\nfunction renderProductPlacementImage(\n    requestContext: IRequestContext,\n    imageSettings?: IImageSettings,\n    gridSettings?: IGridSettings,\n    imageUrl?: string,\n    altText?: string): JSX.Element | null {\n    if (!imageUrl || !gridSettings || !imageSettings) {\n        return null;\n    }\n    const imgData: IImageData = {\n        src: imageUrl,\n        altText: altText ? altText : ''\n    };\n    const imageProps = {\n        gridSettings,\n        imageSettings\n    };\n    imageProps.imageSettings.cropFocalRegion = true;\n    return (\n        <Image\n            {...imgData}\n            {...imageProps}\n            requestContext={requestContext}\n            loadFailureBehavior='empty' />\n    );\n}\n\n/**\n * ActiveProduct constant.\n * @param props - The active product props.\n * @param props.data - The product search result data.\n * @param props.context - The core context.\n * @param props.imageSettings - The prodcut image settings.\n * @param props.savingsText - The product savings text.\n * @param props.freePriceText - The free price text.\n * @param props.originalPriceText - The original price text.\n * @param props.ratingAriaLabel - The product rating aria label.\n * @param props.typeName - The type name of the module.\n * @param props.id - The id of the product.\n * @returns - Returns JSX.Element | null.\n */\nexport const ActiveProductComponent: React.FC<IActiveProductProps> = ({\n    data,\n    context,\n    imageSettings,\n    savingsText,\n    freePriceText,\n    originalPriceText,\n    ratingAriaLabel,\n    typeName,\n    // eslint-disable-next-line @typescript-eslint/naming-convention -- Do not need naming convention check for library prameters\n    id\n}) => {\n    const product = data.product;\n    if (!product) {\n        return null;\n    }\n\n    return (\n        <>\n            <div className='msc-active-image-product'>\n                <div className='msc-active-image-product__image'>\n                    {renderProductPlacementImage(\n                        context.actionContext.requestContext,\n                        imageSettings, context.request.gridSettings,\n                        product.PrimaryImageUrl,\n                        product.Name)}\n                </div>\n                <div className='msc-active-image-product__details'>\n                    <h4 className='msc-active-image-product__title'>\n                        {product.Name}\n                    </h4>\n                    {renderPrice(context, typeName, id, product.BasePrice, product.Price, savingsText, freePriceText, originalPriceText)}\n                    {renderDescription(product.Description)}\n                    {\n                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Do not need type check for appsettings\n                        !context.app.config.hideRating && renderRating(context, typeName, id, product.AverageRating, product.TotalRatings, ratingAriaLabel)\n                    }\n                </div>\n            </div>\n        </>\n    );\n};\n\nexport default ActiveProductComponent;\n\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { INodeProps } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\n/**\n * ILinksData: Interface for\n * Additional content.\n */\ninterface ILinksData {\n    linkText?: string;\n    linkUrl: Msdyn365.ILinkData;\n    ariaLabel?: string;\n    isOpenInNewTab?: boolean;\n}\n\n/**\n * IAdditionalContentData: Interface for\n * Active content.\n */\ninterface IAdditionalContentData {\n    heading?: string;\n    subtext?: string;\n    links?: ILinksData[];\n}\n\n/**\n * IActiveImageAdditionalContentProps: Interface for\n * Active Image Additional Content Component props.\n */\nexport interface IActiveImageAdditionalContentProps {\n    requestContext: Msdyn365.IRequestContext;\n    additionalContent: IAdditionalContentData | undefined;\n    handleAdditionalTextChange(event: Msdyn365.ContentEditableEvent): void;\n    handleAdditionalParagraphChange(event: Msdyn365.ContentEditableEvent): void;\n    handleAdditionalLinkTextChange(linkIndex: number, event: Msdyn365.ContentEditableEvent): void;\n}\n\n/**\n * IActiveImageAdditionalContentViewProps: Interface for\n * Active Image Additional Content view props.\n */\nexport interface IActiveImageAdditionalContentViewProps {\n    additionalContentNode: INodeProps;\n    heading: React.ReactNode;\n    text: React.ReactNode;\n    links: React.ReactNode;\n    additionalContentContainer: INodeProps;\n    additionalContentItemLinks: INodeProps;\n}\n\n/**\n * Renders additional content heading.\n * @param additionalContentHeading - Additional content heading.\n * @param props - Active Image Additional content component props.\n * @returns Heading Node.\n */\nconst renderHeading = (additionalContentHeading: string, props: IActiveImageAdditionalContentProps) => {\n    const requestContext = props.requestContext;\n    return (\n        <Msdyn365.Text\n            text={additionalContentHeading}\n            tag='p'\n            className='msc-active-image__details__additional-content__text'\n            editProps={{\n                /**\n                 * On edit event for heading text change.\n                 * @param event - Change event.\n                 */\n                onEdit: (event) => {\n                    props.handleAdditionalTextChange(event);\n                }, requestContext\n            }}\n        />);\n};\n\n/**\n * Renders additional content heading.\n * @param additionalContentParagraphText - Additional content paragraph text.\n * @param props - Active Image Additional content component props.\n * @returns Paragraph Node.\n */\nconst renderParagraph = (additionalContentParagraphText: string, props: IActiveImageAdditionalContentProps) => {\n    const requestContext = props.requestContext;\n    return (\n        <Msdyn365.Text\n            text={additionalContentParagraphText}\n            tag='p'\n            className='msc-active-image__details__additional-content__paragraph'\n            editProps={{\n                /**\n                 * On edit event for heading text change.\n                 * @param event - Change event.\n                 */\n                onEdit: (event) => {\n                    props.handleAdditionalTextChange(event);\n                }, requestContext\n            }}\n        />);\n};\n\n/**\n * Renders additional content heading.\n * @param ctaLink - Additional content link.\n * @param props - Active Image Additional content component props.\n * @param linkIndex - Additional content link index.\n * @returns Link Node.\n */\nconst renderLinks = (ctaLink: ILinksData, props: IActiveImageAdditionalContentProps, linkIndex: number) => {\n    const editableLink: Msdyn365.ILinksData = {\n        ariaLabel: ctaLink.ariaLabel,\n        className: 'msc-active-image__details__additional-content__cta__links',\n        linkText: ctaLink.linkText,\n        linkUrl: ctaLink.linkUrl.destinationUrl,\n        openInNewTab: ctaLink.isOpenInNewTab,\n        role: 'button'\n    };\n    const requestContext = props.requestContext;\n    return (\n        <Msdyn365.Link\n            key={linkIndex}\n            link={editableLink}\n            editProps={{\n                /**\n                 * Handle additional Link Text change.\n                 * @param event - The keyboard event.\n                 */\n                onTextChange: (event) => {\n                    props.handleAdditionalLinkTextChange(linkIndex, event);\n                },\n                requestContext\n            }}\n        />\n    );\n};\n\n/**\n * Create node for each additonal content item.\n * @param item - Active Image additonal content item props.\n * @param props - Active Image Additional content component props.\n * @returns IActiveImageAdditionalContentItemViewProps.\n */\nconst assembleNode = (\n    item: IAdditionalContentData,\n    props: IActiveImageAdditionalContentProps\n): IActiveImageAdditionalContentViewProps => {\n    const headingNode = item.heading && renderHeading(item.heading, props);\n    const paragraphNode = item.subtext && renderParagraph(item.subtext, props);\n    const linksNode = item.links?.map((ctaLink: ILinksData, index: number) => {\n        return renderLinks(ctaLink, props, index);\n    });\n\n    return {\n        additionalContentNode: { className: 'msc-active-image__details__additional-content' },\n        heading: headingNode,\n        text: paragraphNode,\n        links: linksNode,\n        additionalContentContainer: { className: 'msc-active-image__details__additional-content__container' },\n        additionalContentItemLinks: { className: 'msc-active-image__details__additional__content__cta' }\n    };\n};\n\n/**\n * ActiveImageAdditionalContent component.\n * @param props - Active Image Additional content component props.\n * @returns Active Image Additional content view props.\n */\nexport const activeImageAdditionalContent = (props: IActiveImageAdditionalContentProps): IActiveImageAdditionalContentViewProps | undefined => {\n    const { additionalContent } = props;\n    if (!additionalContent) {\n        return undefined;\n    }\n\n    return assembleNode(additionalContent, props);\n};\n\nexport default activeImageAdditionalContent;\n\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport MsDyn365, { IImageData, Image, IRequestContext } from '@msdyn365-commerce/core';\nimport { ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport React from 'react';\n\n/**\n * @type AreaEvent for active points\n */\ntype AreaEvent = Event | React.MouseEvent<HTMLAreaElement, MouseEvent> | React.FocusEvent<HTMLAreaElement>;\n\n/**\n * @interface IRgbColor\n * @description - The IRgbColor interface contract.\n */\nexport interface IRgbColor {\n    rValue: number;\n    gValue: number;\n    bValue: number;\n}\n\n/**\n * @interface IArea\n * @description - The IArea interface contract.\n */\nexport interface IArea {\n    areaId: string;\n    coords: number[];\n    href?: string;\n    center?: number[];\n    primaryImageUrl?: string;\n    productUrl: string;\n    productSearchResult?: ProductSearchResult;\n}\n\n/**\n * @interface IArea\n * @description - The IArea interface contract.\n */\nexport interface IAreaMap {\n    name: string;\n    areas: IArea[];\n}\n\n/**\n * @enum CanvasCalculations\n * @description - The canvas calculations enum.\n */\nexport enum CanvasCalculations {\n    defaultWidth = 0,\n    defaultHeight = 0,\n    defaultPositionX = 0,\n    defaultPositionY = 0,\n    defaultScale = 1,\n    halfDivisor = 2,\n    doubleMultiplier = 2,\n    buttonHeight = 30,\n    buttonPadding = 30,\n    paddingAdjustment = 3,\n    expandAnimationStartWidth = 10,\n    expandAnimationEndWidth = 40,\n    collapseAnimationStartWidth = 40,\n    collapseAnimationEndWidth = 8,\n    expandRadius = 12,\n    collapseRadius = 8,\n    rotation = 1.57,\n    startAngle = 0,\n    endAngle = 7,\n    clearMargin = 50,\n    clearHeight = 100,\n    clearWidth = 100,\n    textFadeInStartValue = 0,\n    textFadeOutStartValue = 0.5,\n    textFadeInterval = 0.01\n}\n\n/**\n * @enum CanvasStyles\n * @description - The canvas styles enum.\n */\nexport enum CanvasStyles {\n    color = '#FFFFFF',\n    buttonTextClor = '#000000'\n}\n\n/**\n * @enum\n * @description - The canvas styles enum.\n */\nexport interface IImageMapperResources {\n    buttonText?: string;\n    altText?: string;\n}\n\n/**\n * @interface IImageMapperProps\n * @description - The IImageMapperProps interface contract.\n */\nexport interface IImageMapperProps {\n    imageData: IImageData;\n    areaMap: IAreaMap;\n    viewPort: string;\n    requestContext: IRequestContext;\n    color?: string;\n    buttonTextClor?: string;\n    width?: number;\n    imgWidth?: number;\n    activeImageRefs: React.RefObject<HTMLDivElement>;\n    imageMapperResources?: IImageMapperResources;\n    onLoad?(): void;\n    onClick?(area: IArea, index: number, event: AreaEvent): void;\n    onFocus?(area: IArea, index: number, event: AreaEvent): void;\n    onMouseEnter?(area: IArea, index: number, event: AreaEvent): void;\n    onMouseLeave?(area: IArea, index: number, event: AreaEvent): void;\n}\n\n/**\n * ImageMapper.\n */\nexport class ImageMapper extends React.Component<IImageMapperProps> {\n    private readonly _backgroundImage: React.RefObject<Image>;\n\n    private readonly _container: React.RefObject<HTMLDivElement>;\n\n    private readonly _canvas: React.RefObject<HTMLCanvasElement>;\n\n    private _isDesktopViewPort: boolean = false;\n\n    private _context: CanvasRenderingContext2D | null | undefined = null;\n\n    public constructor(props: IImageMapperProps) {\n        super(props);\n        this._backgroundImage = React.createRef();\n        this._container = React.createRef();\n        this._canvas = React.createRef();\n    }\n\n    /**\n     * ComponentDidMount method.\n     */\n    public componentDidMount(): void {\n        const { viewPort } = this.props;\n        this.initCanvas();\n        this._isDesktopViewPort = viewPort === 'lg' || viewPort === 'xl';\n        this.renderAreas();\n        this._context = null;\n    }\n\n    /**\n     * ComponentDidUpdate method.\n     */\n    public componentDidUpdate(): void {\n        const { viewPort } = this.props;\n        this.initCanvas();\n        this._isDesktopViewPort = viewPort === 'lg' || viewPort === 'xl';\n    }\n\n    /**\n     * ShouldComponentUpdate method.\n     * @param nextProps - Next props.\n     * @returns Returns boolean.\n     */\n    public shouldComponentUpdate(nextProps: IImageMapperProps): boolean {\n        let shouldRender = false;\n        if (nextProps !== this.props) {\n            shouldRender = true;\n        }\n        return shouldRender;\n    }\n\n    /**\n     * GetActiveImageWidth method - Gets the active image width.\n     * @returns Returns number | undefined.\n     */\n    public getActiveImageWidth = (): number | undefined => {\n        if (MsDyn365.isBrowser) {\n            const activeImageReferenceValue = this.props.activeImageRefs;\n            if (activeImageReferenceValue.current !== null) {\n                return activeImageReferenceValue.current.clientWidth;\n            }\n        }\n        return undefined;\n    };\n\n    /**\n     * GetActiveImageHeight method - Gets the active image height.\n     * @returns Returns number | undefined.\n     */\n    public getActiveImageHeight = (): number | undefined => {\n        if (MsDyn365.isBrowser) {\n            const activeImageReferenceValue = this.props.activeImageRefs;\n            if (activeImageReferenceValue.current !== null) {\n                return activeImageReferenceValue.current.clientHeight;\n            }\n        }\n        return undefined;\n    };\n\n    /**\n     * ConvertHexToRgb method - This method takes color in HEX format and returns IRgbColor color object.\n     * @param hexColor -The color hex value.\n     * @returns -Returns IRgbColor object.\n     */\n    public convertHexToRgb = (hexColor: string): IRgbColor => {\n        // RegEx used to execute the conversion of the hex color to rgb value.\n        const regEx = new RegExp('^#?([a-f\\\\d]{2})([a-f\\\\d]{2})([a-f\\\\d]{2})$', 'u');\n\n        // RegEx.exec method executes a search for a match in a specified string. Returns a result array, or null.\n        const result = regEx.exec(hexColor);\n        const defaultValue = 0;\n        return result ? {\n            rValue: Number.parseInt(result[1], 16),\n            gValue: Number.parseInt(result[2], 16),\n            bValue: Number.parseInt(result[3], 16)\n        } : {\n            rValue: defaultValue,\n            gValue: defaultValue,\n            bValue: defaultValue\n        };\n    };\n\n    /**\n     * ApplyFadingTransition method - Applys fading transition to button text.\n     * @param text -The button text.\n     * @param coords -The coordinates.\n     * @param rgbColor -The RGB color object.\n     * @param alpha -The alpha value of the button text.\n     */\n    public applyFadingTransition = (text: string, coords: number[], rgbColor: IRgbColor, alpha: number): void => {\n        const halfDivisor: number = CanvasCalculations.halfDivisor;\n        const context = this._canvas.current?.getContext('2d') ?? this._context;\n        if (context && this._isDesktopViewPort) {\n            const buttonPadding = CanvasCalculations.buttonPadding;\n            const paddingAdjustment = CanvasCalculations.paddingAdjustment;\n            const buttonWidth = context.measureText(text).width + buttonPadding;\n            context.fillStyle = `rgba(${rgbColor.rValue}, ${rgbColor.gValue}, ${rgbColor.bValue}, ${alpha} )`;\n            if (MsDyn365.isBrowser && document.body.parentElement && document.body.parentElement.getAttribute('dir') === 'rtl') {\n                context.fillText(text, coords[0] + (buttonWidth / halfDivisor) - (buttonPadding / halfDivisor), coords[1] + paddingAdjustment);\n            } else {\n                context.fillText(text, coords[0] - (buttonWidth / halfDivisor) + (buttonPadding / halfDivisor), coords[1] + paddingAdjustment);\n            }\n        }\n    };\n\n    /**\n     * Draw button method - Draws button and contains fixed hight, padding values.\n     * @param text -The button text.\n     * @param coords -The coordinates.\n     */\n    public drawButton = (text: string, coords: number[]): void => {\n        const {\n            color = CanvasStyles.color,\n            buttonTextClor = CanvasStyles.buttonTextClor\n        } = this.props;\n        const halfDivisor: number = CanvasCalculations.halfDivisor;\n        const context = this._canvas.current?.getContext('2d') ?? this._context;\n        if (context && this._isDesktopViewPort) {\n            const buttonHeight = CanvasCalculations.buttonHeight;\n            const buttonPadding = CanvasCalculations.buttonPadding;\n            const paddingAdjustment = CanvasCalculations.paddingAdjustment;\n            const buttonWidth = context.measureText(text).width + buttonPadding;\n            const buttonPositionX = coords[0] - (buttonWidth / halfDivisor);\n            const buttonPositionY = coords[1] - (buttonHeight / halfDivisor);\n            const arcsize = buttonHeight / halfDivisor;\n\n            context.beginPath();\n            context.moveTo(buttonPositionX + arcsize, buttonPositionY);\n            context.lineTo(buttonPositionX + buttonWidth - arcsize, buttonPositionY);\n            context.arcTo(buttonPositionX + buttonWidth, buttonPositionY, buttonPositionX + buttonWidth, buttonPositionY + arcsize, arcsize);\n            context.lineTo(buttonPositionX + buttonWidth, buttonPositionY + buttonHeight - arcsize);\n            context.arcTo(buttonPositionX + buttonWidth, buttonPositionY + buttonHeight,\n                buttonPositionX + buttonWidth - arcsize, buttonPositionY + buttonHeight, arcsize);\n            context.lineTo(buttonPositionX + arcsize, buttonPositionY + buttonHeight);\n            context.arcTo(buttonPositionX, buttonPositionY + buttonHeight, buttonPositionX, buttonPositionY - arcsize, arcsize);\n            context.lineTo(buttonPositionX, buttonPositionY + arcsize);\n            context.arcTo(buttonPositionX, buttonPositionY, buttonPositionX + arcsize, buttonPositionY, arcsize);\n            context.lineTo(buttonPositionX + arcsize, buttonPositionY);\n            context.stroke();\n            context.closePath();\n            context.fillStyle = color;\n            context.fill();\n            context.fillStyle = buttonTextClor;\n            if (MsDyn365.isBrowser && document.body.parentElement && document.body.parentElement.getAttribute('dir') === 'rtl') {\n                context.fillText(text, coords[0] + (buttonWidth / halfDivisor) - (buttonPadding / halfDivisor), coords[1] + paddingAdjustment);\n            } else {\n                context.fillText(text, coords[0] - (buttonWidth / halfDivisor) + (buttonPadding / halfDivisor), coords[1] + paddingAdjustment);\n            }\n        }\n    };\n\n    /**\n     * ExpandAnimation method - Shows expand animation and contains fixed values to draw the circle and ellipse shapes.\n     * @param coords -Coordinates.\n     */\n    public expandAnimation = (coords: number[]): void => {\n        const {\n            color = CanvasStyles.color,\n            buttonTextClor = CanvasStyles.buttonTextClor\n        } = this.props;\n        const buttonText = this.props.imageMapperResources?.buttonText;\n        let animationStartWidth = CanvasCalculations.expandAnimationStartWidth;\n        const pointPositionX = coords[0];\n        const pointPositionY = coords[1];\n        const animationEndWidth = CanvasCalculations.expandAnimationEndWidth;\n        const radius = CanvasCalculations.expandRadius;\n        const rotation = CanvasCalculations.rotation;\n        const startAngle = CanvasCalculations.startAngle;\n        const endAngle = CanvasCalculations.endAngle;\n        let textFadeInValue = CanvasCalculations.textFadeInStartValue;\n        const buttonTextClorInRgb = this.convertHexToRgb(buttonTextClor.toLocaleLowerCase());\n\n        /**\n         * Animate method - Reders expand animation.\n         */\n        const animate = () => {\n            const context = this._canvas.current?.getContext('2d') ?? this._context;\n            if (!context) {\n                return;\n            }\n            context.beginPath();\n            context.ellipse(pointPositionX, pointPositionY, radius, animationStartWidth, rotation, startAngle, endAngle);\n            context.fillStyle = color;\n            context.fill();\n            context.fillStyle = color;\n            if (buttonText) {\n                if (animationStartWidth < animationEndWidth) {\n                    requestAnimationFrame(animate);\n                    this.applyFadingTransition(buttonText, coords, buttonTextClorInRgb, textFadeInValue);\n                    textFadeInValue += CanvasCalculations.textFadeInterval;\n                    animationStartWidth++;\n                } else {\n                    this.drawButton(buttonText, [pointPositionX, pointPositionY]);\n                }\n            }\n        };\n\n        if (this._isDesktopViewPort) {\n            animate();\n        }\n\n    };\n\n    /**\n     * CollapseAnimation method - Shows collapse animation and contains fixed values to draw the circle and ellipse shapes.\n     * @param coords -Coordinates.\n     */\n    public collapseAnimation = (coords: number[]): void => {\n        const {\n            color = CanvasStyles.color,\n            buttonTextClor = CanvasStyles.buttonTextClor\n        } = this.props;\n        const buttonText = this.props.imageMapperResources?.buttonText;\n        let animationStartWidth = CanvasCalculations.collapseAnimationStartWidth;\n        const pointPositionX = coords[0];\n        const pointPositionY = coords[1];\n        const animationEndWidth = CanvasCalculations.collapseAnimationEndWidth;\n        const rotation = CanvasCalculations.rotation;\n        const clearMargin = CanvasCalculations.clearMargin;\n        const clearHeight = CanvasCalculations.clearHeight;\n        const clearWidth = CanvasCalculations.clearWidth;\n        const radius = CanvasCalculations.collapseRadius;\n        const startAngle = CanvasCalculations.startAngle;\n        const endAngle = CanvasCalculations.endAngle;\n        let textFadeOutValue = CanvasCalculations.textFadeOutStartValue;\n        const buttonTextClorInRgb = this.convertHexToRgb(buttonTextClor.toLocaleLowerCase());\n\n        /**\n         * Animate method - Renders collapse animation.\n         */\n        const animate = () => {\n            const context = this._canvas.current?.getContext('2d') ?? this._context;\n            if (!context) {\n                return;\n            }\n            context.beginPath();\n            context.clearRect(pointPositionX - clearMargin, pointPositionY - clearMargin, clearWidth, clearHeight);\n            context.ellipse(pointPositionX, pointPositionY, radius, animationStartWidth, rotation, startAngle, endAngle);\n            context.fillStyle = color;\n            context.fill();\n            if (animationEndWidth < animationStartWidth && buttonText) {\n                requestAnimationFrame(animate);\n                this.applyFadingTransition(buttonText, coords, buttonTextClorInRgb, textFadeOutValue);\n                textFadeOutValue -= CanvasCalculations.textFadeInterval;\n                animationStartWidth--;\n            }\n        };\n\n        if (this._isDesktopViewPort) {\n            animate();\n        }\n\n    };\n\n    /**\n     * DrawCircle method - Renders active points.\n     * @param coords -Coordinates.\n     */\n    public drawCircle = (coords: number[]): void => {\n        const {\n            color = CanvasStyles.color,\n            viewPort\n        } = this.props;\n        const doubleMultiplier: number = CanvasCalculations.doubleMultiplier;\n        const startAngle: number = CanvasCalculations.startAngle;\n        const context = this._canvas.current?.getContext('2d') ?? this._context;\n        const radius = (viewPort === 'xs' || viewPort === 'sm') ? coords[2] * doubleMultiplier : coords[2];\n        if (!context) {\n            return;\n        }\n        context.fillStyle = color;\n        context.beginPath();\n        context.strokeStyle = color;\n        context.arc(coords[0], coords[1], radius, startAngle, Math.PI * doubleMultiplier);\n        context.closePath();\n        context.stroke();\n        context.fill();\n    };\n\n    /**\n     * ScaleCoords method - To scale the active point coordinates based on the window size.\n     * @param coords -Coordinates.\n     * @returns -Returns number[].\n     */\n    public scaleCoords = (coords: number[]): number[] => {\n        const {\n            imgWidth\n        } = this.props;\n        const defaultWidth: number = CanvasCalculations.defaultWidth;\n        const defaultScale: number = CanvasCalculations.defaultScale;\n\n        // Calculate scale based on current 'width' and the original 'imgWidth'\n        const width = this.getActiveImageWidth();\n        const scale = width && imgWidth && imgWidth > defaultWidth ? width / imgWidth : defaultScale;\n        return coords.map(coord => coord * scale);\n    };\n\n    /**\n     * RenderPrefilledAreas method - To render active points in case of events.\n     */\n    public renderPrefilledAreas = (): void => {\n        const {\n            areaMap\n        } = this.props;\n        areaMap.areas.map(area => {\n            this.drawCircle(this.scaleCoords(area.coords));\n            return null;\n        });\n    };\n\n    /**\n     * ComputeCenter method - To re-calculate the center of active point based on window size.\n     * @param area -IArea.\n     * @returns -Returns number[].\n     */\n    public computeCenter = (area: IArea): number[] => {\n        const scaledCoords = this.scaleCoords(area.coords);\n        return [scaledCoords[0], scaledCoords[1]];\n    };\n\n    /**\n     * HandleHoverOn method - To handle mouse hover on event.\n     * @param area -IArea.\n     */\n    public handleHoverOn = (area: IArea): void => {\n        if (area.center && this._canvas.current) {\n            this.drawCircle(this.scaleCoords(area.coords));\n            this.expandAnimation(area.center);\n        }\n    };\n\n    /**\n     * HandleHoverOff method - To handle mouse hover off event.\n     * @param area -IArea.\n     */\n    public handleHoverOff = (area: IArea): void => {\n        if (this._canvas.current) {\n            const context = this._canvas.current.getContext('2d') ?? this._context;\n            const canvasPositionX: number = CanvasCalculations.defaultPositionX;\n            const canvasPositionY: number = CanvasCalculations.defaultPositionY;\n\n            if (!context) {\n                return;\n            }\n            context.clearRect(canvasPositionX, canvasPositionY, this._canvas.current.width, this._canvas.current.height);\n            this.renderPrefilledAreas();\n            if (area.center) {\n                this.collapseAnimation(area.center);\n            }\n        }\n    };\n\n    /**\n     * Click method - Mouse click event.\n     * @param area -IArea.\n     * @param index - Number.\n     * @returns - Void.\n     */\n    public click = (area: IArea, index: number) => (event: AreaEvent): void => {\n        const {\n            onClick\n        } = this.props;\n        if (onClick) {\n            event.preventDefault();\n            onClick(area, index, event);\n        }\n    };\n\n    /**\n     * HoverOn method - Mouse hover on event.\n     * @param area -IArea.\n     * @param index - Number.\n     * @returns - Void.\n     */\n    public hoverOn = (area: IArea, index: number) => (event: AreaEvent): void => {\n        const {\n            onMouseEnter\n        } = this.props;\n        this.handleHoverOn(area);\n        if (onMouseEnter) {\n            onMouseEnter(area, index, event);\n        }\n    };\n\n    /**\n     * HoverOff method - Mouse hover off event.\n     * @param area - IArea.\n     * @param index - Number.\n     * @returns - Void.\n     */\n    public hoverOff = (area: IArea, index: number) => (event: AreaEvent): void => {\n        const {\n            onMouseLeave\n        } = this.props;\n\n        this.handleHoverOff(area);\n\n        if (onMouseLeave) {\n            onMouseLeave(area, index, event);\n        }\n    };\n\n    /**\n     * RenderAreas method - Renders active points at given coordinates.\n     * @returns -Returns JSX.Element[].\n     */\n    public renderAreas = (): JSX.Element[] => {\n        const {\n            areaMap,\n            viewPort\n        } = this.props;\n        const buttonText = this.props.imageMapperResources?.buttonText ? this.props.imageMapperResources.buttonText : '';\n        const altText = this.props.imageMapperResources?.altText ? this.props.imageMapperResources.altText : '';\n        const doubleMultiplier: number = CanvasCalculations.doubleMultiplier;\n\n        return areaMap.areas.map((area, index) => {\n            const scaledCoords = this.scaleCoords(area.coords);\n            const xsRadius = area.coords[2] * doubleMultiplier;\n            if (viewPort === 'xs') {\n                scaledCoords[2] = xsRadius;\n            }\n            const center = this.computeCenter(area);\n            const extendedArea = { ...area, scaledCoords, center };\n            const areaKey = `area-${index}`;\n            const altTextWithProductName = altText.replace('{buttonText}', buttonText ? buttonText : '')\n                .replace('{productName}', area.productSearchResult?.Name ? area.productSearchResult.Name : '');\n            return (\n                <area\n                    key={areaKey}\n                    shape='circle'\n                    coords={scaledCoords.join(',')}\n                    onMouseEnter={this.hoverOn(extendedArea, index)}\n                    onMouseLeave={this.hoverOff(extendedArea, index)}\n                    onClick={this.click(extendedArea, index)}\n                    onFocus={this.hoverOn(extendedArea, index)}\n                    onBlur={this.hoverOff(extendedArea, index)}\n                    href={area.productUrl}\n                    tabIndex={0}\n                    alt={altTextWithProductName}\n                    aria-label={altTextWithProductName}\n                />\n            );\n        });\n    };\n\n    /**\n     * InitCanvas method - To render the canvas.\n     */\n    public initCanvas = (): void => {\n        if (!this._canvas.current || !this._backgroundImage.current || !this._container.current) {\n            return;\n        }\n\n        const {\n            color,\n            onLoad\n        } = this.props;\n        const defaultWidth: number = CanvasCalculations.defaultWidth;\n        const defaultHeight: number = CanvasCalculations.defaultHeight;\n\n        const canvasWidth = this.getActiveImageWidth() ?? defaultWidth;\n        const canvasHeight = this.getActiveImageHeight() ?? defaultHeight;\n\n        this._canvas.current.width = canvasWidth;\n        this._canvas.current.height = canvasHeight;\n        this._container.current.style.width = `${canvasWidth}px`;\n\n        const context = this._canvas.current.getContext('2d') ?? this._context;\n        if (!context) {\n            return;\n        }\n        context.fillStyle = color ?? '';\n\n        if (onLoad) {\n            onLoad();\n        }\n\n        this.renderPrefilledAreas();\n    };\n\n    /**\n     * Render method - To render the image mapper component with active image, canvas and active points.\n     * @returns -Returns JSX.Element | null.\n     */\n    public render(): JSX.Element | null {\n\n        const {\n            imageData,\n            areaMap,\n            requestContext\n        } = this.props;\n\n        return (\n            <div className='msc-active-image-container' ref={this._container}>\n                <Image\n                    src={imageData.src}\n                    useMap={`#${areaMap.name}`}\n                    alt={areaMap.name}\n                    ref={this._backgroundImage}\n                    height={imageData.height}\n                    width={imageData.width}\n                    className='msc-active-image-img'\n                    imageSettings={imageData.imageSettings}\n                    gridSettings={requestContext.gridSettings ?? {}}\n                    requestContext={requestContext}\n                />\n                <canvas ref={this._canvas} className='msc-active-image-canvas' />\n                <map name={areaMap.name} className='msc-active-image-map'>\n                    {this.renderAreas()}\n                </map>\n            </div>\n        );\n    }\n}\n\nexport default ImageMapper;\n\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport * as MsDyn365 from '@msdyn365-commerce/core';\nimport { ProductSearchResult } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, getProductPageUrlSync } from '@msdyn365-commerce-modules/retail-actions';\nimport { getPayloadObject, getTelemetryAttributes, getTelemetryObject,\n    IModuleProps, INodeProps, isMobile, ITelemetryContent, VariantType } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { activeImageAdditionalContent,\n    ActiveProductComponent,\n    IActiveImageAdditionalContentViewProps,\n    IArea,\n    IAreaMap,\n    IImageMapperProps,\n    ImageMapper } from '../active-image-utilities';\nimport { IActiveImageData } from './active-image.data';\nimport { IActiveImageProps } from './active-image.props.autogenerated';\n\n/**\n * @type AreaEvent for active points\n */\ntype AreaEvent = Event | React.MouseEvent<HTMLAreaElement, MouseEvent> | React.FocusEvent<HTMLAreaElement>;\n\n/**\n * @interface IActiveImageViewProps\n * @classdesc - The IActiveImageViewProps interface contract.\n */\nexport interface IActiveImageViewProps extends IActiveImageProps<{}>, IImageMapperProps {\n    activePointContainer: IModuleProps;\n    activePointDetailsContainer: INodeProps;\n    imageMapper: React.ReactNode;\n    overlay: React.ReactNode;\n    productCard: React.ReactNode;\n    title?: React.ReactNode;\n    text?: React.ReactNode;\n    links?: React.ReactNode;\n    detailsContainer?: INodeProps;\n    detailsContainerCta?: INodeProps;\n    additionalContent?: IActiveImageAdditionalContentViewProps;\n    productCardleftPosition: number;\n    productCardtopPosition: number;\n    handleAdditionalText?(event: MsDyn365.ContentEditableEvent): void;\n    handleAdditionalParagraph?(event: MsDyn365.ContentEditableEvent): void;\n    handleAdditionalLinkText?(event: MsDyn365.ContentEditableEvent): void;\n}\n\n/**\n * @interface IActiveImageLinksData\n * @classdesc - The IActiveImageLinksData interface contract.\n */\nexport interface IActiveImageLinksData {\n    linkText?: string;\n    linkUrl: MsDyn365.ILinkData;\n    ariaLabel?: string;\n    willOpenInNewTab?: boolean;\n}\n\n/**\n * @interface IActiveImageState\n * @classdesc - The IActiveImageState interface contract.\n */\ninterface IActiveImageState {\n    clientWidth: number;\n    area: IArea | null;\n    viewport: string;\n    overlayClass: string;\n}\n\n/**\n * @enum ActiveImageConstants\n * @description - The active image constants enum.\n */\nexport enum ActiveImageConstants {\n    timeoutInterval = 200,\n    enterKey = 'Enter',\n    escKey = 'Escape'\n}\n\n/**\n *\n * ActiveImage class.\n * @extends {React.PureComponent<IActiveImageProps<{}> & IImageMapperProps, IActiveImageState>}\n */\nexport class ActiveImage extends React.PureComponent<IActiveImageProps<IActiveImageData> & IImageMapperProps, IActiveImageState> {\n    private readonly _telemetryContent: ITelemetryContent;\n\n    private _isDesktopViewPort: boolean;\n\n    private readonly _defaultProductCardWidth: number = 315;\n\n    private readonly _defaultProdutCardHight: number = 490;\n\n    private readonly _activePoints: IArea[] = [];\n\n    private readonly _activeImageRefs: React.RefObject<HTMLDivElement>;\n\n    private readonly _activeImageClass: string;\n\n    private readonly _productCardDivRef: React.RefObject<HTMLDivElement>;\n\n    public constructor(props: IActiveImageProps<IActiveImageData> & IImageMapperProps) {\n        super(props);\n        this._telemetryContent = getTelemetryObject(this.props.context.request.telemetryPageName!,\n            this.props.friendlyName,\n            this.props.telemetry);\n        const viewport = isMobile({ variant: VariantType.Browser, context: this.props.context.request });\n        this._activeImageClass = `msc-active-image-${this.getActiveImageId()}`;\n        this.state = {\n            clientWidth: 0,\n            area: null,\n            viewport,\n            overlayClass: ''\n        };\n        this._isDesktopViewPort = viewport === 'lg' || viewport === 'xl';\n        this._activeImageRefs = React.createRef();\n        this._productCardDivRef = React.createRef();\n    }\n\n    public componentDidMount(): void {\n        if (MsDyn365.msdyn365Commerce.isBrowser) {\n            window.addEventListener('resize', this.updateClientWidth);\n            document.addEventListener('keydown', this.keyDown, false);\n            document.addEventListener('mousedown', this._handleOutsideClick);\n        }\n        setTimeout(() => {\n            this.updateClientWidth();\n        }, ActiveImageConstants.timeoutInterval);\n\n        if (MsDyn365.msdyn365Commerce.isBrowser && this._activeImageRefs.current) {\n            const images: HTMLCollectionOf<Element> =\n                this._activeImageRefs.current.getElementsByClassName('msc-thumbnail_image msc-active-image-img');\n            if (ArrayExtensions.hasElements(Array.from(images))) {\n                images[0].removeAttribute('usemap');\n            }\n        }\n    }\n\n    /**\n     * AddActivePoints method - To handle add Active Points.\n     * @param area - IArea.\n     * @param product - ProductSearchResult.\n     * @param coords - Coords.\n     * @param productUrl - String.\n     */\n    public addActivePoints = (area: IArea | undefined, product: ProductSearchResult, coords: number[], productUrl: string): void => {\n        if (!area) {\n            this._activePoints.push({\n                areaId: product.RecordId.toString(),\n                coords,\n                primaryImageUrl: product.PrimaryImageUrl ?? '',\n                productUrl,\n                productSearchResult: product\n            });\n        }\n    };\n\n    /**\n     * ComponentWillUnmount method.\n     */\n    public componentWillUnmount(): void {\n        if (MsDyn365.msdyn365Commerce.isBrowser) {\n            window.removeEventListener('resize', this.updateClientWidth);\n            document.removeEventListener('keydown', (this.keyDown as unknown) as EventListener, false);\n            document.removeEventListener('mousedown', this._handleOutsideClick, false);\n        }\n    }\n\n    /**\n     * UpdateClientWidth method to update client width in state.\n     */\n    public updateClientWidth = (): void => {\n        const viewport = isMobile({ variant: VariantType.Browser, context: this.props.context.request });\n        this.setState({ clientWidth: this.getActiveImageWidth(), viewport });\n        this._isDesktopViewPort = viewport === 'lg' || viewport === 'xl';\n    };\n\n    /**\n     * Render method.\n     * @returns - Returns JSX.Element | null.\n     */\n    public render(): JSX.Element | null {\n        const viewProps: IActiveImageViewProps = {\n            ...(this.props as IImageMapperProps & IActiveImageProps<{}>),\n            activePointContainer: {\n                moduleProps: this.props,\n                className: classnames('msc-active-image', this._activeImageClass, this.props.config.className)\n            },\n            activePointDetailsContainer: {\n                tag: 'div',\n                className: classnames('msc-active-image-wrapper', this._activeImageClass, this.props.config.className),\n                ref: this._activeImageRefs\n            },\n            imgWidth: this.props.config.canvasWidth,\n            imageMapper: this.renderImageMapper(),\n            overlay: this.renderOverlay(),\n            productCard: this.renderProductCard(),\n            productCardleftPosition: this.getProductCardPositionX(),\n            productCardtopPosition: this.getProductCardPositionY(),\n            title: this.renderActiveImageDetailsHeading(),\n            text: this.renderActiveImageDetailsParagraph(),\n            links: this.renderActiveImageDetailsLinks(),\n            detailsContainer: { className: 'msc-active-image__details' },\n            detailsContainerCta: { className: 'msc-active-image__details__cta' },\n            additionalContent: activeImageAdditionalContent({\n                requestContext: this.props.context.request,\n                additionalContent: this.props.config.additionalContent,\n                handleAdditionalTextChange: this.handleAdditionalTextChange,\n                handleAdditionalParagraphChange: this.handleAdditionalParagraphChange,\n                handleAdditionalLinkTextChange: this.handleAdditionalLinkTextChange\n            }),\n            handleAdditionalText: this.handleAdditionalTextChange,\n            handleAdditionalParagraph: this.handleAdditionalParagraphChange,\n            handleAdditionalLinkText: this.handleAdditionalTextChange\n        };\n\n        return this.props.renderView(viewProps);\n    }\n\n    /**\n     * RenderImageMapper method - To render image mapper.\n     * @returns - Returns React.ReactNode | null.\n     */\n    public renderImageMapper = (): React.ReactNode | null => {\n        const { config, context } = this.props;\n        const defaultPosition: number = 0;\n        const defaultLength: number = 0;\n        const productResults = this.props.data.products.result;\n        if (config.activePoints && productResults) {\n            for (const product of productResults) {\n                for (const configProduct of config.activePoints) {\n                    if (product.ItemId === configProduct.itemId) {\n                        const productUrl = getProductPageUrlSync(product.Name ?? '', product.RecordId, context.actionContext, undefined);\n                        const coords = [\n                            configProduct.xPosition ?? defaultPosition,\n                            configProduct.yPosition ?? defaultPosition,\n                            configProduct.radius ?? defaultPosition\n                        ];\n                        const area = this._activePoints.find((activePoint) => JSON.stringify(activePoint.coords) === JSON.stringify(coords));\n                        this.addActivePoints(area, product, coords, productUrl);\n                    }\n                }\n            }\n        }\n        const mappedArea: IAreaMap = {\n            name: `map-${this._activeImageClass}`,\n            areas: this._activePoints.length > defaultLength ? this._activePoints : []\n        };\n        if (this.props.config.activeImage) {\n            return (\n                <ImageMapper\n                    viewPort={this.state.viewport}\n                    requestContext={this.props.context.actionContext.requestContext}\n                    width={this.state.clientWidth}\n                    imgWidth={this.props.config.canvasWidth}\n                    onClick={this.enterArea}\n                    onFocus={this.enterArea}\n                    onMouseEnter={this.enterArea}\n                    onMouseLeave={this.leaveArea}\n                    imageData={this.props.config.activeImage}\n                    areaMap={mappedArea}\n                    activeImageRefs={this._activeImageRefs}\n                    imageMapperResources={{\n                        altText: this.props.resources.altTextForSeeMoreButtonWithProductName,\n                        buttonText: this.props.resources.seeMoreButtonText\n                    }}\n                />\n            );\n        }\n\n        return null;\n    };\n\n    /**\n     * EnterArea method - To handle mouse enter event.\n     * @param area - Active point area.\n     * @param index - Active point index.\n     * @param event - Active point AreaEvent.\n     */\n    public enterArea = (area: IArea, index: number, event: AreaEvent): void => {\n        this.setState({ area, overlayClass: 'msc-active-image-overlay' });\n        if (this.props.onMouseEnter) {\n            this.props.onMouseEnter(area, index, event);\n        }\n        if (event.type.toLocaleLowerCase() === 'click' && this._isDesktopViewPort) {\n            window.open(area.productUrl, '_self');\n        }\n    };\n\n    /**\n     * LeaveArea method - To handle mouse leave event.\n     */\n    public leaveArea = (): void => {\n        if (this._isDesktopViewPort) {\n            this.resetState();\n        }\n    };\n\n    /**\n     * ResetState method - To reset the state for area and overlayclass.\n     */\n    public resetState = (): void => {\n        this.setState({ area: null, overlayClass: '' });\n    };\n\n    /**\n     * RenderProductComponent method - To render the product card with product information.\n     * @returns - Returns React.ReactNode.\n     */\n    public renderProductComponent = (): React.ReactNode => {\n        if (this.state.area?.productSearchResult) {\n            const baseImageUrl: string = this.props.context.request.apiSettings.baseImageUrl;\n            const imageUrl: string = this.state.area.primaryImageUrl ?? '';\n            const primaryImageUrl: string = `${baseImageUrl}${imageUrl}`;\n            const product: ProductSearchResult = this.state.area.productSearchResult;\n            product.PrimaryImageUrl = primaryImageUrl;\n\n            return (\n                <ActiveProductComponent\n                    context={this.props.context}\n                    imageSettings={this.props.config.productImageSettings}\n                    id={product.ItemId ?? ''}\n                    typeName={this.props.typeName || ''}\n                    data={{ product }}\n                />\n            );\n        }\n        return React.Fragment;\n    };\n\n    /**\n     * RenderProductCard method - To render product cards.\n     * @returns - Returns React.ReactNode.\n     */\n    public renderProductCard = (): React.ReactNode => {\n        const { area } = this.state;\n\n        return (\n            <>\n                {area?.center && (\n                    <div className='msc-active-image-product-card' ref={this._productCardDivRef}>\n                        <div className='msc-active-image-product-card-wrapper' key={area.areaId}>\n                            {!this._isDesktopViewPort && <button onClick={this.resetState} className='close-button' />}\n                            {area.productSearchResult && this.renderProductComponent()}\n                            {!this._isDesktopViewPort && <a href={area.productUrl} className='see-more-button'>\n                                {this.props.resources.seeMoreButtonText}\n                            </a>}\n                        </div>\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    /**\n     * RenderOverlay method - To render overlay for non desktop viewports.\n     * @returns - Returns React.ReactNode.\n     */\n    public renderOverlay = (): React.ReactNode => {\n        return (\n            <>\n                {!this._isDesktopViewPort && <div className={this.state.overlayClass} />}\n            </>\n        );\n    };\n\n    /**\n     * GetProductCardPositionX method - Provides product card x position to the left or right of active point based on available space.\n     * For xs, sm and md viewports it provides x position for the center alignment.\n     * @returns - Returns number.\n     */\n    public getProductCardPositionX = (): number => {\n        const defaultImageSettings = this.getDefaultImageSettings();\n        const productImageSettingsWidth =\n        this.props.config.productImageSettings?.viewports ? this.props.config.productImageSettings.viewports.lg?.w : defaultImageSettings.viewports.lg?.w;\n        const defaultPositionX: number = 0;\n        const halfDivisor: number = 2;\n        const productCardWidth: number =\n        productImageSettingsWidth ? productImageSettingsWidth : this._defaultProductCardWidth;\n        const { area, clientWidth, viewport } = this.state;\n        const pointPositionX = area?.center?.[0] ?? clientWidth / halfDivisor;\n        const leftAllignPosition = pointPositionX - productCardWidth - (productCardWidth / halfDivisor);\n        const rightAllignPosition = pointPositionX + (productCardWidth / halfDivisor);\n        let position: number = (clientWidth - productCardWidth) / halfDivisor;\n        if (viewport !== 'xs' && viewport !== 'sm' && viewport !== 'md') {\n            if (leftAllignPosition < defaultPositionX) {\n                position = rightAllignPosition;\n            } else {\n                position = leftAllignPosition;\n            }\n        }\n        return position;\n    };\n\n    /**\n     * GetProductCardPositionY method - Provides product card y position in center with respect to active point.\n     * For xs, sm and md viewports it provides y position for the center alignment.\n     * @returns - Returns number.\n     */\n    public getProductCardPositionY = (): number => {\n        const defaultImageSettings = this.getDefaultImageSettings();\n        const productImageSettingsHeight =\n        this.props.config.productImageSettings?.viewports ? this.props.config.productImageSettings.viewports.lg?.h : defaultImageSettings.viewports.lg?.h;\n        const halfDivisor: number = 2;\n        const { area, viewport } = this.state;\n        const produtCardHight: number =\n        productImageSettingsHeight ? productImageSettingsHeight : this._defaultProdutCardHight;\n        const pointPositionY = (this.getActiveImageHeight() - produtCardHight) / halfDivisor;\n        let position: number = pointPositionY;\n        if (viewport !== 'xs' && viewport !== 'sm' && viewport !== 'md') {\n            position = (area?.center?.[1] ?? this.getActiveImageHeight() / halfDivisor) - (produtCardHight / halfDivisor);\n        }\n        return position;\n    };\n\n    /**\n     * GetDefaultImageSettings method.\n     * @returns MsDyn365.IImageSettings.\n     */\n    public getDefaultImageSettings = (): MsDyn365.IImageSettings => {\n        const defaultImageSettings: MsDyn365.IImageSettings = {\n            viewports: {\n                xs: { q: 'w=275&h=275&m=6', w: 275, h: 275 },\n                lg: { q: 'w=275&h=275&m=6', w: 275, h: 275 },\n                xl: { q: 'w=275&h=275&m=6', w: 275, h: 275 }\n            },\n            lazyload: true\n        };\n\n        return defaultImageSettings;\n    };\n\n    /**\n     * KeyDown method - To handle keydown event.\n     * @param event - KeyboardEvent.\n     */\n    public keyDown = (event: KeyboardEvent): void => {\n        if (event.key === ActiveImageConstants.enterKey) {\n            const target: HTMLElement = event.target as HTMLElement;\n            if (target.nodeName === 'AREA') {\n                const area: HTMLAreaElement = target as HTMLAreaElement;\n                if (area.href) {\n                    window.open(area.href, '_self');\n                }\n            }\n        }\n        if (event.key === ActiveImageConstants.escKey) {\n            this.resetState();\n        }\n    };\n\n    /**\n     * GetActiveImageWidth method - To get active image width.\n     * @returns Returns number.\n     */\n    public getActiveImageWidth = (): number => {\n        const defaultWidth: number = 0;\n        if (MsDyn365.msdyn365Commerce.isBrowser) {\n            const activeImageReferenceValue = this._activeImageRefs;\n            if (activeImageReferenceValue.current !== null) {\n                return activeImageReferenceValue.current.clientWidth;\n            }\n        }\n        return defaultWidth;\n    };\n\n    /**\n     * GetActiveImageHeight method - To get active image height.\n     * @returns Returns number.\n     */\n    public getActiveImageHeight = (): number => {\n        const defaultHeight: number = 0;\n        if (MsDyn365.msdyn365Commerce.isBrowser) {\n            const activeImageReferenceValue = this._activeImageRefs;\n            if (activeImageReferenceValue.current !== null) {\n                return activeImageReferenceValue.current.clientHeight;\n            }\n        }\n        return defaultHeight;\n    };\n\n    /**\n     * HandleLinkTextChange method - To handle link text change event.\n     * @param linkIndex - The link index.\n     * @param event - The dialog that is allowed to remain open.\n     */\n    public handleLinkTextChange(linkIndex: number, event: MsDyn365.ContentEditableEvent): void {\n        if (this.props.config.links && this.props.config.links[Number(linkIndex)]) {\n            this.props.config.links[Number(linkIndex)].linkText = event.target.value;\n        }\n    }\n\n    /**\n     * HandleTextChange method - To handle text change event.\n     * @param event - The dialog that is allowed to remain open.\n     */\n    public handleTextChange = (event: MsDyn365.ContentEditableEvent): void => {\n        this.props.config.heading!.text = event.target.value;\n    };\n\n    /**\n     * HandleParagraphChange method - To handle paragraph change event.\n     * @param event - The dialog that is allowed to remain open.\n     */\n    public handleParagraphChange = (event: MsDyn365.ContentEditableEvent): void => {\n        this.props.config.paragraph = event.target.value;\n    };\n\n    /**\n     * HandleAdditionalTextChange method - To handle additional text change event.\n     * @param event - The dialog that is allowed to remain open.\n     */\n    public handleAdditionalTextChange(event: MsDyn365.ContentEditableEvent): void {\n        if (this.props.config.additionalContent) {\n            this.props.config.additionalContent.heading = event.target.value;\n        }\n    }\n\n    /**\n     * HandleAdditionalLinkTextChange method - To handle additional link text change event.\n     * @param linkIndex - The link index.\n     * @param event - The dialog that is allowed to remain open.\n     */\n    public handleAdditionalLinkTextChange(linkIndex: number, event: MsDyn365.ContentEditableEvent): void {\n        const additionalContent = this.props.config.additionalContent ?? {};\n        if (additionalContent.links) {\n            additionalContent.links[Number(linkIndex)].linkText = event.target.value;\n        }\n    }\n\n    /**\n     * HandleAdditionalParagraphChange method - To handle additional paragraph change event.\n     * @param event - The dialog that is allowed to remain open.\n     */\n    public handleAdditionalParagraphChange(event: MsDyn365.ContentEditableEvent): void {\n        if (this.props.config.additionalContent) {\n            this.props.config.additionalContent.subtext = event.target.value;\n        }\n    }\n\n    /**\n     * RenderActiveImageDetailsLinks method - To render active image details links.\n     * @returns - React node.\n     */\n    public renderActiveImageDetailsLinks = (): React.ReactNode[] | undefined => {\n        const { links } = this.props.config;\n        const payLoad = getPayloadObject('click', this._telemetryContent, '');\n\n        return (\n            links?.map((linkData: IActiveImageLinksData, index: number) => {\n                payLoad.contentAction.etext = linkData.linkText;\n                const attributes = getTelemetryAttributes(this._telemetryContent, payLoad);\n                const linkId = index;\n                const editableLink: MsDyn365.ILinksData = {\n                    ariaLabel: linkData.ariaLabel,\n                    className: 'msc-active-image__details__cta__link',\n                    linkText: linkData.linkText,\n                    linkUrl: linkData.linkUrl.destinationUrl,\n                    openInNewTab: linkData.willOpenInNewTab,\n                    role: 'button',\n                    additionalProperties: attributes\n                };\n\n                return (\n                    <MsDyn365.Link\n                        key={linkId}\n                        link={editableLink}\n                        editProps={{\n                            /**\n                             * Handle additional paragraph change.\n                             * @param event - The keyboard event.\n                             */\n                            onTextChange: (event) => {\n                                this.handleLinkTextChange(index, event);\n                            }, requestContext: this.props.context.request }}\n                    />\n                );\n            })\n        );\n    };\n\n    /**\n     * RenderActiveImageDetailsHeading method - To render active image details heading.\n     * @returns - React.ReactNode | undefined.\n     */\n    public renderActiveImageDetailsHeading = (): React.ReactNode | undefined => {\n        const { heading } = this.props.config;\n\n        return (\n            heading && (\n                <MsDyn365.Text\n                    className='msc-active-image__details__title'\n                    tag={heading.tag ?? 'h1'}\n                    text={heading.text}\n                    editProps={{ onEdit: this.handleTextChange, requestContext: this.props.context.request }}\n                />\n            )\n        );\n    };\n\n    /**\n     * RenderActiveImageDetailsParagraph method - To render active image details paragraph.\n     * @returns - React.ReactNode | undefined.\n     */\n    public renderActiveImageDetailsParagraph = (): React.ReactNode | undefined => {\n        const { paragraph } = this.props.config;\n\n        return (\n            paragraph && (\n                <MsDyn365.RichTextComponent\n                    text={paragraph}\n                    className='msc-active-image__details__text'\n                    editProps={{ onEdit: this.handleParagraphChange, requestContext: this.props.context.request }}\n                />\n            )\n        );\n    };\n\n    /**\n     * GetActiveImageId - To get active image id from src.\n     * @returns - String.\n     */\n    public getActiveImageId = (): string => {\n        const { activeImage } = this.props.config;\n        let activeImageId: string = '';\n        if (activeImage?.src) {\n            const activeImageSource = activeImage.src.split('/');\n            const decrementOne: number = 1;\n            const activeImageIdPart = (activeImageSource[activeImageSource.length - decrementOne]).split('?');\n            activeImageId = activeImageIdPart[0] ?? '';\n        }\n        return activeImageId;\n    };\n\n    /**\n     * Handle outside click method - To handle outside click of the active image product.\n     * @param event - Mouse event.\n     */\n    private readonly _handleOutsideClick = (event: MouseEvent) => {\n        if (this._productCardDivRef.current?.contains(event.target as Node)) {\n            return;\n        }\n        this.resetState();\n    };\n}\nexport default ActiveImage;\n","/*--------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * See License.txt in the project root for license information.\n *--------------------------------------------------------------*/\n\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { IActiveImageAdditionalContentViewProps } from '../active-image-utilities';\nimport { IActiveImageViewProps } from './active-image';\n\n/**\n * Render Additional Content.\n * @param additionalContent - Additional content view props.\n * @returns JSX Element.\n */\nconst renderAdditionalContent = (additionalContent: IActiveImageAdditionalContentViewProps) => {\n    return (\n        <Node {...additionalContent.additionalContentNode}>\n            {additionalContent.heading}\n            <Node {...additionalContent.additionalContentContainer}>\n                {additionalContent.text}\n                <Node {...additionalContent.additionalContentItemLinks}>\n                    {additionalContent.links}\n                </Node>\n            </Node>\n        </Node >\n    );\n};\n\n/**\n * Render View.\n * @param props - The view props.\n * @returns -The JSX Element.\n */\nexport const activeImageView: React.FC<IActiveImageViewProps> = props => {\n    return (\n        <Module {...props.activePointContainer}>\n            <Node {...props.activePointDetailsContainer}>\n                {props.imageMapper}\n                <Node {...props.detailsContainer} className={props.detailsContainer ? props.detailsContainer.className : ''}>\n                    {props.title}\n                    {props.text}\n                    {props.additionalContent && renderAdditionalContent(props.additionalContent)}\n                    <Node {...props.detailsContainerCta} className={props.detailsContainerCta ? props.detailsContainerCta.className : ''}>\n                        {props.links}\n                    </Node>\n                </Node>\n            </Node>\n            <Node\n                className='msc-active-image-product-card-container'\n                style={{ top: `${props.productCardtopPosition}px`, left: `${props.productCardleftPosition}px` }}>\n                {props.overlay}\n                {props.productCard}\n            </Node>\n        </Module>\n    );\n};\n\nexport default activeImageView;\n"],"names":["ActiveImageInput","config","_cacheKey","getCacheObjectType","getCacheKey","this","dataCacheType","activePoints","ArrayExtensions","activePointData","itemId","toString","createInput","inputData","getActiveImageproductAction","async","input","context","itemIds","map","push","ItemId","searchCriteriaInput","Context","ChannelId","requestContext","apiSettings","channelId","CatalogId","catalogId","IncludeAttributes","ItemIds","callerContext","actionDataAction","id","action","renderRating","typeName","ratingId","avgRating","totalRatings","ariaLabel","numberRatings","undefined","ratingAriaLabel","rating","roundedRating","toFixed","getRatingAriaLabel","ratingCount","readOnly","data","ActiveProductComponent","imageSettings","savingsText","freePriceText","originalPriceText","product","className","gridSettings","imageUrl","altText","imgData","src","imageProps","cropFocalRegion","loadFailureBehavior","renderProductPlacementImage","actionContext","request","PrimaryImageUrl","Name","productId","basePrice","adjustedPrice","price","BasePrice","AdjustedPrice","CustomerContextualPrice","PriceComponent","renderPrice","Price","description","Description","app","hideRating","AverageRating","TotalRatings","assembleNode","item","props","additionalContentNode","heading","additionalContentHeading","text","tag","editProps","onEdit","event","handleAdditionalTextChange","renderHeading","subtext","additionalContentParagraphText","renderParagraph","links","ctaLink","index","linkIndex","editableLink","linkText","linkUrl","destinationUrl","openInNewTab","isOpenInNewTab","role","key","link","onTextChange","handleAdditionalLinkTextChange","renderLinks","additionalContentContainer","additionalContentItemLinks","activeImageAdditionalContent","additionalContent","CanvasCalculations","CanvasStyles","ImageMapper","super","_isDesktopViewPort","_context","getActiveImageWidth","activeImageReferenceValue","activeImageRefs","current","clientWidth","getActiveImageHeight","clientHeight","convertHexToRgb","hexColor","result","RegExp","exec","rValue","Number","parseInt","gValue","bValue","applyFadingTransition","coords","rgbColor","alpha","halfDivisor","_canvas","getContext","buttonPadding","paddingAdjustment","buttonWidth","measureText","width","fillStyle","document","body","parentElement","getAttribute","fillText","drawButton","color","buttonTextClor","buttonHeight","buttonPositionX","buttonPositionY","arcsize","beginPath","moveTo","lineTo","arcTo","stroke","closePath","fill","expandAnimation","buttonText","imageMapperResources","animationStartWidth","expandAnimationStartWidth","pointPositionX","pointPositionY","animationEndWidth","expandAnimationEndWidth","radius","expandRadius","rotation","startAngle","endAngle","textFadeInValue","textFadeInStartValue","buttonTextClorInRgb","toLocaleLowerCase","animate","ellipse","requestAnimationFrame","textFadeInterval","collapseAnimation","collapseAnimationStartWidth","collapseAnimationEndWidth","clearMargin","clearHeight","clearWidth","collapseRadius","textFadeOutValue","textFadeOutStartValue","clearRect","drawCircle","viewPort","doubleMultiplier","strokeStyle","arc","Math","PI","scaleCoords","imgWidth","defaultWidth","defaultScale","scale","coord","renderPrefilledAreas","areaMap","areas","area","computeCenter","scaledCoords","handleHoverOn","center","handleHoverOff","canvasPositionX","defaultPositionX","canvasPositionY","defaultPositionY","height","click","onClick","preventDefault","hoverOn","onMouseEnter","hoverOff","onMouseLeave","renderAreas","xsRadius","extendedArea","areaKey","altTextWithProductName","replace","productSearchResult","shape","join","onFocus","onBlur","href","productUrl","tabIndex","alt","initCanvas","_backgroundImage","_container","onLoad","defaultHeight","canvasWidth","canvasHeight","style","nextProps","shouldRender","imageData","ref","useMap","name","ActiveImageConstants","ActiveImage","_defaultProductCardWidth","_defaultProdutCardHight","_activePoints","addActivePoints","areaId","RecordId","primaryImageUrl","updateClientWidth","viewport","variant","setState","renderImageMapper","productResults","products","configProduct","getProductPageUrlSync","xPosition","yPosition","find","activePoint","JSON","stringify","mappedArea","_activeImageClass","length","activeImage","state","enterArea","leaveArea","_activeImageRefs","resources","altTextForSeeMoreButtonWithProductName","seeMoreButtonText","overlayClass","type","window","open","resetState","renderProductComponent","baseImageUrl","productImageSettings","renderProductCard","_productCardDivRef","renderOverlay","getProductCardPositionX","defaultImageSettings","getDefaultImageSettings","productImageSettingsWidth","viewports","lg","w","productCardWidth","leftAllignPosition","position","getProductCardPositionY","productImageSettingsHeight","h","produtCardHight","xs","q","xl","lazyload","keyDown","enterKey","target","nodeName","escKey","handleTextChange","value","handleParagraphChange","paragraph","renderActiveImageDetailsLinks","payLoad","_telemetryContent","linkData","contentAction","etext","attributes","linkId","willOpenInNewTab","additionalProperties","handleLinkTextChange","renderActiveImageDetailsHeading","renderActiveImageDetailsParagraph","getActiveImageId","activeImageId","activeImageSource","split","decrementOne","_handleOutsideClick","contains","telemetryPageName","friendlyName","telemetry","addEventListener","setTimeout","timeoutInterval","images","getElementsByClassName","Array","from","removeAttribute","removeEventListener","viewProps","activePointContainer","moduleProps","activePointDetailsContainer","imageMapper","overlay","productCard","productCardleftPosition","productCardtopPosition","title","detailsContainer","detailsContainerCta","handleAdditionalParagraphChange","handleAdditionalText","handleAdditionalParagraph","handleAdditionalLinkText","renderView","activeImageView","Module","Node","top","left"],"sourceRoot":""}