@esri/solutions-components 1.2.0-next.92 → 1.2.0-next.93

package/dist/components/solution-item-diagram/customElement.js

@@ -1,16 +1,16 @@
+import { c as b } from "../../chunks/runtime.js";
+import { css as E, html as B } from "lit";
+import { u as D } from "../../chunks/useT9n.js";
+import { LitElement as C } from "@arcgis/lumina";
+import { createRef as y, ref as w } from "lit-html/directives/ref.js";
+import * as d from "gojs";
+import { g as z } from "../../chunks/getItemIcon.js";
+import { injectGlobal as A } from "@emotion/css";
+import "../solution-item-accordion/customElement.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.91 */
-import { c as customElement } from "../../chunks/runtime.js";
-import { css, html } from "lit";
-import { u as useT9n } from "../../chunks/useT9n.js";
-import { LitElement } from "@arcgis/lumina";
-import { createRef, ref } from "lit-html/directives/ref.js";
-import * as go from "gojs";
-import { g as getIconUrl } from "../../chunks/getItemIcon.js";
-import { injectGlobal } from "@emotion/css";
-import "../solution-item-accordion/customElement.js";
-const styles = css`/** @license
+v1.2.0-next.92 */
+const $ = E`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,47 +24,7 @@ const styles = css`/** @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.
- */
-
-#filter-bar {
-  background-color: #f4f4f4;
-  position: absolute;
-  top: 16px;
-  right: 220px;
-  z-index: 100;
-}
-
-#filteredViewButtonDiv {
-  padding: 16px 16px 4px 16px;
-}
-
-#graph-navigation-bar {
-  background-color: #f4f4f4;
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 100;
-}
-
-#graph-navigation-controls {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.z-index-1 {
-  z-index: 1;
-}
-
-#diagram-panel {
-  --calcite-panel-space: 0px;
-}
-
-#diagram-shell-panel {
-  --calcite-color-background: var(--calcite-color-foreground-1);
-  padding: 16px;
-}
-`;
+ */#filter-bar{background-color:#f4f4f4;position:absolute;top:16px;right:220px;z-index:100}#filteredViewButtonDiv{padding:16px 16px 4px}#graph-navigation-bar{background-color:#f4f4f4;position:absolute;top:16px;right:16px;z-index:100}#graph-navigation-controls{position:absolute;top:0;right:0}.z-index-1{z-index:1}#diagram-panel{--calcite-panel-space: 0px}#diagram-shell-panel{--calcite-color-background: var(--calcite-color-foreground-1);padding:16px}`;
 /** @license
  *
  * Copyright 2018 Esri
@@ -83,481 +43,348 @@ const styles = css`/** @license
  *
  * email: contracts@esri.com
  */
-const cColumnSpacing = 15;
-const cLayerSpacing = 15;
-const cDiagramPadding = 10;
-const cNodeSize = new go.Size(220, 48);
-const cNodeBorderStrokeWidth = 1;
-const cNodeCornerRadius$1 = 8;
-const cNodeIconPanelSize = new go.Size(48, 48);
-const cNodeIconSize = new go.Size(16, 16);
-const cNodeTextLineSize = new go.Size(153, 17);
-const cNodeTextFormat = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif';
-const cNodeTextFormatBold = '700 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif';
-const cDiagramBackgroundColor = "#f4f4f4";
-const cNodeBorderColor = "#cacaca";
-const cNodeBackgroundColor = "#ffffff";
-const cNodeTextColor = "#4a4a4a";
-const cLinkColor = "#6a6a6a";
-const cTooltipBackgroundColor = "#ffffff";
-const cNormalNodeOpacity = 1;
-const cDimmedNodeOpacity = 0.3;
-const cNormalLinkOpacity = 1;
-const cDimmedLinkOpacity = 0.2;
-const cHighlightedLinkOpacity = 1;
-function defineDiagram(graphicContainer) {
-  const diagramDiv = document.createElement("div");
-  diagramDiv.style.width = "100%";
-  diagramDiv.style.height = "100%";
-  graphicContainer.appendChild(diagramDiv);
-  const diagram = new go.Diagram(
-    diagramDiv,
+const P = 15, O = 15, H = 10, p = new d.Size(220, 48), V = 1, _ = 8, k = new d.Size(48, 48), G = new d.Size(16, 16), I = new d.Size(153, 17), R = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', F = '700 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', M = "#f4f4f4", K = "#cacaca", W = "#ffffff", S = "#4a4a4a", N = "#6a6a6a", j = "#ffffff", u = 1, x = 0.3, f = 1, L = 0.2, Y = 1;
+function Z(a) {
+  const t = document.createElement("div");
+  t.style.width = "100%", t.style.height = "100%", a.appendChild(t);
+  const e = new d.Diagram(
+    t,
     // create a Diagram for the HTML Div element
     {
-      click: dispatchDiagramClickEvent,
+      click: ie,
       // handle diagram clicks
-      contentAlignment: go.Spot.Center,
+      contentAlignment: d.Spot.Center,
       // align document to the center of the viewport
       dragSelectingTool: null,
       // disable drag selection
       hoverDelay: 50,
       // milliseconds before mouse-hover displays information
-      initialAutoScale: go.AutoScale.Uniform,
+      initialAutoScale: d.AutoScale.Uniform,
       // automatic zoom-to-fit
-      layout: new go.LayeredDigraphLayout({
-        columnSpacing: cColumnSpacing,
-        layerSpacing: cLayerSpacing
+      layout: new d.LayeredDigraphLayout({
+        columnSpacing: P,
+        layerSpacing: O
       }),
-      padding: cDiagramPadding,
-      scrollMode: go.ScrollMode.Infinite,
+      padding: H,
+      scrollMode: d.ScrollMode.Infinite,
       // allow infinite scrolling--beyond document bounds
       "toolManager.hoverDelay": 50,
       // 50 milliseconds before tooltip appears
-      "toolManager.mouseWheelBehavior": go.WheelMode.Zoom
+      "toolManager.mouseWheelBehavior": d.WheelMode.Zoom
       // mouse wheel zooms instead of scrolls vertically
     }
   );
-  diagram.nodeTemplate = new go.Node("Auto", {
-    click: dispatchNodeClickEvent,
-    movable: false,
-    opacity: cNormalNodeOpacity,
-    toolTip: new go.Adornment("Auto", {
-      isShadowed: true,
-      margin: new go.Margin(12, 16, 6, 16),
+  e.nodeTemplate = new d.Node("Auto", {
+    click: ne,
+    movable: !1,
+    opacity: u,
+    toolTip: new d.Adornment("Auto", {
+      isShadowed: !0,
+      margin: new d.Margin(12, 16, 6, 16),
       // top, right, bottom, left
       padding: 0,
       shadowBlur: 16,
       shadowColor: "rgba(0, 0, 0, 0.16)",
-      shadowOffset: new go.Point(0, 0)
-    }).add(new go.Panel("Vertical", { background: cTooltipBackgroundColor, margin: 0 }).add(new go.TextBlock({ margin: 14 }).bind("text", "title")))
+      shadowOffset: new d.Point(0, 0)
+    }).add(new d.Panel("Vertical", { background: j, margin: 0 }).add(new d.TextBlock({ margin: 14 }).bind("text", "title")))
   }).bind("text", "title").add(
-    new go.Shape({
-      desiredSize: cNodeSize,
-      fill: cNodeBackgroundColor,
-      geometryString: createRoundedRectangleGeometryPath(
-        cNodeSize.width,
-        cNodeSize.height,
-        cNodeCornerRadius$1,
-        cNodeIconPanelSize.width,
-        true
+    new d.Shape({
+      desiredSize: p,
+      fill: W,
+      geometryString: te(
+        p.width,
+        p.height,
+        _,
+        k.width,
+        !0
       ),
-      height: cNodeSize.height,
+      height: p.height,
       portId: "",
-      stroke: cNodeBorderColor,
-      strokeWidth: cNodeBorderStrokeWidth,
-      width: cNodeSize.width
+      stroke: K,
+      strokeWidth: V,
+      width: p.width
     })
   ).add(
     // Node content
-    new go.Panel("Horizontal", {
-      alignment: go.Spot.Left,
-      stretch: go.Stretch.Horizontal
+    new d.Panel("Horizontal", {
+      alignment: d.Spot.Left,
+      stretch: d.Stretch.Horizontal
     }).add(
       // Icon panel
-      new go.Panel("Horizontal", {
-        alignment: go.Spot.Left,
-        desiredSize: cNodeIconPanelSize,
+      new d.Panel("Horizontal", {
+        alignment: d.Spot.Left,
+        desiredSize: k,
         margin: 1
       }).add(
-        new go.Panel("Horizontal", {
-          alignment: go.Spot.Center,
+        new d.Panel("Horizontal", {
+          alignment: d.Spot.Center,
           margin: 16
         }).add(
-          new go.Picture({
-            desiredSize: cNodeIconSize
-          }).bind("source", "", (node) => getIconUrl(node.itemType, node.itemTypeKeywords))
+          new d.Picture({
+            desiredSize: G
+          }).bind("source", "", (n) => z(n.itemType, n.itemTypeKeywords))
         )
       ),
       // Label
-      new go.Panel("Horizontal", {
-        alignment: go.Spot.Right,
-        margin: new go.Margin(4, 8, 0, 8)
+      new d.Panel("Horizontal", {
+        alignment: d.Spot.Right,
+        margin: new d.Margin(4, 8, 0, 8)
         // top, right, bottom, left
       }).add(
-        new go.Panel("Vertical", {}).add(
+        new d.Panel("Vertical", {}).add(
           // First line
-          new go.TextBlock({
-            alignment: go.Spot.Left,
-            desiredSize: cNodeTextLineSize,
-            font: cNodeTextFormatBold,
-            overflow: go.TextOverflow.Ellipsis,
-            stroke: cNodeTextColor,
-            wrap: go.Wrap.None
+          new d.TextBlock({
+            alignment: d.Spot.Left,
+            desiredSize: I,
+            font: F,
+            overflow: d.TextOverflow.Ellipsis,
+            stroke: S,
+            wrap: d.Wrap.None
           }).bind("text", "title"),
           // Second line
-          new go.TextBlock({
-            alignment: go.Spot.Left,
-            desiredSize: cNodeTextLineSize,
-            font: cNodeTextFormat,
-            overflow: go.TextOverflow.Ellipsis,
-            stroke: cNodeTextColor,
-            wrap: go.Wrap.None
+          new d.TextBlock({
+            alignment: d.Spot.Left,
+            desiredSize: I,
+            font: R,
+            overflow: d.TextOverflow.Ellipsis,
+            stroke: S,
+            wrap: d.Wrap.None
           }).bind("text", "itemTypeForDisplay")
         )
       )
     )
-  );
-  diagram.commandHandler.zoomFactor = 1.05;
-  diagram.setDivBackground(cDiagramBackgroundColor);
-  const selectingTool = diagram.toolManager.clickSelectingTool;
-  selectingTool.standardMouseSelect = function() {
+  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(M);
+  const r = e.toolManager.clickSelectingTool;
+  r.standardMouseSelect = function() {
   };
-  const draggingTool = diagram.toolManager.draggingTool;
-  draggingTool.isEnabled = false;
-  diagram.linkTemplate = new go.Link({
+  const s = e.toolManager.draggingTool;
+  return s.isEnabled = !1, e.linkTemplate = new d.Link({
     corner: 5,
-    movable: false,
-    routing: go.Routing.Orthogonal,
-    selectable: false
+    movable: !1,
+    routing: d.Routing.Orthogonal,
+    selectable: !1
   }).add(
-    new go.Shape({
+    new d.Shape({
       // the link path shape
-      opacity: cNormalLinkOpacity,
-      stroke: cLinkColor
+      opacity: f,
+      stroke: N
     }),
-    new go.Shape({
+    new d.Shape({
       // the 'to' arrowhead
-      fill: cLinkColor,
-      opacity: cNormalLinkOpacity,
+      fill: N,
+      opacity: f,
       stroke: null,
       toArrow: "Standard"
     })
-  );
-  return diagram;
+  ), e;
 }
-function drawDiagram(diagram, nodesAndLinks) {
-  diagram.model = new go.GraphLinksModel(nodesAndLinks.nodes, nodesAndLinks.links, {
+function m(a, t) {
+  a.model = new d.GraphLinksModel(t.nodes, t.links, {
     linkFromPortIdProperty: "fromPort",
     linkToPortIdProperty: "toPort"
   });
 }
-function drawAndConnectControlBars(graphicContainer, diagram, translations, includeFilteredViewButton = true) {
-  if (includeFilteredViewButton) {
-    const filterViewButton = drawfilteredViewBar(graphicContainer, translations);
-    filterViewButton.addEventListener(
+function U(a, t, e, r = !0) {
+  if (r) {
+    const c = oe(a, e);
+    c.addEventListener(
       "calciteSwitchChange",
-      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: filterViewButton.checked }))
+      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: c.checked }))
     );
   }
-  const { resetButton, centerButton, zoomInButton, zoomOutButton } = drawNavigationBar(graphicContainer, translations);
-  resetButton.addEventListener("click", () => reset(diagram));
-  centerButton.addEventListener("click", () => diagram.zoomToFit());
-  zoomInButton.addEventListener("click", () => diagram.commandHandler.increaseZoom());
-  zoomOutButton.addEventListener("click", () => diagram.commandHandler.decreaseZoom());
+  const { resetButton: s, centerButton: n, zoomInButton: i, zoomOutButton: o } = ae(a, e);
+  s.addEventListener("click", () => de(t)), n.addEventListener("click", () => t.zoomToFit()), i.addEventListener("click", () => t.commandHandler.increaseZoom()), o.addEventListener("click", () => t.commandHandler.decreaseZoom());
 }
-function drawSolutionGraph(graphicContainer, nodesAndLinks, translations) {
-  setStyles();
-  const diagram = defineDiagram(graphicContainer);
-  drawDiagram(diagram, nodesAndLinks);
-  drawAndConnectControlBars(graphicContainer, diagram, translations);
-  return diagram;
+function q(a, t, e) {
+  se();
+  const r = Z(a);
+  return m(r, t), U(a, r, e), r;
 }
-function getConnectedNodesAndLinks(diagramNode) {
-  const connectedNodes = /* @__PURE__ */ new Set();
-  const connectedLinks = /* @__PURE__ */ new Set();
-  function traceFromLinks(node) {
-    node.findLinksInto().each(
-      (link) => {
-        connectedLinks.add(link);
-        const fromNode = link.fromNode;
-        if (fromNode && !connectedNodes.has(fromNode)) {
-          connectedNodes.add(fromNode);
-          traceFromLinks(fromNode);
-        }
+function T(a) {
+  const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
+  function r(n) {
+    n.findLinksInto().each(
+      (i) => {
+        e.add(i);
+        const o = i.fromNode;
+        o && !t.has(o) && (t.add(o), r(o));
       }
     );
   }
-  traceFromLinks(diagramNode);
-  function traceToLinks(node) {
-    node.findLinksOutOf().each(
-      (link) => {
-        connectedLinks.add(link);
-        const toNode = link.toNode;
-        if (toNode && !connectedNodes.has(toNode)) {
-          connectedNodes.add(toNode);
-          traceToLinks(toNode);
-        }
+  r(a);
+  function s(n) {
+    n.findLinksOutOf().each(
+      (i) => {
+        e.add(i);
+        const o = i.toNode;
+        o && !t.has(o) && (t.add(o), s(o));
       }
     );
   }
-  traceToLinks(diagramNode);
-  return { connectedNodes, connectedLinks };
+  return s(a), { connectedNodes: t, connectedLinks: e };
 }
-function getNodesAndLinks(collection, canClickToOpen = false, clickToOpenBaseUrl) {
-  const groupPseudoNodes = [];
-  const nodes = collection.map((template) => {
-    if (template.type !== "Group") {
-      const templateTag = createGraphTag(template);
-      return createGraphNode(template, templateTag, canClickToOpen, clickToOpenBaseUrl);
+function J(a, t = !1, e) {
+  const r = [], s = a.map((i) => {
+    if (i.type !== "Group") {
+      const o = ee(i);
+      return X(i, o, t, e);
     } else {
-      groupPseudoNodes.push(template.id);
-      return void 0;
+      r.push(i.id);
+      return;
     }
-  }).filter((node) => node !== void 0);
-  const links = [];
-  nodes.forEach((node) => {
-    const template = collection.find((entry) => entry.id === node.itemId);
-    (template?.dependencies || []).forEach((dependencyId) => {
-      const dependency = nodes.find((entry) => entry?.itemId === dependencyId);
-      if (dependency) {
-        links.push({
-          from: dependency.key,
-          fromSpot: go.Spot.AllSides,
-          to: node.key,
-          toSpot: go.Spot.AllSides
-        });
-      }
+  }).filter((i) => i !== void 0), n = [];
+  return s.forEach((i) => {
+    (a.find((c) => c.id === i.itemId)?.dependencies || []).forEach((c) => {
+      const h = s.find((l) => l?.itemId === c);
+      h && n.push({
+        from: h.key,
+        fromSpot: d.Spot.AllSides,
+        to: i.key,
+        toSpot: d.Spot.AllSides
+      });
     });
-  });
-  return { nodes, links, groupPseudoNodes };
+  }), { nodes: s, links: n, groupPseudoNodes: r };
 }
-function highlightNode(focusNode, focus, highlightBorder, dimUnrelatedNodes = true) {
-  const myDiagram = focusNode.diagram;
-  if (!myDiagram) {
+function Q(a, t, e, r = !0) {
+  const s = a.diagram;
+  if (!s)
     return;
-  }
-  const animationSet = {};
-  if (dimUnrelatedNodes) {
-    for (const node of myDiagram.nodes) {
-      animationSet[node.key] = node === focusNode ? cNormalNodeOpacity : cDimmedNodeOpacity;
-    }
-    for (const link of myDiagram.links) {
-      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
-      animationSet[key] = cDimmedLinkOpacity;
+  const n = {};
+  if (r) {
+    for (const i of s.nodes)
+      n[i.key] = i === a ? u : x;
+    for (const i of s.links) {
+      const o = `${i.fromNode?.key}-${i.toNode?.key}`;
+      n[o] = L;
     }
     {
-      const { connectedNodes, connectedLinks } = getConnectedNodesAndLinks(focusNode);
-      for (const node of connectedNodes) {
-        animationSet[node.key] = cNormalNodeOpacity;
-      }
-      for (const link of connectedLinks) {
-        const key = `${link.fromNode?.key}-${link.toNode?.key}`;
-        animationSet[key] = cHighlightedLinkOpacity;
+      const { connectedNodes: i, connectedLinks: o } = T(a);
+      for (const c of i)
+        n[c.key] = u;
+      for (const c of o) {
+        const h = `${c.fromNode?.key}-${c.toNode?.key}`;
+        n[h] = Y;
       }
     }
   }
-  if (highlightBorder) {
-    highlightBorder.adornedObject = focusNode;
-  }
-  if (dimUnrelatedNodes) {
-    const animation = new go.Animation();
-    animation.duration = 1;
-    for (const node of myDiagram.nodes) {
-      animation.add(node, "opacity", node.opacity, animationSet[node.key]);
-    }
-    for (const link of myDiagram.links) {
-      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
-      animation.add(link, "opacity", link.opacity, animationSet[key]);
+  if (e && (e.adornedObject = a), r) {
+    const i = new d.Animation();
+    i.duration = 1;
+    for (const o of s.nodes)
+      i.add(o, "opacity", o.opacity, n[o.key]);
+    for (const o of s.links) {
+      const c = `${o.fromNode?.key}-${o.toNode?.key}`;
+      i.add(o, "opacity", o.opacity, n[c]);
     }
-    animation.start();
+    i.start();
   }
 }
-function highlightNodes(nodeIds, nodes, focus, highlightBorders, dimUnrelatedNodes = true) {
-  if (nodeIds.length === 0) {
+function v(a, t, e, r, s = !0) {
+  if (a.length === 0)
     return;
-  }
-  const myDiagram = nodes[0].diagram;
-  if (!myDiagram) {
+  const n = t[0].diagram;
+  if (!n)
     return;
-  }
-  const animationSet = {};
-  if (dimUnrelatedNodes) {
-    for (const node of myDiagram.nodes) {
-      const isFocusNode = nodeIds.includes(node.key);
-      animationSet[node.key] = !focus || isFocusNode ? cNormalNodeOpacity : cDimmedNodeOpacity;
+  const i = {};
+  if (s) {
+    for (const o of n.nodes) {
+      const c = a.includes(o.key);
+      i[o.key] = !e || c ? u : x;
     }
-    for (const link of myDiagram.links) {
-      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
-      animationSet[key] = focus ? cDimmedLinkOpacity : cNormalLinkOpacity;
+    for (const o of n.links) {
+      const c = `${o.fromNode?.key}-${o.toNode?.key}`;
+      i[c] = e ? L : f;
     }
   }
-  Object.keys(highlightBorders).forEach((key) => {
-    highlightBorders[key].adornedObject = null;
-  });
-  if (dimUnrelatedNodes) {
-    const animation = new go.Animation();
-    animation.duration = 1;
-    for (const node of myDiagram.nodes) {
-      animation.add(node, "opacity", node.opacity, animationSet[node.key]);
+  if (Object.keys(r).forEach((o) => {
+    r[o].adornedObject = null;
+  }), s) {
+    const o = new d.Animation();
+    o.duration = 1;
+    for (const c of n.nodes)
+      o.add(c, "opacity", c.opacity, i[c.key]);
+    for (const c of n.links) {
+      const h = `${c.fromNode?.key}-${c.toNode?.key}`;
+      o.add(c, "opacity", c.opacity, i[h]);
     }
-    for (const link of myDiagram.links) {
-      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
-      animation.add(link, "opacity", link.opacity, animationSet[key]);
-    }
-    animation.start();
+    o.start();
   }
 }
-function createGraphNode(template, templateTag, canClickToOpen = false, clickToOpenBaseUrl) {
+function X(a, t, e = !1, r) {
   return {
-    key: templateTag,
-    title: template.title,
-    itemId: template.id,
-    itemType: template.type,
-    itemTypeForDisplay: getTypeForDisplay(template.type, template.typeKeywords),
-    itemTypeKeywords: template.typeKeywords,
-    group: template.type,
-    url: canClickToOpen ? `${clickToOpenBaseUrl}?id=${template.id}` : void 0
+    key: t,
+    title: a.title,
+    itemId: a.id,
+    itemType: a.type,
+    itemTypeForDisplay: re(a.type, a.typeKeywords),
+    itemTypeKeywords: a.typeKeywords,
+    group: a.type,
+    url: e ? `${r}?id=${a.id}` : void 0
   };
 }
-function createGraphTag(template) {
-  return template.id;
+function ee(a) {
+  return a.id;
 }
-function createRoundedRectangleGeometryPath(width, height, radius, iconPanelWidth = 0, isFilled = false) {
-  let path = "";
-  if (isFilled) {
-    path += "F";
-  }
-  const horizontalStraightLineLen = width - 2 * radius;
-  const verticalStraightLineLen = height - 2 * radius;
-  path += ` M${0} ${0}`;
-  path += ` h${horizontalStraightLineLen}`;
-  path += ` a${radius} ${radius} 0 0 1 ${radius} ${radius}`;
-  path += ` v${verticalStraightLineLen}`;
-  path += ` a${radius} ${radius} 0 0 1 ${-radius} ${radius}`;
-  path += ` h${-horizontalStraightLineLen}`;
-  path += ` a${radius} ${radius} 0 0 1 ${-radius} ${-radius}`;
-  path += ` v${-verticalStraightLineLen}`;
-  path += ` a${radius} ${radius} 0 0 1 ${radius} ${-radius}`;
-  if (iconPanelWidth > 0) {
-    path += ` M${iconPanelWidth - radius} ${0} v${height}`;
-  }
-  return path;
+function te(a, t, e, r = 0, s = !1) {
+  let n = "";
+  s && (n += "F");
+  const i = a - 2 * e, o = t - 2 * e;
+  return n += " M0 0", n += ` h${i}`, n += ` a${e} ${e} 0 0 1 ${e} ${e}`, n += ` v${o}`, n += ` a${e} ${e} 0 0 1 ${-e} ${e}`, n += ` h${-i}`, n += ` a${e} ${e} 0 0 1 ${-e} ${-e}`, n += ` v${-o}`, n += ` a${e} ${e} 0 0 1 ${e} ${-e}`, r > 0 && (n += ` M${r - e} 0 v${t}`), n;
 }
-function dispatchDiagramClickEvent() {
+function ie() {
   document.dispatchEvent(new CustomEvent("clickInDiagram"));
 }
-function dispatchNodeClickEvent(_evt, obj) {
-  const node = obj.part;
-  if (node instanceof go.Node) {
-    node.selectionAdorned = false;
-    document.dispatchEvent(new CustomEvent("clickOnNode", { detail: node }));
-  }
+function ne(a, t) {
+  const e = t.part;
+  e instanceof d.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: e })));
 }
-function drawfilteredViewBar(graphicContainer, translations) {
-  const filteredViewButton = document.createElement("calcite-switch");
-  filteredViewButton.id = "filteredViewButton";
-  filteredViewButton.label = translations.filteredView;
-  const filteredViewButtonLabel = document.createElement("calcite-label");
-  filteredViewButtonLabel.id = "filteredViewButtonLabel";
-  filteredViewButtonLabel.setAttribute("layout", "inline");
-  filteredViewButtonLabel.innerHTML = translations.filteredView;
-  filteredViewButtonLabel.appendChild(filteredViewButton);
-  const filteredViewButtonDiv = document.createElement("div");
-  filteredViewButtonDiv.id = "filteredViewButtonDiv";
-  filteredViewButtonDiv.appendChild(filteredViewButtonLabel);
-  const actionBar = document.createElement("calcite-action-bar");
-  actionBar.id = "filter-bar-controls";
-  actionBar.layout = "horizontal";
-  actionBar.expandDisabled = true;
-  actionBar.appendChild(filteredViewButtonDiv);
-  const filterBar = document.createElement("div");
-  filterBar.id = "filter-bar";
-  graphicContainer.appendChild(filterBar);
-  filterBar.appendChild(actionBar);
-  return filteredViewButton;
+function oe(a, t) {
+  const e = document.createElement("calcite-switch");
+  e.id = "filteredViewButton", e.label = t.filteredView;
+  const r = document.createElement("calcite-label");
+  r.id = "filteredViewButtonLabel", r.setAttribute("layout", "inline"), r.innerHTML = t.filteredView, r.appendChild(e);
+  const s = document.createElement("div");
+  s.id = "filteredViewButtonDiv", s.appendChild(r);
+  const n = document.createElement("calcite-action-bar");
+  n.id = "filter-bar-controls", n.layout = "horizontal", n.expandDisabled = !0, n.appendChild(s);
+  const i = document.createElement("div");
+  return i.id = "filter-bar", a.appendChild(i), i.appendChild(n), e;
 }
-function drawNavigationBar(graphicContainer, translations) {
-  const resetButton = document.createElement("calcite-action");
-  resetButton.appearance = "solid";
-  resetButton.icon = "reset";
-  resetButton.id = "showHideGrayedOutButton";
-  const resetButtonTooltip = document.createElement("calcite-tooltip");
-  resetButtonTooltip.id = "resetButtonTooltip";
-  resetButtonTooltip.innerHTML = translations.reset;
-  resetButtonTooltip.overlayPositioning = "fixed";
-  resetButtonTooltip.placement = "bottom";
-  resetButtonTooltip.referenceElement = resetButton.id;
-  const centerButton = document.createElement("calcite-action");
-  centerButton.appearance = "solid";
-  centerButton.icon = "zoom-to-object";
-  centerButton.id = "centerButton";
-  const centerButtonTooltip = document.createElement("calcite-tooltip");
-  centerButtonTooltip.id = "centerButtonTooltip";
-  centerButtonTooltip.innerHTML = translations.centerDiagram;
-  centerButtonTooltip.overlayPositioning = "fixed";
-  centerButtonTooltip.placement = "bottom";
-  centerButtonTooltip.referenceElement = centerButton.id;
-  const zoomInButton = document.createElement("calcite-action");
-  zoomInButton.appearance = "solid";
-  zoomInButton.icon = "plus";
-  zoomInButton.id = "zoomInButton";
-  const zoomInButtonTooltip = document.createElement("calcite-tooltip");
-  zoomInButtonTooltip.id = "zoomInButtonTooltip";
-  zoomInButtonTooltip.innerHTML = translations.zoomIn;
-  zoomInButtonTooltip.overlayPositioning = "fixed";
-  zoomInButtonTooltip.placement = "bottom";
-  zoomInButtonTooltip.referenceElement = zoomInButton.id;
-  const zoomOutButton = document.createElement("calcite-action");
-  zoomOutButton.appearance = "solid";
-  zoomOutButton.icon = "minus";
-  zoomOutButton.id = "zoomOutButton";
-  const zoomOutButtonTooltip = document.createElement("calcite-tooltip");
-  zoomOutButtonTooltip.id = "zoomOutButtonTooltip";
-  zoomOutButtonTooltip.innerHTML = translations.zoomOut;
-  zoomOutButtonTooltip.overlayPositioning = "fixed";
-  zoomOutButtonTooltip.placement = "bottom";
-  zoomOutButtonTooltip.referenceElement = zoomOutButton.id;
-  const actionBar = document.createElement("calcite-action-bar");
-  actionBar.id = "graph-navigation-controls";
-  actionBar.layout = "horizontal";
-  actionBar.expandDisabled = true;
-  actionBar.appendChild(resetButton);
-  actionBar.appendChild(resetButtonTooltip);
-  actionBar.appendChild(centerButton);
-  actionBar.appendChild(centerButtonTooltip);
-  actionBar.appendChild(zoomInButton);
-  actionBar.appendChild(zoomInButtonTooltip);
-  actionBar.appendChild(zoomOutButton);
-  actionBar.appendChild(zoomOutButtonTooltip);
-  const graphNavigationBar = document.createElement("div");
-  graphNavigationBar.id = "graph-navigation-bar";
-  graphicContainer.appendChild(graphNavigationBar);
-  graphNavigationBar.appendChild(actionBar);
-  return { resetButton, centerButton, zoomInButton, zoomOutButton };
+function ae(a, t) {
+  const e = document.createElement("calcite-action");
+  e.appearance = "solid", e.icon = "reset", e.id = "showHideGrayedOutButton";
+  const r = document.createElement("calcite-tooltip");
+  r.id = "resetButtonTooltip", r.innerHTML = t.reset, r.overlayPositioning = "fixed", r.placement = "bottom", r.referenceElement = e.id;
+  const s = document.createElement("calcite-action");
+  s.appearance = "solid", s.icon = "zoom-to-object", s.id = "centerButton";
+  const n = document.createElement("calcite-tooltip");
+  n.id = "centerButtonTooltip", n.innerHTML = t.centerDiagram, n.overlayPositioning = "fixed", n.placement = "bottom", n.referenceElement = s.id;
+  const i = document.createElement("calcite-action");
+  i.appearance = "solid", i.icon = "plus", i.id = "zoomInButton";
+  const o = document.createElement("calcite-tooltip");
+  o.id = "zoomInButtonTooltip", o.innerHTML = t.zoomIn, o.overlayPositioning = "fixed", o.placement = "bottom", o.referenceElement = i.id;
+  const c = document.createElement("calcite-action");
+  c.appearance = "solid", c.icon = "minus", c.id = "zoomOutButton";
+  const h = document.createElement("calcite-tooltip");
+  h.id = "zoomOutButtonTooltip", h.innerHTML = t.zoomOut, h.overlayPositioning = "fixed", h.placement = "bottom", h.referenceElement = c.id;
+  const l = document.createElement("calcite-action-bar");
+  l.id = "graph-navigation-controls", l.layout = "horizontal", l.expandDisabled = !0, l.appendChild(e), l.appendChild(r), l.appendChild(s), l.appendChild(n), l.appendChild(i), l.appendChild(o), l.appendChild(c), l.appendChild(h);
+  const g = document.createElement("div");
+  return g.id = "graph-navigation-bar", a.appendChild(g), g.appendChild(l), { resetButton: e, centerButton: s, zoomInButton: i, zoomOutButton: c };
 }
-function getTypeForDisplay(type, typeKeywords) {
-  let _type = type;
-  if (type === "Feature Service") {
-    const isView = typeKeywords.indexOf("View Service") > -1;
-    const isTable = typeKeywords.indexOf("Table") > -1;
-    _type = isView && isTable ? "Table (hosted, view)" : isTable ? "Table (hosted)" : isView ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+function re(a, t) {
+  let e = a;
+  if (a === "Feature Service") {
+    const r = t.indexOf("View Service") > -1, s = t.indexOf("Table") > -1;
+    e = r && s ? "Table (hosted, view)" : s ? "Table (hosted)" : r ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
   }
-  if (type === "Web Mapping Application") {
-    _type = typeKeywords.indexOf("configurableApp") > -1 ? "Instant App" : _type;
-  }
-  _type = type === "Geoprocessing Service" ? "Tool" : _type;
-  _type = type === "Feed" ? "Feed (hosted)" : _type;
-  _type = type === "Real Time Analytic" ? "Real Time Analytic (hosted)" : _type;
-  _type = type === "Big Data Analytic" ? "Big Data Analytic (hosted)" : _type;
-  _type = type === "Vector Tile Service" ? "Tile Layer" : _type;
-  return _type;
+  return a === "Web Mapping Application" && (e = t.indexOf("configurableApp") > -1 ? "Instant App" : e), e = a === "Geoprocessing Service" ? "Tool" : e, e = a === "Feed" ? "Feed (hosted)" : e, e = a === "Real Time Analytic" ? "Real Time Analytic (hosted)" : e, e = a === "Big Data Analytic" ? "Big Data Analytic (hosted)" : e, e = a === "Vector Tile Service" ? "Tile Layer" : e, e;
 }
-function reset(diagram) {
-  diagram.zoomToFit();
-  document.dispatchEvent(new CustomEvent("reset"));
+function de(a) {
+  a.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
 }
-function setStyles() {
-  injectGlobal`
+function se() {
+  A`
     #filter-bar {
       background-color: #f4f4f4;
       position: absolute;
@@ -600,11 +427,8 @@ function setStyles() {
  *
  * email: contracts@esri.com
  */
-const cNodeCornerRadius = 8;
-const cNodeCornerRadiusCornerSelectionBitmap = 1 | 2 | 4 | 8;
-const cNodeHighlightColor = "#1e90ff";
-const cNodeHighlightStrokeWidth = 4;
-class SolutionDisplay {
+const ce = 8, le = 15, he = "#1e90ff", me = 4;
+class pe {
   /**
    * Creates a new instance of the SolutionDisplay class.
    * @param indexPanel The Calcite panel element to use as the index panel.
@@ -617,46 +441,22 @@ class SolutionDisplay {
    *     <calcite-panel id='diagramPanel' style='display:flex;'/>
    *   </calcite-shell>
    */
-  constructor(indexPanel, diagramPanel, diagramTranslations, diagramKey) {
-    this.indexPanel = indexPanel;
-    this.diagramPanel = diagramPanel;
-    this.diagramTranslations = diagramTranslations;
-    this.diagramKey = diagramKey;
-    this.currentSelectedGroupId = "";
-    this.currentSelectedItemId = "";
-    this.diagramNeedsRedraw = false;
-    this.usefilteredView = false;
-    this.handle_clickInDiagram = (evt) => {
-      evt.stopImmediatePropagation();
-      if (this.currentSelectedGroupId || this.currentSelectedItemId) {
-        this.currentSelectedGroupId = "";
-        this.currentSelectedItemId = "";
-        this.diagramNeedsRedraw = this.usefilteredView;
-        this.redraw();
-      }
-    };
-    this.handle_clickOnNode = (evt) => {
-      evt.stopImmediatePropagation();
-      const id = evt.detail.data.key;
-      this.redraw(id, id === this.currentSelectedItemId);
-    };
-    this.handle_filteredViewChanged = (evt) => {
-      this.usefilteredView = evt.detail;
-      this.diagramNeedsRedraw = !!this.currentSelectedGroupId || !!this.currentSelectedItemId;
-      this.redraw(this.currentSelectedItemId || this.currentSelectedGroupId);
-    };
-    this.handle_reset = (evt) => {
-      evt.stopImmediatePropagation();
-      this.reset();
-    };
-    this.handle_solutionItemSelect = (evt) => {
-      evt.stopImmediatePropagation();
-      const id = evt.detail.itemId;
-      this.redraw(id, id === this.currentSelectedItemId || id === this.currentSelectedGroupId, false);
-    };
-    if (go.Diagram.licenseKey === "") {
-      go.Diagram.licenseKey = diagramKey ?? "";
-    }
+  constructor(t, e, r, s) {
+    this.indexPanel = t, this.diagramPanel = e, this.diagramTranslations = r, this.diagramKey = s, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = !1, this.usefilteredView = !1, this.handle_clickInDiagram = (n) => {
+      n.stopImmediatePropagation(), (this.currentSelectedGroupId || this.currentSelectedItemId) && (this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = this.usefilteredView, this.redraw());
+    }, this.handle_clickOnNode = (n) => {
+      n.stopImmediatePropagation();
+      const i = n.detail.data.key;
+      this.redraw(i, i === this.currentSelectedItemId);
+    }, this.handle_filteredViewChanged = (n) => {
+      this.usefilteredView = n.detail, this.diagramNeedsRedraw = !!this.currentSelectedGroupId || !!this.currentSelectedItemId, this.redraw(this.currentSelectedItemId || this.currentSelectedGroupId);
+    }, this.handle_reset = (n) => {
+      n.stopImmediatePropagation(), this.reset();
+    }, this.handle_solutionItemSelect = (n) => {
+      n.stopImmediatePropagation();
+      const i = n.detail.itemId;
+      this.redraw(i, i === this.currentSelectedItemId || i === this.currentSelectedGroupId, !1);
+    }, d.Diagram.licenseKey === "" && (d.Diagram.licenseKey = s ?? "");
   }
   /**
    * Creates the index and diagram for the given collection of template info.
@@ -664,85 +464,53 @@ class SolutionDisplay {
    * @param typeKeywords The collection type keywords for the solution.
    * @returns A promise that resolves when the index and diagram have been created.
    */
-  create(collection, typeKeywords) {
-    this.collection = collection;
-    this.index = document.createElement("solution-item-accordion");
-    this.index.linkType = "action";
-    this.index.listSelectionMode = "single";
-    this.index.typeKeywords = typeKeywords;
-    this.index.style.overflowY = "auto";
-    this.indexPanel.appendChild(this.index);
-    this.index.templateInfos = collection;
-    this.allNodesAndLinks = getNodesAndLinks(collection);
-    this.diagram = drawSolutionGraph(
+  create(t, e) {
+    this.collection = t, this.index = document.createElement("solution-item-accordion"), this.index.linkType = "action", this.index.listSelectionMode = "single", this.index.typeKeywords = e, this.index.style.overflowY = "auto", this.indexPanel.appendChild(this.index), this.index.templateInfos = t, this.allNodesAndLinks = J(t), this.diagram = q(
       this.diagramPanel,
       this.allNodesAndLinks,
       this.diagramTranslations
-    );
-    this.diagram.addDiagramListener("LayoutCompleted", () => {
+    ), this.diagram.addDiagramListener("LayoutCompleted", () => {
       setTimeout(() => {
         this.diagram.zoomToFit();
       }, 1e3);
-    });
-    go.Link.setRoutingParameter(44, 600942);
-    this.createNodeHighlighters();
-    document.addEventListener("clickInDiagram", this.handle_clickInDiagram);
-    document.addEventListener("clickOnNode", this.handle_clickOnNode);
-    document.addEventListener("filteredViewChanged", this.handle_filteredViewChanged);
-    document.addEventListener("reset", this.handle_reset);
-    this.index.addEventListener("solutionItemSelect", this.handle_solutionItemSelect);
+    }), d.Link.setRoutingParameter(44, 600942), this.createNodeHighlighters(), document.addEventListener("clickInDiagram", this.handle_clickInDiagram), document.addEventListener("clickOnNode", this.handle_clickOnNode), document.addEventListener("filteredViewChanged", this.handle_filteredViewChanged), document.addEventListener("reset", this.handle_reset), this.index.addEventListener("solutionItemSelect", this.handle_solutionItemSelect);
   }
   /**
    * Destroys the index and diagram; removes all event listeners.
    */
   dispose() {
-    document.removeEventListener("clickInDiagram", this.handle_clickInDiagram);
-    document.removeEventListener("clickOnNode", this.handle_clickOnNode);
-    document.removeEventListener("filteredViewChanged", this.handle_filteredViewChanged);
-    document.removeEventListener("reset", this.handle_reset);
-    this.index.removeEventListener("solutionItemSelect", this.handle_solutionItemSelect);
-    this.indexPanel.innerHTML = "";
-    this.diagramPanel.innerHTML = "";
+    document.removeEventListener("clickInDiagram", this.handle_clickInDiagram), document.removeEventListener("clickOnNode", this.handle_clickOnNode), document.removeEventListener("filteredViewChanged", this.handle_filteredViewChanged), document.removeEventListener("reset", this.handle_reset), this.index.removeEventListener("solutionItemSelect", this.handle_solutionItemSelect), this.indexPanel.innerHTML = "", this.diagramPanel.innerHTML = "";
   }
   // ---------------------------------------------------------------------------------------------------------------- //
   /**
    * Clears all selections in the index and diagram.
    * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index
    */
-  clearSelections(alsoCollapseAllAccordionItems = true) {
-    void this.index.deselectAll();
-    if (alsoCollapseAllAccordionItems) {
-      void this.index.collapseAll();
-    }
-    const nodes = this.getNodesFromDiagram(this.diagram);
-    const nodeIds = nodes.map((node) => node.data.key);
-    highlightNodes(nodeIds, nodes, false, this.diagramNodeHighlighterIndex);
+  clearSelections(t = !0) {
+    this.index.deselectAll(), t && this.index.collapseAll();
+    const e = this.getNodesFromDiagram(this.diagram), r = e.map((s) => s.data.key);
+    v(r, e, !1, this.diagramNodeHighlighterIndex);
   }
   /**
    * Creates indicies into the diagram's nodes and node highlighters.
    * Rebuilds this.diagramNodeIndex and this.diagramNodeHighlighterIndex.
    */
   createNodeHighlighters() {
-    this.diagramNodeIndex = {};
-    this.diagramNodeHighlighterIndex = {};
-    const nodes = this.getNodesFromDiagram(this.diagram);
-    nodes.forEach((node) => {
-      this.diagramNodeIndex[node.data.key] = node;
-      const nodeHighlighter = new go.Adornment("Auto", {
+    this.diagramNodeIndex = {}, this.diagramNodeHighlighterIndex = {}, this.getNodesFromDiagram(this.diagram).forEach((e) => {
+      this.diagramNodeIndex[e.data.key] = e;
+      const r = new d.Adornment("Auto", {
         background: "transparent",
         margin: 2
       });
-      nodeHighlighter.add(new go.Shape("RoundedRectangle", {
+      r.add(new d.Shape("RoundedRectangle", {
         fill: "transparent",
-        parameter1: cNodeCornerRadius,
-        parameter2: cNodeCornerRadiusCornerSelectionBitmap,
-        stroke: cNodeHighlightColor,
-        strokeWidth: cNodeHighlightStrokeWidth
-      }));
-      nodeHighlighter.add(new go.Placeholder({
+        parameter1: ce,
+        parameter2: le,
+        stroke: he,
+        strokeWidth: me
+      })), r.add(new d.Placeholder({
         margin: 1
-      }));
-      this.diagramNodeHighlighterIndex[node.data.key] = nodeHighlighter;
+      })), this.diagramNodeHighlighterIndex[e.data.key] = r;
     });
   }
   /**
@@ -751,21 +519,19 @@ class SolutionDisplay {
    * @param id Id of node to find
    * @returns Node matching the given id, or undefined if not found
    */
-  getNodeById(id) {
-    return this.diagramNodeIndex[id];
+  getNodeById(t) {
+    return this.diagramNodeIndex[t];
   }
   /**
    * Retrieves all nodes from the diagram.
    * @param diagram The diagram to search
    * @returns Array of nodes in the diagram
    */
-  getNodesFromDiagram(diagram) {
-    const nodes = [];
-    const nodeIterator = diagram.nodes.iterator;
-    while (nodeIterator.next()) {
-      nodes.push(nodeIterator.value);
-    }
-    return nodes;
+  getNodesFromDiagram(t) {
+    const e = [], r = t.nodes.iterator;
+    for (; r.next(); )
+      e.push(r.value);
+    return e;
   }
   /**
    * Selects an item to highlight or unhighlight.
@@ -773,138 +539,78 @@ class SolutionDisplay {
    * @param toggleSelection Whether to toggle the selection state of the item
    * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index
    */
-  redraw(id = "", toggleSelection = false, alsoCollapseAllAccordionItems = true) {
-    const areDrawingAGroup = this.allNodesAndLinks.groupPseudoNodes.includes(id);
-    if (this.diagramNeedsRedraw) {
-      drawDiagram(this.diagram, this.allNodesAndLinks);
-      this.createNodeHighlighters();
-      this.diagramNeedsRedraw = false;
-    }
-    let needsReset = false;
-    this.clearSelections(alsoCollapseAllAccordionItems);
-    if (!id) {
-      return;
-    }
-    if (areDrawingAGroup) {
-      this.currentSelectedItemId = "";
-      if (this.currentSelectedGroupId !== id) {
-        this.currentSelectedGroupId = id;
-      } else if (toggleSelection) {
-        this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : id;
-        needsReset = this.usefilteredView && !this.currentSelectedGroupId;
-      }
-      if (this.currentSelectedGroupId) {
-        if (this.usefilteredView) {
-          drawDiagram(this.diagram, this.allNodesAndLinks);
-          this.createNodeHighlighters();
-        }
-        const group = this.collection.filter((item) => item.id === id)[0];
-        const groupNodes = group.dependencies.map((dependency) => this.diagramNodeIndex[dependency]);
-        if (this.usefilteredView) {
-          const nodes = groupNodes.map((node) => node.data);
-          drawDiagram(this.diagram, { nodes, links: [] });
-        } else {
-          highlightNodes(group.dependencies, groupNodes, true, this.diagramNodeHighlighterIndex);
+  redraw(t = "", e = !1, r = !0) {
+    const s = this.allNodesAndLinks.groupPseudoNodes.includes(t);
+    this.diagramNeedsRedraw && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.diagramNeedsRedraw = !1);
+    let n = !1;
+    if (this.clearSelections(r), !!t) {
+      if (s) {
+        if (this.currentSelectedItemId = "", this.currentSelectedGroupId !== t ? this.currentSelectedGroupId = t : e && (this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : t, n = this.usefilteredView && !this.currentSelectedGroupId), this.currentSelectedGroupId) {
+          this.usefilteredView && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters());
+          const i = this.collection.filter((c) => c.id === t)[0], o = i.dependencies.map((c) => this.diagramNodeIndex[c]);
+          if (this.usefilteredView) {
+            const c = o.map((h) => h.data);
+            m(this.diagram, { nodes: c, links: [] });
+          } else
+            v(i.dependencies, o, !0, this.diagramNodeHighlighterIndex);
+          this.index.selectItem(this.currentSelectedGroupId);
         }
-        void this.index.selectItem(this.currentSelectedGroupId);
-      }
-    } else {
-      this.currentSelectedGroupId = "";
-      if (this.currentSelectedItemId !== id) {
-        this.currentSelectedItemId = id;
-      } else if (toggleSelection) {
-        this.currentSelectedItemId = this.currentSelectedItemId ? "" : id;
-        needsReset = this.usefilteredView && !this.currentSelectedItemId;
-      }
-      let focusNode = this.getNodeById(id);
-      if (!focusNode || this.usefilteredView) {
-        drawDiagram(this.diagram, this.allNodesAndLinks);
-        this.createNodeHighlighters();
-        focusNode = this.getNodeById(id);
-        if (!focusNode) {
+      } else {
+        this.currentSelectedGroupId = "", this.currentSelectedItemId !== t ? this.currentSelectedItemId = t : e && (this.currentSelectedItemId = this.currentSelectedItemId ? "" : t, n = this.usefilteredView && !this.currentSelectedItemId);
+        let i = this.getNodeById(t);
+        if ((!i || this.usefilteredView) && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), i = this.getNodeById(t), !i))
           return;
-        }
-      }
-      if (this.currentSelectedItemId) {
-        if (this.usefilteredView) {
-          const connectedNodesAndLinks = getConnectedNodesAndLinks(focusNode);
-          connectedNodesAndLinks.connectedNodes.add(focusNode);
-          const nodes = Array.from(connectedNodesAndLinks.connectedNodes).map((node) => node.data);
-          const links = Array.from(connectedNodesAndLinks.connectedLinks).map((link) => link.data);
-          drawDiagram(this.diagram, { nodes, links });
-          this.createNodeHighlighters();
-          focusNode = this.getNodeById(id);
-          if (!focusNode) {
-            return;
+        if (this.currentSelectedItemId) {
+          if (this.usefilteredView) {
+            const o = T(i);
+            o.connectedNodes.add(i);
+            const c = Array.from(o.connectedNodes).map((l) => l.data), h = Array.from(o.connectedLinks).map((l) => l.data);
+            if (m(this.diagram, { nodes: c, links: h }), this.createNodeHighlighters(), i = this.getNodeById(t), !i)
+              return;
           }
+          i && setTimeout(() => Q(i, !0, this.diagramNodeHighlighterIndex[t]), 1), this.index.selectItem(this.currentSelectedItemId);
         }
-        if (focusNode) {
-          setTimeout(() => highlightNode(focusNode, true, this.diagramNodeHighlighterIndex[id]), 1);
-        }
-        void this.index.selectItem(this.currentSelectedItemId);
       }
-    }
-    if (needsReset) {
-      this.reset();
+      n && this.reset();
     }
   }
   /**
    * Clears all selections in the index and diagram.
    */
   reset() {
-    this.diagramNeedsRedraw = false;
-    this.currentSelectedGroupId = "";
-    this.currentSelectedItemId = "";
-    drawDiagram(this.diagram, this.allNodesAndLinks);
-    this.createNodeHighlighters();
-    this.clearSelections();
+    this.diagramNeedsRedraw = !1, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.clearSelections();
   }
 }
-class SolutionItemDiagram extends LitElement {
+class ue extends C {
   constructor() {
-    super(...arguments);
-    this.diagramKey = "";
-    this.templateInfoGraph = [];
-    this.typeKeywords = [];
-    this._diagramPanel = createRef();
-    this._diagramShell = createRef();
-    this._translations = useT9n({ name: "solution-item-diagram", blocking: true });
+    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = y(), this._diagramShell = y(), this._translations = D({ name: "solution-item-diagram", blocking: !0 });
   }
   static {
-    this.properties = { diagramKey: 1, templateInfoGraph: [0, {}, { attribute: false }], typeKeywords: [0, {}, { attribute: false }], _diagramPanel: [16, {}, { state: true }], _diagramShell: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
+    this.properties = { diagramKey: 1, templateInfoGraph: 0, typeKeywords: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
   }
   static {
-    this.styles = styles;
+    this.styles = $;
   }
   updated() {
-    if (this.solutionDisplay) {
-      this.solutionDisplay.dispose();
-      this.solutionDisplay = void 0;
-    }
-    if (this.templateInfoGraph.length > 0) {
-      const graphsTranslations = {
+    if (this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0), this.templateInfoGraph.length > 0) {
+      const t = {
         centerDiagram: this._translations.graphTranslations.centerDiagram,
         filteredView: this._translations.graphTranslations.filteredView,
         reset: this._translations.graphTranslations.reset,
         zoomIn: this._translations.graphTranslations.zoomIn,
         zoomOut: this._translations.graphTranslations.zoomOut
       };
-      this.solutionDisplay = new SolutionDisplay(this._diagramShell.value, this._diagramPanel.value, graphsTranslations, this.diagramKey);
-      this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
+      this.solutionDisplay = new pe(this._diagramShell.value, this._diagramPanel.value, t, this.diagramKey), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
     }
   }
   disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.solutionDisplay) {
-      this.solutionDisplay.dispose();
-      this.solutionDisplay = void 0;
-    }
+    super.disconnectedCallback(), this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0);
   }
   render() {
-    return html`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${ref(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${ref(this._diagramPanel)}></calcite-panel></calcite-shell>`;
+    return B`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${w(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${w(this._diagramPanel)}></calcite-panel></calcite-shell>`;
   }
 }
-customElement("solution-item-diagram", SolutionItemDiagram);
+b("solution-item-diagram", ue);
 export {
-  SolutionItemDiagram
+  ue as SolutionItemDiagram
 };