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