npm - @esri/solutions-components - Versions diffs - 1.2.0-next.57 → 1.2.0-next.59 - Mend

@esri/solutions-components 1.2.0-next.57 → 1.2.0-next.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2736) hide show

package/dist/components/solution-item-diagram/customElement.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"customElement.js","sources":["../../../src/components/solution-item-diagram/utils/solutionGraph.ts","../../../src/components/solution-item-diagram/utils/SolutionDisplay.ts","../../../src/components/solution-item-diagram/solution-item-diagram.tsx"],"sourcesContent":["/** @license\r\n *\r\n * Copyright 2018 Esri\r\n *\r\n * All rights reserved under the copyright laws of the United States and applicable international laws, treaties,\r\n * and conventions.\r\n *\r\n * This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of\r\n * that agreement. You may redistribute and use this code without modification, provided you adhere to the terms\r\n * of the MLA and include this copyright notice.\r\n *\r\n * See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english\r\n *\r\n * For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal\r\n * Services Department 380 New York Street Redlands, California, USA 92373 USA\r\n *\r\n * email: contracts@esri.com\r\n */\r\n\r\nimport * as go from 'gojs';\r\nimport { getIconUrl } from '../../../utils/getItemIcon';\r\nimport { injectGlobal } from '@emotion/css';\r\n\r\nexport interface IConnectedNodesAndLinks {\r\n connectedNodes: Set<go.Node>;\r\n connectedLinks: Set<go.Link>;\r\n}\r\n\r\nexport interface IKeyedAdornment {\r\n [key: string]: go.Adornment;\r\n}\r\n\r\nexport interface IKeyedValue {\r\n [key: string]: any;\r\n}\r\n\r\nexport interface ILink {\r\n from: string;\r\n fromSpot: go.Spot;\r\n to: string;\r\n toSpot: go.Spot;\r\n}\r\n\r\ninterface INavigationButtons {\r\n resetButton: HTMLCalciteActionElement;\r\n centerButton: HTMLCalciteActionElement;\r\n zoomInButton: HTMLCalciteActionElement;\r\n zoomOutButton: HTMLCalciteActionElement;\r\n}\r\n\r\nexport interface INode {\r\n key: string;\r\n title: string;\r\n itemId: string;\r\n itemType: string;\r\n itemTypeForDisplay: string;\r\n itemTypeKeywords: string[];\r\n group?: string;\r\n url?: string;\r\n}\r\n\r\nexport interface INodesAndLinks {\r\n nodes: INode[],\r\n links: ILink[],\r\n groupPseudoNodes: string[]\r\n}\r\n\r\nexport interface ISolutionGraphTranslations {\r\n centerDiagram: string;\r\n filteredView: string;\r\n reset: string;\r\n zoomIn: string;\r\n zoomOut: string;\r\n}\r\n\r\nexport interface ITemplateInfoGraph {\r\n id: string;\r\n title: string;\r\n type: string;\r\n typeKeywords: string[];\r\n snippet: string;\r\n dependencies: string[];\r\n url?: string;\r\n}\r\n\r\nconst cColumnSpacing = 15;\r\nconst cLayerSpacing = 15;\r\nconst cDiagramPadding = 10;\r\n\r\nconst cNodeSize = new go.Size(220, 48);\r\nconst cNodeBorderStrokeWidth = 1;\r\nconst cNodeCornerRadius = 8;\r\nconst cNodeIconPanelSize = new go.Size(48, 48);\r\nconst cNodeIconSize = new go.Size(16, 16);\r\nconst cNodeTextLineSize = new go.Size(153, 17);\r\nconst cNodeTextFormat = '400 0.75rem \"Avenir Next\", Avenir, \"Helvetica Neue\", sans-serif';\r\nconst cNodeTextFormatBold = '700 0.75rem \"Avenir Next\", Avenir, \"Helvetica Neue\", sans-serif';\r\n\r\nconst cDiagramBackgroundColor = '#f4f4f4';\r\nconst cNodeBorderColor = '#cacaca';\r\nconst cNodeBackgroundColor = '#ffffff';\r\nconst cNodeTextColor = '#4a4a4a';\r\nconst cLinkColor = '#6a6a6a';\r\nconst cTooltipBackgroundColor = '#ffffff';\r\n\r\nconst cNormalNodeOpacity = 1;\r\nconst cDimmedNodeOpacity = 0.3;\r\nconst cNormalLinkOpacity = 1;\r\nconst cDimmedLinkOpacity = 0.2;\r\nconst cHighlightedLinkOpacity = 1;\r\n\r\n// ------------------------------------------------------------------------------------------------------------------ //\r\n\r\n/**\r\n * Configures a directed graph of the Solution items in the collection.\r\n * @param collection Items contained in a Solution\r\n * @param graphicContainer HTML element to contain graph div\r\n * @return Configured diagram object\r\n */\r\nexport function defineDiagram(\r\n graphicContainer: HTMLElement\r\n): go.Diagram {\r\n // Create the container for the graph; element is taken over by graphing software\r\n const diagramDiv = document.createElement('div');\r\n diagramDiv.style.width = '100%';\r\n diagramDiv.style.height = '100%';\r\n\r\n // Add the containers to the provided container\r\n graphicContainer.appendChild(diagramDiv);\r\n\r\n // Draw solution items as a directed graph\r\n const diagram = new go.Diagram(\r\n diagramDiv, // create a Diagram for the HTML Div element\r\n {\r\n click: dispatchDiagramClickEvent, // handle diagram clicks\r\n contentAlignment: go.Spot.Center, // align document to the center of the viewport\r\n dragSelectingTool: null, // disable drag selection\r\n hoverDelay: 50, // milliseconds before mouse-hover displays information\r\n initialAutoScale: go.AutoScale.Uniform, // automatic zoom-to-fit\r\n layout: new go.LayeredDigraphLayout({\r\n columnSpacing: cColumnSpacing,\r\n layerSpacing: cLayerSpacing\r\n }),\r\n padding: cDiagramPadding,\r\n scrollMode: go.ScrollMode.Infinite, // allow infinite scrolling--beyond document bounds\r\n 'toolManager.hoverDelay': 50, // 50 milliseconds before tooltip appears\r\n 'toolManager.mouseWheelBehavior': go.WheelMode.Zoom, // mouse wheel zooms instead of scrolls vertically\r\n }\r\n );\r\n\r\n diagram.nodeTemplate = new go.Node('Auto', {\r\n click: dispatchNodeClickEvent,\r\n movable: false,\r\n opacity: cNormalNodeOpacity,\r\n toolTip: new go.Adornment('Auto', {\r\n isShadowed: true,\r\n margin: new go.Margin(12, 16, 6, 16), // top, right, bottom, left\r\n padding: 0,\r\n shadowBlur: 16,\r\n shadowColor: 'rgba(0, 0, 0, 0.16)',\r\n shadowOffset: new go.Point(0, 0)\r\n })\r\n .add(new go.Panel('Vertical', { background: cTooltipBackgroundColor, margin: 0 })\r\n .add(new go.TextBlock({ margin: 14 })\r\n .bind('text', 'title')))\r\n })\r\n .bind('text', 'title')\r\n .add(\r\n new go.Shape({\r\n desiredSize: cNodeSize,\r\n fill: cNodeBackgroundColor,\r\n geometryString: createRoundedRectangleGeometryPath(cNodeSize.width, cNodeSize.height, cNodeCornerRadius,\r\n cNodeIconPanelSize.width, !!cNodeBackgroundColor),\r\n height: cNodeSize.height,\r\n portId: '',\r\n stroke: cNodeBorderColor,\r\n strokeWidth: cNodeBorderStrokeWidth,\r\n width: cNodeSize.width\r\n })\r\n )\r\n .add(\r\n // Node content\r\n new go.Panel('Horizontal', {\r\n alignment: go.Spot.Left,\r\n stretch: go.Stretch.Horizontal\r\n })\r\n .add(\r\n // Icon panel\r\n new go.Panel('Horizontal', {\r\n alignment: go.Spot.Left,\r\n desiredSize: cNodeIconPanelSize,\r\n margin: 1\r\n })\r\n .add(\r\n new go.Panel('Horizontal', {\r\n alignment: go.Spot.Center,\r\n margin: 16\r\n })\r\n .add(\r\n new go.Picture({\r\n desiredSize: cNodeIconSize\r\n })\r\n .bind('source', '', (node: any) => getIconUrl(node.itemType as string, node.itemTypeKeywords as string[]))\r\n ),\r\n ),\r\n // Label\r\n new go.Panel('Horizontal', {\r\n alignment: go.Spot.Right,\r\n margin: new go.Margin(4, 8, 0, 8) // top, right, bottom, left\r\n })\r\n .add(\r\n new go.Panel('Vertical', {\r\n })\r\n .add(\r\n // First line\r\n new go.TextBlock({\r\n alignment: go.Spot.Left,\r\n desiredSize: cNodeTextLineSize,\r\n font: cNodeTextFormatBold,\r\n overflow: go.TextOverflow.Ellipsis,\r\n stroke: cNodeTextColor,\r\n wrap: go.Wrap.None\r\n })\r\n .bind('text', 'title'),\r\n // Second line\r\n new go.TextBlock({\r\n alignment: go.Spot.Left,\r\n desiredSize: cNodeTextLineSize,\r\n font: cNodeTextFormat,\r\n overflow: go.TextOverflow.Ellipsis,\r\n stroke: cNodeTextColor,\r\n wrap: go.Wrap.None\r\n })\r\n .bind('text', 'itemTypeForDisplay')\r\n )\r\n )\r\n )\r\n )\r\n\r\n diagram.commandHandler.zoomFactor = 1.05; // 5% increase/decrease\r\n diagram.setDivBackground(cDiagramBackgroundColor);\r\n\r\n // Control mouse click behavior\r\n const selectingTool = diagram.toolManager.clickSelectingTool;\r\n selectingTool.standardMouseSelect = function () { }; // cannot be an arrow function\r\n\r\n const draggingTool = diagram.toolManager.draggingTool;\r\n draggingTool.isEnabled = false;\r\n\r\n // Customize the link display\r\n diagram.linkTemplate = new go.Link({\r\n corner: 5,\r\n movable: false,\r\n routing: go.Routing.Orthogonal,\r\n selectable: false\r\n })\r\n .add(\r\n new go.Shape({ // the link path shape\r\n opacity: cNormalLinkOpacity,\r\n stroke: cLinkColor\r\n }),\r\n new go.Shape({ // the 'to' arrowhead\r\n fill: cLinkColor,\r\n opacity: cNormalLinkOpacity,\r\n stroke: null,\r\n toArrow: 'Standard'\r\n })\r\n );\r\n\r\n return diagram;\r\n}\r\n\r\n/**\r\n * Update a diagram with a new set of nodes and links.\r\n * @param diagram Diagram whose model is to be udpated with a new set of nodes and links\r\n * @param nodesAndLinks Nodes and links to display in the graph\r\n */\r\nexport function drawDiagram(\r\n diagram: go.Diagram,\r\n nodesAndLinks: INodesAndLinks,\r\n): void {\r\n // Set the model data for the diagram\r\n diagram.model = new go.GraphLinksModel(nodesAndLinks.nodes, nodesAndLinks.links, {\r\n linkFromPortIdProperty: 'fromPort',\r\n linkToPortIdProperty: 'toPort'\r\n });\r\n}\r\n\r\n/**\r\n * Draws a navigation bar and connects it to the diagram.\r\n * @param graphicContainer HTML element to contain navigation controls\r\n * @param diagram Diagram to be controlled\r\n * @param translations Text to use for the navigation controls' tooltips\r\n * @param includeShowHideGrayedOutButton If true, the 'Filter selected view' switch will be displayed\r\n */\r\nexport function drawAndConnectControlBars(\r\n graphicContainer: HTMLElement,\r\n diagram: go.Diagram,\r\n translations: ISolutionGraphTranslations,\r\n includeFilteredViewButton = true\r\n): void {\r\n if (includeFilteredViewButton) {\r\n // Draw control bar\r\n const filterViewButton: HTMLCalciteSwitchElement = drawfilteredViewBar(graphicContainer, translations);\r\n\r\n // Add event listeners to the controls\r\n filterViewButton.addEventListener('calciteSwitchChange',\r\n () => document.dispatchEvent(new CustomEvent('filteredViewChanged', { detail: filterViewButton.checked }))\r\n );\r\n }\r\n\r\n // Draw control bar\r\n const { resetButton, centerButton, zoomInButton, zoomOutButton } = drawNavigationBar(graphicContainer, translations);\r\n\r\n // Add event listeners to the controls\r\n resetButton.addEventListener('click', () => reset(diagram));\r\n centerButton.addEventListener('click', () => diagram.zoomToFit());\r\n zoomInButton.addEventListener('click', () => diagram.commandHandler.increaseZoom());\r\n zoomOutButton.addEventListener('click', () => diagram.commandHandler.decreaseZoom());\r\n}\r\n\r\n/**\r\n * Draws a directed graph of the Solution items in the collection.\r\n * @param graphicContainer HTML element to contain graph and navigation controls\r\n * @param nodesAndLinks Nodes and links to display in the graph\r\n * @param translations Translations for the navigation controls\r\n * @returns Created diagram\r\n */\r\nexport function drawSolutionGraph(\r\n graphicContainer: HTMLElement,\r\n nodesAndLinks: INodesAndLinks,\r\n translations: ISolutionGraphTranslations,\r\n): go.Diagram {\r\n setStyles();\r\n\r\n // Draw solution items as a directed graph\r\n const diagram = defineDiagram(graphicContainer);\r\n drawDiagram(diagram, nodesAndLinks);\r\n\r\n // Draw the navigation controls\r\n drawAndConnectControlBars(graphicContainer, diagram, translations);\r\n\r\n return diagram;\r\n}\r\n\r\n/**\r\n * Gets the nodes and links connected to the supplied node.\r\n * @param diagramNode Node whose connected nodes and links are to be found\r\n * @returns List of connected nodes and links\r\n */\r\nexport function getConnectedNodesAndLinks(diagramNode: go.GraphObject): IConnectedNodesAndLinks {\r\n const connectedNodes: Set<go.Node> = new Set();\r\n const connectedLinks: Set<go.Link> = new Set();\r\n\r\n // Trace 'from' links\r\n function traceFromLinks(node: go.Node): void {\r\n node.findLinksInto().each(\r\n link => {\r\n connectedLinks.add(link);\r\n const fromNode = link.fromNode;\r\n if (fromNode && !connectedNodes.has(fromNode)) {\r\n connectedNodes.add(fromNode);\r\n traceFromLinks(fromNode);\r\n }\r\n }\r\n );\r\n }\r\n traceFromLinks(diagramNode as go.Node);\r\n\r\n // Trace 'to' links\r\n function traceToLinks(node: go.Node): void {\r\n node.findLinksOutOf().each(\r\n link => {\r\n connectedLinks.add(link);\r\n const toNode = link.toNode;\r\n if (toNode && !connectedNodes.has(toNode)) {\r\n connectedNodes.add(toNode);\r\n traceToLinks(toNode);\r\n }\r\n }\r\n );\r\n }\r\n traceToLinks(diagramNode as go.Node);\r\n\r\n return { connectedNodes, connectedLinks };\r\n}\r\n\r\n/**\r\n * Creates the model data that will be represented by Nodes and Links in the diagram.\r\n * @param collection Items contained in a Solution\r\n * @param canClickToOpen If true, the node will have a URL to open the item in the portal\r\n * @param clickToOpenBaseUrl Base URL to open the item in the portal to be used in `${clickToOpenBaseUrl}?id=${itemId}`\r\n * @returns A structure containing the nodes and links\r\n */\r\nexport function getNodesAndLinks(\r\n collection: ITemplateInfoGraph[],\r\n canClickToOpen = false,\r\n clickToOpenBaseUrl?: string\r\n): INodesAndLinks {\r\n // Use pseudo nodes for groups\r\n const groupPseudoNodes: string[] = [];\r\n\r\n // Add the nodes to a list for the diagram\r\n const nodes: INode[] = collection\r\n .map((template: ITemplateInfoGraph) => {\r\n if (template.type !== 'Group') {\r\n const templateTag = createGraphTag(template);\r\n return createGraphNode(template, templateTag, canClickToOpen, clickToOpenBaseUrl);\r\n } else {\r\n groupPseudoNodes.push(template.id);\r\n return undefined;\r\n }\r\n })\r\n .filter((node) => node !== undefined) as INode[]; // undefineds filtered out, and so result is cleanly INode[]\r\n\r\n // Create a link from each dependency to its node\r\n const links: ILink[] = [];\r\n nodes.forEach((node: INode) => {\r\n const template = collection.find(entry => entry.id === node.itemId);\r\n (template?.dependencies || []).forEach((dependencyId: string) => {\r\n const dependency = nodes.find(entry => entry?.itemId === dependencyId);\r\n if (dependency) {\r\n links.push({\r\n from: dependency.key,\r\n fromSpot: go.Spot.AllSides,\r\n to: node.key,\r\n toSpot: go.Spot.AllSides,\r\n });\r\n }\r\n });\r\n });\r\n\r\n return { nodes, links, groupPseudoNodes };\r\n}\r\n\r\n/**\r\n * Changes the opacity of the node and its links to highlight or dim the node.\r\n * @param node Node to highlight\r\n * @param focus Highlight node and dim all others if true; otherwise, restore all nodes to normal opacity\r\n * @param highlightBorder Border to highlight around the node\r\n * @param dimUnrelatedNodes If true, dim nodes not directly connected to the focused node\r\n */\r\nexport function highlightNode(\r\n focusNode: go.GraphObject,\r\n focus: boolean,\r\n highlightBorder?: go.Adornment,\r\n dimUnrelatedNodes = true\r\n): void {\r\n const myDiagram = focusNode.diagram;\r\n if (!myDiagram) {\r\n return;\r\n }\r\n\r\n const animationSet: IKeyedValue = {};\r\n\r\n if (dimUnrelatedNodes) {\r\n // When showing, highlight the node and dim all others\r\n for (const node of myDiagram.nodes) {\r\n animationSet[node.key as string] = !focus || node === focusNode ? cNormalNodeOpacity : cDimmedNodeOpacity;\r\n }\r\n\r\n // When showing, dim all links\r\n for (const link of myDiagram.links) {\r\n const key = `${link.fromNode?.key}-${link.toNode?.key}`; // despite doc, Link.key doesn't work\r\n animationSet[key] = focus ? cDimmedLinkOpacity : cNormalLinkOpacity;\r\n }\r\n\r\n // Trace links to re-highlight directly-connected nodes and the links between them\r\n // Trace 'from' links node-to-node until no more are found; repeat for 'to' links\r\n if (focus) {\r\n const { connectedNodes, connectedLinks }: IConnectedNodesAndLinks = getConnectedNodesAndLinks(focusNode);\r\n\r\n // Highlight the traced links and nodes\r\n for (const node of connectedNodes) {\r\n animationSet[node.key as string] = cNormalNodeOpacity;\r\n }\r\n for (const link of connectedLinks) {\r\n const key = `${link.fromNode?.key}-${link.toNode?.key}`;\r\n animationSet[key] = cHighlightedLinkOpacity;\r\n }\r\n }\r\n }\r\n\r\n // Add a thick border around the node\r\n if (highlightBorder) {\r\n highlightBorder.adornedObject = focus ? focusNode : null;\r\n }\r\n\r\n if (dimUnrelatedNodes) {\r\n // Apply the animations\r\n const animation = new go.Animation();\r\n animation.duration = 1; // milliseconds\r\n\r\n for (const node of myDiagram.nodes) {\r\n animation.add(node, 'opacity', node.opacity, animationSet[node.key as string]);\r\n }\r\n for (const link of myDiagram.links) {\r\n const key = `${link.fromNode?.key}-${link.toNode?.key}`;\r\n animation.add(link, 'opacity', link.opacity, animationSet[key]);\r\n }\r\n\r\n animation.start();\r\n }\r\n}\r\n\r\n/**\r\n * Changes the opacity of a collection of nodes highlight or dim the node.\r\n * @param nodes Nodes to highlight\r\n * @param focus Highlight node and dim all others if true; otherwise, restore all nodes to normal opacity\r\n * @param highlightBorders Border adornments for all item nodes\r\n * @param dimUnrelatedNodes If true, dim nodes not in the nodes list\r\n */\r\nexport function highlightNodes(\r\n nodeIds: string[],\r\n nodes: go.GraphObject[],\r\n focus: boolean,\r\n highlightBorders: IKeyedAdornment,\r\n dimUnrelatedNodes = true\r\n): void {\r\n if (nodeIds.length === 0) {\r\n return;\r\n }\r\n\r\n const myDiagram = nodes[0].diagram;\r\n if (!myDiagram) {\r\n return;\r\n }\r\n\r\n const animationSet: IKeyedValue = {};\r\n\r\n if (dimUnrelatedNodes) {\r\n // When showing, highlight the node and dim all others\r\n for (const node of myDiagram.nodes) {\r\n const isFocusNode = nodeIds.includes(node.key as string);\r\n animationSet[node.key as string] = !focus || isFocusNode ? cNormalNodeOpacity : cDimmedNodeOpacity;\r\n }\r\n\r\n // When showing, dim all links\r\n for (const link of myDiagram.links) {\r\n const key = `${link.fromNode?.key}-${link.toNode?.key}`; // despite doc, Link.key doesn't work\r\n animationSet[key] = focus ? cDimmedLinkOpacity : cNormalLinkOpacity;\r\n }\r\n }\r\n\r\n // Remove all borders\r\n Object.keys(highlightBorders).forEach((key: string) => {\r\n highlightBorders[key].adornedObject = null;\r\n });\r\n\r\n if (dimUnrelatedNodes) {\r\n // Apply the animations\r\n const animation = new go.Animation();\r\n animation.duration = 1; // milliseconds\r\n\r\n for (const node of myDiagram.nodes) {\r\n animation.add(node, 'opacity', node.opacity, animationSet[node.key as string]);\r\n }\r\n for (const link of myDiagram.links) {\r\n const key = `${link.fromNode?.key}-${link.toNode?.key}`;\r\n animation.add(link, 'opacity', link.opacity, animationSet[key]);\r\n }\r\n\r\n animation.start();\r\n }\r\n}\r\n\r\n// ------------------------------------------------------------------------------------------------------------------ //\r\n\r\n/**\r\n * Create a graph node from an item template, fetching the item information if necessary.\r\n * @param template Item template\r\n * @param templateTag Tag to use for node\r\n * @param canClickToOpen If true, the node will have a URL to open the item in the portal\r\n * @param clickToOpenBaseUrl Base URL to open the item in the portal to be used in `${clickToOpenBaseUrl}?id=${itemId}`\r\n * @returns Promise resolving to the graph node\r\n */\r\nfunction createGraphNode(\r\n template: ITemplateInfoGraph,\r\n templateTag: string,\r\n canClickToOpen = false,\r\n clickToOpenBaseUrl?: string\r\n): INode {\r\n return {\r\n key: templateTag,\r\n title: template.title,\r\n itemId: template.id,\r\n itemType: template.type,\r\n itemTypeForDisplay: getTypeForDisplay(template.type, template.typeKeywords),\r\n itemTypeKeywords: template.typeKeywords,\r\n group: template.type,\r\n url: canClickToOpen ? `${clickToOpenBaseUrl}?id=${template.id}` : undefined\r\n };\r\n}\r\n\r\n/**\r\n * Creates a tag for the graph node that combines an abbreviation of the item type with part of the item ID.\r\n * @param template Item template\r\n * @returns String containing tag\r\n */\r\nfunction createGraphTag(\r\n template: ITemplateInfoGraph\r\n): string {\r\n return template.id;\r\n}\r\n\r\n/**\r\n * Creates a geometry string representing a rounded rectangle.\r\n * @param width Width of rectangle\r\n * @param height Height of rectangle\r\n * @param radius Corner radius\r\n * @param iconPanelWidth Width of icon panel for placing a vertical separator between the icon and the text\r\n * @param isFilled Background color of the rectangle; if omitted, no background color is set\r\n * @returns Geometry path string\r\n * @see https://gojs.net/latest/intro/shapes.html#GeometryPath\r\n */\r\nfunction createRoundedRectangleGeometryPath(\r\n width: number,\r\n height: number,\r\n radius: number,\r\n iconPanelWidth = 0,\r\n isFilled = false\r\n): string {\r\n let path = '';\r\n if (isFilled) {\r\n path += 'F';\r\n }\r\n\r\n // Draw the rectangle\r\n const horizontalStraightLineLen = width - (2 * radius);\r\n const verticalStraightLineLen = height - (2 * radius);\r\n path += ` M${0} ${0}`; // Start at top-left corner\r\n path += ` h${horizontalStraightLineLen}`;\r\n path += ` a${radius} ${radius} 0 0 1 ${radius} ${radius}`;\r\n path += ` v${verticalStraightLineLen}`;\r\n path += ` a${radius} ${radius} 0 0 1 ${-radius} ${radius}`;\r\n path += ` h${-horizontalStraightLineLen}`;\r\n path += ` a${radius} ${radius} 0 0 1 ${-radius} ${-radius}`;\r\n path += ` v${-verticalStraightLineLen}`;\r\n path += ` a${radius} ${radius} 0 0 1 ${radius} ${-radius}`;\r\n\r\n // Add the separator line\r\n if (iconPanelWidth > 0) {\r\n path += ` M${iconPanelWidth - radius} ${0} v${height}`;\r\n }\r\n\r\n return path;\r\n}\r\n\r\n/**\r\n * Dispatches an event reporting a click on the diagram outside of a node.\r\n * @param evt Ignored event information\r\n * @event clickInDiagram Event reporting that a click occurred in the diagram\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nfunction dispatchDiagramClickEvent(): void {\r\n document.dispatchEvent(new CustomEvent('clickInDiagram'));\r\n}\r\n\r\n/**\r\n * Dispatches a document click event.\r\n * @param _evt Ignored event information\r\n * @param obj Graph object that received click\r\n * @event clickOnNode Event reporting that a click occurred on a node\r\n */\r\nfunction dispatchNodeClickEvent(_evt: go.InputEvent, obj: go.GraphObject): void {\r\n const node = obj.part;\r\n if (node instanceof go.Node) {\r\n node.selectionAdorned = false;\r\n document.dispatchEvent(new CustomEvent('clickOnNode', { detail: node }));\r\n }\r\n}\r\n\r\n/**\r\n * Draws a filter view bar.\r\n * @param graphicContainer HTML element to contain filter view bar div\r\n * @param translations Translations for the filter view control\r\n * @returns Filter view switch\r\n */\r\nfunction drawfilteredViewBar(\r\n graphicContainer: HTMLElement,\r\n translations: ISolutionGraphTranslations,\r\n): HTMLCalciteSwitchElement {\r\n // Filter view switch\r\n const filteredViewButton = document.createElement('calcite-switch');\r\n filteredViewButton.id = 'filteredViewButton';\r\n filteredViewButton.label = translations.filteredView;\r\n\r\n const filteredViewButtonLabel = document.createElement('calcite-label');\r\n filteredViewButtonLabel.id = 'filteredViewButtonLabel';\r\n filteredViewButtonLabel.setAttribute('layout', 'inline');\r\n filteredViewButtonLabel.innerHTML = translations.filteredView;\r\n filteredViewButtonLabel.appendChild(filteredViewButton);\r\n\r\n const filteredViewButtonDiv = document.createElement('div');\r\n filteredViewButtonDiv.id = 'filteredViewButtonDiv';\r\n filteredViewButtonDiv.appendChild(filteredViewButtonLabel);\r\n\r\n // Action bar\r\n const actionBar = document.createElement('calcite-action-bar');\r\n actionBar.id = 'filter-bar-controls';\r\n actionBar.layout = 'horizontal';\r\n actionBar.expandDisabled = true;\r\n actionBar.appendChild(filteredViewButtonDiv);\r\n\r\n // Add the action pad to the graphic container\r\n const filterBar = document.createElement('div');\r\n filterBar.id = 'filter-bar';\r\n graphicContainer.appendChild(filterBar);\r\n\r\n filterBar.appendChild(actionBar);\r\n return filteredViewButton;\r\n}\r\n\r\n/**\r\n * Draws a navigation bar.\r\n * @param graphicContainer HTML element to contain navigation bar div\r\n * @param translations Translations for the navigation controls\r\n * @returns Object with the navigation buttons\r\n */\r\nfunction drawNavigationBar(\r\n graphicContainer: HTMLElement,\r\n translations: ISolutionGraphTranslations,\r\n): INavigationButtons {\r\n // Reset diagram button\r\n const resetButton = document.createElement('calcite-action');\r\n resetButton.appearance = 'solid';\r\n resetButton.icon = 'reset';\r\n resetButton.id = 'showHideGrayedOutButton';\r\n const resetButtonTooltip = document.createElement('calcite-tooltip');\r\n resetButtonTooltip.id = 'resetButtonTooltip';\r\n resetButtonTooltip.innerHTML = translations.reset;\r\n resetButtonTooltip.overlayPositioning = 'fixed';\r\n resetButtonTooltip.placement = 'bottom';\r\n resetButtonTooltip.referenceElement = resetButton.id;\r\n\r\n // Center diagram button\r\n const centerButton = document.createElement('calcite-action');\r\n centerButton.appearance = 'solid';\r\n centerButton.icon = 'zoom-to-object';\r\n centerButton.id = 'centerButton';\r\n const centerButtonTooltip = document.createElement('calcite-tooltip');\r\n centerButtonTooltip.id = 'centerButtonTooltip';\r\n centerButtonTooltip.innerHTML = translations.centerDiagram;\r\n centerButtonTooltip.overlayPositioning = 'fixed';\r\n centerButtonTooltip.placement = 'bottom';\r\n centerButtonTooltip.referenceElement = centerButton.id;\r\n\r\n // Zoom in button\r\n const zoomInButton = document.createElement('calcite-action');\r\n zoomInButton.appearance = 'solid';\r\n zoomInButton.icon = 'plus';\r\n zoomInButton.id = 'zoomInButton';\r\n const zoomInButtonTooltip = document.createElement('calcite-tooltip');\r\n zoomInButtonTooltip.id = 'zoomInButtonTooltip';\r\n zoomInButtonTooltip.innerHTML = translations.zoomIn;\r\n zoomInButtonTooltip.overlayPositioning = 'fixed';\r\n zoomInButtonTooltip.placement = 'bottom';\r\n zoomInButtonTooltip.referenceElement = zoomInButton.id;\r\n\r\n // Zoom out button\r\n const zoomOutButton = document.createElement('calcite-action');\r\n zoomOutButton.appearance = 'solid';\r\n zoomOutButton.icon = 'minus';\r\n zoomOutButton.id = 'zoomOutButton';\r\n const zoomOutButtonTooltip = document.createElement('calcite-tooltip');\r\n zoomOutButtonTooltip.id = 'zoomOutButtonTooltip';\r\n zoomOutButtonTooltip.innerHTML = translations.zoomOut;\r\n zoomOutButtonTooltip.overlayPositioning = 'fixed';\r\n zoomOutButtonTooltip.placement = 'bottom';\r\n zoomOutButtonTooltip.referenceElement = zoomOutButton.id;\r\n\r\n // Action bar\r\n const actionBar = document.createElement('calcite-action-bar');\r\n actionBar.id = 'graph-navigation-controls';\r\n actionBar.layout = 'horizontal';\r\n actionBar.expandDisabled = true;\r\n actionBar.appendChild(resetButton);\r\n actionBar.appendChild(resetButtonTooltip);\r\n actionBar.appendChild(centerButton);\r\n actionBar.appendChild(centerButtonTooltip);\r\n actionBar.appendChild(zoomInButton);\r\n actionBar.appendChild(zoomInButtonTooltip);\r\n actionBar.appendChild(zoomOutButton);\r\n actionBar.appendChild(zoomOutButtonTooltip);\r\n\r\n // Add the action pad to the graphic container\r\n const graphNavigationBar = document.createElement('div');\r\n graphNavigationBar.id = 'graph-navigation-bar';\r\n graphicContainer.appendChild(graphNavigationBar);\r\n\r\n graphNavigationBar.appendChild(actionBar);\r\n return { resetButton, centerButton, zoomInButton, zoomOutButton };\r\n}\r\n\r\n/**\r\n * Updates the type value to match how we would like it displayed.\r\n * @param type the current item type\r\n * @param typeKeywords the type keywords for the current item\r\n * @returns the updated type value\r\n */\r\nfunction getTypeForDisplay(\r\n type: string,\r\n typeKeywords: string[]\r\n): string {\r\n let _type = type;\r\n if (type === 'Feature Service') {\r\n const isView = typeKeywords.indexOf('View Service') > -1;\r\n const isTable = typeKeywords.indexOf('Table') > -1\r\n _type = isView && isTable ? 'Table (hosted, view)' : isTable ? 'Table (hosted)' :\r\n isView ? 'Feature Layer (hosted, view)' : 'Feature Layer (hosted)';\r\n }\r\n\r\n if (type === 'Web Mapping Application') {\r\n _type = typeKeywords.indexOf('configurableApp') > -1 ?\r\n 'Instant App' : _type;\r\n }\r\n\r\n _type = type === 'Geoprocessing Service' ? 'Tool' : _type;\r\n\r\n _type = type === 'Feed' ? 'Feed (hosted)' : _type;\r\n\r\n _type = type === 'Real Time Analytic' ? 'Real Time Analytic (hosted)' : _type;\r\n\r\n _type = type === 'Big Data Analytic' ? 'Big Data Analytic (hosted)' : _type;\r\n\r\n _type = type === 'Vector Tile Service' ? 'Tile Layer' : _type;\r\n\r\n return _type;\r\n}\r\n\r\n/**\r\n * Resets the diagram to its initial zoom.\r\n * @param diagram Diagram to reset\r\n * @event reset Event reporting that the diagram was reset\r\n */\r\nfunction reset(\r\n diagram: go.Diagram\r\n): void {\r\n diagram.zoomToFit();\r\n document.dispatchEvent(new CustomEvent('reset'));\r\n}\r\n\r\n/**\r\n * Adds styles for the graphic to the page.\r\n */\r\nfunction setStyles() {\r\n injectGlobal`\r\n #filter-bar {\r\n background-color: #f4f4f4;\r\n position: absolute;\r\n top: 16px;\r\n right: 220px;\r\n z-index: 100;\r\n }\r\n #filteredViewButtonDiv {\r\n padding: 16px 16px 4px 16px;\r\n }\r\n #graph-navigation-bar {\r\n background-color: #f4f4f4;\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n z-index: 100;\r\n }\r\n #graph-navigation-controls {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n }\r\n `\r\n}\r\n","/** @license\r\n *\r\n * Copyright 2018 Esri\r\n *\r\n * All rights reserved under the copyright laws of the United States and applicable international laws, treaties,\r\n * and conventions.\r\n *\r\n * This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of\r\n * that agreement. You may redistribute and use this code without modification, provided you adhere to the terms\r\n * of the MLA and include this copyright notice.\r\n *\r\n * See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english\r\n *\r\n * For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal\r\n * Services Department 380 New York Street Redlands, California, USA 92373 USA\r\n *\r\n * email: contracts@esri.com\r\n */\r\n\r\nimport * as go from 'gojs';\r\nimport * as solutionGraph from './solutionGraph';\r\nimport type { ISolutionGraphTranslations, ITemplateInfoGraph } from './solutionGraph';\r\nimport { SolutionItemAccordion } from '../../solution-item-accordion/solution-item-accordion';\r\n\r\ntype IKeyedGraphObject = Record<string, go.GraphObject>;\r\n\r\nconst cNodeCornerRadius = 8;\r\n// eslint-disable-next-line no-bitwise\r\nconst cNodeCornerRadiusCornerSelectionBitmap = 1 | 2 | 4 | 8; // all corners\r\nconst cNodeHighlightColor = '#1e90ff';\r\nconst cNodeHighlightStrokeWidth = 4;\r\n\r\n// ------------------------------------------------------------------------------------------------------------------ //\r\n\r\n/**\r\n * Manages the display of and interactio between a solution's index and diagram.\r\n */\r\nexport class SolutionDisplay {\r\n protected allNodesAndLinks!: solutionGraph.INodesAndLinks;\r\n protected collection!: ITemplateInfoGraph[];\r\n protected currentSelectedGroupId = '';\r\n protected currentSelectedItemId = '';\r\n protected diagram!: go.Diagram;\r\n protected diagramNeedsRedraw = false;\r\n protected diagramNodeHighlighterIndex!: solutionGraph.IKeyedAdornment;\r\n protected diagramNodeIndex!: IKeyedGraphObject;\r\n protected index!: SolutionItemAccordion;\r\n protected usefilteredView = false;\r\n\r\n /**\r\n * Creates a new instance of the SolutionDisplay class.\r\n * @param indexPanel The Calcite panel element to use as the index panel.\r\n * @param diagramPanel The Calcite panel element to use as the diagram panel.\r\n * @param diagramTranslations Translation strings for the diagram.\r\n * @param diagramKey The license to use for the diagram.\r\n * @example <caption>Expected environment</caption>\r\n * <calcite-shell>\r\n * <calcite-shell-panel id='indexPanel' slot='panel-start' width-scale='m'/>\r\n * <calcite-panel id='diagramPanel' style='display:flex;'/>\r\n * </calcite-shell>\r\n */\r\n public constructor(\r\n protected indexPanel: HTMLCalciteShellPanelElement,\r\n protected diagramPanel: HTMLCalcitePanelElement,\r\n protected diagramTranslations: ISolutionGraphTranslations,\r\n protected diagramKey: string,\r\n ) {\r\n // Tell Calcite and Solutions components where to find assets\r\n if (go.Diagram.licenseKey === '') {\r\n go.Diagram.licenseKey = diagramKey ?? '';\r\n }\r\n }\r\n\r\n /**\r\n * Creates the index and diagram for the given collection of template info.\r\n * @param collection The collection of template info to display.\r\n * @param typeKeywords The collection type keywords for the solution.\r\n * @returns A promise that resolves when the index and diagram have been created.\r\n */\r\n public create(\r\n collection: ITemplateInfoGraph[],\r\n typeKeywords: string[]\r\n ): void {\r\n this.collection = collection;\r\n\r\n // Create the index\r\n this.index = document.createElement('solution-item-accordion') as SolutionItemAccordion;\r\n this.index.linkType = 'action';\r\n this.index.listSelectionMode = 'single';\r\n this.index.typeKeywords = typeKeywords;\r\n this.index.style.overflowY = 'auto';\r\n this.indexPanel.appendChild(this.index);\r\n this.index.templateInfos = collection;\r\n\r\n // Create the model data that will be represented by Nodes and Links in the diagram\r\n this.allNodesAndLinks = solutionGraph.getNodesAndLinks(collection);\r\n\r\n // Create the full diagram\r\n this.diagram = solutionGraph.drawSolutionGraph(\r\n this.diagramPanel, this.allNodesAndLinks, this.diagramTranslations);\r\n\r\n this.diagram.addDiagramListener('LayoutCompleted',()=> {\r\n /* When launch from card the first time, diagram does not seem to draw in time. So call zoom to fit on a delay. */\r\n setTimeout(()=>{this.diagram.zoomToFit()}, 1000);\r\n });\r\n\r\n //active across all domains - do not modify\r\n go.Link.setRoutingParameter(44, 600942);\r\n\r\n // Create an index into the diagram's nodes for highlighting purposes, including a highlighter for each node\r\n this.createNodeHighlighters();\r\n\r\n // Wire the index and the diagram together\r\n document.addEventListener('clickInDiagram', this.handle_clickInDiagram);\r\n document.addEventListener('clickOnNode', this.handle_clickOnNode);\r\n document.addEventListener('filteredViewChanged', this.handle_filteredViewChanged);\r\n document.addEventListener('reset', this.handle_reset);\r\n this.index.addEventListener('solutionItemSelect', this.handle_solutionItemSelect);\r\n }\r\n\r\n /**\r\n * Destroys the index and diagram; removes all event listeners.\r\n */\r\n public dispose() {\r\n document.removeEventListener('clickInDiagram', this.handle_clickInDiagram);\r\n document.removeEventListener('clickOnNode', this.handle_clickOnNode);\r\n document.removeEventListener('filteredViewChanged', this.handle_filteredViewChanged);\r\n document.removeEventListener('reset', this.handle_reset);\r\n this.index.removeEventListener('solutionItemSelect', this.handle_solutionItemSelect);\r\n\r\n this.indexPanel.innerHTML = '';\r\n this.diagramPanel.innerHTML = '';\r\n }\r\n\r\n // ---------------------------------------------------------------------------------------------------------------- //\r\n\r\n /**\r\n * Clears all selections in the index and diagram.\r\n * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index\r\n */\r\n protected clearSelections(\r\n alsoCollapseAllAccordionItems = true\r\n ) {\r\n void this.index.deselectAll();\r\n if (alsoCollapseAllAccordionItems) {\r\n void this.index.collapseAll();\r\n }\r\n\r\n const nodes = this.getNodesFromDiagram(this.diagram);\r\n const nodeIds = nodes.map((node: go.GraphObject) => (node as go.Node).data.key);\r\n solutionGraph.highlightNodes(nodeIds, nodes, false, this.diagramNodeHighlighterIndex);\r\n }\r\n\r\n /**\r\n * Creates indicies into the diagram's nodes and node highlighters.\r\n * Rebuilds this.diagramNodeIndex and this.diagramNodeHighlighterIndex.\r\n */\r\n protected createNodeHighlighters() {\r\n this.diagramNodeIndex = {};\r\n this.diagramNodeHighlighterIndex = {};\r\n\r\n const nodes = this.getNodesFromDiagram(this.diagram);\r\n nodes.forEach((node: go.Node) => {\r\n this.diagramNodeIndex[node.data.key] = node;\r\n\r\n // Create the highlighter symbols for graph nodes\r\n const nodeHighlighter = new go.Adornment('Auto', {\r\n background: 'transparent',\r\n margin: 2\r\n });\r\n nodeHighlighter.add(new go.Shape('RoundedRectangle', {\r\n fill: 'transparent',\r\n parameter1: cNodeCornerRadius,\r\n parameter2: cNodeCornerRadiusCornerSelectionBitmap,\r\n stroke: cNodeHighlightColor,\r\n strokeWidth: cNodeHighlightStrokeWidth\r\n }));\r\n nodeHighlighter.add(new go.Placeholder({\r\n margin: 1\r\n }));\r\n this.diagramNodeHighlighterIndex[node.data.key] = nodeHighlighter;\r\n });\r\n }\r\n\r\n /**\r\n * Retrieves a node from the diagram by its id.\r\n * @param diagram The diagram to search\r\n * @param id Id of node to find\r\n * @returns Node matching the given id, or undefined if not found\r\n */\r\n protected getNodeById(\r\n // diagram: go.Diagram,\r\n id: string\r\n ): go.Node | undefined {\r\n return this.diagramNodeIndex[id] as go.Node;\r\n }\r\n\r\n /**\r\n * Retrieves all nodes from the diagram.\r\n * @param diagram The diagram to search\r\n * @returns Array of nodes in the diagram\r\n */\r\n protected getNodesFromDiagram(\r\n diagram: go.Diagram\r\n ): go.Node[] {\r\n const nodes: go.Node[] = [];\r\n const nodeIterator = diagram.nodes.iterator;\r\n while (nodeIterator.next()) {\r\n nodes.push(nodeIterator.value);\r\n }\r\n return nodes;\r\n }\r\n\r\n /**\r\n * Handles a click in the diagram.\r\n * @param evt Event object\r\n */\r\n protected handle_clickInDiagram = (evt: Event) => {\r\n evt.stopImmediatePropagation();\r\n if (this.currentSelectedGroupId || this.currentSelectedItemId) {\r\n this.currentSelectedGroupId = '';\r\n this.currentSelectedItemId = '';\r\n this.diagramNeedsRedraw = this.usefilteredView;\r\n this.redraw();\r\n }\r\n }\r\n\r\n /**\r\n * Handles a click on a node in the diagram.\r\n * @param evt Event object\r\n */\r\n protected handle_clickOnNode = (evt: Event) => {\r\n evt.stopImmediatePropagation();\r\n const id = (evt as CustomEvent).detail.data.key;\r\n this.redraw(id, id === this.currentSelectedItemId);\r\n }\r\n\r\n /**\r\n * Handles a change in the filter selected view button.\r\n * @param evt Event object\r\n */\r\n protected handle_filteredViewChanged = (evt: Event) => {\r\n this.usefilteredView = (evt as CustomEvent).detail;\r\n this.diagramNeedsRedraw = !!this.currentSelectedGroupId || !!this.currentSelectedItemId;\r\n this.redraw(this.currentSelectedItemId || this.currentSelectedGroupId);\r\n }\r\n\r\n /**\r\n * Handles a reset of the diagram.\r\n * @param evt Event object\r\n */\r\n protected handle_reset = (evt: Event) => {\r\n evt.stopImmediatePropagation();\r\n this.reset();\r\n }\r\n\r\n /**\r\n * Handles a selection of an item in the index.\r\n * @param evt Event object\r\n */\r\n protected handle_solutionItemSelect = (evt: Event) => {\r\n evt.stopImmediatePropagation();\r\n const id = (evt as CustomEvent).detail.itemId;\r\n this.redraw(id, id === this.currentSelectedItemId || id === this.currentSelectedGroupId, false);\r\n }\r\n\r\n /**\r\n * Selects an item to highlight or unhighlight.\r\n * @param id Id of selected item\r\n * @param toggleSelection Whether to toggle the selection state of the item\r\n * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index\r\n */\r\n protected redraw(\r\n id = '',\r\n toggleSelection = false,\r\n alsoCollapseAllAccordionItems = true\r\n ): void {\r\n const areDrawingAGroup = this.allNodesAndLinks.groupPseudoNodes.includes(id);\r\n\r\n if (this.diagramNeedsRedraw) {\r\n // Redraw the full diagram\r\n solutionGraph.drawDiagram(this.diagram, this.allNodesAndLinks);\r\n this.createNodeHighlighters();\r\n this.diagramNeedsRedraw = false;\r\n }\r\n let needsReset = false;\r\n\r\n // Clear all selections in index and diagram\r\n this.clearSelections(alsoCollapseAllAccordionItems);\r\n\r\n if (!id) {\r\n // Nothing is currently selected\r\n return;\r\n }\r\n\r\n // Group or item selected?\r\n if (areDrawingAGroup) {\r\n this.currentSelectedItemId = '';\r\n\r\n // Group nodes don't have corresponding diagram nodes\r\n if (this.currentSelectedGroupId !== id) {\r\n this.currentSelectedGroupId = id;\r\n } else if (toggleSelection) {\r\n // Toggle currently-selected node\r\n this.currentSelectedGroupId = this.currentSelectedGroupId ? '' : id;\r\n needsReset = this.usefilteredView && !this.currentSelectedGroupId;\r\n }\r\n\r\n if (this.currentSelectedGroupId) {\r\n // If we're using the filter selected view, rebuild the diagram so that we can get the group nodes\r\n if (this.usefilteredView) {\r\n solutionGraph.drawDiagram(this.diagram, this.allNodesAndLinks);\r\n this.createNodeHighlighters();\r\n }\r\n\r\n // Get the nodes in the group\r\n const group = this.collection.filter((item: ITemplateInfoGraph) => item.id === id)[0];\r\n const groupNodes = group.dependencies.map((dependency: string) => this.diagramNodeIndex[dependency]);\r\n\r\n if (this.usefilteredView) {\r\n // Update the diagram with just the group items\r\n const nodes: solutionGraph.INode[] = groupNodes.map((node: go.GraphObject) => (node as any).data);\r\n solutionGraph.drawDiagram(this.diagram, { nodes, links: [], groupPseudoNodes: [] });\r\n } else {\r\n // Highlight group items in diagram, but not their connected items or links\r\n solutionGraph.highlightNodes(group.dependencies, groupNodes, true, this.diagramNodeHighlighterIndex);\r\n }\r\n\r\n void this.index.selectItem(this.currentSelectedGroupId);\r\n }\r\n\r\n } else {\r\n this.currentSelectedGroupId = '';\r\n\r\n // Item nodes\r\n if (this.currentSelectedItemId !== id) {\r\n this.currentSelectedItemId = id;\r\n } else if (toggleSelection) {\r\n // Toggle currently-selected node\r\n this.currentSelectedItemId = this.currentSelectedItemId ? '' : id;\r\n needsReset = this.usefilteredView && !this.currentSelectedItemId;\r\n }\r\n\r\n let focusNode = this.getNodeById(id);\r\n if (!focusNode || this.usefilteredView) {\r\n // Item is not in the current diagram because we're in filter selected view with other items\r\n // Return to the complete model and try again\r\n solutionGraph.drawDiagram(this.diagram, this.allNodesAndLinks);\r\n this.createNodeHighlighters();\r\n focusNode = this.getNodeById(id);\r\n if (!focusNode) {\r\n return;\r\n }\r\n }\r\n\r\n if (this.currentSelectedItemId) {\r\n if (this.usefilteredView) {\r\n // If we're using the filter selected view, assemble the nodes and links connected to this node\r\n const connectedNodesAndLinks = solutionGraph.getConnectedNodesAndLinks(focusNode);\r\n connectedNodesAndLinks.connectedNodes.add(focusNode);\r\n\r\n // Update the diagram with just the connected nodes and links\r\n const nodes: solutionGraph.INode[] = Array.from(connectedNodesAndLinks.connectedNodes).map((node: go.Node) => node.data);\r\n const links: solutionGraph.ILink[] = Array.from(connectedNodesAndLinks.connectedLinks).map((link: go.Link) => link.data);\r\n solutionGraph.drawDiagram(this.diagram, { nodes, links, groupPseudoNodes: [] });\r\n this.createNodeHighlighters();\r\n\r\n // Get node instance in new diagram\r\n focusNode = this.getNodeById(id);\r\n if (!focusNode) {\r\n return;\r\n }\r\n }\r\n\r\n // Highlight node in diagram; need to delay to avoid timing problem with full-diagram draw above\r\n if (focusNode) {\r\n setTimeout(() => solutionGraph.highlightNode(focusNode as go.GraphObject, true, this.diagramNodeHighlighterIndex[id]), 1);\r\n }\r\n\r\n void this.index.selectItem(this.currentSelectedItemId);\r\n }\r\n }\r\n\r\n // If we've deselected an item and we're in filter selected view, draw the full diagram\r\n if (needsReset) {\r\n this.reset();\r\n }\r\n }\r\n\r\n /**\r\n * Clears all selections in the index and diagram.\r\n */\r\n public reset(): void {\r\n this.diagramNeedsRedraw = false;\r\n\r\n this.currentSelectedGroupId = '';\r\n this.currentSelectedItemId = '';\r\n\r\n // Return to the complete model\r\n solutionGraph.drawDiagram(this.diagram, this.allNodesAndLinks);\r\n this.createNodeHighlighters();\r\n\r\n // Clear all selections in index and diagram\r\n this.clearSelections();\r\n }\r\n}\r\n","/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n * http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport {\r\n LitElement,\r\n h,\r\n property,\r\n state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport { styles } from './solution-item-diagram.css';\r\nimport { SolutionDisplay } from './utils/SolutionDisplay';\r\nimport type { ISolutionGraphTranslations, ITemplateInfoGraph } from './utils/solutionGraph';\r\n\r\ndeclare global {\r\n interface DeclareElements {\r\n 'solution-item-diagram': SolutionItemDiagram;\r\n }\r\n}\r\n\r\nexport class SolutionItemDiagram extends LitElement {\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Overrides (internal)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n static override styles = styles;\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Properties (public)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** Digram license key to use view the diagram */\r\n @property() diagramKey = '';\r\n\r\n /** Array of solution items to generate the diagram */\r\n @property() templateInfoGraph: ITemplateInfoGraph[] = [];\r\n\r\n /** Array of the solution items type keywords */\r\n @property() typeKeywords: string[] = [];\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // State (internal)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** The panel reference where the diagram will be drawn */\r\n @state() _diagramPanel = createRef<HTMLCalcitePanelElement>();\r\n\r\n /** The shell reference where the content list will be drawn */\r\n @state() _diagramShell = createRef<HTMLCalciteShellPanelElement>();\r\n\r\n /**\r\n * Contains the translations for this component.\r\n * All UI strings should be defined here.\r\n */\r\n @state() _translations = useT9n<typeof T9nStrings>({ name: 'solution-item-diagram', blocking: true });\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Properties (private)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** The object that will hold the soluton diagram */\r\n private solutionDisplay: SolutionDisplay | undefined;\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Watch handlers\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Methods (public)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Events (public)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Functions (lifecycle)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /**\r\n * Called once just after the component is first connected to the DOM.\r\n *\r\n * @returns Promise when complete\r\n */\r\n //async load(): Promise<void> {}\r\n\r\n /** Called once just after the component is fully loaded and the first render() occurs. */\r\n //async loaded(): Promise<void> {}\r\n\r\n /** Called whenever the component’s update finishes and the element's DOM has been updated and rendered. */\r\n override updated(): void {\r\n // Dispose of any existing solution display to prevent memory leaks and event listener issues\r\n if (this.solutionDisplay) {\r\n this.solutionDisplay.dispose();\r\n this.solutionDisplay = undefined;\r\n }\r\n\r\n if (this.templateInfoGraph.length > 0) {\r\n const graphsTranslations: ISolutionGraphTranslations = {\r\n centerDiagram: this._translations.graphTranslations.centerDiagram,\r\n filteredView: this._translations.graphTranslations.filteredView,\r\n reset: this._translations.graphTranslations.reset,\r\n zoomIn: this._translations.graphTranslations.zoomIn,\r\n zoomOut: this._translations.graphTranslations.zoomOut\r\n }\r\n\r\n this.solutionDisplay = new SolutionDisplay(\r\n this._diagramShell.value!,\r\n this._diagramPanel.value!,\r\n graphsTranslations,\r\n this.diagramKey\r\n )\r\n\r\n this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);\r\n }\r\n }\r\n\r\n /** Called when the component is disconnected from the DOM. */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n // Clean up the solution display when component is disconnected\r\n if (this.solutionDisplay) {\r\n this.solutionDisplay.dispose();\r\n this.solutionDisplay = undefined;\r\n }\r\n }\r\n\r\n /** Renders the component. */\r\n override render(): JsxNode {\r\n return (\r\n <calcite-shell>\r\n <calcite-shell-panel\r\n id='diagram-shell-panel'\r\n ref={this._diagramShell}\r\n slot='panel-start'\r\n />\r\n <calcite-panel\r\n class='z-index-1'\r\n id='diagram-panel'\r\n ref={this._diagramPanel}\r\n slot='panel-bottom'\r\n />\r\n </calcite-shell>\r\n );\r\n }\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Functions (private)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n}\r\n"],"names":["cNodeCornerRadius","solutionGraph.getNodesAndLinks","solutionGraph.drawSolutionGraph","solutionGraph.highlightNodes","solutionGraph.drawDiagram","solutionGraph.getConnectedNodesAndLinks","solutionGraph.highlightNode","ref$jsx"],"mappings":"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"}

package/dist/components/solution-item-icon/customElement.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { c as t } from "../../chunks/runtime.js";
-import { css as i, html as s } from "lit";
-import { LitElement as n, nothing as e } from "@arcgis/lumina";
-import { g as o } from "../../chunks/getItemIcon.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.57 */
-const r = i`/** @license
+v1.2.0-next.59 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { LitElement, nothing } from "@arcgis/lumina";
+import { g as getIconUrl } from "../../chunks/getItemIcon.js";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -19,22 +19,39 @@ const r = i`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */.item-type-icon{@apply block h-4 pointer-events-none;margin-top:.15em!important;min-width:16px;fill:currentColor;transform:rotate(360deg)}.item-type-icon-margin{@apply m-inline-end-1.5;}`;
-class p extends n {
+ */
+.item-type-icon {
+  @apply block
+    h-4
+    pointer-events-none;
+  margin-top: 0.15em !important;
+  min-width: 16px;
+  fill: currentColor;
+  transform: rotate(360deg);
+}
+.item-type-icon-margin {
+  @apply m-inline-end-1.5;
+}`;
+class SolutionItemIcon extends LitElement {
   constructor() {
-    super(...arguments), this.isPortal = !1, this.type = "", this.typeKeywords = [];
+    super(...arguments);
+    this.isPortal = false;
+    this.type = "";
+    this.typeKeywords = [];
   }
   static {
-    this.properties = { isPortal: 5, type: 1, typeKeywords: 0 };
+    this.properties = { isPortal: [5, {}, { type: Boolean }], type: 1, typeKeywords: [0, {}, { attribute: false }] };
   }
   static {
-    this.styles = r;
+    this.styles = styles;
   }
   render() {
-    return s`<div title=${this.type ?? e}><img class="item-type-icon item-type-icon-margin" height=16 role=presentation src=${o(this.type, this.typeKeywords) ?? e} width=16></div>`;
+    return html`<div title=${this.type ?? nothing}><img class="item-type-icon item-type-icon-margin" height=16 role=presentation src=${getIconUrl(this.type, this.typeKeywords) ?? nothing} width=16></div>`;
   }
 }
-t("solution-item-icon", p);
+customElement("solution-item-icon", SolutionItemIcon);
 export {
-  p as SolutionItemIcon
+  SolutionItemIcon
 };
+//# sourceMappingURL=customElement.js.map

package/dist/components/solution-item-icon/customElement.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"customElement.js","sources":["../../../src/components/solution-item-icon/solution-item-icon.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n * http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport {\r\n LitElement,\r\n property,\r\n h,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './solution-item-icon.scss';\r\nimport { getIconUrl } from '../../utils/getItemIcon';\r\n\r\ndeclare global {\r\n interface DeclareElements {\r\n 'solution-item-icon': SolutionItemIcon;\r\n }\r\n}\r\n\r\nexport class SolutionItemIcon extends LitElement {\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Overrides (internal)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n static override styles = styles;\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Properties (public)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** Indicate if this is portal */\r\n @property() isPortal = false;\r\n\r\n /** The type for the item */\r\n @property() type = '';\r\n\r\n /** The typeKeywords for the item */\r\n @property() typeKeywords: string[] = [];\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Lifecycle\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** Renders the component. */\r\n override render(): JsxNode {\r\n return (\r\n <div title={this.type}>\r\n <img\r\n class='item-type-icon item-type-icon-margin'\r\n height='16'\r\n role='presentation'\r\n src={getIconUrl(this.type, this.typeKeywords)}\r\n width='16'\r\n />\r\n </div>\r\n );\r\n }\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Properties (private)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Event Listeners\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Events\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Public Methods (async)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Private Methods\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCM,MAAO,yBAAyB,WAAU;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAiBQ,SAAA,WAAW;AAGX,SAAA,OAAO;AAGP,SAAA,eAAyB,CAAA;AAAA;;;;EAfrC,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAwBhB,SAAiB;AACxB,6BACc,KAAK,QAAI,OAAA,sFAKZ,WAAW,KAAK,MAAM,KAAK,YAAY;EAKpD;AAgCD;;"}

package/dist/components/solution-resource-card/customElement.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { c as i } from "../../chunks/runtime.js";
-import { css as s, html as t } from "lit";
-import { u as a } from "../../chunks/useT9n.js";
-import { LitElement as r, createEvent as o, nothing as e } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.57 */
-const n = s`/** @license
+v1.2.0-next.59 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, createEvent, nothing } from "@arcgis/lumina";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -19,31 +19,118 @@ const n = s`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */.padding-1-2{padding:.5rem}.padding-bottom-1{padding-bottom:1rem}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%}.info-icon{--calcite-icon-color: var(--calcite-color-text-inverse);padding-inline-end:.3rem}.card-image-wrap{flex:0 0 auto}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}`;
-class c extends r {
+ */
+.padding-1-2 {
+  padding: .5rem;
+  ;
+}
+.padding-bottom-1 {
+  padding-bottom: 1rem;
+}
+calcite-card:hover img {
+  -webkit-filter: brightness(50%);
+  filter: brightness(50%);
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+calcite-card:hover .hover-text {
+  opacity: 1;
+  color: #ffffff;
+}
+calcite-card:hover {
+  outline: 2px solid var(--calcite-ui-brand);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.hover-text {
+  transition: .5s ease;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+}
+.info-icon {
+  --calcite-icon-color: var(--calcite-color-text-inverse);
+  padding-inline-end: .3rem;
+}
+.card-image-wrap {
+  flex: 0 0 auto;
+}
+.card-image-wrap {
+  width: 100%;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-box-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+}
+.card-image {
+  width: 100%;
+  display: block;
+}
+video,
+img {
+  max-width: 100%;
+  height: auto;
+}
+img {
+  overflow-clip-margin: content-box;
+  overflow: clip;
+}`;
+class SolutionResourceCard extends LitElement {
   constructor() {
-    super(...arguments), this._translations = a({ name: "solution-resource-card", blocking: !0 }), this.date = "", this.heading = "", this.href = "", this.src = "", this.type = "resource", this.resourceCardSelected = o();
+    super(...arguments);
+    this._translations = useT9n({ name: "solution-resource-card", blocking: true });
+    this.date = "";
+    this.heading = "";
+    this.href = "";
+    this.src = "";
+    this.type = "resource";
+    this.resourceCardSelected = createEvent();
   }
   static {
-    this.properties = { _translations: 16, date: 1, heading: 1, href: 1, src: 1, type: 1 };
+    this.properties = { _translations: [16, {}, { state: true }], date: 1, heading: 1, href: 1, src: 1, type: 1 };
   }
   static {
-    this.styles = n;
+    this.styles = styles;
   }
   render() {
     return this.type === "resource" ? this._getArcticleCard() : this._getBlogCard();
   }
   _getArcticleCard() {
-    return t`<calcite-card @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img alt=${this.heading ?? e} class="thumbnail card-image" src=${this.src ?? e}><div class="hover-text">${this._translations.viewResource}</div></div><span class="padding-1-2" slot=heading>${this.heading}</span></calcite-card>`;
+    return html`<calcite-card @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img alt=${this.heading ?? nothing} class="thumbnail card-image" src=${this.src ?? nothing}><div class="hover-text">${this._translations.viewResource}</div></div><span class="padding-1-2" slot=heading>${this.heading}</span></calcite-card>`;
   }
   _getBlogCard() {
-    return t`<calcite-card><div class="card-image-wrap" slot=thumbnail><img alt=${this.heading ?? e} class="thumbnail card-image" src=${this.src ?? e}><div class="hover-text">${this._translations.viewBlog}</div></div><span class="padding-bottom-1" slot=heading>${this.heading}</span><span slot=description>${this.date}</span><div slot=footer-start><calcite-link .href=${this.href} icon-end=launch-2>${this._translations.readThisBlog}</calcite-link></div></calcite-card>`;
+    return html`<calcite-card><div class="card-image-wrap" slot=thumbnail><img alt=${this.heading ?? nothing} class="thumbnail card-image" src=${this.src ?? nothing}><div class="hover-text">${this._translations.viewBlog}</div></div><span class="padding-bottom-1" slot=heading>${this.heading}</span><span slot=description>${this.date}</span><div slot=footer-start><calcite-link .href=${this.href} icon-end=launch-2>${this._translations.readThisBlog}</calcite-link></div></calcite-card>`;
   }
   _cardSelected() {
     this.resourceCardSelected.emit(this.href);
   }
 }
-i("solution-resource-card", c);
+customElement("solution-resource-card", SolutionResourceCard);
 export {
-  c as SolutionResourceCard
+  SolutionResourceCard
 };
+//# sourceMappingURL=customElement.js.map

package/dist/components/solution-resource-card/customElement.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"customElement.js","sources":["../../../src/components/solution-resource-card/solution-resource-card.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n * http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport {\r\n createEvent,\r\n h,\r\n LitElement,\r\n property,\r\n state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './solution-resource-card.css';\r\n\r\ndeclare global {\r\n interface DeclareElements {\r\n 'solution-resource-card': SolutionResourceCard;\r\n }\r\n}\r\n\r\n// TODO this should be removed after initial dev cycle\r\n// https://devtopia.esri.com/WebGIS/solution-deployment-apps/issues/434\r\n\r\nexport class SolutionResourceCard extends LitElement {\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Overrides (internal)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n static override styles = styles;\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Properties (public)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // State (internal)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /**\r\n * Contains the translations for this component.\r\n * All UI strings should be defined here.\r\n */\r\n @state() _translations = useT9n<typeof T9nStrings>({ name: 'solution-resource-card', blocking: true });\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Properties (private)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** The date the resource or blog was published */\r\n @property() date = '';\r\n\r\n /** The heading of the resource or blog */\r\n @property() heading = '';\r\n\r\n /** The href for the resource or blog content */\r\n @property() href = '';\r\n\r\n /** The image url for the resource or blog */\r\n @property() src = '';\r\n\r\n /** The type...resource or blog */\r\n @property() type: 'resource' | 'blog' = 'resource';\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Watch handlers\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Methods (public)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Events (public)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** Emitted on demand when the card is selected. */\r\n resourceCardSelected = createEvent<string>();\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Functions (lifecycle)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** Renders the component. */\r\n override render(): JsxNode {\r\n return this.type === 'resource' ? this._getArcticleCard() : this._getBlogCard();\r\n }\r\n\r\n //--------------------------------------------------------------------------\r\n //\r\n // Functions (private)\r\n //\r\n //--------------------------------------------------------------------------\r\n\r\n /** Renders an resource card */\r\n private _getArcticleCard(): JsxNode {\r\n return (\r\n <calcite-card\r\n onClick={this._cardSelected}\r\n >\r\n <div class='card-image-wrap' slot='thumbnail'>\r\n <img\r\n alt={this.heading}\r\n class='thumbnail card-image'\r\n src={this.src}\r\n />\r\n <div class='hover-text'>\r\n {this._translations.viewResource}\r\n </div>\r\n </div>\r\n <span\r\n class='padding-1-2'\r\n slot='heading'\r\n >\r\n {this.heading}\r\n </span>\r\n </calcite-card>\r\n );\r\n }\r\n\r\n /** Renders a blog card */\r\n private _getBlogCard(): JsxNode {\r\n return (\r\n <calcite-card>\r\n <div class='card-image-wrap' slot='thumbnail'>\r\n <img\r\n alt={this.heading}\r\n class='thumbnail card-image'\r\n src={this.src}\r\n />\r\n <div class='hover-text'>\r\n {this._translations.viewBlog}\r\n </div>\r\n </div>\r\n <span\r\n class='padding-bottom-1'\r\n slot='heading'\r\n >\r\n {this.heading}\r\n </span>\r\n <span\r\n slot='description'\r\n >\r\n {this.date}\r\n </span>\r\n <div\r\n slot='footer-start'\r\n >\r\n <calcite-link\r\n href={this.href}\r\n icon-end='launch-2'\r\n >\r\n {this._translations.readThisBlog}\r\n </calcite-link>\r\n </div>\r\n </calcite-card>\r\n );\r\n }\r\n\r\n /** Handle card selection */\r\n private _cardSelected(): void {\r\n this.resourceCardSelected.emit(this.href);\r\n }\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCM,MAAO,6BAA6B,WAAU;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AA0BK,SAAA,gBAAgB,OAA0B,EAAE,MAAM,0BAA0B,UAAU,MAAM;AASzF,SAAA,OAAO;AAGP,SAAA,UAAU;AAGV,SAAA,OAAO;AAGP,SAAA,MAAM;AAGN,SAAA,OAA4B;AAqBxC,SAAA,uBAAuB,YAAA;AAAA;;;;EA5DvB,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAqEhB,SAAiB;AACxB,WAAO,KAAK,SAAS,aAAa,KAAK,iBAAA,IAAqB,KAAK,aAAA;AAAA,EACnE;AAAA,EASQ,mBAA2B;AACjC,WAAO,4BAEM,KAAK,aAAa,yDAIlB,KAAK,WAAO,OAAA,qCAEZ,KAAK,OAAG,OAAA,4BAGZ,KAAK,cAAc,YAAY,sDAOjC,KAAK,OAAO;AAAA,EAIrB;AAAA,EAGQ,eAAuB;AAC7B,WAAO,0EAIM,KAAK,uDAEL,KAAK,OAAG,OAAA,4BAGZ,KAAK,cAAc,QAAQ,2DAO7B,KAAK,OAAO,iCAKZ,KAAK,IAAI,qDAMF,KAAK,IAAI,sBAGd,KAAK,cAAc,YAAY;AAAA,EAK1C;AAAA,EAGQ,gBAAqB;AAC3B,SAAK,qBAAqB,KAAK,KAAK,IAAI;AAAA,EAC1C;AACD;;"}

package/dist/components/solution-snapshot-gallery/customElement.js CHANGED Viewed

@@ -1,19 +1,19 @@
-import { c as r } from "../../chunks/runtime.js";
-import { u as n } from "../../chunks/useT9n.js";
-import { LitElement as a, nothing as s } from "@arcgis/lumina";
-import { useContextConsumer as c } from "@arcgis/lumina/context";
-import { g as l } from "../../chunks/common.js";
-import { c as d } from "../../chunks/deployAppContexts.js";
-import { css as h, html as i } from "lit";
-import "@esri/solution-common";
-import "@arcgis/core/identity/IdentityManager";
-import "@arcgis/core/identity/OAuthInfo";
-import "@arcgis/core/portal/Portal";
-import { createRef as p, ref as g } from "lit-html/directives/ref.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.57 */
-const m = h`/** @license
+v1.2.0-next.59 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, nothing } from "@arcgis/lumina";
+import { useContextConsumer } from "@arcgis/lumina/context";
+import { g as getItemResourceUrl } from "../../chunks/common.js";
+import { c as configContext } from "../../chunks/deployAppContexts.js";
+import { css, html } from "lit";
+import "@esri/solution-common";
+import "@arcgis/core/identity/IdentityManager.js";
+import "@arcgis/core/identity/OAuthInfo.js";
+import "@arcgis/core/portal/Portal.js";
+import { createRef, ref } from "lit-html/directives/ref.js";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -27,50 +27,140 @@ const m = h`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */.display-flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.footer{width:100%}.footer-override{--calcite-dialog-footer-space: 0px}.footer-card{width:200px;height:100px;cursor:pointer;padding-bottom:2px}.padding-1{padding:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-end-1{padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.padding-top-1{padding-top:1rem}.padding-top-1-2{padding-top:.5rem}.background-black{background-color:var(--calcite-color-foreground-3)}calcite-card:hover img{-webkit-filter:brightness(20%);filter:brightness(20%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer}`;
-class u extends a {
+ */
+.display-flex {
+  display: flex;
+}
+.align-items-center {
+  align-items: center;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.footer {
+  width: 100%;
+}
+.footer-override {
+  --calcite-dialog-footer-space: 0px;
+}
+.footer-card {
+  width: 200px;
+  height: 100px;
+  cursor: pointer;
+  padding-bottom: 2px;
+}
+.padding-1 {
+  padding: 1rem;
+}
+.padding-bottom-1 {
+  padding-bottom: 1rem;
+}
+.padding-end-1 {
+  padding-inline-end: 1rem;
+}
+.padding-start-1 {
+  padding-inline-start: 1rem;
+}
+.padding-top-1 {
+  padding-top: 1rem;
+}
+.padding-top-1-2 {
+  padding-top: .5rem;
+}
+.background-black {
+  background-color: var(--calcite-color-foreground-3);
+}
+calcite-card:hover img {
+  -webkit-filter: brightness(20%);
+  filter: brightness(20%);
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+calcite-card:hover {
+  outline: 2px solid var(--calcite-ui-brand);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+`;
+class SolutionSnapshotGallery extends LitElement {
   constructor() {
-    super(...arguments), this.open = !1, this._screenshots = [], this._translations = n({ name: "solution-snapshot-gallery", blocking: !0 }), this._configContextConsumer = c({
-      context: d,
-      subscribe: !0
-    }), this._displayText = "", this._paginationControl = p(), this._screenshotNames = [];
+    super(...arguments);
+    this.open = false;
+    this._screenshots = [];
+    this._translations = useT9n({ name: "solution-snapshot-gallery", blocking: true });
+    this._configContextConsumer = useContextConsumer({
+      context: configContext,
+      subscribe: true
+    });
+    this._displayText = "";
+    this._paginationControl = createRef();
+    this._screenshotNames = [];
   }
   static {
-    this.properties = { card: 0, screenshot: 0, itemProperties: 0, open: 5, _screenshots: 16, _translations: 16 };
+    this.properties = { card: [0, {}, { attribute: false }], screenshot: [0, {}, { attribute: false }], itemProperties: [0, {}, { attribute: false }], open: [5, {}, { type: Boolean }], _screenshots: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = m;
+    this.styles = styles;
   }
-  willUpdate(e) {
-    e.has("screenshot") && this.screenshot && (this._displayText = this.screenshot.alt), e.has("itemProperties") && this.itemProperties && (this._screenshots = this.itemProperties.preview.filter((t) => t.format === "image"), this._screenshotNames = this._screenshots.map((t) => t.name));
+  willUpdate(changes) {
+    if (changes.has("screenshot") && this.screenshot) {
+      this._displayText = this.screenshot.alt;
+    }
+    if (changes.has("itemProperties") && this.itemProperties) {
+      this._screenshots = this.itemProperties.preview.filter((ss) => ss.format === "image");
+      this._screenshotNames = this._screenshots.map((s) => s.name);
+    }
   }
   render() {
-    return i`<calcite-dialog class="footer-override" .heading=${this.card?.title} modal @calciteDialogClose=${() => this.open = !1} .open=${this.open} outside-close-disabled width=l>${this._getScreenshotView()}${this._getFooter()}</calcite-dialog>`;
+    return html`<calcite-dialog class="footer-override" .heading=${this.card?.title} modal @calciteDialogClose=${() => this.open = false} .open=${this.open} outside-close-disabled width=l>${this._getScreenshotView()}${this._getFooter()}</calcite-dialog>`;
   }
   _getScreenshotView() {
-    return this.screenshot ? i`<div class="display-flex justify-content-center">${this._getImage(this.screenshot)}</div>` : "";
+    return this.screenshot ? html`<div class="display-flex justify-content-center">${this._getImage(this.screenshot)}</div>` : "";
   }
   _getFooter() {
-    const e = this._screenshotNames.indexOf(this.screenshot?.name || ""), o = document.body.classList.contains("calcite-mode-dark") ? "calcite-mode-dark" : "";
-    return i`<div class="footer" slot=footer><div class=${`display-flex align-items-center padding-start-1 padding-top-1-2 background-black ${o}`}><calcite-label layout=inline><calcite-pagination class="padding-end-1" @calcitePaginationChange=${this._changeScreenshot} page-size=1 start-item=${e + 1} total-items=${this._screenshots.length ?? s} ${g(this._paginationControl)}></calcite-pagination>${this._displayText}</calcite-label></div>${this._getCards()}</div>`;
+    const index = this._screenshotNames.indexOf(this.screenshot?.name || "");
+    const isDarkMode = document.body.classList.contains("calcite-mode-dark");
+    const themeCss = isDarkMode ? "calcite-mode-dark" : "";
+    return html`<div class="footer" slot=footer><div class=${`display-flex align-items-center padding-start-1 padding-top-1-2 background-black ${themeCss}`}><calcite-label layout=inline><calcite-pagination class="padding-end-1" @calcitePaginationChange=${this._changeScreenshot} page-size=1 start-item=${index + 1} total-items=${this._screenshots.length ?? nothing} ${ref(this._paginationControl)}></calcite-pagination>${this._displayText}</calcite-label></div>${this._getCards()}</div>`;
   }
   _changeScreenshot() {
     this.screenshot = this._screenshots[this._paginationControl.value.startItem - 1];
   }
   _getCards() {
-    return i`<calcite-card-group class="card-group padding-1" .label=${this._translations.seeSolutionScreenshots} selection-mode=single>${this._screenshots.map((e) => i`<calcite-card class="footer-card" .label=${e.alt} @click=${() => this._showScreenshot(e)} .selected=${e.name === this.screenshot?.name}>${this._getImage(e, "thumbnail")}</calcite-card>`)}</calcite-card-group>`;
+    return html`<calcite-card-group class="card-group padding-1" .label=${this._translations.seeSolutionScreenshots} selection-mode=single>${this._screenshots.map((ss) => {
+      return html`<calcite-card class="footer-card" .label=${ss.alt} @click=${() => this._showScreenshot(ss)} .selected=${ss.name === this.screenshot?.name}>${this._getImage(ss, "thumbnail")}</calcite-card>`;
+    })}</calcite-card-group>`;
   }
-  _getImage(e, t) {
-    return i`<img alt=${e.alt ?? s} slot=${t ?? s} src=${this._getSource(this._configContextConsumer.value.authentication, this.card?.id || "", e.name) ?? s}>`;
+  _getImage(screenshot, slot) {
+    return html`<img alt=${screenshot.alt ?? nothing} slot=${slot ?? nothing} src=${this._getSource(this._configContextConsumer.value.authentication, this.card?.id || "", screenshot.name) ?? nothing}>`;
   }
-  _showScreenshot(e) {
-    this.screenshot = e;
+  _showScreenshot(itemPreview) {
+    this.screenshot = itemPreview;
   }
-  _getSource(e, t, o) {
-    return e ? l(t || "", o, e) : "";
+  _getSource(auth, id, name) {
+    return auth ? getItemResourceUrl(id || "", name, auth) : "";
   }
 }
-r("solution-snapshot-gallery", u);
+customElement("solution-snapshot-gallery", SolutionSnapshotGallery);
 export {
-  u as SolutionSnapshotGallery
+  SolutionSnapshotGallery
 };
+//# sourceMappingURL=customElement.js.map