{\n public render(): JSX.Element {\n const editableLinks = this._mapEditableLinks(this.props.links);\n return (\n \n {editableLinks && ArrayExtensions.hasElements(editableLinks) ? (\n \n ) : null}\n
\n );\n }\n\n /**\n * IInteractiveFeatureLinks component.\n * @param linkdata - Link data.\n * @returns Editable links.\n */\n private readonly _mapEditableLinks = (linkdata?: ILinksData[]): Msdyn365.ILinksData[] | null => {\n if (!linkdata || !ArrayExtensions.hasElements(linkdata)) {\n return null;\n }\n const editableLinks: Msdyn365.ILinksData[] = [];\n for (const link of linkdata) {\n // Construct telemetry attribute to render\n const payLoad = getPayloadObject('click', this.props.telemetryContent, '', '');\n const linkText = link.linkText ? link.linkText : '';\n payLoad.contentAction.etext = linkText;\n const attributes = getTelemetryAttributes(this.props.telemetryContent, payLoad);\n const editableLink: Msdyn365.ILinksData = {\n ariaLabel: link.ariaLabel,\n className: 'ms-interactive-feature-collection__link',\n linkText: link.linkText,\n linkUrl: link.linkUrl.destinationUrl,\n openInNewTab: link.openInNewTab,\n role: 'button',\n additionalProperties: attributes,\n onClick: onTelemetryClick(this.props.telemetryContent, payLoad, linkText)\n };\n editableLinks.push(editableLink);\n }\n\n return editableLinks;\n };\n}\nexport default InteractiveFeatureCollectionLinks;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { ArrayExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { getTelemetryObject, IModuleProps, INodeProps, ITelemetryContent, NodeTag } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { InteractiveFeatureCollectionLinks } from './components';\nimport { IHeadingData, IInteractiveFeatureItemProps } from './interactive-feature-item.props.autogenerated';\n\n/**\n * Interactive Feature Item view props.\n */\nexport interface IInteractiveFeatureItemViewProps extends IInteractiveFeatureItemProps<{}> {\n title: React.ReactNode;\n paragraph: React.ReactNode;\n image: React.ReactNode;\n links: React.ReactNode;\n featureItem: IModuleProps;\n isMosaic: boolean;\n indexItem?: number;\n itemCounter?: number;\n\n interactiveFeatureCollectionCarouselContainer: INodeProps;\n interactiveFeatureCollectionCarouselImage: INodeProps;\n interactiveFeatureCollectionCarouselContent: INodeProps;\n\n interactiveFeatureCollectionMosaicContainer: INodeProps;\n interactiveFeatureCollectionMosaicImage: INodeProps;\n interactiveFeatureCollectionMosaicDetails: INodeProps;\n}\n\n/**\n * Interactive Feature Item Extented props.\n */\nexport interface IInteractiveFeatureItemExtentedProps extends IInteractiveFeatureItemProps<{}> {\n isMosaic?: boolean;\n indexItem?: number;\n itemCounter?: number;\n}\n\n/**\n *\n * InteractiveFeatureItem component.\n * @extends {React.PureComponent}\n */\nexport class InteractiveFeatureItem extends React.PureComponent {\n private readonly _telemetryContent: ITelemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n\n public constructor(props: IInteractiveFeatureItemProps<{}>) {\n super(props);\n }\n\n public render(): JSX.Element | null {\n const { indexItem, itemCounter, isMosaic } = this.props;\n const { heading, paragraph, image, links } = this.props.config;\n const featureItemLinks = links && ArrayExtensions.hasElements(links) && (\n \n );\n\n const viewProps = {\n ...this.props,\n indexItem,\n itemCounter,\n isMosaic: isMosaic ? isMosaic : false,\n title: this._createHeading(heading),\n paragraph: this._createParagraph(paragraph),\n image: this._renderImage(image),\n links: featureItemLinks,\n featureItem: {\n moduleProps: this.props,\n className: ''\n },\n interactiveFeatureCollectionCarouselContainer: {\n tag: 'div' as NodeTag,\n className: 'ms-interactive-feature-collection-carousel__container'\n },\n interactiveFeatureCollectionCarouselImage: {\n tag: 'div' as NodeTag,\n className: 'ms-interactive-feature-collection-carousel__image'\n },\n interactiveFeatureCollectionCarouselContent: {\n tag: 'div' as NodeTag,\n className: 'ms-interactive-feature-collection-carousel__heading'\n },\n interactiveFeatureCollectionMosaicContainer: {\n tag: 'div' as NodeTag,\n className: 'ms-interactive-feature-collection-mosaic',\n 'aria-label': heading?.text,\n tabindex: '0',\n role: 'group'\n },\n interactiveFeatureCollectionMosaicImage: {\n className: 'ms-interactive-feature-collection-mosaic__image'\n },\n interactiveFeatureCollectionMosaicDetails: {\n className: 'ms-interactive-feature-collection-mosaic__details'\n }\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n /**\n * Handles heading content change event.\n * @param event - Content editable event.\n */\n public handleHeadingChange = (event: Msdyn365.ContentEditableEvent): void => {\n this.props.config.heading!.text = event.target.value;\n };\n\n /**\n * Handles paragraph content change event.\n * @param event - Content editable event.\n */\n public handleParagraphChange = (event: Msdyn365.ContentEditableEvent): void => {\n this.props.config.paragraph = event.target.value;\n };\n\n /**\n * Handles paragraph content change event.\n * @param linkIndex - Index of link in linkarray.\n * @returns Void.\n */\n public handleLinkTextChange = (linkIndex: number) => (event: Msdyn365.ContentEditableEvent): void => {\n if (this.props.config.links?.[Number(linkIndex)]) {\n this.props.config.links[Number(linkIndex)].linkText = event.target.value;\n }\n };\n\n private _createParagraph(text?: Msdyn365.RichText): React.ReactNode | null {\n if (!text) {\n return null;\n }\n return (\n \n );\n }\n\n private _createHeading(heading?: IHeadingData): React.ReactNode | null {\n if (!heading) {\n return null;\n }\n if (StringExtensions.isNullOrWhitespace(heading.text)) {\n return null;\n }\n\n return (\n \n );\n }\n\n private _renderImage(item?: Msdyn365.IImageData, isAriaHiddenAttribute?: boolean): React.ReactNode | null {\n // Even if image.src is null, we render the Image component to render the fallback SVG\n const defaultImageSettings: Msdyn365.IImageSettings = {\n viewports: {\n xs: { q: 'w=328&h=459&m=6', w: 328, h: 459 },\n sm: { q: 'w=348&h=487&m=6', w: 348, h: 487 },\n md: { q: 'w=650&h=366&m=6', w: 650, h: 366 },\n lg: { q: 'w=650&h=366&m=6', w: 650, h: 366 },\n xl: { q: 'w=650&h=366&m=6', w: 650, h: 366 }\n },\n lazyload: true\n };\n const verifiedImageSettings = item?.imageSettings?.viewports ? item.imageSettings : defaultImageSettings;\n return (\n \n );\n }\n}\n\nexport default InteractiveFeatureItem;\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 classnames from 'classnames';\nimport * as React from 'react';\n\nimport { IInteractiveFeatureItemViewProps } from './interactive-feature-item';\n\n/**\n * Enumerator used to make some calculations to set the proper classnames\n * using modular calculations to see if they are in a right or left column or on first or last row.\n */\nenum MagicNumber {\n modularDivisor = 4,\n caseNumberZero = 0,\n caseNumberOne = 1,\n caseNumberTwo = 2\n}\n\n/**\n * Feature Item View.\n * @param thisProps - Feature Item view props.\n * @param indexItem - Feature Item view props.\n * @param itemCounter - Feature Item view props.\n * @returns Feature item View.\n * @extends {} InteractiveFeatureItem\n */\nconst renderMosaic = (thisProps: IInteractiveFeatureItemViewProps, indexItem?: number, itemCounter?: number): JSX.Element | null => {\n const {\n title,\n paragraph,\n image,\n links,\n interactiveFeatureCollectionMosaicContainer,\n interactiveFeatureCollectionMosaicImage,\n interactiveFeatureCollectionMosaicDetails\n } = thisProps;\n const indexAux = indexItem ? indexItem + MagicNumber.caseNumberOne : MagicNumber.caseNumberOne;\n const itemCounterAux = itemCounter ? itemCounter : MagicNumber.caseNumberZero;\n const modularAux = indexAux % MagicNumber.modularDivisor;\n const firstRow = indexAux <= MagicNumber.caseNumberTwo ? 'firstRow' : '';\n const lastRow =\n itemCounterAux && (indexAux === itemCounterAux || indexAux === itemCounterAux - MagicNumber.caseNumberOne) ? 'lastRow' : '';\n const onCornerRight = modularAux === MagicNumber.caseNumberZero ? 'item-corner-right' : '';\n const onCornerLeft = modularAux === MagicNumber.caseNumberOne ? 'item-corner-left' : '';\n const containerClasses = classnames('ms-interactive-feature-collection-mosaic', onCornerLeft, onCornerRight, firstRow, lastRow);\n\n return (\n \n {image}\n \n {title}\n {paragraph}\n {links}\n \n \n );\n};\n\n/**\n * Feature Item View.\n * @param thisProps - Feature Item view props.\n * @returns Feature item View.\n * @extends {} InteractiveFeatureItem\n */ const renderCarousel = (thisProps: IInteractiveFeatureItemViewProps): JSX.Element | null => {\n const {\n title,\n paragraph,\n image,\n links,\n interactiveFeatureCollectionCarouselContainer,\n interactiveFeatureCollectionCarouselImage,\n interactiveFeatureCollectionCarouselContent\n } = thisProps;\n return (\n \n {image}\n \n {title}\n {paragraph}\n {links}\n \n \n );\n};\n\n/**\n * Feature Item View.\n * @param props - Feature Item view props.\n * @returns Feature item View.\n * @extends {} InteractiveFeatureItem\n */\nexport const FeatureItemViewComponent: React.FC = props => {\n const { isMosaic, featureItem, indexItem, itemCounter } = props;\n if (isMosaic) {\n return <>{renderMosaic(props, indexItem, itemCounter)};\n }\n return {renderCarousel(props)};\n};\n\nexport default FeatureItemViewComponent;\n","module.exports = React;","module.exports = ReactDOM;"],"names":["MagicNumber","FeatureItemViewComponent","props","isMosaic","featureItem","indexItem","itemCounter","React","renderMosaic","thisProps","title","paragraph","image","links","interactiveFeatureCollectionMosaicContainer","interactiveFeatureCollectionMosaicImage","interactiveFeatureCollectionMosaicDetails","indexAux","caseNumberOne","itemCounterAux","caseNumberZero","modularAux","modularDivisor","firstRow","caseNumberTwo","lastRow","onCornerRight","onCornerLeft","containerClasses","classnames","Node","Object","assign","className","config","blockType","Module","interactiveFeatureCollectionCarouselContainer","interactiveFeatureCollectionCarouselImage","interactiveFeatureCollectionCarouselContent","renderCarousel","binding","modules","dataActions","c","require","$type","da","iNM","ns","n","p","pdp","md","window","__bindings__","_objectSpread","viewDictionary","cn","InteractiveFeatureCollectionLinks","constructor","_mapEditableLinks","linkdata","ArrayExtensions","hasElements","editableLinks","link","payLoad","getPayloadObject","this","telemetryContent","linkText","contentAction","etext","attributes","getTelemetryAttributes","editableLink","ariaLabel","linkUrl","destinationUrl","openInNewTab","role","additionalProperties","onClick","onTelemetryClick","push","render","Msdyn365","editProps","onTextChange","requestContext","InteractiveFeatureItem","super","_telemetryContent","getTelemetryObject","context","request","telemetryPageName","friendlyName","telemetry","handleHeadingChange","event","heading","text","target","value","handleParagraphChange","handleLinkTextChange","linkIndex","_this$props$config$li","Number","featureItemLinks","viewProps","_createHeading","_createParagraph","_renderImage","moduleProps","tag","tabindex","renderView","onEdit","_heading$tag","StringExtensions","isNullOrWhitespace","item","isAriaHiddenAttribute","_item$imageSettings","_this$props$config$im","verifiedImageSettings","imageSettings","viewports","xs","q","w","h","sm","lg","xl","lazyload","gridSettings","loadFailureBehavior","key","moduleType","typeName","imagePropertyName","moduleId","id","module","exports","ReactDOM"],"sourceRoot":""}