{\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 * ITileListLinks component.\n * @param linkdata - Link data.\n * @returns Editable links.\n */\n private readonly _mapEditableLinks = (linkdata: ILinksData[]): Msdyn365.ILinksData[] | null => {\n if (!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-tile-list__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 TileListLinks;\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 { TileListLinks } from './components';\nimport { IHeadingData, ITileListItemProps } from './tile-list-item.props.autogenerated';\n\n/**\n * Tile-list-item view props.\n */\nexport interface ITileListItemViewProps extends ITileListItemProps<{}> {\n heading?: React.ReactNode;\n paragraph?: React.ReactNode;\n links?: React.ReactNode;\n backgroundImage?: React.ReactNode;\n thumbnailImage?: React.ReactNode;\n tileListItem: IModuleProps;\n tileListContainer: INodeProps;\n tileListImageContainer: INodeProps;\n tileListThumbnailImageContainer: INodeProps;\n tileListHeadingContainer: INodeProps;\n}\n\n/**\n *\n * TileListItem component.\n * @extends {React.PureComponent>}\n */\nexport class TileListItem 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: ITileListItemProps<{}>) {\n super(props);\n }\n\n public render(): JSX.Element {\n const { heading, paragraph, backgroundImage, thumbnailImage, redirectionUrl, links } = this.props.config;\n const tileListLinks = links && ArrayExtensions.hasElements(links) && (\n \n );\n const tileListLinkContainer = {\n tag: 'a' as NodeTag,\n className: 'ms-tile-list-container',\n role: 'link',\n href: redirectionUrl?.linkUrl.destinationUrl,\n 'aria-label': redirectionUrl?.ariaLabel\n };\n\n const tileListButtonContainer = {\n tag: 'button' as NodeTag,\n className: 'ms-tile-list-container'\n };\n const viewProps: ITileListItemViewProps = {\n ...this.props,\n heading: this._createHeading(heading),\n paragraph: this._createParagraph(paragraph),\n backgroundImage: this._renderBackgroundImage(backgroundImage),\n thumbnailImage: this._renderThumbnailImage(thumbnailImage),\n links: tileListLinks,\n tileListItem: {\n moduleProps: this.props,\n className: ''\n },\n tileListContainer: redirectionUrl ? tileListLinkContainer : tileListButtonContainer,\n tileListImageContainer: {\n className: 'ms-tile-list__image'\n },\n tileListThumbnailImageContainer: {\n className: 'ms-tile-list__thumbnail_image',\n 'aria-hidden': 'true'\n },\n tileListHeadingContainer: {\n className: 'ms-tile-list__heading'\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 _renderBackgroundImage(item?: Msdyn365.IImageData, isAriaHiddenAttribute?: boolean): React.ReactNode | null {\n // If image is null, we want to render the placeholder SVG - by passing image data with empty src\n\n const defaultImageSettings: Msdyn365.IImageSettings = {\n viewports: {\n xs: { q: 'w=328&h=412&m=6', w: 328, h: 412 },\n sm: { q: 'w=328&h=412&m=6', w: 328, h: 412 },\n md: { q: 'w=315&h=412&m=6', w: 315, h: 412 },\n lg: { q: 'w=315&h=412&m=6', w: 315, h: 412 },\n xl: { q: 'w=315&h=412&m=6', w: 315, h: 412 }\n },\n lazyload: true\n };\n const verifiedImageSettings = item?.imageSettings?.viewports ? item.imageSettings : defaultImageSettings;\n\n return (\n \n );\n }\n\n private _renderThumbnailImage(\n item?: Msdyn365.IImageData,\n itemImageSettings?: Msdyn365.IImageSettings,\n isAriaHiddenAttribute?: boolean\n ): React.ReactNode | null {\n if (!item) {\n return null;\n }\n if (StringExtensions.isNullOrWhitespace(item.src)) {\n return null;\n }\n\n return (\n \n );\n }\n}\n\nexport default TileListItem;\n"],"sourceRoot":""}