@esri/solutions-components 5.1.0-next.98 → 5.1.0

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

@@ -1,371 +1,379 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/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 { a as A } from "../../chunks/getItemIcon.js";
+import { c as D } from "../../chunks/runtime.js";
+import { u as B } from "../../chunks/useT9n.js";
+import { LitElement as A } from "@arcgis/lumina";
+import { css as $, html as O } from "lit";
+import { createRef as b, ref as T } from "lit-html/directives/ref.js";
+import * as s from "gojs";
+import { a as P } from "../../chunks/getItemIcon.js";
 import "../solution-item-accordion/customElement.js";
-const P = C`#filter-bar{background-color:var(--calcite-color-surface-2);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-surface-2);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-surface-1: var(--calcite-color-surface-2);padding:16px}`, _ = 15, V = 15, H = 10, u = new d.Size(220, 48), O = 1, G = 8, S = new d.Size(48, 48), R = new d.Size(16, 16), v = new d.Size(153, 17), M = '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-surface-1)", W = p("--calcite-color-border-1"), N = p("--calcite-color-surface-2"), g = p("--calcite-color-text-1"), T = p("--calcite-color-border-input"), j = p("--calcite-color-surface-2"), f = 1, b = 0.3, w = 1, x = 0.2, Z = 1;
-function q(o) {
+const V = $`#filter-bar{background-color:var(--calcite-color-surface-2);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-surface-2);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-surface-1: var(--calcite-color-surface-2);padding:16px}`, H = 15, G = 15, R = 10, p = new s.Size(220, 48), F = 1, M = 8, x = new s.Size(48, 48), K = new s.Size(16, 16), C = new s.Size(153, 17), W = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', j = '500 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', q = "val(--calcite-color-surface-1)";
+let S = "", y = "", u = "", w = "", I = "";
+function Z() {
+  S = g("--calcite-color-border-1") || S, y = g("--calcite-color-surface-2") || y, u = g("--calcite-color-text-1") || u, w = g("--calcite-color-border-input") || w, I = g("--calcite-color-surface-2") || I;
+}
+const k = 1, _ = 0.3, N = 1, z = 0.2, Y = 1;
+function J(o) {
+  Z();
   const t = document.createElement("div");
   t.style.width = "100%", t.style.height = "100%";
-  const e = document.documentElement.dir === "rtl", a = e ? d.Spot.Right : d.Spot.Left, s = e ? "right" : "left";
+  const e = document.documentElement.dir === "rtl", r = e ? s.Spot.Right : s.Spot.Left, d = e ? "right" : "left";
   o.appendChild(t);
-  const i = new d.Diagram(
+  const i = new s.Diagram(
     t,
     // create a Diagram for the HTML Div element
     {
-      click: ie,
+      click: oe,
       // handle diagram clicks
-      contentAlignment: d.Spot.Center,
+      contentAlignment: s.Spot.Center,
       // align document to the center of the viewport
       dragSelectingTool: null,
       // disable drag selection
       hoverDelay: 50,
       // milliseconds before mouse-hover displays information
-      initialAutoScale: d.AutoScale.Uniform,
+      initialAutoScale: s.AutoScale.Uniform,
       // automatic zoom-to-fit
-      layout: new d.LayeredDigraphLayout({
-        columnSpacing: _,
-        layerSpacing: V
+      layout: new s.LayeredDigraphLayout({
+        columnSpacing: H,
+        layerSpacing: G
       }),
-      padding: H,
-      scrollMode: d.ScrollMode.Infinite,
+      padding: R,
+      scrollMode: s.ScrollMode.Infinite,
       // allow infinite scrolling--beyond document bounds
       "toolManager.hoverDelay": 50,
       // 50 milliseconds before tooltip appears
-      "toolManager.mouseWheelBehavior": d.WheelMode.Zoom
+      "toolManager.mouseWheelBehavior": s.WheelMode.Zoom
       // mouse wheel zooms instead of scrolls vertically
     }
   );
-  i.nodeTemplate = new d.Node("Auto", {
-    click: ne,
+  i.nodeTemplate = new s.Node("Auto", {
+    click: re,
     movable: !1,
-    opacity: f,
-    toolTip: new d.Adornment("Auto", {
+    opacity: k,
+    toolTip: new s.Adornment("Auto", {
       isShadowed: !0,
-      margin: new d.Margin(12, 16, 6, 16),
+      margin: new s.Margin(12, 16, 6, 16),
       // top, right, bottom, left
       padding: 0,
       shadowBlur: 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, stroke: g, alignment: a, textAlign: s }).bind("text", "title")))
+      shadowColor: ce(u, 0.05),
+      shadowOffset: new s.Point(0, 0)
+    }).add(new s.Panel("Vertical", { background: I, margin: 0 }).add(new s.TextBlock({ margin: 14, stroke: u, alignment: r, textAlign: d }).bind("text", "title")))
   }).bind("text", "title").add(
-    new d.Shape({
-      desiredSize: u,
-      fill: N,
-      geometryString: te(
-        u.width,
-        u.height,
-        G,
-        S.width,
-        !!N
+    new s.Shape({
+      desiredSize: p,
+      fill: y,
+      geometryString: ne(
+        p.width,
+        p.height,
+        M,
+        x.width,
+        !!y
       ),
-      height: u.height,
+      height: p.height,
       portId: "",
-      stroke: W,
-      strokeWidth: O,
-      width: u.width
+      stroke: S,
+      strokeWidth: F,
+      width: p.width
     })
   ).add(
     // Node content
-    new d.Panel("Horizontal", {
-      alignment: a,
-      stretch: d.Stretch.Horizontal
+    new s.Panel("Horizontal", {
+      alignment: r,
+      stretch: s.Stretch.Horizontal
     }).add(
       // Icon panel
-      new d.Panel("Horizontal", {
-        alignment: a,
-        desiredSize: S,
+      new s.Panel("Horizontal", {
+        alignment: r,
+        desiredSize: x,
         margin: 1
       }).add(
-        new d.Panel("Horizontal", {
-          alignment: d.Spot.Center,
+        new s.Panel("Horizontal", {
+          alignment: s.Spot.Center,
           margin: 16
         }).add(
-          new d.Picture({
-            desiredSize: R
-          }).bind("source", "", (c) => A(c.itemType, c.itemTypeKeywords))
+          new s.Picture({
+            desiredSize: K
+          }).bind("source", "", (l) => P(l.itemType, l.itemTypeKeywords))
         )
       ),
       // Label
-      new d.Panel("Horizontal", {
-        alignment: a,
-        margin: new d.Margin(4, 8, 0, 8)
+      new s.Panel("Horizontal", {
+        alignment: r,
+        margin: new s.Margin(4, 8, 0, 8)
         // top, right, bottom, left
       }).add(
-        new d.Panel("Vertical", {}).add(
+        new s.Panel("Vertical", {}).add(
           // First line
-          new d.TextBlock({
-            alignment: a,
-            textAlign: s,
-            desiredSize: v,
-            font: F,
-            overflow: d.TextOverflow.Ellipsis,
-            stroke: g,
-            wrap: d.Wrap.None
+          new s.TextBlock({
+            alignment: r,
+            textAlign: d,
+            desiredSize: C,
+            font: j,
+            overflow: s.TextOverflow.Ellipsis,
+            stroke: u,
+            wrap: s.Wrap.None
           }).bind("text", "title"),
           // Second line
-          new d.TextBlock({
-            alignment: a,
-            textAlign: s,
-            desiredSize: v,
-            font: M,
-            overflow: d.TextOverflow.Ellipsis,
-            stroke: g,
-            wrap: d.Wrap.None
+          new s.TextBlock({
+            alignment: r,
+            textAlign: d,
+            desiredSize: C,
+            font: W,
+            overflow: s.TextOverflow.Ellipsis,
+            stroke: u,
+            wrap: s.Wrap.None
           }).bind("text", "itemTypeForDisplay")
         )
       )
     )
-  ), i.commandHandler.zoomFactor = 1.05, i.setDivBackground(K);
+  ), i.commandHandler.zoomFactor = 1.05, i.setDivBackground(q);
   const n = i.toolManager.clickSelectingTool;
   n.standardMouseSelect = function() {
   };
-  const r = i.toolManager.draggingTool;
-  return r.isEnabled = !1, i.linkTemplate = new d.Link({
+  const a = i.toolManager.draggingTool;
+  return a.isEnabled = !1, i.linkTemplate = new s.Link({
     corner: 5,
     movable: !1,
-    routing: d.Routing.Orthogonal,
+    routing: s.Routing.Orthogonal,
     selectable: !1
   }).add(
-    new d.Shape({
+    new s.Shape({
       // the link path shape
-      opacity: w,
-      stroke: T
+      opacity: N,
+      stroke: w
     }),
-    new d.Shape({
+    new s.Shape({
       // the 'to' arrowhead
-      fill: T,
-      opacity: w,
+      fill: w,
+      opacity: N,
       stroke: null,
       toArrow: "Standard"
     })
   ), i;
 }
 function m(o, t) {
-  o.model = new d.GraphLinksModel(t.nodes, t.links, {
+  o.model = new s.GraphLinksModel(t.nodes, t.links, {
     linkFromPortIdProperty: "fromPort",
     linkToPortIdProperty: "toPort"
   });
 }
-function Y(o, t, e, a = !0) {
-  if (a) {
-    const c = oe(o, e);
-    c.addEventListener(
+function Q(o, t, e, r = !0) {
+  if (r) {
+    const l = ae(o, e);
+    l.addEventListener(
       "calciteSwitchChange",
-      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: c.checked }))
+      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: l.checked }))
     );
   }
-  const { resetButton: s, centerButton: i, zoomInButton: n, zoomOutButton: r } = ae(o, e);
-  s.addEventListener("click", () => de(t)), i.addEventListener("click", () => t.zoomToFit()), n.addEventListener("click", () => t.commandHandler.increaseZoom()), r.addEventListener("click", () => t.commandHandler.decreaseZoom());
+  const { resetButton: d, centerButton: i, zoomInButton: n, zoomOutButton: a } = se(o, e);
+  d.addEventListener("click", () => le(t)), i.addEventListener("click", () => t.zoomToFit()), n.addEventListener("click", () => t.commandHandler.increaseZoom()), a.addEventListener("click", () => t.commandHandler.decreaseZoom());
 }
-function J(o, t, e) {
-  const a = q(o);
-  return m(a, t), Y(o, a, e), a;
+function U(o, t, e) {
+  const r = J(o);
+  return m(r, t), Q(o, r, e), r;
 }
 function E(o) {
   const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
-  function a(i) {
+  function r(i) {
     i.findLinksInto().each(
       (n) => {
         e.add(n);
-        const r = n.fromNode;
-        r && !t.has(r) && (t.add(r), a(r));
+        const a = n.fromNode;
+        a && !t.has(a) && (t.add(a), r(a));
       }
     );
   }
-  a(o);
-  function s(i) {
+  r(o);
+  function d(i) {
     i.findLinksOutOf().each(
       (n) => {
         e.add(n);
-        const r = n.toNode;
-        r && !t.has(r) && (t.add(r), s(r));
+        const a = n.toNode;
+        a && !t.has(a) && (t.add(a), d(a));
       }
     );
   }
-  return s(o), { connectedNodes: t, connectedLinks: e };
+  return d(o), { connectedNodes: t, connectedLinks: e };
 }
-function Q(o, t = !1, e) {
-  const a = [], s = o.map((n) => {
+function X(o, t = !1, e) {
+  const r = [], d = o.map((n) => {
     if (n.type !== "Group") {
-      const r = ee(n);
-      return X(n, r, t, e);
+      const a = ie(n);
+      return te(n, a, t, e);
     } else {
-      a.push(n.id);
+      r.push(n.id);
       return;
     }
   }).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);
+  return d.forEach((n) => {
+    (o.find((l) => l.id === n.itemId)?.dependencies || []).forEach((l) => {
+      const h = d.find((c) => c?.itemId === l);
       h && i.push({
         from: h.key,
-        fromSpot: d.Spot.AllSides,
+        fromSpot: s.Spot.AllSides,
         to: n.key,
-        toSpot: d.Spot.AllSides
+        toSpot: s.Spot.AllSides
       });
     });
-  }), { nodes: s, links: i, groupPseudoNodes: a };
+  }), { nodes: d, links: i, groupPseudoNodes: r };
 }
-function U(o, t, e, a = !0) {
-  const s = o.diagram;
-  if (!s)
+function ee(o, t, e, r = !0) {
+  const d = o.diagram;
+  if (!d)
     return;
   const i = {};
-  if (a) {
-    for (const n of s.nodes)
-      i[n.key] = n === o ? f : b;
-    for (const n of s.links) {
-      const r = `${n.fromNode?.key}-${n.toNode?.key}`;
-      i[r] = x;
+  if (r) {
+    for (const n of d.nodes)
+      i[n.key] = n === o ? k : _;
+    for (const n of d.links) {
+      const a = `${n.fromNode?.key}-${n.toNode?.key}`;
+      i[a] = z;
     }
     {
-      const { connectedNodes: n, connectedLinks: r } = E(o);
-      for (const c of n)
-        i[c.key] = f;
-      for (const c of r) {
-        const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-        i[h] = Z;
+      const { connectedNodes: n, connectedLinks: a } = E(o);
+      for (const l of n)
+        i[l.key] = k;
+      for (const l of a) {
+        const h = `${l.fromNode?.key}-${l.toNode?.key}`;
+        i[h] = Y;
       }
     }
   }
-  if (e && (e.adornedObject = o), a) {
-    const n = new d.Animation();
+  if (e && (e.adornedObject = o), r) {
+    const n = new s.Animation();
     n.duration = 1;
-    for (const r of s.nodes)
-      n.add(r, "opacity", r.opacity, i[r.key]);
-    for (const r of s.links) {
-      const c = `${r.fromNode?.key}-${r.toNode?.key}`;
-      n.add(r, "opacity", r.opacity, i[c]);
+    for (const a of d.nodes)
+      n.add(a, "opacity", a.opacity, i[a.key]);
+    for (const a of d.links) {
+      const l = `${a.fromNode?.key}-${a.toNode?.key}`;
+      n.add(a, "opacity", a.opacity, i[l]);
     }
     n.start();
   }
 }
-function L(o, t, e, a, s = !0) {
+function L(o, t, e, r, d = !0) {
   if (o.length === 0)
     return;
   const i = t[0].diagram;
   if (!i)
     return;
   const n = {};
-  if (s) {
-    for (const r of i.nodes) {
-      const c = o.includes(r.key);
-      n[r.key] = !e || c ? f : b;
+  if (d) {
+    for (const a of i.nodes) {
+      const l = o.includes(a.key);
+      n[a.key] = !e || l ? k : _;
     }
-    for (const r of i.links) {
-      const c = `${r.fromNode?.key}-${r.toNode?.key}`;
-      n[c] = e ? x : w;
+    for (const a of i.links) {
+      const l = `${a.fromNode?.key}-${a.toNode?.key}`;
+      n[l] = e ? z : N;
     }
   }
-  if (Object.keys(a).forEach((r) => {
-    a[r].adornedObject = null;
-  }), s) {
-    const r = new d.Animation();
-    r.duration = 1;
-    for (const c of i.nodes)
-      r.add(c, "opacity", c.opacity, n[c.key]);
-    for (const c of i.links) {
-      const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-      r.add(c, "opacity", c.opacity, n[h]);
+  if (Object.keys(r).forEach((a) => {
+    r[a].adornedObject = null;
+  }), d) {
+    const a = new s.Animation();
+    a.duration = 1;
+    for (const l of i.nodes)
+      a.add(l, "opacity", l.opacity, n[l.key]);
+    for (const l of i.links) {
+      const h = `${l.fromNode?.key}-${l.toNode?.key}`;
+      a.add(l, "opacity", l.opacity, n[h]);
     }
-    r.start();
+    a.start();
   }
 }
-function X(o, t, e = !1, a) {
+function te(o, t, e = !1, r) {
   return {
     key: t,
     title: o.title,
     itemId: o.id,
     itemType: o.type,
-    itemTypeForDisplay: re(o.type, o.typeKeywords),
+    itemTypeForDisplay: de(o.type, o.typeKeywords),
     itemTypeKeywords: o.typeKeywords,
     group: o.type,
-    url: e ? `${a}?id=${o.id}` : void 0
+    url: e ? `${r}?id=${o.id}` : void 0
   };
 }
-function ee(o) {
+function ie(o) {
   return o.id;
 }
-function te(o, t, e, a = 0, s = !1) {
+function ne(o, t, e, r = 0, d = !1) {
   let i = "";
-  s && (i += "F");
-  const n = o - 2 * e, r = t - 2 * e;
-  return i += " M0 0", i += ` h${n}`, i += ` a${e} ${e} 0 0 1 ${e} ${e}`, i += ` v${r}`, i += ` a${e} ${e} 0 0 1 ${-e} ${e}`, i += ` h${-n}`, i += ` a${e} ${e} 0 0 1 ${-e} ${-e}`, i += ` v${-r}`, i += ` a${e} ${e} 0 0 1 ${e} ${-e}`, a > 0 && (i += ` M${a - e} 0 v${t}`), i;
+  d && (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() {
+function oe() {
   document.dispatchEvent(new CustomEvent("clickInDiagram"));
 }
-function ne(o, t) {
+function re(o, t) {
   const e = t.part;
-  e instanceof d.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: e })));
+  e instanceof s.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: e })));
 }
-function oe(o, t) {
+function ae(o, t) {
   const e = document.createElement("calcite-switch");
   e.id = "filteredViewButton", e.label = t.filteredView;
-  const a = document.createElement("calcite-label");
-  a.id = "filteredViewButtonLabel", a.setAttribute("layout", "inline"), a.innerHTML = t.filteredView, a.appendChild(e);
-  const s = document.createElement("div");
-  s.id = "filteredViewButtonDiv", s.appendChild(a);
+  const r = document.createElement("calcite-label");
+  r.id = "filteredViewButtonLabel", r.setAttribute("layout", "inline"), r.innerHTML = t.filteredView, r.appendChild(e);
+  const d = document.createElement("div");
+  d.id = "filteredViewButtonDiv", d.appendChild(r);
   const i = document.createElement("calcite-action-bar");
-  i.id = "filter-bar-controls", i.layout = "horizontal", i.expandDisabled = !0, i.appendChild(s);
+  i.id = "filter-bar-controls", i.layout = "horizontal", i.expandDisabled = !0, i.appendChild(d);
   const n = document.createElement("div");
   return n.id = "filter-bar", o.appendChild(n), n.appendChild(i), e;
 }
-function ae(o, t) {
+function se(o, t) {
   const e = document.createElement("calcite-action");
-  e.icon = "reset", e.id = "showHideGrayedOutButton";
-  const a = document.createElement("calcite-tooltip");
-  a.id = "resetButtonTooltip", a.innerHTML = t.reset, a.overlayPositioning = "fixed", a.placement = "bottom", a.referenceElement = e.id;
-  const s = document.createElement("calcite-action");
-  s.icon = "zoom-to-object", s.id = "centerButton";
+  e.icon = "reset", e.id = "showHideGrayedOutButton", e.text = t.reset;
+  const r = document.createElement("calcite-tooltip");
+  r.id = "resetButtonTooltip", r.innerHTML = t.reset, r.overlayPositioning = "fixed", r.placement = "bottom", r.referenceElement = e.id;
+  const d = document.createElement("calcite-action");
+  d.icon = "zoom-to-object", d.id = "centerButton", d.text = t.centerDiagram;
   const i = document.createElement("calcite-tooltip");
-  i.id = "centerButtonTooltip", i.innerHTML = t.centerDiagram, i.overlayPositioning = "fixed", i.placement = "bottom", i.referenceElement = s.id;
+  i.id = "centerButtonTooltip", i.innerHTML = t.centerDiagram, i.overlayPositioning = "fixed", i.placement = "bottom", i.referenceElement = d.id;
   const n = document.createElement("calcite-action");
-  n.icon = "plus", n.id = "zoomInButton";
-  const r = document.createElement("calcite-tooltip");
-  r.id = "zoomInButtonTooltip", r.innerHTML = t.zoomIn, r.overlayPositioning = "fixed", r.placement = "bottom", r.referenceElement = n.id;
-  const c = document.createElement("calcite-action");
-  c.appearance = "solid", c.icon = "minus", c.id = "zoomOutButton";
+  n.icon = "plus", n.id = "zoomInButton", n.text = t.zoomIn;
+  const a = document.createElement("calcite-tooltip");
+  a.id = "zoomInButtonTooltip", a.innerHTML = t.zoomIn, a.overlayPositioning = "fixed", a.placement = "bottom", a.referenceElement = n.id;
+  const l = document.createElement("calcite-action");
+  l.appearance = "solid", l.icon = "minus", l.id = "zoomOutButton", l.text = t.zoomOut;
   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(a), l.appendChild(s), l.appendChild(i), l.appendChild(n), l.appendChild(r), 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 };
+  h.id = "zoomOutButtonTooltip", h.innerHTML = t.zoomOut, h.overlayPositioning = "fixed", h.placement = "bottom", h.referenceElement = l.id;
+  const c = document.createElement("calcite-action-bar");
+  c.id = "graph-navigation-controls", c.layout = "horizontal", c.expandDisabled = !0, c.appendChild(e), c.appendChild(r), c.appendChild(d), c.appendChild(i), c.appendChild(n), c.appendChild(a), c.appendChild(l), c.appendChild(h);
+  const v = document.createElement("div");
+  return v.id = "graph-navigation-bar", o.appendChild(v), v.appendChild(c), { resetButton: e, centerButton: d, zoomInButton: n, zoomOutButton: l };
 }
-function re(o, t) {
+function de(o, t) {
   let e = o;
   if (o === "Feature Service") {
-    const a = t.indexOf("View Service") > -1, s = t.indexOf("Table") > -1;
-    e = a && s ? "Table (hosted, view)" : s ? "Table (hosted)" : a ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+    const r = t.indexOf("View Service") > -1, d = t.indexOf("Table") > -1;
+    e = r && d ? "Table (hosted, view)" : d ? "Table (hosted)" : r ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
   }
   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(o) {
+function le(o) {
   o.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
 }
-function p(o) {
+function g(o) {
   const t = document.body;
   return getComputedStyle(t).getPropertyValue(o).trim();
 }
-function se(o, t) {
+function ce(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), a = parseInt(o.slice(2, 4), 16), s = parseInt(o.slice(4, 6), 16);
-  return `rgba(${e}, ${a}, ${s}, ${t})`;
+  const e = parseInt(o.slice(0, 2), 16), r = parseInt(o.slice(2, 4), 16), d = parseInt(o.slice(4, 6), 16);
+  return `rgba(${e}, ${r}, ${d}, ${t})`;
 }
-const ce = 8, le = 15, he = ue("--calcite-color-brand"), me = 4;
-function ue(o) {
+const he = 8, me = 15;
+let f = "";
+const ue = 4;
+function pe(o) {
   const t = document.documentElement;
   return getComputedStyle(t).getPropertyValue(o).trim();
 }
-class pe {
+class ge {
   /**
    * Creates a new instance of the SolutionDisplay class.
    * @param indexPanel The Calcite panel element to use as the index panel.
@@ -378,8 +386,8 @@ class pe {
    *     <calcite-panel id='diagramPanel' style='display:flex;'/>
    *   </calcite-shell>
    */
-  constructor(t, e, a, s) {
-    this.indexPanel = t, this.diagramPanel = e, this.diagramTranslations = a, this.diagramKey = s, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = !1, this.usefilteredView = !1, this.handle_clickInDiagram = (i) => {
+  constructor(t, e, r, d) {
+    this.indexPanel = t, this.diagramPanel = e, this.diagramTranslations = r, this.diagramKey = d, 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();
@@ -393,7 +401,7 @@ class pe {
       i.stopImmediatePropagation();
       const n = i.detail.itemId;
       this.redraw(n, n === this.currentSelectedItemId || n === this.currentSelectedGroupId, !1);
-    }, d.Diagram.licenseKey === "" && (d.Diagram.licenseKey = s ?? "");
+    }, s.Diagram.licenseKey === "" && (s.Diagram.licenseKey = d ?? "");
   }
   /**
    * Creates the index and diagram for the given collection of template info.
@@ -402,7 +410,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 = Q(t), this.diagram = J(
+    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 = X(t), this.diagram = U(
       this.diagramPanel,
       this.allNodesAndLinks,
       this.diagramTranslations
@@ -410,7 +418,7 @@ class pe {
       setTimeout(() => {
         this.diagram.zoomToFit();
       }, 1e3);
-    }), 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);
+    }), s.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.
@@ -425,29 +433,29 @@ class pe {
    */
   clearSelections(t = !0) {
     this.index.deselectAll(), t && this.index.collapseAll();
-    const e = this.getNodesFromDiagram(this.diagram), a = e.map((s) => s.data.key);
-    L(a, e, !1, this.diagramNodeHighlighterIndex);
+    const e = this.getNodesFromDiagram(this.diagram), r = e.map((d) => d.data.key);
+    L(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 = {}, this.getNodesFromDiagram(this.diagram).forEach((e) => {
+    this.diagramNodeIndex = {}, this.diagramNodeHighlighterIndex = {}, f || (f = pe("--calcite-color-brand") || f), this.getNodesFromDiagram(this.diagram).forEach((e) => {
       this.diagramNodeIndex[e.data.key] = e;
-      const a = new d.Adornment("Auto", {
+      const r = new s.Adornment("Auto", {
         background: "transparent",
         margin: 2
       });
-      a.add(new d.Shape("RoundedRectangle", {
+      r.add(new s.Shape("RoundedRectangle", {
         fill: "transparent",
-        parameter1: ce,
-        parameter2: le,
-        stroke: he,
-        strokeWidth: me
-      })), a.add(new d.Placeholder({
+        parameter1: he,
+        parameter2: me,
+        stroke: f,
+        strokeWidth: ue
+      })), r.add(new s.Placeholder({
         margin: 1
-      })), this.diagramNodeHighlighterIndex[e.data.key] = a;
+      })), this.diagramNodeHighlighterIndex[e.data.key] = r;
     });
   }
   /**
@@ -465,9 +473,9 @@ class pe {
    * @returns Array of nodes in the diagram
    */
   getNodesFromDiagram(t) {
-    const e = [], a = t.nodes.iterator;
-    for (; a.next(); )
-      e.push(a.value);
+    const e = [], r = t.nodes.iterator;
+    for (; r.next(); )
+      e.push(r.value);
     return e;
   }
   /**
@@ -476,20 +484,20 @@ class pe {
    * @param toggleSelection Whether to toggle the selection state of the item
    * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index
    */
-  redraw(t = "", e = !1, a = !0) {
-    const s = this.allNodesAndLinks.groupPseudoNodes.includes(t);
+  redraw(t = "", e = !1, r = !0) {
+    const d = this.allNodesAndLinks.groupPseudoNodes.includes(t);
     this.diagramNeedsRedraw && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.diagramNeedsRedraw = !1);
     let i = !1;
-    if (this.clearSelections(a), !!t) {
-      if (s) {
+    if (this.clearSelections(r), !!t) {
+      if (d) {
         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 n = this.collection.filter((c) => c.id === t)[0], r = n.dependencies.map((c) => this.diagramNodeIndex[c]);
+          const n = this.collection.filter((l) => l.id === t)[0], a = n.dependencies.map((l) => this.diagramNodeIndex[l]);
           if (this.usefilteredView) {
-            const c = r.map((h) => h.data);
-            m(this.diagram, { nodes: c, links: [] });
+            const l = a.map((h) => h.data);
+            m(this.diagram, { nodes: l, links: [] });
           } else
-            L(n.dependencies, r, !0, this.diagramNodeHighlighterIndex);
+            L(n.dependencies, a, !0, this.diagramNodeHighlighterIndex);
           this.index.selectItem(this.currentSelectedGroupId);
         }
       } else {
@@ -499,13 +507,13 @@ class pe {
           return;
         if (this.currentSelectedItemId) {
           if (this.usefilteredView) {
-            const r = E(n);
-            r.connectedNodes.add(n);
-            const c = Array.from(r.connectedNodes).map((l) => l.data), h = Array.from(r.connectedLinks).map((l) => l.data);
-            if (m(this.diagram, { nodes: c, links: h }), this.createNodeHighlighters(), n = this.getNodeById(t), !n)
+            const a = E(n);
+            a.connectedNodes.add(n);
+            const l = Array.from(a.connectedNodes).map((c) => c.data), h = Array.from(a.connectedLinks).map((c) => c.data);
+            if (m(this.diagram, { nodes: l, links: h }), this.createNodeHighlighters(), n = this.getNodeById(t), !n)
               return;
           }
-          n && setTimeout(() => U(n, !0, this.diagramNodeHighlighterIndex[t]), 1), this.index.selectItem(this.currentSelectedItemId);
+          n && setTimeout(() => ee(n, !0, this.diagramNodeHighlighterIndex[t]), 1), this.index.selectItem(this.currentSelectedItemId);
         }
       }
       i && this.reset();
@@ -518,34 +526,28 @@ class pe {
     this.diagramNeedsRedraw = !1, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.clearSelections();
   }
 }
-class ge extends $ {
+class fe extends A {
   constructor() {
-    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = k(), this._diagramShell = k(), this._translations = z({ name: "solution-item-diagram", blocking: !0 });
+    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = b(), this._diagramShell = b(), this._translations = B({ name: "solution-item-diagram", blocking: !0 }), this._pendingCreate = !1;
   }
   static {
     this.properties = { diagramKey: 1, templateInfoGraph: 0, typeKeywords: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
   }
   static {
-    this.styles = P;
+    this.styles = V;
   }
-  updated() {
-    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 pe(this._diagramShell.value, this._diagramPanel.value, t, this.diagramKey), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
+  updated(t) {
+    if (!(t.has("templateInfoGraph") || t.has("typeKeywords") || t.has("diagramKey"))) {
+      requestAnimationFrame(() => this._preventDiagramScrollbars());
+      return;
     }
-    requestAnimationFrame(() => this._preventDiagramScrollbars());
+    this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0), this.templateInfoGraph.length > 0 && (this._pendingCreate = !0, this._scheduleCreate()), requestAnimationFrame(() => this._preventDiagramScrollbars());
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0);
+    super.disconnectedCallback(), this._sizeObserver && (this._sizeObserver.disconnect(), this._sizeObserver = void 0), this._pendingCreate = !1, this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0);
   }
   render() {
-    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>`;
+    return O`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${T(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${T(this._diagramPanel)}></calcite-panel></calcite-shell>`;
   }
   _preventDiagramScrollbars() {
     if (!this._diagramPanel.value)
@@ -556,8 +558,42 @@ class ge extends $ {
     const e = t.querySelector(".content-wrapper");
     e instanceof HTMLElement && (e.style.overflow = "hidden");
   }
+  _scheduleCreate() {
+    const t = this._diagramPanel.value, e = this._diagramShell.value;
+    if (!t || !e) {
+      requestAnimationFrame(() => this._scheduleCreate());
+      return;
+    }
+    const r = (d) => {
+      const i = d.getBoundingClientRect();
+      return i.width > 0 && i.height > 0;
+    };
+    if (r(t)) {
+      this._buildSolutionDisplay();
+      return;
+    }
+    this._sizeObserver && this._sizeObserver.disconnect(), this._sizeObserver = new ResizeObserver(() => {
+      this._pendingCreate && r(t) && (this._sizeObserver?.disconnect(), this._sizeObserver = void 0, this._buildSolutionDisplay());
+    }), this._sizeObserver.observe(t);
+  }
+  _buildSolutionDisplay() {
+    if (!this._pendingCreate)
+      return;
+    this._pendingCreate = !1;
+    const t = this._diagramShell.value, e = this._diagramPanel.value;
+    if (!t || !e)
+      return;
+    const r = {
+      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 ge(t, e, r, this.diagramKey), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
+  }
 }
-B("solution-item-diagram", ge);
+D("solution-item-diagram", fe);
 export {
-  ge as SolutionItemDiagram
+  fe as SolutionItemDiagram
 };