@esri/solutions-components 1.1.0-next.20250922 → 1.1.0-next.20250925

package/dist/components/solution-configure-titles/customElement.js

@@ -10,7 +10,7 @@ import { updateGroup as L, updateItem as w } from "@esri/solution-common";
 import { h as f } from "../../chunks/helpers.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const E = C`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-contents/customElement.js

@@ -3,7 +3,7 @@ import { css as a, html as r, nothing as c } from "lit";
 import { LitElement as l, createEvent as d, noShadowRoot as o } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const h = a`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-delete-dialog/customElement.js

@@ -10,7 +10,7 @@ import { p as U } from "../../chunks/prepareDataForSolutionDisplay.js";
 import { createRef as A, ref as _ } from "lit-html/directives/ref.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const L = C`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-deploy-dialog/customElement.js

@@ -11,7 +11,7 @@ import { f as C, v as G, i as M, j as F } from "../../chunks/helpers.js";
 import { a as I } from "../../chunks/appConfig.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const R = b`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-deployed-card/customElement.d.ts

@@ -15,6 +15,12 @@ export declare class SolutionDeployedCard extends LitElement {
     deployedDate: string;
     /** @default '' */
     description: string;
+    /**
+     * Digram license key to use view the diagram
+     *
+     * @default ''
+     */
+    diagramKey: string;
     /** @default '' */
     heading: string;
     /** @default '' */

package/dist/components/solution-deployed-card/customElement.js

@@ -8,7 +8,7 @@ import { p as u } from "../../chunks/prepareDataForSolutionDisplay.js";
 import { createRef as o, ref as s } from "lit-html/directives/ref.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const m = p`/** @license
  * Copyright 2025 Esri
  *
@@ -26,7 +26,7 @@ const m = p`/** @license
  */calcite-card{width:295px;height:100%;padding-bottom:2px}@media (max-width: 400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(20%);filter:brightness(20%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:content-box;cursor:pointer}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%;font-size:1.2rem}.card-image-wrap{flex:0 0 auto}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}.width-full{width:100%}.deployed-label-override{--calcite-label-text-color: var(--calcite-color-text-3);--calcite-label-margin-bottom: 0px}.svg-color{fill:var(--calcite-color-text-3)}.padding-end-1-2{padding-inline-end:.5rem}.padding-bottom-1-2{padding-bottom:.5rem}.display-flex{display:flex}.flex-direction-column{flex-direction:column}.align-items-center{align-items:center}.font-weight-400,.font-weight-normal{font-weight:400}.font-color-text-2{--calcite-label-text-color: var(--calcite-color-text-2)}.font-line-height{line-height:1.4}.font-size-size--1{font-size:var(--calcite-font-size--1)}.icon-brand-color{--calcite-icon-color: var(--calcite-color-brand)}.header-line-height{--calcite-label-margin-bottom: 0;margin-top:.5rem;margin-bottom:.7rem}.dialog-y-size{--calcite-dialog-size-y: 90% }.dialog-x-size{--calcite-dialog-size-x: 90% }.justify-content-space-between{justify-content:space-between}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-foreground-1);--calcite-panel-background-color: var(--calcite-color-foreground-1)}.cursor-default{cursor:default}`;
 class f extends c {
   constructor() {
-    super(...arguments), this.allowDelete = !1, this.deployedDate = "", this.description = "", this.heading = "", this.itemId = "", this.owner = "", this.thumbnail = "", this.updateAvailable = !1, this.templateInfos = [], this._isConfigureOpen = !1, this._isDeleteOpen = !1, this._isDiagramOpen = !1, this.templateInfoGraph = [], this._configureTitlesOpen = !1, this._translations = r({ name: "solution-deployed-card", blocking: !0 }), this._authContextConsumer = l({
+    super(...arguments), this.allowDelete = !1, this.deployedDate = "", this.description = "", this.diagramKey = "", this.heading = "", this.itemId = "", this.owner = "", this.thumbnail = "", this.updateAvailable = !1, this.templateInfos = [], this._isConfigureOpen = !1, this._isDeleteOpen = !1, this._isDiagramOpen = !1, this.templateInfoGraph = [], this._configureTitlesOpen = !1, this._translations = r({ name: "solution-deployed-card", blocking: !0 }), this._authContextConsumer = l({
       context: d,
       subscribe: !0
     }), this._configureDialogRef = o(), this._deleteDialogRef = o(), this._diagramDialogRef = o(), this._userSessionContextConsumer = l({
@@ -35,7 +35,7 @@ class f extends c {
     });
   }
   static {
-    this.properties = { allowDelete: 5, card: 0, deployedDate: 1, description: 1, heading: 1, itemId: 1, owner: 1, thumbnail: 1, updateAvailable: 5, templateInfos: 0, cardRef: 0, _isConfigureOpen: 16, _isDeleteOpen: 16, _isDiagramOpen: 16, templateInfoGraph: 16, _configureTitlesOpen: 16, _translations: 16 };
+    this.properties = { allowDelete: 5, card: 0, deployedDate: 1, description: 1, diagramKey: 1, heading: 1, itemId: 1, owner: 1, thumbnail: 1, updateAvailable: 5, templateInfos: 0, cardRef: 0, _isConfigureOpen: 16, _isDeleteOpen: 16, _isDiagramOpen: 16, templateInfoGraph: 16, _configureTitlesOpen: 16, _translations: 16 };
   }
   static {
     this.styles = m;
@@ -88,7 +88,7 @@ class f extends c {
   _renderDiagramDialog() {
     return this._isDiagramOpen ? t`<calcite-dialog class="dialog-y-size dialog-x-size panel-bg-color" .heading=${this._translations.diagramTitle.replace("{{solution}}", this.card?.title ?? "")} id=${this._translations.diagramTitle.replace("{{solution}}", this.card?.title ?? "") ?? i} modal .open=${this._isDiagramOpen} @calciteDialogClose=${() => {
       this._isDiagramOpen = !1;
-    }} outside-close-disabled resizable scale=l width=l ${s(this._diagramDialogRef)}><solution-item-diagram .templateInfoGraph=${this.templateInfoGraph} .typeKeywords=${this.card?.typeKeywords}></solution-item-diagram></calcite-dialog>` : "";
+    }} outside-close-disabled resizable scale=l width=l ${s(this._diagramDialogRef)}><solution-item-diagram .diagramKey=${this.diagramKey} .templateInfoGraph=${this.templateInfoGraph} .typeKeywords=${this.card?.typeKeywords}></solution-item-diagram></calcite-dialog>` : "";
   }
   _renderConfigureDialog() {
     return t`<solution-configure-dialog .card=${this.card} .cardRef=${this.el} @solutionConfigureDialogClose=${() => {

package/dist/components/solution-deploying-dialog/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as c } from "@arcgis/lumina";
 import { createRef as r, ref as h } from "lit-html/directives/ref.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const d = s`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-details-card/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as n, createEvent as d, nothing as a, safeClassMap as h } fr
 import { b as p } from "../../chunks/cardsHelpers.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const m = r`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-details-panel/customElement.js

@@ -11,7 +11,7 @@ import { _findExistingItem as I } from "@esri/solution-deployer";
 import { g as A, a as E } from "../../chunks/common.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const D = w`/** @license
  * Copyright 2025 Esri
  *

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

@@ -5,7 +5,7 @@ import { css as l, html as i } from "lit";
 import { LitElement as n, noShadowRoot as c, safeStyleMap as a } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const r = l`@layer{/** @license
  * Copyright 2025 Esri
  *

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

@@ -4,7 +4,7 @@ import { css as d, html as n, nothing as p } from "lit";
 import { LitElement as h, createEvent as l } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const m = d`/** @license
  * Copyright 2025 Esri
  *

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

@@ -6,7 +6,7 @@ import { createRef as a, ref as s } from "lit-html/directives/ref.js";
 import { LitElement as c, noShadowRoot as h } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
+v1.1.0-next.20250925 */
 const p = m`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-item-diagram/customElement.d.ts

@@ -3,6 +3,12 @@ import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/
 import { ITemplateInfoGraph } from './utils/solutionGraph';
 
 export declare class SolutionItemDiagram extends LitElement {
+    /**
+     * Digram license key to use view the diagram
+     *
+     * @default ''
+     */
+    diagramKey: string;
     /** Array of solution items to generate the diagram */
     templateInfoGraph: ITemplateInfoGraph[];
     /** Array of the solution items type keywords */

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

@@ -1,15 +1,15 @@
-import { c as b } from "../../chunks/runtime.js";
-import { css as E, html as B } from "lit";
+import { c as E } from "../../chunks/runtime.js";
+import { css as b, html as B } from "lit";
 import { u as C } from "../../chunks/useT9n.js";
 import { LitElement as z } from "@arcgis/lumina";
 import { createRef as w, ref as y } from "lit-html/directives/ref.js";
 import * as d from "gojs";
-import { g as A } from "../../chunks/getItemIcon.js";
-import { injectGlobal as D } from "@emotion/css";
+import { g as D } from "../../chunks/getItemIcon.js";
+import { injectGlobal as A } from "@emotion/css";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250922 */
-const P = E`/** @license
+v1.1.0-next.20250925 */
+const P = b`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -42,7 +42,7 @@ const P = E`/** @license
  *
  * email: contracts@esri.com
  */
-const $ = 15, H = 15, O = 10, p = new d.Size(220, 48), V = 1, _ = 8, I = new d.Size(48, 48), G = new d.Size(16, 16), S = new d.Size(153, 17), M = '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", K = "#ffffff", k = "#4a4a4a", N = "#6a6a6a", j = "#ffffff", u = 1, x = 0.3, g = 1, L = 0.2, Y = 1;
+const $ = 15, H = 15, O = 10, p = new d.Size(220, 48), V = 1, _ = 8, I = new d.Size(48, 48), G = new d.Size(16, 16), S = new d.Size(153, 17), M = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', R = '700 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', F = "#f4f4f4", K = "#cacaca", W = "#ffffff", k = "#4a4a4a", N = "#6a6a6a", j = "#ffffff", u = 1, x = 0.3, f = 1, L = 0.2, Y = 1;
 function Z(a) {
   const t = document.createElement("div");
   t.style.width = "100%", t.style.height = "100%", a.appendChild(t);
@@ -89,7 +89,7 @@ function Z(a) {
   }).bind("text", "title").add(
     new d.Shape({
       desiredSize: p,
-      fill: K,
+      fill: W,
       geometryString: te(
         p.width,
         p.height,
@@ -99,7 +99,7 @@ function Z(a) {
       ),
       height: p.height,
       portId: "",
-      stroke: W,
+      stroke: K,
       strokeWidth: V,
       width: p.width
     })
@@ -121,7 +121,7 @@ function Z(a) {
         }).add(
           new d.Picture({
             desiredSize: G
-          }).bind("source", "", (i) => A(i.itemType, i.itemTypeKeywords))
+          }).bind("source", "", (n) => D(n.itemType, n.itemTypeKeywords))
         )
       ),
       // Label
@@ -165,13 +165,13 @@ function Z(a) {
   }).add(
     new d.Shape({
       // the link path shape
-      opacity: g,
+      opacity: f,
       stroke: N
     }),
     new d.Shape({
       // the 'to' arrowhead
       fill: N,
-      opacity: g,
+      opacity: f,
       stroke: null,
       toArrow: "Standard"
     })
@@ -191,8 +191,8 @@ function U(a, t, e, r = !0) {
       () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: c.checked }))
     );
   }
-  const { resetButton: s, centerButton: i, zoomInButton: n, zoomOutButton: o } = ae(a, e);
-  s.addEventListener("click", () => de(t)), i.addEventListener("click", () => t.zoomToFit()), n.addEventListener("click", () => t.commandHandler.increaseZoom()), o.addEventListener("click", () => t.commandHandler.decreaseZoom());
+  const { resetButton: s, centerButton: n, zoomInButton: i, zoomOutButton: o } = ae(a, e);
+  s.addEventListener("click", () => de(t)), n.addEventListener("click", () => t.zoomToFit()), i.addEventListener("click", () => t.commandHandler.increaseZoom()), o.addEventListener("click", () => t.commandHandler.decreaseZoom());
 }
 function q(a, t, e) {
   se();
@@ -201,21 +201,21 @@ function q(a, t, e) {
 }
 function T(a) {
   const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
-  function r(i) {
-    i.findLinksInto().each(
-      (n) => {
-        e.add(n);
-        const o = n.fromNode;
+  function r(n) {
+    n.findLinksInto().each(
+      (i) => {
+        e.add(i);
+        const o = i.fromNode;
         o && !t.has(o) && (t.add(o), r(o));
       }
     );
   }
   r(a);
-  function s(i) {
-    i.findLinksOutOf().each(
-      (n) => {
-        e.add(n);
-        const o = n.toNode;
+  function s(n) {
+    n.findLinksOutOf().each(
+      (i) => {
+        e.add(i);
+        const o = i.toNode;
         o && !t.has(o) && (t.add(o), s(o));
       }
     );
@@ -223,76 +223,76 @@ function T(a) {
   return s(a), { connectedNodes: t, connectedLinks: e };
 }
 function J(a, t = !1, e) {
-  const r = [], s = a.map((n) => {
-    if (n.type !== "Group") {
-      const o = ee(n);
-      return X(n, o, t, e);
+  const r = [], s = a.map((i) => {
+    if (i.type !== "Group") {
+      const o = ee(i);
+      return X(i, o, t, e);
     } else {
-      r.push(n.id);
+      r.push(i.id);
       return;
     }
-  }).filter((n) => n !== void 0), i = [];
-  return s.forEach((n) => {
-    (a.find((c) => c.id === n.itemId)?.dependencies || []).forEach((c) => {
+  }).filter((i) => i !== void 0), n = [];
+  return s.forEach((i) => {
+    (a.find((c) => c.id === i.itemId)?.dependencies || []).forEach((c) => {
       const h = s.find((l) => l?.itemId === c);
-      h && i.push({
+      h && n.push({
         from: h.key,
         fromSpot: d.Spot.AllSides,
-        to: n.key,
+        to: i.key,
         toSpot: d.Spot.AllSides
       });
     });
-  }), { nodes: s, links: i, groupPseudoNodes: r };
+  }), { nodes: s, links: n, groupPseudoNodes: r };
 }
 function Q(a, t, e, r = !0) {
   const s = a.diagram;
   if (!s)
     return;
-  const i = {};
+  const n = {};
   if (r) {
-    for (const n of s.nodes)
-      i[n.key] = n === a ? u : x;
-    for (const n of s.links) {
-      const o = `${n.fromNode?.key}-${n.toNode?.key}`;
-      i[o] = L;
+    for (const i of s.nodes)
+      n[i.key] = i === a ? u : x;
+    for (const i of s.links) {
+      const o = `${i.fromNode?.key}-${i.toNode?.key}`;
+      n[o] = L;
     }
     {
-      const { connectedNodes: n, connectedLinks: o } = T(a);
-      for (const c of n)
-        i[c.key] = u;
+      const { connectedNodes: i, connectedLinks: o } = T(a);
+      for (const c of i)
+        n[c.key] = u;
       for (const c of o) {
         const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-        i[h] = Y;
+        n[h] = Y;
       }
     }
   }
   if (e && (e.adornedObject = a), r) {
-    const n = new d.Animation();
-    n.duration = 1;
+    const i = new d.Animation();
+    i.duration = 1;
     for (const o of s.nodes)
-      n.add(o, "opacity", o.opacity, i[o.key]);
+      i.add(o, "opacity", o.opacity, n[o.key]);
     for (const o of s.links) {
       const c = `${o.fromNode?.key}-${o.toNode?.key}`;
-      n.add(o, "opacity", o.opacity, i[c]);
+      i.add(o, "opacity", o.opacity, n[c]);
     }
-    n.start();
+    i.start();
   }
 }
 function v(a, t, e, r, s = !0) {
   if (a.length === 0)
     return;
-  const i = t[0].diagram;
-  if (!i)
+  const n = t[0].diagram;
+  if (!n)
     return;
-  const n = {};
+  const i = {};
   if (s) {
-    for (const o of i.nodes) {
+    for (const o of n.nodes) {
       const c = a.includes(o.key);
-      n[o.key] = !e || c ? u : x;
+      i[o.key] = !e || c ? u : x;
     }
-    for (const o of i.links) {
+    for (const o of n.links) {
       const c = `${o.fromNode?.key}-${o.toNode?.key}`;
-      n[c] = e ? L : g;
+      i[c] = e ? L : f;
     }
   }
   if (Object.keys(r).forEach((o) => {
@@ -300,11 +300,11 @@ function v(a, t, e, r, s = !0) {
   }), s) {
     const o = new d.Animation();
     o.duration = 1;
-    for (const c of i.nodes)
-      o.add(c, "opacity", c.opacity, n[c.key]);
-    for (const c of i.links) {
+    for (const c of n.nodes)
+      o.add(c, "opacity", c.opacity, i[c.key]);
+    for (const c of n.links) {
       const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-      o.add(c, "opacity", c.opacity, n[h]);
+      o.add(c, "opacity", c.opacity, i[h]);
     }
     o.start();
   }
@@ -325,10 +325,10 @@ function ee(a) {
   return a.id;
 }
 function te(a, t, e, r = 0, s = !1) {
-  let i = "";
-  s && (i += "F");
-  const n = a - 2 * e, o = t - 2 * e;
-  return i += " M0 0", i += ` h${n}`, i += ` a${e} ${e} 0 0 1 ${e} ${e}`, i += ` v${o}`, i += ` a${e} ${e} 0 0 1 ${-e} ${e}`, i += ` h${-n}`, i += ` a${e} ${e} 0 0 1 ${-e} ${-e}`, i += ` v${-o}`, i += ` a${e} ${e} 0 0 1 ${e} ${-e}`, r > 0 && (i += ` M${r - e} 0 v${t}`), i;
+  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 ie() {
   document.dispatchEvent(new CustomEvent("clickInDiagram"));
@@ -344,10 +344,10 @@ function oe(a, t) {
   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 i = document.createElement("calcite-action-pad");
-  i.id = "filter-bar-controls", i.layout = "horizontal", i.expandDisabled = !0, i.appendChild(s);
-  const n = document.createElement("div");
-  return n.id = "filter-bar", a.appendChild(n), n.appendChild(i), e;
+  const n = document.createElement("calcite-action-pad");
+  n.id = "filter-bar-controls", n.layout = "horizontal", n.expandDisabled = !0, n.appendChild(s);
+  const i = document.createElement("div");
+  return i.id = "filter-bar", a.appendChild(i), i.appendChild(n), e;
 }
 function ae(a, t) {
   const e = document.createElement("calcite-action");
@@ -356,20 +356,20 @@ function ae(a, t) {
   r.id = "resetButtonTooltip", r.innerHTML = t.reset, r.overlayPositioning = "fixed", r.placement = "bottom", r.referenceElement = e.id;
   const s = document.createElement("calcite-action");
   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 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.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 = n.id;
+  o.id = "zoomInButtonTooltip", o.innerHTML = t.zoomIn, o.overlayPositioning = "fixed", o.placement = "bottom", o.referenceElement = i.id;
   const c = document.createElement("calcite-action");
   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-pad");
-  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(o), l.appendChild(c), l.appendChild(h);
-  const f = document.createElement("div");
-  return f.id = "graph-navigation-bar", a.appendChild(f), f.appendChild(l), { resetButton: e, centerButton: s, zoomInButton: n, zoomOutButton: c };
+  l.id = "graph-navigation-controls", l.layout = "horizontal", l.expandDisabled = !0, l.appendChild(e), l.appendChild(r), l.appendChild(s), l.appendChild(n), l.appendChild(i), l.appendChild(o), l.appendChild(c), l.appendChild(h);
+  const g = document.createElement("div");
+  return g.id = "graph-navigation-bar", a.appendChild(g), g.appendChild(l), { resetButton: e, centerButton: s, zoomInButton: i, zoomOutButton: c };
 }
 function re(a, t) {
   let e = a;
@@ -383,7 +383,7 @@ function de(a) {
   a.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
 }
 function se() {
-  D`
+  A`
     #filter-bar {
       background-color: #f4f4f4;
       position: absolute;
@@ -427,34 +427,36 @@ function se() {
  * email: contracts@esri.com
  */
 const ce = 8, le = 15, he = "#1e90ff", me = 4;
-d.Diagram.licenseKey = "298647e0b16f4fc702d90676423d6bf919a175639c841aa45d0412f3ed083d06329fef2851d38f9787af4efe187c90d1ddc06e219e49563fe531d3da13e1d1aab03774e5140b4589f31136c5ccaa2ca1ae2870e0d2b676a1df678bedebaa";
+d.Diagram.licenseKey = "";
 class pe {
   /**
    * 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.
+   * @param diagramTranslations Translation strings for the diagram.
+   * @param diagramKey The license to use for the diagram.
    * @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(t, e, r) {
-    this.indexPanel = t, this.diagramPanel = e, this.diagramTranslations = r, 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 i = s.detail.data.key;
+  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 = (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 i = s.detail.itemId;
+    }, 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.innerHTML = "", this.diagramPanel.innerHTML = "";
+    }, this.indexPanel.innerHTML = "", this.diagramPanel.innerHTML = "", d.Diagram.licenseKey === "" && (d.Diagram.licenseKey = s);
   }
   /**
    * Creates the index and diagram for the given collection of template info.
@@ -536,36 +538,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 i = !1;
+    let n = !1;
     if (this.clearSelections(r), !!t) {
       if (s) {
-        if (this.currentSelectedItemId = "", this.currentSelectedGroupId !== t ? this.currentSelectedGroupId = t : e && (this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : t, i = this.usefilteredView && !this.currentSelectedGroupId), this.currentSelectedGroupId) {
+        if (this.currentSelectedItemId = "", this.currentSelectedGroupId !== t ? this.currentSelectedGroupId = t : e && (this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : t, n = this.usefilteredView && !this.currentSelectedGroupId), this.currentSelectedGroupId) {
           this.usefilteredView && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters());
-          const n = this.collection.filter((c) => c.id === t)[0], o = n.dependencies.map((c) => this.diagramNodeIndex[c]);
+          const i = this.collection.filter((c) => c.id === t)[0], o = i.dependencies.map((c) => this.diagramNodeIndex[c]);
           if (this.usefilteredView) {
             const c = o.map((h) => h.data);
             m(this.diagram, { nodes: c, links: [] });
           } else
-            v(n.dependencies, o, !0, this.diagramNodeHighlighterIndex);
+            v(i.dependencies, o, !0, this.diagramNodeHighlighterIndex);
           this.index.selectItem(this.currentSelectedGroupId);
         }
       } else {
-        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))
+        this.currentSelectedGroupId = "", this.currentSelectedItemId !== t ? this.currentSelectedItemId = t : e && (this.currentSelectedItemId = this.currentSelectedItemId ? "" : t, n = this.usefilteredView && !this.currentSelectedItemId);
+        let i = this.getNodeById(t);
+        if ((!i || this.usefilteredView) && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), i = this.getNodeById(t), !i))
           return;
         if (this.currentSelectedItemId) {
           if (this.usefilteredView) {
-            const o = T(n);
-            o.connectedNodes.add(n);
+            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(), n = this.getNodeById(t), !n)
+            if (m(this.diagram, { nodes: c, links: h }), this.createNodeHighlighters(), i = this.getNodeById(t), !i)
               return;
           }
-          n && setTimeout(() => Q(n, !0, this.diagramNodeHighlighterIndex[t]), 1), this.index.selectItem(this.currentSelectedItemId);
+          i && setTimeout(() => Q(i, !0, this.diagramNodeHighlighterIndex[t]), 1), this.index.selectItem(this.currentSelectedItemId);
         }
       }
-      i && this.reset();
+      n && this.reset();
     }
   }
   /**
@@ -577,10 +579,10 @@ class pe {
 }
 class ue extends z {
   constructor() {
-    super(...arguments), this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = w(), this._diagramShell = w(), this._translations = C({ name: "solution-item-diagram", blocking: !0 });
+    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = w(), this._diagramShell = w(), this._translations = C({ name: "solution-item-diagram", blocking: !0 });
   }
   static {
-    this.properties = { templateInfoGraph: 0, typeKeywords: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
+    this.properties = { diagramKey: 1, templateInfoGraph: 0, typeKeywords: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
   }
   static {
     this.styles = P;
@@ -594,14 +596,14 @@ class ue extends z {
         zoomIn: this._translations.graphTranslations.zoomIn,
         zoomOut: this._translations.graphTranslations.zoomOut
       };
-      this.solutionDisplay = new pe(this._diagramShell.value, this._diagramPanel.value, t), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
+      this.solutionDisplay = new pe(this._diagramShell.value, this._diagramPanel.value, t, this.diagramKey), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
     }
   }
   render() {
     return B`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${y(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${y(this._diagramPanel)}></calcite-panel></calcite-shell>`;
   }
 }
-b("solution-item-diagram", ue);
+E("solution-item-diagram", ue);
 export {
   ue as SolutionItemDiagram
 };

package/dist/components/solution-item-diagram/utils/SolutionDisplay.d.ts

@@ -28,6 +28,7 @@ export declare class SolutionDisplay {
     protected indexPanel: HTMLCalciteShellPanelElement;
     protected diagramPanel: HTMLCalcitePanelElement;
     protected diagramTranslations: ISolutionGraphTranslations;
+    protected diagramKey: string;
     protected allNodesAndLinks: solutionGraph.INodesAndLinks;
     protected collection: ITemplateInfoGraph[];
     protected currentSelectedGroupId: string;
@@ -42,13 +43,15 @@ export declare class SolutionDisplay {
      * 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.
+     * @param diagramTranslations Translation strings for the diagram.
+     * @param diagramKey The license to use for the diagram.
      * @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(indexPanel: HTMLCalciteShellPanelElement, diagramPanel: HTMLCalcitePanelElement, diagramTranslations: ISolutionGraphTranslations);
+    constructor(indexPanel: HTMLCalciteShellPanelElement, diagramPanel: HTMLCalcitePanelElement, diagramTranslations: ISolutionGraphTranslations, diagramKey: string);
     /**
      * Creates the index and diagram for the given collection of template info.
      * @param collection The collection of template info to display.