@esri/solutions-components 1.2.0-next.3 → 1.2.0-next.31

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

@@ -1,15 +1,15 @@
-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 r from "gojs";
-import { g as D } from "../../chunks/getItemIcon.js";
+import { c as b } from "../../chunks/runtime.js";
+import { css as E, html as B } from "lit";
+import { u as D } from "../../chunks/useT9n.js";
+import { LitElement as C } from "@arcgis/lumina";
+import { createRef as y, ref as w } from "lit-html/directives/ref.js";
+import * as d from "gojs";
+import { g as z } from "../../chunks/getItemIcon.js";
 import { injectGlobal as A } from "@emotion/css";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.3 */
-const P = b`/** @license
+v1.2.0-next.31 */
+const $ = E`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,7 +23,7 @@ const P = b`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */#filter-bar{background-color:#f4f4f4;position:absolute;top:16px;right:220px;z-index:100}#filteredViewButtonDiv{padding:16px 16px 4px}#graph-navigation-bar{background-color:#f4f4f4;position:absolute;top:16px;right:16px;z-index:100}#graph-navigation-controls{position:absolute;top:0;right:0}.z-index-1{z-index:1}`;
+ */#filter-bar{background-color:#f4f4f4;position:absolute;top:16px;right:220px;z-index:100}#filteredViewButtonDiv{padding:16px 16px 4px}#graph-navigation-bar{background-color:#f4f4f4;position:absolute;top:16px;right:16px;z-index:100}#graph-navigation-controls{position:absolute;top:0;right:0}.z-index-1{z-index:1}#diagram-panel{--calcite-panel-space: 0px}#diagram-shell-panel{--calcite-color-background: var(--calcite-color-foreground-1);padding:16px}`;
 /** @license
  *
  * Copyright 2018 Esri
@@ -42,52 +42,52 @@ const P = b`/** @license
  *
  * email: contracts@esri.com
  */
-const $ = 15, H = 15, O = 10, p = new r.Size(220, 48), V = 1, _ = 8, k = new r.Size(48, 48), G = new r.Size(16, 16), I = new r.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", S = "#4a4a4a", N = "#6a6a6a", j = "#ffffff", u = 1, x = 0.3, f = 1, L = 0.2, Y = 1;
+const P = 15, O = 15, H = 10, p = new d.Size(220, 48), V = 1, _ = 8, k = new d.Size(48, 48), G = new d.Size(16, 16), I = new d.Size(153, 17), R = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', F = '700 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', M = "#f4f4f4", K = "#cacaca", W = "#ffffff", S = "#4a4a4a", N = "#6a6a6a", j = "#ffffff", u = 1, x = 0.3, f = 1, L = 0.2, Y = 1;
 function Z(a) {
   const t = document.createElement("div");
   t.style.width = "100%", t.style.height = "100%", a.appendChild(t);
-  const e = new r.Diagram(
+  const e = new d.Diagram(
     t,
     // create a Diagram for the HTML Div element
     {
       click: ie,
       // handle diagram clicks
-      contentAlignment: r.Spot.Center,
+      contentAlignment: d.Spot.Center,
       // align document to the center of the viewport
       dragSelectingTool: null,
       // disable drag selection
       hoverDelay: 50,
       // milliseconds before mouse-hover displays information
-      initialAutoScale: r.AutoScale.Uniform,
+      initialAutoScale: d.AutoScale.Uniform,
       // automatic zoom-to-fit
-      layout: new r.LayeredDigraphLayout({
-        columnSpacing: $,
-        layerSpacing: H
+      layout: new d.LayeredDigraphLayout({
+        columnSpacing: P,
+        layerSpacing: O
       }),
-      padding: O,
-      scrollMode: r.ScrollMode.Infinite,
+      padding: H,
+      scrollMode: d.ScrollMode.Infinite,
       // allow infinite scrolling--beyond document bounds
       "toolManager.hoverDelay": 50,
       // 50 milliseconds before tooltip appears
-      "toolManager.mouseWheelBehavior": r.WheelMode.Zoom
+      "toolManager.mouseWheelBehavior": d.WheelMode.Zoom
       // mouse wheel zooms instead of scrolls vertically
     }
   );
-  e.nodeTemplate = new r.Node("Auto", {
+  e.nodeTemplate = new d.Node("Auto", {
     click: ne,
     movable: !1,
     opacity: u,
-    toolTip: new r.Adornment("Auto", {
+    toolTip: new d.Adornment("Auto", {
       isShadowed: !0,
-      margin: new r.Margin(12, 16, 6, 16),
+      margin: new d.Margin(12, 16, 6, 16),
       // top, right, bottom, left
       padding: 0,
       shadowBlur: 16,
       shadowColor: "rgba(0, 0, 0, 0.16)",
-      shadowOffset: new r.Point(0, 0)
-    }).add(new r.Panel("Vertical", { background: j, margin: 0 }).add(new r.TextBlock({ margin: 14 }).bind("text", "title")))
+      shadowOffset: new d.Point(0, 0)
+    }).add(new d.Panel("Vertical", { background: j, margin: 0 }).add(new d.TextBlock({ margin: 14 }).bind("text", "title")))
   }).bind("text", "title").add(
-    new r.Shape({
+    new d.Shape({
       desiredSize: p,
       fill: W,
       geometryString: te(
@@ -105,70 +105,70 @@ function Z(a) {
     })
   ).add(
     // Node content
-    new r.Panel("Horizontal", {
-      alignment: r.Spot.Left,
-      stretch: r.Stretch.Horizontal
+    new d.Panel("Horizontal", {
+      alignment: d.Spot.Left,
+      stretch: d.Stretch.Horizontal
     }).add(
       // Icon panel
-      new r.Panel("Horizontal", {
-        alignment: r.Spot.Left,
+      new d.Panel("Horizontal", {
+        alignment: d.Spot.Left,
         desiredSize: k,
         margin: 1
       }).add(
-        new r.Panel("Horizontal", {
-          alignment: r.Spot.Center,
+        new d.Panel("Horizontal", {
+          alignment: d.Spot.Center,
           margin: 16
         }).add(
-          new r.Picture({
+          new d.Picture({
             desiredSize: G
-          }).bind("source", "", (n) => D(n.itemType, n.itemTypeKeywords))
+          }).bind("source", "", (n) => z(n.itemType, n.itemTypeKeywords))
         )
       ),
       // Label
-      new r.Panel("Horizontal", {
-        alignment: r.Spot.Right,
-        margin: new r.Margin(4, 8, 0, 8)
+      new d.Panel("Horizontal", {
+        alignment: d.Spot.Right,
+        margin: new d.Margin(4, 8, 0, 8)
         // top, right, bottom, left
       }).add(
-        new r.Panel("Vertical", {}).add(
+        new d.Panel("Vertical", {}).add(
           // First line
-          new r.TextBlock({
-            alignment: r.Spot.Left,
+          new d.TextBlock({
+            alignment: d.Spot.Left,
             desiredSize: I,
-            font: R,
-            overflow: r.TextOverflow.Ellipsis,
+            font: F,
+            overflow: d.TextOverflow.Ellipsis,
             stroke: S,
-            wrap: r.Wrap.None
+            wrap: d.Wrap.None
           }).bind("text", "title"),
           // Second line
-          new r.TextBlock({
-            alignment: r.Spot.Left,
+          new d.TextBlock({
+            alignment: d.Spot.Left,
             desiredSize: I,
-            font: M,
-            overflow: r.TextOverflow.Ellipsis,
+            font: R,
+            overflow: d.TextOverflow.Ellipsis,
             stroke: S,
-            wrap: r.Wrap.None
+            wrap: d.Wrap.None
           }).bind("text", "itemTypeForDisplay")
         )
       )
     )
-  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(F);
-  const d = e.toolManager.clickSelectingTool;
-  d.standardMouseSelect = function() {
+  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(M);
+  const r = e.toolManager.clickSelectingTool;
+  r.standardMouseSelect = function() {
   };
   const s = e.toolManager.draggingTool;
-  return s.isEnabled = !1, e.linkTemplate = new r.Link({
+  return s.isEnabled = !1, e.linkTemplate = new d.Link({
     corner: 5,
     movable: !1,
-    routing: r.Routing.Orthogonal,
+    routing: d.Routing.Orthogonal,
     selectable: !1
   }).add(
-    new r.Shape({
+    new d.Shape({
       // the link path shape
       opacity: f,
       stroke: N
     }),
-    new r.Shape({
+    new d.Shape({
       // the 'to' arrowhead
       fill: N,
       opacity: f,
@@ -178,13 +178,13 @@ function Z(a) {
   ), e;
 }
 function m(a, t) {
-  a.model = new r.GraphLinksModel(t.nodes, t.links, {
+  a.model = new d.GraphLinksModel(t.nodes, t.links, {
     linkFromPortIdProperty: "fromPort",
     linkToPortIdProperty: "toPort"
   });
 }
-function U(a, t, e, d = !0) {
-  if (d) {
+function U(a, t, e, r = !0) {
+  if (r) {
     const c = oe(a, e);
     c.addEventListener(
       "calciteSwitchChange",
@@ -196,21 +196,21 @@ function U(a, t, e, d = !0) {
 }
 function q(a, t, e) {
   se();
-  const d = Z(a);
-  return m(d, t), U(a, d, e), d;
+  const r = Z(a);
+  return m(r, t), U(a, r, e), r;
 }
 function T(a) {
   const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
-  function d(n) {
+  function r(n) {
     n.findLinksInto().each(
       (i) => {
         e.add(i);
         const o = i.fromNode;
-        o && !t.has(o) && (t.add(o), d(o));
+        o && !t.has(o) && (t.add(o), r(o));
       }
     );
   }
-  d(a);
+  r(a);
   function s(n) {
     n.findLinksOutOf().each(
       (i) => {
@@ -223,12 +223,12 @@ function T(a) {
   return s(a), { connectedNodes: t, connectedLinks: e };
 }
 function J(a, t = !1, e) {
-  const d = [], s = a.map((i) => {
+  const r = [], s = a.map((i) => {
     if (i.type !== "Group") {
       const o = ee(i);
       return X(i, o, t, e);
     } else {
-      d.push(i.id);
+      r.push(i.id);
       return;
     }
   }).filter((i) => i !== void 0), n = [];
@@ -237,19 +237,19 @@ function J(a, t = !1, e) {
       const h = s.find((l) => l?.itemId === c);
       h && n.push({
         from: h.key,
-        fromSpot: r.Spot.AllSides,
+        fromSpot: d.Spot.AllSides,
         to: i.key,
-        toSpot: r.Spot.AllSides
+        toSpot: d.Spot.AllSides
       });
     });
-  }), { nodes: s, links: n, groupPseudoNodes: d };
+  }), { nodes: s, links: n, groupPseudoNodes: r };
 }
-function Q(a, t, e, d = !0) {
+function Q(a, t, e, r = !0) {
   const s = a.diagram;
   if (!s)
     return;
   const n = {};
-  if (d) {
+  if (r) {
     for (const i of s.nodes)
       n[i.key] = i === a ? u : x;
     for (const i of s.links) {
@@ -266,8 +266,8 @@ function Q(a, t, e, d = !0) {
       }
     }
   }
-  if (e && (e.adornedObject = a), d) {
-    const i = new r.Animation();
+  if (e && (e.adornedObject = a), r) {
+    const i = new d.Animation();
     i.duration = 1;
     for (const o of s.nodes)
       i.add(o, "opacity", o.opacity, n[o.key]);
@@ -278,7 +278,7 @@ function Q(a, t, e, d = !0) {
     i.start();
   }
 }
-function v(a, t, e, d, s = !0) {
+function v(a, t, e, r, s = !0) {
   if (a.length === 0)
     return;
   const n = t[0].diagram;
@@ -295,10 +295,10 @@ function v(a, t, e, d, s = !0) {
       i[c] = e ? L : f;
     }
   }
-  if (Object.keys(d).forEach((o) => {
-    d[o].adornedObject = null;
+  if (Object.keys(r).forEach((o) => {
+    r[o].adornedObject = null;
   }), s) {
-    const o = new r.Animation();
+    const o = new d.Animation();
     o.duration = 1;
     for (const c of n.nodes)
       o.add(c, "opacity", c.opacity, i[c.key]);
@@ -309,7 +309,7 @@ function v(a, t, e, d, s = !0) {
     o.start();
   }
 }
-function X(a, t, e = !1, d) {
+function X(a, t, e = !1, r) {
   return {
     key: t,
     title: a.title,
@@ -318,33 +318,33 @@ function X(a, t, e = !1, d) {
     itemTypeForDisplay: re(a.type, a.typeKeywords),
     itemTypeKeywords: a.typeKeywords,
     group: a.type,
-    url: e ? `${d}?id=${a.id}` : void 0
+    url: e ? `${r}?id=${a.id}` : void 0
   };
 }
 function ee(a) {
   return a.id;
 }
-function te(a, t, e, d = 0, s = !1) {
+function te(a, t, e, r = 0, s = !1) {
   let n = "";
   s && (n += "F");
   const i = a - 2 * e, o = t - 2 * e;
-  return n += " M0 0", n += ` h${i}`, n += ` a${e} ${e} 0 0 1 ${e} ${e}`, n += ` v${o}`, n += ` a${e} ${e} 0 0 1 ${-e} ${e}`, n += ` h${-i}`, n += ` a${e} ${e} 0 0 1 ${-e} ${-e}`, n += ` v${-o}`, n += ` a${e} ${e} 0 0 1 ${e} ${-e}`, d > 0 && (n += ` M${d - e} 0 v${t}`), n;
+  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"));
 }
 function ne(a, t) {
   const e = t.part;
-  e instanceof r.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: e })));
+  e instanceof d.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: e })));
 }
 function oe(a, t) {
   const e = document.createElement("calcite-switch");
   e.id = "filteredViewButton", e.label = t.filteredView;
-  const d = document.createElement("calcite-label");
-  d.id = "filteredViewButtonLabel", d.setAttribute("layout", "inline"), d.innerHTML = t.filteredView, d.appendChild(e);
+  const r = document.createElement("calcite-label");
+  r.id = "filteredViewButtonLabel", r.setAttribute("layout", "inline"), r.innerHTML = t.filteredView, r.appendChild(e);
   const s = document.createElement("div");
-  s.id = "filteredViewButtonDiv", s.appendChild(d);
-  const n = document.createElement("calcite-action-pad");
+  s.id = "filteredViewButtonDiv", s.appendChild(r);
+  const n = document.createElement("calcite-action-bar");
   n.id = "filter-bar-controls", n.layout = "horizontal", n.expandDisabled = !0, n.appendChild(s);
   const i = document.createElement("div");
   return i.id = "filter-bar", a.appendChild(i), i.appendChild(n), e;
@@ -352,8 +352,8 @@ function oe(a, t) {
 function ae(a, t) {
   const e = document.createElement("calcite-action");
   e.icon = "reset", e.id = "showHideGrayedOutButton";
-  const d = document.createElement("calcite-tooltip");
-  d.id = "resetButtonTooltip", d.innerHTML = t.reset, d.overlayPositioning = "fixed", d.placement = "bottom", d.referenceElement = e.id;
+  const r = document.createElement("calcite-tooltip");
+  r.id = "resetButtonTooltip", r.innerHTML = t.reset, r.overlayPositioning = "fixed", r.placement = "bottom", r.referenceElement = e.id;
   const s = document.createElement("calcite-action");
   s.icon = "zoom-to-object", s.id = "centerButton";
   const n = document.createElement("calcite-tooltip");
@@ -366,16 +366,16 @@ function ae(a, t) {
   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(d), l.appendChild(s), l.appendChild(n), l.appendChild(i), l.appendChild(o), l.appendChild(c), l.appendChild(h);
+  const l = document.createElement("calcite-action-bar");
+  l.id = "graph-navigation-controls", l.layout = "horizontal", l.expandDisabled = !0, l.appendChild(e), l.appendChild(r), l.appendChild(s), l.appendChild(n), l.appendChild(i), l.appendChild(o), l.appendChild(c), l.appendChild(h);
   const g = document.createElement("div");
   return g.id = "graph-navigation-bar", a.appendChild(g), g.appendChild(l), { resetButton: e, centerButton: s, zoomInButton: i, zoomOutButton: c };
 }
 function re(a, t) {
   let e = a;
   if (a === "Feature Service") {
-    const d = t.indexOf("View Service") > -1, s = t.indexOf("Table") > -1;
-    e = d && s ? "Table (hosted, view)" : s ? "Table (hosted)" : d ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+    const r = t.indexOf("View Service") > -1, s = t.indexOf("Table") > -1;
+    e = r && s ? "Table (hosted, view)" : s ? "Table (hosted)" : r ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
   }
   return a === "Web Mapping Application" && (e = t.indexOf("configurableApp") > -1 ? "Instant App" : e), e = a === "Geoprocessing Service" ? "Tool" : e, e = a === "Feed" ? "Feed (hosted)" : e, e = a === "Real Time Analytic" ? "Real Time Analytic (hosted)" : e, e = a === "Big Data Analytic" ? "Big Data Analytic (hosted)" : e, e = a === "Vector Tile Service" ? "Tile Layer" : e, e;
 }
@@ -427,7 +427,6 @@ function se() {
  * email: contracts@esri.com
  */
 const ce = 8, le = 15, he = "#1e90ff", me = 4;
-r.Diagram.licenseKey = "";
 class pe {
   /**
    * Creates a new instance of the SolutionDisplay class.
@@ -441,8 +440,8 @@ class pe {
    *     <calcite-panel id='diagramPanel' style='display:flex;'/>
    *   </calcite-shell>
    */
-  constructor(t, e, d, s) {
-    this.indexPanel = t, this.diagramPanel = e, this.diagramTranslations = d, this.diagramKey = s, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = !1, this.usefilteredView = !1, this.handle_clickInDiagram = (n) => {
+  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();
@@ -456,7 +455,7 @@ class pe {
       n.stopImmediatePropagation();
       const i = n.detail.itemId;
       this.redraw(i, i === this.currentSelectedItemId || i === this.currentSelectedGroupId, !1);
-    }, this.indexPanel.innerHTML = "", this.diagramPanel.innerHTML = "", r.Diagram.licenseKey === "" && (r.Diagram.licenseKey = s);
+    }, d.Diagram.licenseKey === "" && (d.Diagram.licenseKey = s ?? "");
   }
   /**
    * Creates the index and diagram for the given collection of template info.
@@ -473,7 +472,7 @@ class pe {
       setTimeout(() => {
         this.diagram.zoomToFit();
       }, 1e3);
-    }), r.Link.setRoutingParameter(44, 600942), this.createNodeHighlighters(), document.addEventListener("clickInDiagram", this.handle_clickInDiagram), document.addEventListener("clickOnNode", this.handle_clickOnNode), document.addEventListener("filteredViewChanged", this.handle_filteredViewChanged), document.addEventListener("reset", this.handle_reset), this.index.addEventListener("solutionItemSelect", this.handle_solutionItemSelect);
+    }), d.Link.setRoutingParameter(44, 600942), this.createNodeHighlighters(), document.addEventListener("clickInDiagram", this.handle_clickInDiagram), document.addEventListener("clickOnNode", this.handle_clickOnNode), document.addEventListener("filteredViewChanged", this.handle_filteredViewChanged), document.addEventListener("reset", this.handle_reset), this.index.addEventListener("solutionItemSelect", this.handle_solutionItemSelect);
   }
   /**
    * Destroys the index and diagram; removes all event listeners.
@@ -488,8 +487,8 @@ class pe {
    */
   clearSelections(t = !0) {
     this.index.deselectAll(), t && this.index.collapseAll();
-    const e = this.getNodesFromDiagram(this.diagram), d = e.map((s) => s.data.key);
-    v(d, e, !1, this.diagramNodeHighlighterIndex);
+    const e = this.getNodesFromDiagram(this.diagram), r = e.map((s) => s.data.key);
+    v(r, e, !1, this.diagramNodeHighlighterIndex);
   }
   /**
    * Creates indicies into the diagram's nodes and node highlighters.
@@ -498,19 +497,19 @@ class pe {
   createNodeHighlighters() {
     this.diagramNodeIndex = {}, this.diagramNodeHighlighterIndex = {}, this.getNodesFromDiagram(this.diagram).forEach((e) => {
       this.diagramNodeIndex[e.data.key] = e;
-      const d = new r.Adornment("Auto", {
+      const r = new d.Adornment("Auto", {
         background: "transparent",
         margin: 2
       });
-      d.add(new r.Shape("RoundedRectangle", {
+      r.add(new d.Shape("RoundedRectangle", {
         fill: "transparent",
         parameter1: ce,
         parameter2: le,
         stroke: he,
         strokeWidth: me
-      })), d.add(new r.Placeholder({
+      })), r.add(new d.Placeholder({
         margin: 1
-      })), this.diagramNodeHighlighterIndex[e.data.key] = d;
+      })), this.diagramNodeHighlighterIndex[e.data.key] = r;
     });
   }
   /**
@@ -528,9 +527,9 @@ class pe {
    * @returns Array of nodes in the diagram
    */
   getNodesFromDiagram(t) {
-    const e = [], d = t.nodes.iterator;
-    for (; d.next(); )
-      e.push(d.value);
+    const e = [], r = t.nodes.iterator;
+    for (; r.next(); )
+      e.push(r.value);
     return e;
   }
   /**
@@ -539,11 +538,11 @@ 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, d = !0) {
+  redraw(t = "", e = !1, r = !0) {
     const s = this.allNodesAndLinks.groupPseudoNodes.includes(t);
     this.diagramNeedsRedraw && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.diagramNeedsRedraw = !1);
     let n = !1;
-    if (this.clearSelections(d), !!t) {
+    if (this.clearSelections(r), !!t) {
       if (s) {
         if (this.currentSelectedItemId = "", this.currentSelectedGroupId !== t ? this.currentSelectedGroupId = t : e && (this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : t, n = this.usefilteredView && !this.currentSelectedGroupId), this.currentSelectedGroupId) {
           this.usefilteredView && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters());
@@ -581,18 +580,18 @@ class pe {
     this.diagramNeedsRedraw = !1, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.clearSelections();
   }
 }
-class ue extends z {
+class ue extends C {
   constructor() {
-    super(...arguments), this.diagramKey = "", 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 = y(), this._diagramShell = y(), this._translations = D({ name: "solution-item-diagram", blocking: !0 });
   }
   static {
     this.properties = { diagramKey: 1, templateInfoGraph: 0, typeKeywords: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
   }
   static {
-    this.styles = P;
+    this.styles = $;
   }
   updated() {
-    if (this.templateInfoGraph.length > 0) {
+    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,
@@ -603,11 +602,14 @@ class ue extends z {
       this.solutionDisplay = new pe(this._diagramShell.value, this._diagramPanel.value, t, this.diagramKey), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
     }
   }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0);
+  }
   render() {
-    return B`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${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>`;
+    return B`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${w(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${w(this._diagramPanel)}></calcite-panel></calcite-shell>`;
   }
 }
-E("solution-item-diagram", ue);
+b("solution-item-diagram", ue);
 export {
   ue as SolutionItemDiagram
 };

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

@@ -4,7 +4,7 @@ import { LitElement as n, nothing as e } from "@arcgis/lumina";
 import { g as o } from "../../chunks/getItemIcon.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.3 */
+v1.2.0-next.31 */
 const r = i`/** @license
  * Copyright 2025 Esri
  *

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

@@ -5,7 +5,7 @@ import { css as h, html as a, nothing as o } from "lit";
 import { LitElement as p } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.3 */
+v1.2.0-next.31 */
 const d = h`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-organization-variables/customElement.js

@@ -4,7 +4,7 @@ import { css as n, html as a } from "lit";
 import { LitElement as o, createEvent as l } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.3 */
+v1.2.0-next.31 */
 const c = n`/** @license
  * Copyright 2025 Esri
  *

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

@@ -0,0 +1,37 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+
+export declare class SolutionResourceCard extends LitElement {
+    /**
+     * The date the resource or blog was published
+     *
+     * @default ''
+     */
+    date: string;
+    /**
+     * The heading of the resource or blog
+     *
+     * @default ''
+     */
+    heading: string;
+    /**
+     * The href for the resource or blog content
+     *
+     * @default ''
+     */
+    href: string;
+    /**
+     * The image url for the resource or blog
+     *
+     * @default ''
+     */
+    src: string;
+    /**
+     * The type...resource or blog
+     *
+     * @default 'resource'
+     */
+    type: 'resource' | 'blog';
+    /** Emitted on demand when the card is selected. */
+    readonly resourceCardSelected: TargetedEvent<this, string>;
+}

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

@@ -0,0 +1,49 @@
+import { c as i } from "../../chunks/runtime.js";
+import { css as s, html as t } from "lit";
+import { u as a } from "../../chunks/useT9n.js";
+import { LitElement as r, createEvent as o, nothing as e } from "@arcgis/lumina";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/1.2/esri/copyright.txt for details.
+v1.2.0-next.31 */
+const n = s`/** @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.
+ */.padding-1-2{padding:.5rem}.padding-bottom-1{padding-bottom:1rem}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-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:border-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%}.info-icon{--calcite-icon-color: var(--calcite-color-text-inverse);padding-inline-end:.3rem}.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}`;
+class c extends r {
+  constructor() {
+    super(...arguments), this._translations = a({ name: "solution-resource-card", blocking: !0 }), this.date = "", this.heading = "", this.href = "", this.src = "", this.type = "resource", this.resourceCardSelected = o();
+  }
+  static {
+    this.properties = { _translations: 16, date: 1, heading: 1, href: 1, src: 1, type: 1 };
+  }
+  static {
+    this.styles = n;
+  }
+  render() {
+    return this.type === "resource" ? this._getArcticleCard() : this._getBlogCard();
+  }
+  _getArcticleCard() {
+    return t`<calcite-card @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img alt=${this.heading ?? e} class="thumbnail card-image" src=${this.src ?? e}><div class="hover-text">${this._translations.viewResource}</div></div><span class="padding-1-2" slot=heading>${this.heading}</span></calcite-card>`;
+  }
+  _getBlogCard() {
+    return t`<calcite-card><div class="card-image-wrap" slot=thumbnail><img alt=${this.heading ?? e} class="thumbnail card-image" src=${this.src ?? e}><div class="hover-text">${this._translations.viewBlog}</div></div><span class="padding-bottom-1" slot=heading>${this.heading}</span><span slot=description>${this.date}</span><div slot=footer-start><calcite-link .href=${this.href} icon-end=launch-2>${this._translations.readThisBlog}</calcite-link></div></calcite-card>`;
+  }
+  _cardSelected() {
+    this.resourceCardSelected.emit(this.href);
+  }
+}
+i("solution-resource-card", c);
+export {
+  c as SolutionResourceCard
+};