{\n public render(): JSX.Element {\n const editableLinks = this._mapEditableLinks(this.props.links);\n return (\n \n {editableLinks && editableLinks.length > 0 ? (\n \n ) : null}\n
\n );\n }\n\n private readonly _mapEditableLinks = (linkdata: ILinksData[]): Msdyn365.ILinksData[] | null => {\n if (!linkdata || linkdata.length === 0) {\n return null;\n }\n const editableLinks: Msdyn365.ILinksData[] = [];\n linkdata.forEach((link, index) => {\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 btnClass = index === 0 ? 'msc-cta__primary' : 'msc-cta__secondary';\n const editableLink: Msdyn365.ILinksData = {\n ariaLabel: link.ariaLabel,\n className: btnClass,\n linkText: link.linkText,\n linkUrl: link.linkUrl.destinationUrl,\n openInNewTab: link.openInNewTab,\n role: this.props.role,\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 ContentCardLinks;\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 } from '@msdyn365-commerce-modules/retail-actions';\nimport { getTelemetryObject, IModuleProps, INodeProps, ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { contentBlockAdditionalContent, IContentBlockAdditionalContentViewProps } from './components/additional-content';\nimport LinksComponent from './components/links';\nimport { actionableRegion as region, IContentBlockConfig, IContentBlockProps } from './content-block.props.autogenerated';\n\nexport interface IContentBlockViewProps extends IContentBlockProps<{}> {\n title?: React.ReactNode;\n text?: React.ReactNode;\n image?: React.ReactNode;\n links?: React.ReactNode;\n className?: string;\n contentBlockContainer: IModuleProps;\n imageContainer: INodeProps;\n detailsContainer: INodeProps;\n contentBlockAnchorTag?: INodeProps;\n imageLink?: string;\n imageAriaLabel?: string;\n additionalContent?: IContentBlockAdditionalContentViewProps;\n handleAdditionalText?(): void;\n handleAdditionalParagraph?(): void;\n handleAdditionalLinkTextChange?(): void;\n}\n\n/**\n * Site-builder configuration for the module.\n */\nexport interface IContentBlockFullConfig extends IContentBlockConfig {\n // eslint-disable-next-line @typescript-eslint/naming-convention -- This field comes from SDK.\n msdyn365__moduleLayout?: string;\n}\n\n/**\n * ContentCard component.\n * @extends {React.PureComponent}\n */\nexport class ContentBlock 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 render(): JSX.Element | null {\n const { heading, paragraph, image, links, className, imageAriaLabel } = this.props.config;\n const contentBlockTitle = heading && (\n \n );\n\n const contentBlockLinks = links && ArrayExtensions.hasElements(links) && (\n \n );\n const contentBlockText = paragraph && (\n \n );\n\n let contentBlockImageSettings: Msdyn365.IImageSettings | undefined;\n\n if (image && image.imageSettings && !image.imageSettings.backgroundColor && this.props.config.backgroundColor) {\n contentBlockImageSettings = {\n ...image?.imageSettings,\n backgroundColor: this.props.config.backgroundColor\n };\n } else {\n contentBlockImageSettings = image?.imageSettings;\n }\n\n const imageProps = {\n gridSettings: this.props.context.request.gridSettings ?? {},\n imageSettings: contentBlockImageSettings\n };\n\n const contentBlockImage = (\n \n );\n\n const contentBlockContainerStyle: React.CSSProperties | undefined = this.props.config.backgroundColor\n ? { backgroundColor: this.props.config.backgroundColor }\n : undefined;\n\n if (!contentBlockTitle && !contentBlockText && !contentBlockLinks) {\n this.props.context.telemetry.error('Content block content is empty, module wont render.');\n return null;\n }\n const contentBlockviewProps = {\n ...this.props,\n title: contentBlockTitle,\n text: contentBlockText,\n image: contentBlockImage,\n links: contentBlockLinks,\n moduleClass: this.props.config.className,\n contentBlockContainer: {\n moduleProps: this.props,\n className: classnames('ms-content-block', className),\n style: contentBlockContainerStyle\n },\n imageContainer: { className: 'ms-content-block__image' },\n detailsContainer: { className: 'ms-content-block__details' },\n contentBlockAnchorTag: {\n tag: 'a',\n className: 'ms-content-block__link',\n role: 'link'\n },\n imageLink: this._getImageLink(),\n imageAriaLabel,\n additionalContent: contentBlockAdditionalContent({\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 handleAdditionalLinkTextChange: this.handleAdditionalLinkTextChange\n };\n\n return this.props.renderView(contentBlockviewProps) as React.ReactElement;\n }\n\n /**\n * To handle text change.\n * @param event - To handle text change event.\n * @name - HandleTextChange\n * @public\n * @returns - The Text value.\n */\n public handleTextChange = (event: Msdyn365.ContentEditableEvent) => (this.props.config.heading!.text = event.target.value);\n\n /**\n * To handle paragraph change.\n * @param event - To handle text change event.\n * @name - HandleParagraphChange\n * @public\n * @returns - The Paragraph value.\n */\n public handleParagraphChange = (event: Msdyn365.ContentEditableEvent) => (this.props.config.paragraph = event.target.value);\n\n /**\n * Handle link text change.\n * @param linkIndex - The link index.\n * @returns - Void.\n */\n public handleLinkTextChange = (linkIndex: number) => (event: Msdyn365.ContentEditableEvent) => {\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 public handleAdditionalTextChange(index: number, event: Msdyn365.ContentEditableEvent): void {\n if (this.props.config.additionalContent) {\n this.props.config.additionalContent[Number(index)].heading = event.target.value;\n }\n }\n\n public handleAdditionalLinkTextChange(linkIndex: number, index: number, event: Msdyn365.ContentEditableEvent): void {\n const additionalContentObject =\n (this.props.config.additionalContent &&\n ArrayExtensions.hasElements(this.props.config.additionalContent) &&\n this.props.config.additionalContent[Number(index)]) ||\n {};\n if (additionalContentObject.links) {\n additionalContentObject.links[Number(linkIndex)].linkText = event.target.value;\n }\n }\n\n public handleAdditionalParagraphChange(index: number, event: Msdyn365.ContentEditableEvent): void {\n if (this.props.config.additionalContent) {\n this.props.config.additionalContent[Number(index)].subtext = event.target.value;\n }\n }\n\n private _getImageLink(): string | null {\n const { imageLink, links, actionableRegion } = this.props.config;\n if (actionableRegion === region.imageAndLinks) {\n if (imageLink?.destinationUrl) {\n return imageLink.destinationUrl;\n } else if (links && ArrayExtensions.hasElements(links) && links[0].linkUrl) {\n return links[0].linkUrl.destinationUrl;\n }\n return null;\n }\n return null;\n }\n}\n\nexport default ContentBlock;\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 { IContentBlockAdditionalContentItemViewProps, IContentBlockAdditionalContentViewProps } from './components/additional-content';\nimport { IContentBlockViewProps } from './content-block';\n\n/**\n * Render Additional Content.\n * @param additionalContent - Additional content view props.\n * @returns JSX Element.\n */\nconst renderAdditionalContent = (additionalContent: IContentBlockAdditionalContentViewProps) => {\n return (\n \n {additionalContent.additionalContentItems?.map((item: IContentBlockAdditionalContentItemViewProps) => {\n return (\n <>\n {item.heading}\n \n {item.text}\n {item.links}\n \n >\n );\n })}\n \n );\n};\n\nconst ContentBlockView: React.FC = props => {\n const {\n contentBlockContainer,\n imageContainer,\n detailsContainer,\n title,\n text,\n links,\n image,\n contentBlockAnchorTag,\n imageLink,\n imageAriaLabel,\n additionalContent\n } = props;\n\n if (imageLink) {\n return (\n \n \n {image}\n \n \n {title}\n {text}\n {links}\n {additionalContent && renderAdditionalContent(additionalContent)}\n \n \n );\n }\n return (\n \n {image}\n \n {title}\n {text}\n {links}\n {additionalContent && renderAdditionalContent(additionalContent)}\n \n \n );\n};\n\nexport default ContentBlockView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n IContentBlockAdditionalContentItemViewProps,\n IContentBlockAdditionalContentViewProps,\n IContentBlockViewProps\n} from '@msdyn365-commerce-modules/content-block';\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\n/**\n * Render Additional Content.\n * @param additionalContent - Additional content view props.\n * @returns JSX Element.\n */\nconst renderAdditionalContent = (additionalContent: IContentBlockAdditionalContentViewProps) => {\n return (\n \n {additionalContent.additionalContentItems?.map((item: IContentBlockAdditionalContentItemViewProps) => {\n return (\n <>\n {item.heading}\n \n {item.text}\n {item.links}\n \n >\n );\n })}\n \n );\n};\n\n/**\n * Render View.\n * @param props - The view props.\n * @returns -The JSX Element.\n */\nconst contentBlockView: React.FC = props => {\n const {\n contentBlockContainer,\n imageContainer,\n detailsContainer,\n title,\n text,\n links,\n image,\n contentBlockAnchorTag,\n imageLink,\n imageAriaLabel,\n additionalContent\n } = props;\n\n // @ts-expect-error HTML element need to be clear on run time.\n const hasImage: boolean = image.props.src;\n const imageClass: string = hasImage ? `${detailsContainer.className} withImage` : `${detailsContainer.className} withoutImage`;\n\n if (imageLink) {\n return (\n \n \n {image}\n \n \n {title}\n {text}\n {links}\n {additionalContent && renderAdditionalContent(additionalContent)}\n \n \n );\n }\n return (\n \n {image}\n \n {title}\n {text}\n {links}\n {additionalContent && renderAdditionalContent(additionalContent)}\n \n \n );\n};\n\nexport default contentBlockView;\n","module.exports = React;","module.exports = ReactDOM;"],"names":["renderAdditionalContent","additionalContent","_additionalContent$ad","React","Node","Object","assign","additionalContentNode","additionalContentItems","map","item","heading","additionalContentItemContainer","text","additionalContentItemLinks","links","props","contentBlockContainer","imageContainer","detailsContainer","title","image","contentBlockAnchorTag","imageLink","imageAriaLabel","config","imageClass","src","className","newImage","disableRemoteImageHandling","imageSettings","_objectSpread","viewports","keys","forEach","key","_imageSettings$viewpo","q","Module","href","binding","modules","dataActions","c","require","$type","da","iNM","ns","n","p","pdp","md","window","__bindings__","viewDictionary","cn","assembleNode","itemIndex","_item$links","renderHeading","additionalContentHeading","requestContext","Msdyn365","tag","editProps","onEdit","event","handleAdditionalTextChange","subtext","renderParagraph","additionalContentParagraphText","ctaLink","index","renderLinks","linkIndex","editableLink","ariaLabel","linkText","linkUrl","destinationUrl","openInNewTab","role","link","onTextChange","handleAdditionalLinkTextChange","contentBlockAdditionalContent","reactNodes","push","ContentCardLinks","constructor","_mapEditableLinks","linkdata","length","editableLinks","payLoad","getPayloadObject","this","telemetryContent","contentAction","etext","attributes","getTelemetryAttributes","btnClass","additionalProperties","onClick","onTelemetryClick","render","ContentBlock","getTelemetryObject","context","request","telemetryPageName","friendlyName","telemetry","handleTextChange","target","value","handleParagraphChange","paragraph","handleLinkTextChange","Number","_heading$tag","_this$props$context$r","_this$props$config$im","contentBlockTitle","contentBlockLinks","ArrayExtensions","hasElements","LinksComponent","msdyn365__moduleLayout","contentBlockText","contentBlockImageSettings","backgroundColor","imageProps","gridSettings","contentBlockImage","preserveImageSpace","moduleType","typeName","imagePropertyName","moduleId","id","layout","shouldSkipToMainImage","contentBlockContainerStyle","undefined","error","contentBlockviewProps","moduleClass","moduleProps","classnames","style","_getImageLink","handleAdditionalParagraphChange","handleAdditionalText","handleAdditionalParagraph","renderView","additionalContentObject","actionableRegion","module","exports","ReactDOM"],"sourceRoot":""}