@esri/solutions-components 1.2.0-next.99 → 5.0.1

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

@@ -1,52 +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";
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
+import { c as B } from "../../chunks/runtime.js";
+import { css as C, html as D } from "lit";
+import { u as z } from "../../chunks/useT9n.js";
+import { LitElement as $ } from "@arcgis/lumina";
+import { createRef as k, ref as I } 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 { g as A } from "../../chunks/getItemIcon.js";
 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.98 */
-const $ = E`/** @license
- * Copyright 2025 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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}#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
- *
- * All rights reserved under the copyright laws of the United States and applicable international laws, treaties,
- * and conventions.
- *
- * This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of
- * that agreement. You may redistribute and use this code without modification, provided you adhere to the terms
- * of the MLA and include this copyright notice.
- *
- * See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english
- *
- * For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal
- * Services Department 380 New York Street Redlands, California, USA 92373 USA
- *
- * email: contracts@esri.com
- */
-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 P = C`#filter-bar{background-color:var(--calcite-color-foreground-1);position:absolute;top:16px;right:196px;z-index:100;box-shadow:var(--calcite-shadow-sm)}#filteredViewButtonDiv{padding:8px}#filteredViewButtonLabel{--calcite-label-margin-bottom: 0}#graph-navigation-bar{background-color:var(--calcite-color-foreground-1);position:absolute;top:16px;right:16px;z-index:100}#graph-navigation-controls{position:absolute;top:0;right:0;box-shadow:var(--calcite-shadow-sm)}.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}`, _ = 15, V = 15, H = 10, u = new d.Size(220, 48), O = 1, G = 8, S = new d.Size(48, 48), M = new d.Size(16, 16), v = new d.Size(153, 17), R = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', F = '500 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', K = "val(--calcite-color-background)", W = p("--calcite-color-border-1"), N = p("--calcite-color-foreground-1"), g = p("--calcite-color-text-1"), T = p("--calcite-color-border-input"), j = p("--calcite-color-foreground-1"), f = 1, b = 0.3, w = 1, x = 0.2, Z = 1;
+function q(o) {
   const t = document.createElement("div");
-  t.style.width = "100%", t.style.height = "100%", a.appendChild(t);
+  t.style.width = "100%", t.style.height = "100%", o.appendChild(t);
   const e = new d.Diagram(
     t,
     // create a Diagram for the HTML Div element
@@ -62,8 +26,8 @@ function Z(a) {
       initialAutoScale: d.AutoScale.Uniform,
       // automatic zoom-to-fit
       layout: new d.LayeredDigraphLayout({
-        columnSpacing: P,
-        layerSpacing: O
+        columnSpacing: _,
+        layerSpacing: V
       }),
       padding: H,
       scrollMode: d.ScrollMode.Infinite,
@@ -75,34 +39,34 @@ function Z(a) {
     }
   );
   e.nodeTemplate = new d.Node("Auto", {
-    click: ne,
+    click: oe,
     movable: !1,
-    opacity: u,
+    opacity: f,
     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)",
+      shadowColor: se(g, 0.05),
       shadowOffset: new d.Point(0, 0)
-    }).add(new d.Panel("Vertical", { background: j, margin: 0 }).add(new d.TextBlock({ margin: 14 }).bind("text", "title")))
+    }).add(new d.Panel("Vertical", { background: j, margin: 0 }).add(new d.TextBlock({ margin: 14, stroke: g }).bind("text", "title")))
   }).bind("text", "title").add(
     new d.Shape({
-      desiredSize: p,
-      fill: W,
+      desiredSize: u,
+      fill: N,
       geometryString: te(
-        p.width,
-        p.height,
-        _,
-        k.width,
-        !0
+        u.width,
+        u.height,
+        G,
+        S.width,
+        !!N
       ),
-      height: p.height,
+      height: u.height,
       portId: "",
-      stroke: K,
-      strokeWidth: V,
-      width: p.width
+      stroke: W,
+      strokeWidth: O,
+      width: u.width
     })
   ).add(
     // Node content
@@ -113,7 +77,7 @@ function Z(a) {
       // Icon panel
       new d.Panel("Horizontal", {
         alignment: d.Spot.Left,
-        desiredSize: k,
+        desiredSize: S,
         margin: 1
       }).add(
         new d.Panel("Horizontal", {
@@ -121,8 +85,8 @@ function Z(a) {
           margin: 16
         }).add(
           new d.Picture({
-            desiredSize: G
-          }).bind("source", "", (n) => z(n.itemType, n.itemTypeKeywords))
+            desiredSize: M
+          }).bind("source", "", (i) => A(i.itemType, i.itemTypeKeywords))
         )
       ),
       // Label
@@ -135,25 +99,25 @@ function Z(a) {
           // First line
           new d.TextBlock({
             alignment: d.Spot.Left,
-            desiredSize: I,
+            desiredSize: v,
             font: F,
             overflow: d.TextOverflow.Ellipsis,
-            stroke: S,
+            stroke: g,
             wrap: d.Wrap.None
           }).bind("text", "title"),
           // Second line
           new d.TextBlock({
             alignment: d.Spot.Left,
-            desiredSize: I,
+            desiredSize: v,
             font: R,
             overflow: d.TextOverflow.Ellipsis,
-            stroke: S,
+            stroke: g,
             wrap: d.Wrap.None
           }).bind("text", "itemTypeForDisplay")
         )
       )
     )
-  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(M);
+  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(K);
   const r = e.toolManager.clickSelectingTool;
   r.standardMouseSelect = function() {
   };
@@ -166,268 +130,237 @@ function Z(a) {
   }).add(
     new d.Shape({
       // the link path shape
-      opacity: f,
-      stroke: N
+      opacity: w,
+      stroke: T
     }),
     new d.Shape({
       // the 'to' arrowhead
-      fill: N,
-      opacity: f,
+      fill: T,
+      opacity: w,
       stroke: null,
       toArrow: "Standard"
     })
   ), e;
 }
-function m(a, t) {
-  a.model = new d.GraphLinksModel(t.nodes, t.links, {
+function m(o, t) {
+  o.model = new d.GraphLinksModel(t.nodes, t.links, {
     linkFromPortIdProperty: "fromPort",
     linkToPortIdProperty: "toPort"
   });
 }
-function U(a, t, e, r = !0) {
+function Y(o, t, e, r = !0) {
   if (r) {
-    const c = oe(a, e);
+    const c = ne(o, e);
     c.addEventListener(
       "calciteSwitchChange",
       () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: c.checked }))
     );
   }
-  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());
+  const { resetButton: s, centerButton: i, zoomInButton: n, zoomOutButton: a } = ae(o, e);
+  s.addEventListener("click", () => de(t)), i.addEventListener("click", () => t.zoomToFit()), n.addEventListener("click", () => t.commandHandler.increaseZoom()), a.addEventListener("click", () => t.commandHandler.decreaseZoom());
 }
-function q(a, t, e) {
-  se();
-  const r = Z(a);
-  return m(r, t), U(a, r, e), r;
+function J(o, t, e) {
+  const r = q(o);
+  return m(r, t), Y(o, r, e), r;
 }
-function T(a) {
+function E(o) {
   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));
+  function r(i) {
+    i.findLinksInto().each(
+      (n) => {
+        e.add(n);
+        const a = n.fromNode;
+        a && !t.has(a) && (t.add(a), r(a));
       }
     );
   }
-  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));
+  r(o);
+  function s(i) {
+    i.findLinksOutOf().each(
+      (n) => {
+        e.add(n);
+        const a = n.toNode;
+        a && !t.has(a) && (t.add(a), s(a));
       }
     );
   }
-  return s(a), { connectedNodes: t, connectedLinks: e };
+  return s(o), { connectedNodes: t, connectedLinks: e };
 }
-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);
+function Q(o, t = !1, e) {
+  const r = [], s = o.map((n) => {
+    if (n.type !== "Group") {
+      const a = ee(n);
+      return X(n, a, t, e);
     } else {
-      r.push(i.id);
+      r.push(n.id);
       return;
     }
-  }).filter((i) => i !== void 0), n = [];
-  return s.forEach((i) => {
-    (a.find((c) => c.id === i.itemId)?.dependencies || []).forEach((c) => {
+  }).filter((n) => n !== void 0), i = [];
+  return s.forEach((n) => {
+    (o.find((c) => c.id === n.itemId)?.dependencies || []).forEach((c) => {
       const h = s.find((l) => l?.itemId === c);
-      h && n.push({
+      h && i.push({
         from: h.key,
         fromSpot: d.Spot.AllSides,
-        to: i.key,
+        to: n.key,
         toSpot: d.Spot.AllSides
       });
     });
-  }), { nodes: s, links: n, groupPseudoNodes: r };
+  }), { nodes: s, links: i, groupPseudoNodes: r };
 }
-function Q(a, t, e, r = !0) {
-  const s = a.diagram;
+function U(o, t, e, r = !0) {
+  const s = o.diagram;
   if (!s)
     return;
-  const n = {};
+  const i = {};
   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;
+    for (const n of s.nodes)
+      i[n.key] = n === o ? f : b;
+    for (const n of s.links) {
+      const a = `${n.fromNode?.key}-${n.toNode?.key}`;
+      i[a] = x;
     }
     {
-      const { connectedNodes: i, connectedLinks: o } = T(a);
-      for (const c of i)
-        n[c.key] = u;
-      for (const c of o) {
+      const { connectedNodes: n, connectedLinks: a } = E(o);
+      for (const c of n)
+        i[c.key] = f;
+      for (const c of a) {
         const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-        n[h] = Y;
+        i[h] = Z;
       }
     }
   }
-  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]);
+  if (e && (e.adornedObject = o), r) {
+    const n = new d.Animation();
+    n.duration = 1;
+    for (const a of s.nodes)
+      n.add(a, "opacity", a.opacity, i[a.key]);
+    for (const a of s.links) {
+      const c = `${a.fromNode?.key}-${a.toNode?.key}`;
+      n.add(a, "opacity", a.opacity, i[c]);
     }
-    i.start();
+    n.start();
   }
 }
-function v(a, t, e, r, s = !0) {
-  if (a.length === 0)
+function L(o, t, e, r, s = !0) {
+  if (o.length === 0)
     return;
-  const n = t[0].diagram;
-  if (!n)
+  const i = t[0].diagram;
+  if (!i)
     return;
-  const i = {};
+  const n = {};
   if (s) {
-    for (const o of n.nodes) {
-      const c = a.includes(o.key);
-      i[o.key] = !e || c ? u : x;
+    for (const a of i.nodes) {
+      const c = o.includes(a.key);
+      n[a.key] = !e || c ? f : b;
     }
-    for (const o of n.links) {
-      const c = `${o.fromNode?.key}-${o.toNode?.key}`;
-      i[c] = e ? L : f;
+    for (const a of i.links) {
+      const c = `${a.fromNode?.key}-${a.toNode?.key}`;
+      n[c] = e ? x : w;
     }
   }
-  if (Object.keys(r).forEach((o) => {
-    r[o].adornedObject = null;
+  if (Object.keys(r).forEach((a) => {
+    r[a].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 a = new d.Animation();
+    a.duration = 1;
+    for (const c of i.nodes)
+      a.add(c, "opacity", c.opacity, n[c.key]);
+    for (const c of i.links) {
       const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-      o.add(c, "opacity", c.opacity, i[h]);
+      a.add(c, "opacity", c.opacity, n[h]);
     }
-    o.start();
+    a.start();
   }
 }
-function X(a, t, e = !1, r) {
+function X(o, t, e = !1, r) {
   return {
     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
+    title: o.title,
+    itemId: o.id,
+    itemType: o.type,
+    itemTypeForDisplay: re(o.type, o.typeKeywords),
+    itemTypeKeywords: o.typeKeywords,
+    group: o.type,
+    url: e ? `${r}?id=${o.id}` : void 0
   };
 }
-function ee(a) {
-  return a.id;
+function ee(o) {
+  return o.id;
 }
-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 te(o, t, e, r = 0, s = !1) {
+  let i = "";
+  s && (i += "F");
+  const n = o - 2 * e, a = t - 2 * e;
+  return i += " M0 0", i += ` h${n}`, i += ` a${e} ${e} 0 0 1 ${e} ${e}`, i += ` v${a}`, i += ` a${e} ${e} 0 0 1 ${-e} ${e}`, i += ` h${-n}`, i += ` a${e} ${e} 0 0 1 ${-e} ${-e}`, i += ` v${-a}`, i += ` a${e} ${e} 0 0 1 ${e} ${-e}`, r > 0 && (i += ` M${r - e} 0 v${t}`), i;
 }
 function ie() {
   document.dispatchEvent(new CustomEvent("clickInDiagram"));
 }
-function ne(a, t) {
+function oe(o, t) {
   const e = t.part;
   e instanceof d.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: e })));
 }
-function oe(a, t) {
+function ne(o, 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;
+  const i = document.createElement("calcite-action-bar");
+  i.id = "filter-bar-controls", i.layout = "horizontal", i.expandDisabled = !0, i.appendChild(s);
+  const n = document.createElement("div");
+  return n.id = "filter-bar", o.appendChild(n), n.appendChild(i), e;
 }
-function ae(a, t) {
+function ae(o, t) {
   const e = document.createElement("calcite-action");
-  e.appearance = "solid", e.icon = "reset", e.id = "showHideGrayedOutButton";
+  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;
+  s.icon = "zoom-to-object", s.id = "centerButton";
+  const i = document.createElement("calcite-tooltip");
+  i.id = "centerButtonTooltip", i.innerHTML = t.centerDiagram, i.overlayPositioning = "fixed", i.placement = "bottom", i.referenceElement = s.id;
+  const n = document.createElement("calcite-action");
+  n.icon = "plus", n.id = "zoomInButton";
+  const a = document.createElement("calcite-tooltip");
+  a.id = "zoomInButtonTooltip", a.innerHTML = t.zoomIn, a.overlayPositioning = "fixed", a.placement = "bottom", a.referenceElement = n.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 };
+  l.id = "graph-navigation-controls", l.layout = "horizontal", l.expandDisabled = !0, l.appendChild(e), l.appendChild(r), l.appendChild(s), l.appendChild(i), l.appendChild(n), l.appendChild(a), l.appendChild(c), l.appendChild(h);
+  const y = document.createElement("div");
+  return y.id = "graph-navigation-bar", o.appendChild(y), y.appendChild(l), { resetButton: e, centerButton: s, zoomInButton: n, zoomOutButton: c };
 }
-function re(a, t) {
-  let e = a;
-  if (a === "Feature Service") {
+function re(o, t) {
+  let e = o;
+  if (o === "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)";
   }
-  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;
+  return o === "Web Mapping Application" && (e = t.indexOf("configurableApp") > -1 ? "Instant App" : e), e = o === "Geoprocessing Service" ? "Tool" : e, e = o === "Feed" ? "Feed (hosted)" : e, e = o === "Real Time Analytic" ? "Real Time Analytic (hosted)" : e, e = o === "Big Data Analytic" ? "Big Data Analytic (hosted)" : e, e = o === "Vector Tile Service" ? "Tile Layer" : e, e;
 }
-function de(a) {
-  a.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
+function de(o) {
+  o.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
 }
-function se() {
-  A`
-    #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;
-    }
-  `;
+function p(o) {
+  const t = document.body;
+  return getComputedStyle(t).getPropertyValue(o).trim();
+}
+function se(o, t) {
+  if (o = o.replace(/^#/, ""), o.length === 3 && (o = o.split("").map((i) => i + i).join("")), o.length !== 6)
+    throw new Error("Invalid hex color");
+  const e = parseInt(o.slice(0, 2), 16), r = parseInt(o.slice(2, 4), 16), s = parseInt(o.slice(4, 6), 16);
+  return `rgba(${e}, ${r}, ${s}, ${t})`;
+}
+const ce = 8, le = 15, he = ue("--calcite-color-brand"), me = 4;
+function ue(o) {
+  const t = document.documentElement;
+  return getComputedStyle(t).getPropertyValue(o).trim();
 }
-/** @license
- *
- * Copyright 2018 Esri
- *
- * All rights reserved under the copyright laws of the United States and applicable international laws, treaties,
- * and conventions.
- *
- * This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of
- * that agreement. You may redistribute and use this code without modification, provided you adhere to the terms
- * of the MLA and include this copyright notice.
- *
- * See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english
- *
- * For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal
- * Services Department 380 New York Street Redlands, California, USA 92373 USA
- *
- * email: contracts@esri.com
- */
-const ce = 8, le = 15, he = "#1e90ff", me = 4;
 class pe {
   /**
    * Creates a new instance of the SolutionDisplay class.
@@ -442,20 +375,20 @@ class pe {
    *   </calcite-shell>
    */
   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);
+    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 = (i) => {
+      i.stopImmediatePropagation(), (this.currentSelectedGroupId || this.currentSelectedItemId) && (this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = this.usefilteredView, this.redraw());
+    }, this.handle_clickOnNode = (i) => {
+      i.stopImmediatePropagation();
+      const n = i.detail.data.key;
+      this.redraw(n, n === this.currentSelectedItemId);
+    }, this.handle_filteredViewChanged = (i) => {
+      this.usefilteredView = i.detail, this.diagramNeedsRedraw = !!this.currentSelectedGroupId || !!this.currentSelectedItemId, this.redraw(this.currentSelectedItemId || this.currentSelectedGroupId);
+    }, this.handle_reset = (i) => {
+      i.stopImmediatePropagation(), this.reset();
+    }, this.handle_solutionItemSelect = (i) => {
+      i.stopImmediatePropagation();
+      const n = i.detail.itemId;
+      this.redraw(n, n === this.currentSelectedItemId || n === this.currentSelectedGroupId, !1);
     }, d.Diagram.licenseKey === "" && (d.Diagram.licenseKey = s ?? "");
   }
   /**
@@ -465,7 +398,7 @@ class pe {
    * @returns A promise that resolves when the index and diagram have been created.
    */
   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.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 = Q(t), this.diagram = J(
       this.diagramPanel,
       this.allNodesAndLinks,
       this.diagramTranslations
@@ -489,7 +422,7 @@ class pe {
   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);
+    L(r, e, !1, this.diagramNodeHighlighterIndex);
   }
   /**
    * Creates indicies into the diagram's nodes and node highlighters.
@@ -542,36 +475,36 @@ class pe {
   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;
+    let i = !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) {
+        if (this.currentSelectedItemId = "", this.currentSelectedGroupId !== t ? this.currentSelectedGroupId = t : e && (this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : t, i = 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]);
+          const n = this.collection.filter((c) => c.id === t)[0], a = n.dependencies.map((c) => this.diagramNodeIndex[c]);
           if (this.usefilteredView) {
-            const c = o.map((h) => h.data);
+            const c = a.map((h) => h.data);
             m(this.diagram, { nodes: c, links: [] });
           } else
-            v(i.dependencies, o, !0, this.diagramNodeHighlighterIndex);
+            L(n.dependencies, a, !0, this.diagramNodeHighlighterIndex);
           this.index.selectItem(this.currentSelectedGroupId);
         }
       } 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))
+        this.currentSelectedGroupId = "", this.currentSelectedItemId !== t ? this.currentSelectedItemId = t : e && (this.currentSelectedItemId = this.currentSelectedItemId ? "" : t, i = this.usefilteredView && !this.currentSelectedItemId);
+        let n = this.getNodeById(t);
+        if ((!n || this.usefilteredView) && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), n = this.getNodeById(t), !n))
           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)
+            const a = E(n);
+            a.connectedNodes.add(n);
+            const c = Array.from(a.connectedNodes).map((l) => l.data), h = Array.from(a.connectedLinks).map((l) => l.data);
+            if (m(this.diagram, { nodes: c, links: h }), this.createNodeHighlighters(), n = this.getNodeById(t), !n)
               return;
           }
-          i && setTimeout(() => Q(i, !0, this.diagramNodeHighlighterIndex[t]), 1), this.index.selectItem(this.currentSelectedItemId);
+          n && setTimeout(() => U(n, !0, this.diagramNodeHighlighterIndex[t]), 1), this.index.selectItem(this.currentSelectedItemId);
         }
       }
-      n && this.reset();
+      i && this.reset();
     }
   }
   /**
@@ -581,15 +514,15 @@ class pe {
     this.diagramNeedsRedraw = !1, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.clearSelections();
   }
 }
-class ue extends C {
+class ge extends $ {
   constructor() {
-    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = y(), this._diagramShell = y(), this._translations = D({ name: "solution-item-diagram", blocking: !0 });
+    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = k(), this._diagramShell = k(), this._translations = z({ name: "solution-item-diagram", blocking: !0 });
   }
   static {
     this.properties = { diagramKey: 1, templateInfoGraph: 0, typeKeywords: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
   }
   static {
-    this.styles = $;
+    this.styles = P;
   }
   updated() {
     if (this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0), this.templateInfoGraph.length > 0) {
@@ -602,15 +535,25 @@ class ue extends C {
       };
       this.solutionDisplay = new pe(this._diagramShell.value, this._diagramPanel.value, t, this.diagramKey), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
     }
+    requestAnimationFrame(() => this._preventDiagramScrollbars());
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0);
   }
   render() {
-    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>`;
+    return D`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${I(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${I(this._diagramPanel)}></calcite-panel></calcite-shell>`;
+  }
+  _preventDiagramScrollbars() {
+    if (!this._diagramPanel.value)
+      return;
+    const t = this._diagramPanel.value.shadowRoot;
+    if (!t)
+      return;
+    const e = t.querySelector(".content-wrapper");
+    e instanceof HTMLElement && (e.style.overflow = "hidden");
   }
 }
-b("solution-item-diagram", ue);
+B("solution-item-diagram", ge);
 export {
-  ue as SolutionItemDiagram
+  ge as SolutionItemDiagram
 };