@esri/solutions-components 1.0.0-next.20250618 → 1.0.0-next.20250623

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

@@ -0,0 +1,918 @@
+import { c as T } from "../../chunks/runtime.js";
+import { html as E } from "lit-html";
+import { u as B } from "../../chunks/useT9n.js";
+import { LitElement as D, noShadowRoot as C } from "@arcgis/lumina";
+import { createRef as y, ref as k } from "lit-html/directives/ref.js";
+import { css as A } from "@lit/reactive-element/css-tag.js";
+import * as c from "gojs";
+import { injectGlobal as P } from "@emotion/css";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/1.0/esri/copyright.txt for details.
+v1.0.0-next.20250623 */
+const $ = A`@layer{/** @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.
+ */}`;
+/** @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
+ */
+function z(r, i) {
+  const e = r.toLowerCase(), t = i || [], s = t.includes("Hosted Service");
+  switch (e.trim()) {
+    case "360 vr experience":
+      return "360vr";
+    case "3dtiles package":
+      return "3dtileslayerpackage";
+    case "3dtiles service":
+      return t.includes("3DObject") ? "3dobjecttileslayer" : t.includes("IntegratedMesh") ? "integratedmeshtileslayer" : "3dobjecttileslayer";
+    case "feature service":
+    case "feature collection":
+    case "kml":
+    case "wfs":
+      if (t.includes("IndoorPositioningDataService"))
+        return "indoorpositioningdataservice";
+      const n = t.includes("Spatiotemporal");
+      return t.includes("Table") ? n ? "spatiotemporaltable" : "table" : t.includes("Route Layer") ? "routelayer" : t.includes("Markup") ? "markup" : n ? "spatiotemporal" : t.includes("UtilityNetwork") ? "utilitynetwork" : s ? "featureshosted" : "features";
+    case "group":
+      return "group";
+    case "group layer":
+      return t.includes("Map") ? "layergroup2d" : t.includes("Scene") ? "layergroup3d" : "layergroup";
+    case "wmts":
+      return "maptiles";
+    case "map service":
+    case "wms":
+      return s || t.includes("Tiled") ? "maptiles" : "mapimages";
+    case "scene service":
+      return t.includes("Line") ? "sceneweblayerline" : t.includes("3DObject") ? "sceneweblayermultipatch" : t.includes("Point") ? "sceneweblayerpoint" : t.includes("IntegratedMesh") ? "sceneweblayermesh" : t.includes("PointCloud") ? "sceneweblayerpointcloud" : t.includes("Polygon") ? "sceneweblayerpolygon" : t.includes("Building") ? "sceneweblayerbuilding" : t.includes("Voxel") ? "sceneweblayervoxel" : "sceneweblayer";
+    case "image service":
+      return t.includes("Elevation 3D Layer") ? "elevationlayer" : t.includes("Tiled Imagery") ? "tiledimagerylayer" : "imagery";
+    case "stream service":
+      return "streamlayer";
+    case "video service":
+      return t.includes("Live Stream") ? "livestreamvideolayer" : "mediaservice";
+    case "vector tile service":
+      return "vectortile";
+    case "datastore catalog service":
+      return "datastorecollection";
+    case "geocoding service":
+      return "geocodeservice";
+    case "geoprocessing service":
+      return t.includes("Web Tool") ? "tool" : "layers";
+    case "geodata service":
+      return "geodataservice";
+    case "web map":
+    case "cityengine web scene":
+      return "maps";
+    case "web scene":
+      return t.includes("ViewingMode-Local") ? "webscenelocal" : "websceneglobal";
+    case "application":
+    case "web mapping application":
+    case "mobile application":
+    case "operation view":
+    case "desktop application":
+      return t.includes("configurableApp") ? "instantapps" : "apps";
+    case "map document":
+    case "map package":
+    case "published map":
+    case "scene document":
+    case "globe document":
+    case "basemap package":
+    case "mobile basemap package":
+    case "mobile map package":
+    case "project package":
+    case "project template":
+    case "pro map":
+    case "layout":
+      return "mapsgray";
+    case "layer":
+      return t.includes("ArcGIS Pro") ? "mapsgray" : "layersgray";
+    case "explorer map":
+      return t.indexOf("Explorer Document") ? "mapsgray" : t.includes("Explorer Mapping Application") ? "datafilesgray" : "mapsgray";
+    case "pro presentation":
+      return "propresentation";
+    case "api key":
+      return "key";
+    case "csv":
+      return "csv";
+    case "shapefile":
+      return "shapefile";
+    case "csv collection":
+      return "csvcollection";
+    case "media layer":
+      return "medialayer";
+    case "microsoft excel":
+      return "excel";
+    case "microsoft powerpoint":
+      return "powerpoint";
+    case "microsoft word":
+      return "word";
+    case "pdf":
+      return "pdf";
+    case "sqlite geodatabase":
+      return "sqlite";
+    case "administrative report":
+      return "report";
+    case "image":
+      return "image";
+    case "cad drawing":
+      return "cad";
+    case "service definition":
+    case "geojson":
+    case "netcdf":
+      return "data";
+    case "explorer add in":
+    case "desktop add in":
+    case "windows viewer add in":
+    case "windows viewer configuration":
+      return "appsgray";
+    case "arcgis pro add in":
+    case "arcgis pro configuration":
+      return "addindesktop";
+    case "rule package":
+    case "file geodatabase":
+    case "kml collection":
+    case "windows mobile package":
+    case "map template":
+    case "desktop application template":
+    case "gml":
+    case "arcpad package":
+    case "code sample":
+    case "document link":
+    case "earth configuration":
+    case "operations dashboard add in":
+    case "rules package":
+    case "workflow manager package":
+      return "datafilesgray";
+    case "form":
+      return t.includes("Survey123") ? "survey" : "datafilesgray";
+    case "network analysis service":
+    case "geometry service":
+    case "geoprocessing package":
+    case "locator package":
+    case "geoprocessing sample":
+    case "workflow manager service":
+      return "toolsgray";
+    case "layer package":
+    case "explorer layer":
+      return "layersgray";
+    case "scene package":
+      return "scenepackage";
+    case "mobile scene package":
+      return "mobilescenepackage";
+    case "tile package":
+    case "compact tile package":
+      return "tilepackage";
+    case "task file":
+      return "taskfile";
+    case "report template":
+      return "reporttemplate";
+    case "statistical data collection":
+      return "statisticaldatacollection";
+    case "analysis model":
+      return "geoprocessingmodel";
+    case "insights workbook":
+      return "workbook";
+    case "insights model":
+      return "insightsmodel";
+    case "insights page":
+      return "insightspage";
+    case "insights theme":
+      return "insightstheme";
+    case "hub initiative":
+      return "hubinitiative";
+    case "hub page":
+      return "hubpage";
+    case "hub event":
+      return "hubevent";
+    case "hub site application":
+      return "hubsite";
+    case "hub project":
+      return "hubproject";
+    case "relational database connection":
+      return "relationaldatabaseconnection";
+    case "image collection":
+      return "imagecollection";
+    case "style":
+      return t.includes("Dictionary") ? "dictionarystyle" : "style";
+    case "desktop style":
+      return "desktopstyle";
+    case "dashboard":
+      return "dashboard";
+    case "raster function template":
+      return "rasterprocessingtemplate";
+    case "vector tile package":
+      return "vectortilepackage";
+    case "ortho mapping project":
+      return "orthomappingproject";
+    case "ortho mapping template":
+      return "orthomappingtemplate";
+    case "solution":
+      return "solutions";
+    case "geopackage":
+      return "geopackage";
+    case "deep learning package":
+      return "deeplearningpackage";
+    case "real time analytic":
+      return "realtimeanalytics";
+    case "big data analytic":
+      return "bigdataanalytics";
+    case "feed":
+      return "feed";
+    case "excalibur imagery project":
+      return "excaliburimageryproject";
+    case "notebook":
+      return "notebook";
+    case "reality mapping project":
+      return "realitymappingproject";
+    case "storymap":
+      return t.includes("storymaptemplate") ? "storymapstemplate" : t.includes("storymapcollection") ? "storymapcollection" : t.includes("storymapbriefing") ? "storymapbriefing" : "storymap";
+    case "survey123 add in":
+      return "survey123addin";
+    case "mission":
+      return "mission";
+    case "mission report":
+      return "missionreport";
+    case "quickcapture project":
+      return "quickcaptureproject";
+    case "pro report":
+      return "proreport";
+    case "urban model":
+      return "urbanmodel";
+    case "urban project":
+      return "urbanproject";
+    case "web experience":
+      return "experiencebuilder";
+    case "web experience template":
+      return "webexperiencetemplate";
+    case "experience builder widget":
+      return "experiencebuilderwidget";
+    case "experience builder widget package":
+      return "experiencebuilderwidgetpackage";
+    case "workflow":
+      return "workflow";
+    case "insights script":
+      return "insightsscript";
+    case "kernel gateway connection":
+      return "kernelgatewayconnection";
+    case "hub initiative template":
+      return "hubinitiativetemplate";
+    case "storymap theme":
+      return "storymaptheme";
+    case "knowledge graph":
+      return "knowledgegraph";
+    case "knowledge studio project":
+      return "knowledgestudio";
+    case "knowledge graph layer":
+      return "knowledgegraphlayer";
+    case "native application":
+      return "nativeapp";
+    case "native application installer":
+      return "nativeappinstaller";
+    case "web link chart":
+      return "linkchart";
+    case "knowledge graph web investigation":
+      return "investigation";
+    case "ogcfeatureserver":
+      return "features";
+    case "pro project":
+      return "proproject";
+    case "insights workbook package":
+      return "insightsworkbookpackage";
+    case "apache parquet":
+      return "apacheparquet";
+    case "notebook code snippets":
+    case "notebook code snippet library":
+      return "notebookcodesnippets";
+    case "suitability model":
+      return "suitabilitymodel";
+    case "esri classifier definition":
+      return "classifierdefinition";
+    case "esri classification schema":
+      return "classificationschema";
+    case "insights data engineering workbook":
+      return "dataengineeringworkbook";
+    case "insights data engineering model":
+      return "dataengineeringmodel";
+    case "deep learning studio project":
+      return "deeplearningproject";
+    case "data store":
+      return "datastore";
+    case "data pipeline":
+      return "datapipeline";
+    default:
+      return t.includes("Document") ? "datafilesgray" : e.includes("service") ? "layers" : "maps";
+  }
+}
+/** @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 O = 15, H = 15, V = 10, m = new c.Size(220, 48), _ = 1, G = 8, w = new c.Size(48, 48), M = new c.Size(16, 16), b = new c.Size(153, 17), j = "400 0.75rem 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif", R = "700 0.75rem 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif", F = "#f4f4f4", W = "#cacaca", q = "#ffffff", v = "#4a4a4a", S = "#6a6a6a", U = "#ffffff", g = 1, N = 0.3, f = 1, x = 0.2, K = 1;
+function Y(r) {
+  const i = document.createElement("div");
+  i.style.width = "100%", i.style.height = "100%", r.appendChild(i);
+  const e = new c.Diagram(
+    i,
+    // create a Diagram for the HTML Div element
+    {
+      click: ne,
+      // handle diagram clicks
+      contentAlignment: c.Spot.Center,
+      // align document to the center of the viewport
+      dragSelectingTool: null,
+      // disable drag selection
+      hoverDelay: 50,
+      // milliseconds before mouse-hover displays information
+      initialAutoScale: c.AutoScale.Uniform,
+      // automatic zoom-to-fit
+      layout: new c.LayeredDigraphLayout({
+        columnSpacing: O,
+        layerSpacing: H
+      }),
+      padding: V,
+      scrollMode: c.ScrollMode.Infinite,
+      // allow infinite scrolling--beyond document bounds
+      "toolManager.hoverDelay": 50,
+      // 50 milliseconds before tooltip appears
+      "toolManager.mouseWheelBehavior": c.WheelMode.Zoom
+      // mouse wheel zooms instead of scrolls vertically
+    }
+  );
+  e.nodeTemplate = new c.Node("Auto", {
+    click: ae,
+    movable: !1,
+    opacity: g,
+    toolTip: new c.Adornment("Auto", {
+      isShadowed: !0,
+      margin: new c.Margin(12, 16, 6, 16),
+      // top, right, bottom, left
+      padding: 0,
+      shadowBlur: 16,
+      shadowColor: "rgba(0, 0, 0, 0.16)",
+      shadowOffset: new c.Point(0, 0)
+    }).add(new c.Panel("Vertical", { background: U, margin: 0 }).add(new c.TextBlock({ margin: 14 }).bind("text", "title")))
+  }).bind("text", "title").add(
+    new c.Shape({
+      desiredSize: m,
+      fill: q,
+      geometryString: ie(
+        m.width,
+        m.height,
+        G,
+        w.width,
+        !0
+      ),
+      height: m.height,
+      portId: "",
+      stroke: W,
+      strokeWidth: _,
+      width: m.width
+    })
+  ).add(
+    // Node content
+    new c.Panel("Horizontal", {
+      alignment: c.Spot.Left,
+      stretch: c.Stretch.Horizontal
+    }).add(
+      // Icon panel
+      new c.Panel("Horizontal", {
+        alignment: c.Spot.Left,
+        desiredSize: w,
+        margin: 1
+      }).add(
+        new c.Panel("Horizontal", {
+          alignment: c.Spot.Center,
+          margin: 16
+        }).add(
+          new c.Picture({
+            desiredSize: M
+          }).bind("source", "", (n) => se(n.itemType, n.itemTypeKeywords))
+        )
+      ),
+      // Label
+      new c.Panel("Horizontal", {
+        alignment: c.Spot.Right,
+        margin: new c.Margin(4, 8, 0, 8)
+        // top, right, bottom, left
+      }).add(
+        new c.Panel("Vertical", {}).add(
+          // First line
+          new c.TextBlock({
+            alignment: c.Spot.Left,
+            desiredSize: b,
+            font: R,
+            overflow: c.TextOverflow.Ellipsis,
+            stroke: v,
+            wrap: c.Wrap.None
+          }).bind("text", "title"),
+          // Second line
+          new c.TextBlock({
+            alignment: c.Spot.Left,
+            desiredSize: b,
+            font: j,
+            overflow: c.TextOverflow.Ellipsis,
+            stroke: v,
+            wrap: c.Wrap.None
+          }).bind("text", "itemTypeForDisplay")
+        )
+      )
+    )
+  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(F);
+  const t = e.toolManager.clickSelectingTool;
+  t.standardMouseSelect = function() {
+  };
+  const s = e.toolManager.draggingTool;
+  return s.isEnabled = !1, e.linkTemplate = new c.Link({
+    corner: 5,
+    movable: !1,
+    routing: c.Routing.Orthogonal,
+    selectable: !1
+  }).add(
+    new c.Shape({
+      // the link path shape
+      opacity: f,
+      stroke: S
+    }),
+    new c.Shape({
+      // the "to" arrowhead
+      fill: S,
+      opacity: f,
+      stroke: null,
+      toArrow: "Standard"
+    })
+  ), e;
+}
+function p(r, i) {
+  r.model = new c.GraphLinksModel(i.nodes, i.links, {
+    linkFromPortIdProperty: "fromPort",
+    linkToPortIdProperty: "toPort"
+  });
+}
+function Z(r, i, e, t = !0) {
+  if (t) {
+    const d = re(r, e);
+    d.addEventListener(
+      "calciteSwitchChange",
+      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: d.checked }))
+    );
+  }
+  const { resetButton: s, centerButton: n, zoomInButton: a, zoomOutButton: o } = oe(r, e);
+  s.addEventListener("click", () => de(i)), n.addEventListener("click", () => i.zoomToFit()), a.addEventListener("click", () => i.commandHandler.increaseZoom()), o.addEventListener("click", () => i.commandHandler.decreaseZoom());
+}
+function J(r, i, e) {
+  le();
+  const t = Y(r);
+  return p(t, i), Z(r, t, e), t;
+}
+function L(r) {
+  const i = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
+  function t(n) {
+    n.findLinksInto().each(
+      (a) => {
+        e.add(a);
+        const o = a.fromNode;
+        o && !i.has(o) && (i.add(o), t(o));
+      }
+    );
+  }
+  t(r);
+  function s(n) {
+    n.findLinksOutOf().each(
+      (a) => {
+        e.add(a);
+        const o = a.toNode;
+        o && !i.has(o) && (i.add(o), s(o));
+      }
+    );
+  }
+  return s(r), { connectedNodes: i, connectedLinks: e };
+}
+function Q(r, i = !1, e) {
+  const t = [], s = r.map((a) => {
+    if (a.type !== "Group") {
+      const o = te(a);
+      return ee(a, o, i, e);
+    } else {
+      t.push(a.id);
+      return;
+    }
+  }).filter((a) => a !== void 0), n = [];
+  return s.forEach((a) => {
+    (r.find((d) => d.id === a.itemId)?.dependencies || []).forEach((d) => {
+      const u = s.find((l) => l?.itemId === d);
+      u && n.push({
+        from: u.key,
+        fromSpot: c.Spot.AllSides,
+        to: a.key,
+        toSpot: c.Spot.AllSides
+      });
+    });
+  }), { nodes: s, links: n, groupPseudoNodes: t };
+}
+function X(r, i, e, t = !0) {
+  const s = r.diagram;
+  if (!s)
+    return;
+  const n = {};
+  if (t) {
+    for (const a of s.nodes)
+      n[a.key] = a === r ? g : N;
+    for (const a of s.links) {
+      const o = `${a.fromNode?.key}-${a.toNode?.key}`;
+      n[o] = x;
+    }
+    {
+      const { connectedNodes: a, connectedLinks: o } = L(r);
+      for (const d of a)
+        n[d.key] = g;
+      for (const d of o) {
+        const u = `${d.fromNode?.key}-${d.toNode?.key}`;
+        n[u] = K;
+      }
+    }
+  }
+  if (e && (e.adornedObject = r), t) {
+    const a = new c.Animation();
+    a.duration = 1;
+    for (const o of s.nodes)
+      a.add(o, "opacity", o.opacity, n[o.key]);
+    for (const o of s.links) {
+      const d = `${o.fromNode?.key}-${o.toNode?.key}`;
+      a.add(o, "opacity", o.opacity, n[d]);
+    }
+    a.start();
+  }
+}
+function I(r, i, e, t, s = !0) {
+  if (r.length === 0)
+    return;
+  const n = i[0].diagram;
+  if (!n)
+    return;
+  const a = {};
+  if (s) {
+    for (const o of n.nodes) {
+      const d = r.includes(o.key);
+      a[o.key] = !e || d ? g : N;
+    }
+    for (const o of n.links) {
+      const d = `${o.fromNode?.key}-${o.toNode?.key}`;
+      a[d] = e ? x : f;
+    }
+  }
+  if (Object.keys(t).forEach((o) => {
+    t[o].adornedObject = null;
+  }), s) {
+    const o = new c.Animation();
+    o.duration = 1;
+    for (const d of n.nodes)
+      o.add(d, "opacity", d.opacity, a[d.key]);
+    for (const d of n.links) {
+      const u = `${d.fromNode?.key}-${d.toNode?.key}`;
+      o.add(d, "opacity", d.opacity, a[u]);
+    }
+    o.start();
+  }
+}
+function ee(r, i, e = !1, t) {
+  return {
+    key: i,
+    title: r.title,
+    itemId: r.id,
+    itemType: r.type,
+    itemTypeForDisplay: ce(r.type, r.typeKeywords),
+    itemTypeKeywords: r.typeKeywords,
+    group: r.type,
+    url: e ? `${t}?id=${r.id}` : void 0
+  };
+}
+function te(r) {
+  return r.id;
+}
+function ie(r, i, e, t = 0, s = !1) {
+  let n = "";
+  s && (n += "F");
+  const a = r - 2 * e, o = i - 2 * e;
+  return n += " M0 0", n += ` h${a}`, n += ` a${e} ${e} 0 0 1 ${e} ${e}`, n += ` v${o}`, n += ` a${e} ${e} 0 0 1 -8 ${e}`, n += ` h${-a}`, n += ` a${e} ${e} 0 0 1 -8 -8`, n += ` v${-o}`, n += ` a${e} ${e} 0 0 1 ${e} -8`, t > 0 && (n += ` M${t - e} 0 v${i}`), n;
+}
+function ne() {
+  document.dispatchEvent(new CustomEvent("clickInDiagram"));
+}
+function ae(r, i) {
+  const e = i.part;
+  e instanceof c.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: e })));
+}
+function re(r, i) {
+  const e = document.createElement("calcite-switch");
+  e.id = "filteredViewButton", e.label = i.filteredView;
+  const t = document.createElement("calcite-label");
+  t.id = "filteredViewButtonLabel", t.setAttribute("layout", "inline"), t.innerHTML = i.filteredView, t.appendChild(e);
+  const s = document.createElement("div");
+  s.id = "filteredViewButtonDiv", s.appendChild(t);
+  const n = document.createElement("calcite-action-pad");
+  n.id = "filter-bar-controls", n.layout = "horizontal", n.expandDisabled = !0, n.appendChild(s);
+  const a = document.createElement("div");
+  return a.id = "filter-bar", r.appendChild(a), a.appendChild(n), e;
+}
+function oe(r, i) {
+  const e = document.createElement("calcite-action");
+  e.icon = "reset", e.id = "showHideGrayedOutButton";
+  const t = document.createElement("calcite-tooltip");
+  t.id = "resetButtonTooltip", t.innerHTML = i.reset, t.overlayPositioning = "fixed", t.placement = "bottom", t.referenceElement = e.id;
+  const s = document.createElement("calcite-action");
+  s.icon = "zoom-to-object", s.id = "centerButton";
+  const n = document.createElement("calcite-tooltip");
+  n.id = "centerButtonTooltip", n.innerHTML = i.centerDiagram, n.overlayPositioning = "fixed", n.placement = "bottom", n.referenceElement = s.id;
+  const a = document.createElement("calcite-action");
+  a.icon = "plus", a.id = "zoomInButton";
+  const o = document.createElement("calcite-tooltip");
+  o.id = "zoomInButtonTooltip", o.innerHTML = i.zoomIn, o.overlayPositioning = "fixed", o.placement = "bottom", o.referenceElement = a.id;
+  const d = document.createElement("calcite-action");
+  d.icon = "minus", d.id = "zoomOutButton";
+  const u = document.createElement("calcite-tooltip");
+  u.id = "zoomOutButtonTooltip", u.innerHTML = i.zoomOut, u.overlayPositioning = "fixed", u.placement = "bottom", u.referenceElement = d.id;
+  const l = document.createElement("calcite-action-pad");
+  l.id = "graph-navigation-controls", l.layout = "horizontal", l.expandDisabled = !0, l.appendChild(e), l.appendChild(t), l.appendChild(s), l.appendChild(n), l.appendChild(a), l.appendChild(o), l.appendChild(d), l.appendChild(u);
+  const h = document.createElement("div");
+  return h.id = "graph-navigation-bar", r.appendChild(h), h.appendChild(l), { resetButton: e, centerButton: s, zoomInButton: a, zoomOutButton: d };
+}
+function se(r, i) {
+  const e = z(r, i), t = new URL("../assets/item-icons/", import.meta.url).href;
+  return e === "group" ? `${t}/${e}16.png` : `${t}/${e}16.svg`;
+}
+function ce(r, i) {
+  let e = r;
+  if (r === "Feature Service") {
+    const t = i.indexOf("View Service") > -1, s = i.indexOf("Table") > -1;
+    e = t && s ? "Table (hosted, view)" : s ? "Table (hosted)" : t ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+  }
+  return r === "Web Mapping Application" && (e = i.indexOf("configurableApp") > -1 ? "Instant App" : e), e = r === "Geoprocessing Service" ? "Tool" : e, e = r === "Feed" ? "Feed (hosted)" : e, e = r === "Real Time Analytic" ? "Real Time Analytic (hosted)" : e, e = r === "Big Data Analytic" ? "Big Data Analytic (hosted)" : e, e = r === "Vector Tile Service" ? "Tile Layer" : e, e;
+}
+function de(r) {
+  r.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
+}
+function le() {
+  P`
+    #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;
+    }
+  `;
+}
+/** @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 ue = 8, pe = 15, me = "#1e90ff", ge = 4;
+c.Diagram.licenseKey = "298647e0b16f4fc702d90676423d6bf919a175639c841aa45d0412f3ed083d06329fef2851d38f9787af4efe187c90d1ddc06e219e49563fe531d3da13e1d1aab03774e5140b4589f31136c5ccaa2ca1ae2870e0d2b676a1df678bedebaa";
+class he {
+  /**
+   * Creates a new instance of the SolutionDisplay class.
+   * @param indexPanel The Calcite panel element to use as the index panel.
+   * @param diagramPanel The Calcite panel element to use as the diagram panel.
+   * @example <caption>Expected environment</caption>
+   *   <calcite-shell>
+   *     <calcite-shell-panel id="indexPanel" slot="panel-start" width-scale="m"/>
+   *     <calcite-panel id="diagramPanel" style="display:flex;"/>
+   *   </calcite-shell>
+   */
+  constructor(i, e, t) {
+    this.indexPanel = i, this.diagramPanel = e, this.diagramTranslations = t, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = !1, this.usefilteredView = !1, this.handle_clickInDiagram = (s) => {
+      s.stopImmediatePropagation(), (this.currentSelectedGroupId || this.currentSelectedItemId) && (this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = this.usefilteredView, this.redraw());
+    }, this.handle_clickOnNode = (s) => {
+      s.stopImmediatePropagation();
+      const n = s.detail.data.key;
+      this.redraw(n, n === this.currentSelectedItemId);
+    }, this.handle_filteredViewChanged = (s) => {
+      this.usefilteredView = s.detail, this.diagramNeedsRedraw = !!this.currentSelectedGroupId || !!this.currentSelectedItemId, this.redraw(this.currentSelectedItemId || this.currentSelectedGroupId);
+    }, this.handle_reset = (s) => {
+      s.stopImmediatePropagation(), this.reset();
+    }, this.handle_solutionItemSelect = (s) => {
+      s.stopImmediatePropagation();
+      const n = s.detail.itemId;
+      this.redraw(n, n === this.currentSelectedItemId || n === this.currentSelectedGroupId, !1);
+    }, this.indexPanel.innerHTML = "", this.diagramPanel.innerHTML = "";
+  }
+  /**
+   * Creates the index and diagram for the given collection of template info.
+   * @param collection The collection of template info to display.
+   * @returns A promise that resolves when the index and diagram have been created.
+   */
+  create(i) {
+    this.collection = i, this.index = document.createElement("solution-item-accordion"), this.index.listSelectionMode = "single", this.index.style.overflowY = "auto", this.indexPanel.appendChild(this.index), this.index.templateInfos = i, this.allNodesAndLinks = Q(i), this.diagram = J(
+      this.diagramPanel,
+      this.allNodesAndLinks,
+      this.diagramTranslations
+    ), 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 = "";
+  }
+  // ---------------------------------------------------------------------------------------------------------------- //
+  /**
+   * Clears all selections in the index and diagram.
+   * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index
+   */
+  clearSelections(i = !0) {
+    this.index.deselectAll(), i && this.index.collapseAll();
+    const e = this.getNodesFromDiagram(this.diagram), t = e.map((s) => s.data.key);
+    I(t, 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[e.data.key] = e;
+      const t = new c.Adornment("Auto", {
+        background: "transparent",
+        margin: 2
+      });
+      t.add(new c.Shape("RoundedRectangle", {
+        fill: "transparent",
+        parameter1: ue,
+        parameter2: pe,
+        stroke: me,
+        strokeWidth: ge
+      })), t.add(new c.Placeholder({
+        margin: 1
+      })), this.diagramNodeHighlighterIndex[e.data.key] = t;
+    });
+  }
+  /**
+   * Retrieves a node from the diagram by its id.
+   * @param diagram The diagram to search
+   * @param id Id of node to find
+   * @returns Node matching the given id, or undefined if not found
+   */
+  getNodeById(i) {
+    return this.diagramNodeIndex[i];
+  }
+  /**
+   * Retrieves all nodes from the diagram.
+   * @param diagram The diagram to search
+   * @returns Array of nodes in the diagram
+   */
+  getNodesFromDiagram(i) {
+    const e = [], t = i.nodes.iterator;
+    for (; t.next(); )
+      e.push(t.value);
+    return e;
+  }
+  /**
+   * Selects an item to highlight or unhighlight.
+   * @param id Id of selected item
+   * @param toggleSelection Whether to toggle the selection state of the item
+   * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index
+   */
+  redraw(i = "", e = !1, t = !0) {
+    const s = this.allNodesAndLinks.groupPseudoNodes.includes(i);
+    this.diagramNeedsRedraw && (p(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.diagramNeedsRedraw = !1);
+    let n = !1;
+    if (this.clearSelections(t), !!i) {
+      if (s) {
+        if (this.currentSelectedItemId = "", this.currentSelectedGroupId !== i ? this.currentSelectedGroupId = i : e && (this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : i, n = this.usefilteredView && !this.currentSelectedGroupId), this.currentSelectedGroupId) {
+          this.usefilteredView && (p(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters());
+          const a = this.collection.filter((d) => d.id === i)[0], o = a.dependencies.map((d) => this.diagramNodeIndex[d]);
+          if (this.usefilteredView) {
+            const d = o.map((u) => u.data);
+            p(this.diagram, { nodes: d, links: [] });
+          } else
+            I(a.dependencies, o, !0, this.diagramNodeHighlighterIndex);
+          this.index.selectItem(this.currentSelectedGroupId);
+        }
+      } else {
+        this.currentSelectedGroupId = "", this.currentSelectedItemId !== i ? this.currentSelectedItemId = i : e && (this.currentSelectedItemId = this.currentSelectedItemId ? "" : i, n = this.usefilteredView && !this.currentSelectedItemId);
+        let a = this.getNodeById(i);
+        if ((!a || this.usefilteredView) && (p(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), a = this.getNodeById(i), !a))
+          return;
+        if (this.currentSelectedItemId) {
+          if (this.usefilteredView) {
+            const o = L(a);
+            o.connectedNodes.add(a);
+            const d = Array.from(o.connectedNodes).map((l) => l.data), u = Array.from(o.connectedLinks).map((l) => l.data);
+            if (p(this.diagram, { nodes: d, links: u }), this.createNodeHighlighters(), a = this.getNodeById(i), !a)
+              return;
+          }
+          a && setTimeout(() => X(a, !0, this.diagramNodeHighlighterIndex[i]), 1), this.index.selectItem(this.currentSelectedItemId);
+        }
+      }
+      n && this.reset();
+    }
+  }
+  /**
+   * Clears all selections in the index and diagram.
+   */
+  reset() {
+    this.diagramNeedsRedraw = !1, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", p(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.clearSelections();
+  }
+}
+class fe extends D {
+  constructor() {
+    super(...arguments), this.templateInfoGraph = [], this._diagramPanel = y(), this._diagramShell = y(), this._translations = B({ name: "solution-item-diagram", blocking: !0 });
+  }
+  static {
+    this.properties = { templateInfoGraph: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
+  }
+  static {
+    this.styles = $;
+  }
+  static {
+    this.shadowRootOptions = C;
+  }
+  updated() {
+    if (this.templateInfoGraph.length > 0) {
+      const i = {
+        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 he(this._diagramShell.value, this._diagramPanel.value, i), this.solutionDisplay.create(this.templateInfoGraph);
+    }
+  }
+  render() {
+    return E`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${k(this._diagramShell)}></calcite-shell-panel><calcite-panel id=diagram-panel slot=panel-bottom ${k(this._diagramPanel)}></calcite-panel></calcite-shell>`;
+  }
+}
+T("solution-item-diagram", fe);
+export {
+  fe as SolutionItemDiagram
+};