@esri/solutions-components 5.1.0-next.94 → 5.1.0-next.96

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

@@ -5,14 +5,15 @@ import { LitElement as T, createEvent as m, safeClassMap as u } from "@arcgis/lu
 import { useContextConsumer as D } from "@arcgis/lumina/context";
 import { css as $, html as h } from "lit";
 import { I as P, T as b } from "../../chunks/interfaces.js";
-import { createRef as _, ref as p } from "lit-html/directives/ref.js";
+import { createRef as _, ref as c } from "lit-html/directives/ref.js";
 import { c as V } from "../../chunks/deployAppContexts.js";
 import * as w from "@esri/solution-common";
 import { updateGroup as x, updateItem as g, updateItemExtended as E } from "@esri/solution-common";
 import { v as C } from "../../chunks/validators.js";
 import { g as W } from "../../chunks/getRelatedInfos.js";
-const L = $`*[tabindex]:focus-visible{outline-style:solid!important;outline-width:2px!important;outline-color:var(--calcite-color-brand)!important;outline-offset:2px!important}.display-flex{display:flex}.display-none{display:none}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}.font-weight-medium{font-weight:var(--calcite-font-weight-medium)}.font-style-1{font-size:1rem;color:var(--calcite-color-text-2)}.margin-top-0{margin-top:0}.padding-top-20{padding-top:20px}.padding-bottom-2{padding-bottom:2rem}.padding-left-2{padding-left:2rem}.padding-right-2{padding-right:2rem}.padding-end-1{padding-inline-end:1rem}.padding-end-1-2{padding-inline-end:.5rem}.width-full{width:100%}.justify-content-space{justify-content:space-between}`;
-class N extends T {
+import { d as L } from "../../chunks/helpers.js";
+const N = $`*[tabindex]:focus-visible{outline-style:solid!important;outline-width:2px!important;outline-color:var(--calcite-color-brand)!important;outline-offset:2px!important}.display-flex{display:flex}.display-none{display:none}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}.font-weight-medium{font-weight:var(--calcite-font-weight-medium)}.font-style-1{font-size:1rem;color:var(--calcite-color-text-2)}.margin-top-0{margin-top:0}.padding-top-20{padding-top:20px}.padding-bottom-2{padding-bottom:2rem}.padding-left-2{padding-left:2rem}.padding-right-2{padding-right:2rem}.padding-end-1{padding-inline-end:1rem}.padding-end-1-2{padding-inline-end:.5rem}.width-full{width:100%}.justify-content-space{justify-content:space-between}`;
+class O extends T {
   constructor() {
     super(...arguments), this.open = !1, this.source = "Card Dropdown", this.solutionData = {}, this.templateInfos = [], this._saveDisabled = !1, this._displayTemplateInfos = [], this._hasNameLengthError = !1, this._nonSolutionDependencyItems = [], this._solutionItemsTitlesUpdating = !1, this._translations = v({ name: "solution-configure-titles", blocking: !0 }), this._configContextConsumer = D({
       context: V,
@@ -23,7 +24,7 @@ class N extends T {
     this.properties = { card: 0, open: 5, source: 1, solutionData: 1, templateInfos: 0, _saveDisabled: 16, _displayTemplateInfos: 16, _hasNameLengthError: 16, _nonSolutionDependencyItems: 16, _solutionItemsTitlesUpdating: 16, _translations: 16 };
   }
   static {
-    this.styles = L;
+    this.styles = N;
   }
   async willUpdate(e) {
     if (e.has("templateInfos") && (this._templateInfos = JSON.parse(JSON.stringify(this.templateInfos)), this._updateTemplates()), e.has("open")) {
@@ -50,12 +51,12 @@ class N extends T {
     }} .open=${this.open} outside-close-disabled width=l>${this._getPrefixSuffixControls()}${this._getAccordion()}${this._getDialogButtons()}</calcite-dialog>`;
   }
   _getPrefixSuffixControls() {
-    const e = C(this._prefixValue), i = this._hasNameLengthError && this._prefixValue.length > 0, a = e.errorType !== "special-character", t = !i, s = a ? "display-none" : "", n = t ? "display-none" : "", d = a && t ? "valid" : "invalid", c = C(this._suffixValue), l = this._hasNameLengthError && this._suffixValue.length > 0, o = c.errorType !== "special-character", r = !l, f = o ? "display-none" : "", I = r ? "display-none" : "", y = o && r ? "valid" : "invalid";
-    return this._saveDisabled = !a || !t || !o || !r || !this._hasChanges(), h`<div class="display-flex flex-direction-column padding-left-2 padding-right-2 padding-top-20"><calcite-label scale=l class="font-weight-medium"><span tabindex=0>${this._translations.configureTitlesDialogHeader}</span></calcite-label><p class="font-style-1 margin-top-0" tabindex=0>${this._translations.addPrefixOrSuffixToItems}</p><div class="display-flex flex-direction-row justify-content-space"><calcite-label class="width-full padding-end-1" scale=l>${this._translations.prefixToAddToItems}<calcite-input clearable @blur=${this._prefixInput} @input=${this._prefixInput} .placeholder=${this._translations.enterPrefixPlaceholder} .status=${d} .value=${this._prefixValue} ${p(this._prefixRef)}></calcite-input><calcite-input-message class=${u(s)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixCharsError}</calcite-input-message><calcite-input-message class=${u(n)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixLengthError}</calcite-input-message></calcite-label><calcite-label class="width-full" scale=l>${this._translations.suffixToAddToItems}<calcite-input clearable @blur=${this._suffixInput} @input=${this._suffixInput} .placeholder=${this._translations.enterSuffixPlaceholder} .status=${y} .value=${this._suffixValue} ${p(this._suffixRef)}></calcite-input><calcite-input-message class=${u(f)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixCharsError}</calcite-input-message><calcite-input-message class=${u(I)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixLengthError}</calcite-input-message></calcite-label></div></div>`;
+    const e = C(this._prefixValue), i = this._hasNameLengthError && this._prefixValue.length > 0, a = e.errorType !== "special-character", t = !i, s = a ? "display-none" : "", n = t ? "display-none" : "", d = a && t ? "valid" : "invalid", p = C(this._suffixValue), l = this._hasNameLengthError && this._suffixValue.length > 0, o = p.errorType !== "special-character", r = !l, f = o ? "display-none" : "", y = r ? "display-none" : "", I = o && r ? "valid" : "invalid";
+    return this._saveDisabled = !a || !t || !o || !r || !this._hasChanges(), h`<div class="display-flex flex-direction-column padding-left-2 padding-right-2 padding-top-20"><calcite-label scale=l class="font-weight-medium"><span tabindex=0>${this._translations.configureTitlesDialogHeader}</span></calcite-label><p class="font-style-1 margin-top-0" tabindex=0>${this._translations.addPrefixOrSuffixToItems}</p><div class="display-flex flex-direction-row justify-content-space"><calcite-label class="width-full padding-end-1" scale=l>${this._translations.prefixToAddToItems}<calcite-input clearable @blur=${this._prefixInput} @input=${this._prefixInput} .placeholder=${this._translations.enterPrefixPlaceholder} .status=${d} .value=${this._prefixValue} ${c(this._prefixRef)}></calcite-input><calcite-input-message class=${u(s)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixCharsError}</calcite-input-message><calcite-input-message class=${u(n)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixLengthError}</calcite-input-message></calcite-label><calcite-label class="width-full" scale=l>${this._translations.suffixToAddToItems}<calcite-input clearable @blur=${this._suffixInput} @input=${this._suffixInput} .placeholder=${this._translations.enterSuffixPlaceholder} .status=${I} .value=${this._suffixValue} ${c(this._suffixRef)}></calcite-input><calcite-input-message class=${u(f)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixCharsError}</calcite-input-message><calcite-input-message class=${u(y)} icon=exclamation-mark-triangle status=invalid>${this._translations.invalidPrefixOrSuffixLengthError}</calcite-input-message></calcite-label></div></div>`;
   }
   _getAccordion() {
-    const e = [...new Set(this._nonSolutionDependencyItems.map((i) => i.controlItemId))];
-    return h`<div class="display-flex flex-direction-column padding-left-2 padding-right-2 padding-bottom-2"><p class="font-style-1 margin-top-0">${this._translations.previewTheChanges}</p><solution-item-accordion .itemRelationshipDependencies=${e} list-selection-mode=multiple .reuseWarning=${this._translations.itemDependencyReuseWarning} .templateInfos=${this._displayTemplateInfos} .typeKeywords=${this.card?.typeKeywords} usage-context=rename ${p(async (i) => {
+    const e = L(this._nonSolutionDependencyItems, this.card.id);
+    return h`<div class="display-flex flex-direction-column padding-left-2 padding-right-2 padding-bottom-2"><p class="font-style-1 margin-top-0">${this._translations.previewTheChanges}</p><solution-item-accordion .itemRelationshipDependencies=${e} list-selection-mode=multiple .reuseWarning=${this._translations.itemDependencyReuseWarning} .templateInfos=${this._displayTemplateInfos} .typeKeywords=${this.card?.typeKeywords} usage-context=rename ${c(async (i) => {
       i && (this._accordionRef = i);
     })}></solution-item-accordion></div>`;
   }
@@ -77,13 +78,13 @@ class N extends T {
     this._templateInfos = this._templateInfos.map((t) => (this._loadingDefaultPrefix && t.title.startsWith(this._prefixValue) && (t.title = this._replaceStart(t.title, this._prefixValue, "")), this._loadingDefaultSuffix && t.title.endsWith(this._suffixValue) && (t.title = this._replaceAtEnd(t.title, this._suffixValue, "")), t));
     const a = JSON.parse(JSON.stringify(this._templateInfos));
     this._hasNameLengthError = !1, this._displayTemplateInfos = a.map((t) => {
-      const s = this._prefixValue !== "", n = this._suffixValue !== "", d = this._defaultPrefix !== "", c = this._defaultSuffix !== "";
+      const s = this._prefixValue !== "", n = this._suffixValue !== "", d = this._defaultPrefix !== "", p = this._defaultSuffix !== "";
       if (t.owner !== i && !e)
         return t;
       let l = t.title;
       s && (d ? this._originalTitles.find((f) => f.id === t.id)?.title.startsWith(this._defaultPrefix) ? l = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue) : this._prefixValue !== this._defaultPrefix && (l = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue)) : l = this._applyPrefixWithDuplicateCheck(t.title, this._prefixValue));
       let o = l;
-      return n && (c ? this._originalTitles.find((f) => f.id === t.id)?.title.endsWith(this._defaultSuffix) ? o = this._applySuffixWithDuplicateCheck(l, this._suffixValue) : this._suffixValue !== this._defaultSuffix && (o = this._applySuffixWithDuplicateCheck(l, this._suffixValue)) : o = this._applySuffixWithDuplicateCheck(l, this._suffixValue)), t.title = o, this._hasNameLengthError || (this._hasNameLengthError = t.title.length > P), t;
+      return n && (p ? this._originalTitles.find((f) => f.id === t.id)?.title.endsWith(this._defaultSuffix) ? o = this._applySuffixWithDuplicateCheck(l, this._suffixValue) : this._suffixValue !== this._defaultSuffix && (o = this._applySuffixWithDuplicateCheck(l, this._suffixValue)) : o = this._applySuffixWithDuplicateCheck(l, this._suffixValue)), t.title = o, this._hasNameLengthError || (this._hasNameLengthError = t.title.length > P), t;
     }), this._loadingDefaultPrefix = !1, this._loadingDefaultSuffix = !1;
   }
   _replaceStart(e, i, a) {
@@ -155,7 +156,7 @@ class N extends T {
     this._closeDialog();
   }
 }
-S("solution-configure-titles", N);
+S("solution-configure-titles", O);
 export {
-  N as SolutionConfigureTitles
+  O as SolutionConfigureTitles
 };

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

@@ -7,15 +7,16 @@ import { useContextConsumer as _ } from "@arcgis/lumina/context";
 import { g as D } from "../../chunks/common.js";
 import { y as I, T as y } from "../../chunks/interfaces.js";
 import { deleteSolution as b } from "@esri/solution-common";
-import { c as w } from "../../chunks/deployAppContexts.js";
-import { createRef as C, ref as h } from "lit-html/directives/ref.js";
+import { c as C } from "../../chunks/deployAppContexts.js";
+import { createRef as w, ref as h } from "lit-html/directives/ref.js";
 import "../solution-item-accordion/customElement.js";
 import { p as $, g as v } from "../../chunks/getRelatedInfos.js";
-const x = u`*[tabindex]:focus-visible{outline-style:solid!important;outline-width:2px!important;outline-color:var(--calcite-color-brand)!important;outline-offset:2px!important}.deletion-note-text{display:inline-block}.deletion-note-container{display:flex;align-items:center;gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-0);margin-bottom:var(--calcite-spacing-md)}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-surface-2);--calcite-panel-background-color: var(--calcite-color-surface-2)}.display-none{display:none}calcite-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.loader-text{margin-top:var(--calcite-spacing-md);margin-bottom:var(--calcite-spacing-xl);text-align:center;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-1)}.padding-around{padding:12px 2rem 2rem}`;
-class S extends g {
+import { d as x } from "../../chunks/helpers.js";
+const S = u`*[tabindex]:focus-visible{outline-style:solid!important;outline-width:2px!important;outline-color:var(--calcite-color-brand)!important;outline-offset:2px!important}.deletion-note-text{display:inline-block}.deletion-note-container{display:flex;align-items:center;gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-0);margin-bottom:var(--calcite-spacing-md)}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-surface-2);--calcite-panel-background-color: var(--calcite-color-surface-2)}.display-none{display:none}calcite-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.loader-text{margin-top:var(--calcite-spacing-md);margin-bottom:var(--calcite-spacing-xl);text-align:center;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-1)}.padding-around{padding:12px 2rem 2rem}`;
+class T extends g {
   constructor() {
-    super(), this.open = !1, this.source = "Card Dropdown", this._deletePercentage = 0, this._fetchingTemplates = !1, this._isDeleteInProgress = !1, this._nonSolutionDependencyItems = [], this._showDeleteError = !1, this._showUndeletableItems = !1, this._templateInfos = [], this._translations = f({ name: "solution-delete-dialog", blocking: !0 }), this._accordion = C(), this._configContextConsumer = _({
-      context: w,
+    super(), this.open = !1, this.source = "Card Dropdown", this._deletePercentage = 0, this._fetchingTemplates = !1, this._isDeleteInProgress = !1, this._nonSolutionDependencyItems = [], this._showDeleteError = !1, this._showUndeletableItems = !1, this._templateInfos = [], this._translations = f({ name: "solution-delete-dialog", blocking: !0 }), this._accordion = w(), this._configContextConsumer = _({
+      context: C,
       subscribe: !0
     }), this.solutionDeleteDialogOpen = d(), this.solutionDeleted = d(), this.solutionDeleteDialogBeforeClose = d(), this.listenOn(window, "beforeunload", (e) => {
       this._isDeleteInProgress && (e.preventDefault(), e.returnValue = !0);
@@ -25,7 +26,7 @@ class S extends g {
     this.properties = { card: 0, open: 5, source: 1, _deletePercentage: 16, _fetchingTemplates: 16, _isDeleteInProgress: 16, _nonSolutionDependencyItems: 16, _showDeleteError: 16, _showUndeletableItems: 16, _templateInfos: 16, _translations: 16 };
   }
   static {
-    this.styles = x;
+    this.styles = S;
   }
   get _hasAdminDeletePermission() {
     return this._configContextConsumer.value?.authentication ? I(this._configContextConsumer.value?.authentication) : !1;
@@ -61,30 +62,30 @@ class S extends g {
       b(this.card.id, this._configContextConsumer.value.userSession, t).then((i) => {
         const s = i[1];
         let o;
-        if (s ? o = s.items.map((n) => ({
-          itemName: n.title,
-          itemType: n.type,
-          owner: n.owner,
-          modified: n.modified
+        if (s ? o = s.items.map((a) => ({
+          itemName: a.title,
+          itemType: a.type,
+          owner: a.owner,
+          modified: a.modified
         })) : o = e, o.length === 0)
           this.solutionDeleted.emit({ showAlert: !0, refreshSolutionsTimeout: !0, solutionTitle: this.card?.title }), this._isDeleteInProgress = !1, this.open = !1;
-        else if (o.some((l) => l.itemType === "Solution"))
-          this.card ? $(this.card, this._configContextConsumer.value.userSession).then((l) => {
-            this._templateInfos = l, this._showDeleteError = !0, this._showUndeletableItems = !0, this._isDeleteInProgress = !1;
+        else if (o.some((n) => n.itemType === "Solution"))
+          this.card ? $(this.card, this._configContextConsumer.value.userSession).then((n) => {
+            this._templateInfos = n, this._showDeleteError = !0, this._showUndeletableItems = !0, this._isDeleteInProgress = !1;
           }) : (this._showDeleteError = !0, this._isDeleteInProgress = !1);
         else if (this.card) {
-          let l = [];
-          l = s.items.map((a) => ({
-            id: a.id,
-            title: a.title,
-            type: a.type,
-            owner: a.owner,
-            modified: a.modified,
+          let n = [];
+          n = s.items.map((l) => ({
+            id: l.id,
+            title: l.title,
+            type: l.type,
+            owner: l.owner,
+            modified: l.modified,
             typeKeywords: [],
             snippet: "",
             dependencies: [],
-            url: D(a.id, this._configContextConsumer.value.authentication)
-          })), this._templateInfos = l, this._showDeleteError = !1, this._showUndeletableItems = !0, this._isDeleteInProgress = !1;
+            url: D(l.id, this._configContextConsumer.value.authentication)
+          })), this._templateInfos = n, this._showDeleteError = !1, this._showUndeletableItems = !0, this._isDeleteInProgress = !1;
         } else
           this.solutionDeleted.emit({ showAlert: !0, refreshSolutionsTimeout: !0 }), this._isDeleteInProgress = !1, this.open = !1;
       });
@@ -99,7 +100,7 @@ class S extends g {
     }
   }
   render() {
-    const e = this._fetchingTemplates ? "" : "display-none", t = this._fetchingTemplates ? "display-none" : "", i = [...new Set(this._nonSolutionDependencyItems.map((n) => n.controlItemId))], s = this._templateInfos.length - this._getDependencyCount() - this._getNonOwnerCount(), o = this._translations.deletionCount.replace("{{deleteableCount}}", s.toString()).replace("{{totalCount}}", this._templateInfos.length.toString());
+    const e = this._fetchingTemplates ? "" : "display-none", t = this._fetchingTemplates ? "display-none" : "", i = x(this._nonSolutionDependencyItems, this.card.id), s = this._templateInfos.length - this._getDependencyCount() - this._getNonOwnerCount(), o = this._translations.deletionCount.replace("{{deleteableCount}}", s.toString()).replace("{{totalCount}}", this._templateInfos.length.toString());
     return r`<calcite-dialog class="panel-bg-color" .closeDisabled=${this._isDeleteInProgress} .escapeDisabled=${this._isDeleteInProgress} .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} id=${this._translations.title.replace("{{solution}}", this.card?.title ?? "") ?? p} modal kind=danger .open=${this.open} width=l outside-close-disabled @calciteDialogBeforeClose=${() => {
       this.solutionDeleteDialogBeforeClose.emit();
     }} @calciteDialogClose=${() => {
@@ -121,7 +122,7 @@ class S extends g {
     return this._templateInfos.filter((s) => !t.has(s.id)).filter((s) => s.owner !== i).length;
   }
 }
-m("solution-delete-dialog", S);
+m("solution-delete-dialog", T);
 export {
-  S as SolutionDeleteDialog
+  T as SolutionDeleteDialog
 };

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

@@ -7,12 +7,12 @@ import { css as x, html as i } from "lit";
 import { c as _, i as v } from "../../chunks/deployAppContexts.js";
 import { y, T as s, x as w } from "../../chunks/interfaces.js";
 import { f as C, g as p, a as $ } from "../../chunks/cardsHelpers.js";
-import { g as S } from "../../chunks/getRelatedInfos.js";
-import { u as k } from "../../chunks/common.js";
-import { d as D } from "../../chunks/helpers.js";
+import { g as D } from "../../chunks/getRelatedInfos.js";
+import { u as S } from "../../chunks/common.js";
+import { e as k, d as T } from "../../chunks/helpers.js";
 import * as h from "@esri/solution-common";
-const T = x`.negative-tabbing-offset[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:-2px}.tabbing-offset[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.font-weight-med{font-weight:var(--calcite-font-weight-medium)}.font-weight-bold{font-weight:var(--calcite-font-weight-bold)}.heading-font{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium)}.title-font{font-size:1.8rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.font-1{font-size:var(--calcite-spacing-lg)}.display-flex{display:flex}.display-none{display:none}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}@container (min-width: 801px){.font-size-override .display-flex.flex-direction-row>.image-width+.display-flex{flex:1;min-width:0}}.icon-color{color:var(--calcite-color-text-3)}.padding-bottom-lg{padding-bottom:var(--calcite-spacing-lg)}.item-padding{--calcite-internal-accordion-item-padding: var(--calcite-spacing-xl)}.align-items-center{align-items:center}.align-items-start{align-items:start}.font-size-override{--calcite-font-size--2: var(--calcite-font-size--1)}.background-color-1{background-color:var(--calcite-color-surface-2)}.background-color-2{background-color:var(--calcite-color-surface-3)}.label-override{--calcite-label-margin-bottom: var(--calcite-spacing-none)}.position-relative{position:relative}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.margin-block-start-end-0{margin-block-start:var(--calcite-spacing-none);margin-block-end:var(--calcite-spacing-none)}.panel-background-2{--calcite-panel-background-color: var(--calcite-color-surface-3);background-color:var(--calcite-color-surface-3)}.panel-background-1{--calcite-panel-background-color: var(--calcite-color-surface-2);--calcite-shell-panel-background-color: var(--calcite-color-surface-2)}.border-none{border:none}.font-color-1{color:var(--calcite-color-text-1)}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-surface-2);--calcite-panel-background-color: var(--calcite-color-surface-2)}.dialog-y-size{--calcite-dialog-size-y: 90% }.dialog-x-size{--calcite-dialog-size-x: 90% }.bottom-border{border-bottom:solid var(--calcite-spacing-px);color:var(--calcite-color-border-1)}.margin-start-end-xxl{margin-inline-start:var(--calcite-spacing-xxl);margin-inline-end:var(--calcite-spacing-xxl)}.margin-start-end-lg{margin-inline-start:var(--calcite-spacing-lg);margin-inline-end:var(--calcite-spacing-lg)}.margin-top-xxl{margin-top:var(--calcite-spacing-xxl)}.justify-between{justify-content:space-between}.items-baseline{align-items:baseline}.padding-xxl{padding:var(--calcite-spacing-xxl)}.padding-lg{padding:var(--calcite-spacing-lg)}.padding-top-xxl{padding-top:var(--calcite-spacing-xxl)}.padding-top-lg{padding-top:var(--calcite-spacing-lg)}.padding-bottom-xxl{padding-bottom:var(--calcite-spacing-xxl)}.padding-end-1{padding-inline-end:var(--calcite-spacing-lg)}.padding-end-xxl{padding-inline-end:var(--calcite-spacing-xxl)}.padding-start-sm{padding-inline-start:var(--calcite-spacing-sm)}.padding-start-xxl{padding-inline-start:var(--calcite-spacing-xxl)}.image-width{width:300px;flex-grow:0;flex-shrink:0}@container (max-width: 1280px){.image-width{flex-grow:0;flex-shrink:1}}img{max-width:100%;height:auto;overflow-clip-margin:content-box;overflow:clip;display:block}.margin-xl{margin:var(--calcite-spacing-xl)}.line-height-1{line-height:1.1}.line-height-xxl{line-height:var(--calcite-line-height-xxl)}@container (max-width: 800px){.font-size-override .display-flex.flex-direction-row{flex-direction:column!important}.image-width{width:100%!important;max-width:100%!important;margin:0!important;padding:var(--calcite-spacing-lg)!important;padding-bottom:0!important;box-sizing:border-box}.image-width img{width:100%;max-width:100%}.margin-xl{margin:0!important}.image-width+.display-flex{padding-inline-start:var(--calcite-spacing-lg)!important;padding-inline-end:var(--calcite-spacing-lg)!important}.padding-start-sm{padding-inline-start:0!important}.title-font{padding-inline-start:0!important;padding-top:var(--calcite-spacing-lg)!important;padding-bottom:var(--calcite-spacing-lg)!important}.align-items-start.padding-bottom-xxl,.padding-bottom-xxl.padding-start-sm{padding-bottom:var(--calcite-spacing-lg)!important}}calcite-shell-panel{--calcite-shell-panel-max-width: 20rem;--calcite-shell-panel-width: 24vw}calcite-shell{block-size:unset}.solution-deployed-action{--calcite-color-focus: initial}.skeleton-loader{background:linear-gradient(90deg,var(--calcite-color-foreground-1) 0%,var(--calcite-color-foreground-2) 50%,var(--calcite-color-foreground-1) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--calcite-border-radius)}.skeleton-folder{height:1.5rem;width:12rem;border-radius:var(--calcite-border-radius)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}`;
-class I extends f {
+const I = x`.negative-tabbing-offset[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:-2px}.tabbing-offset[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.font-weight-med{font-weight:var(--calcite-font-weight-medium)}.font-weight-bold{font-weight:var(--calcite-font-weight-bold)}.heading-font{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium)}.title-font{font-size:1.8rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.font-1{font-size:var(--calcite-spacing-lg)}.display-flex{display:flex}.display-none{display:none}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}@container (min-width: 801px){.font-size-override .display-flex.flex-direction-row>.image-width+.display-flex{flex:1;min-width:0}}.icon-color{color:var(--calcite-color-text-3)}.padding-bottom-lg{padding-bottom:var(--calcite-spacing-lg)}.item-padding{--calcite-internal-accordion-item-padding: var(--calcite-spacing-xl)}.align-items-center{align-items:center}.align-items-start{align-items:start}.font-size-override{--calcite-font-size--2: var(--calcite-font-size--1)}.background-color-1{background-color:var(--calcite-color-surface-2)}.background-color-2{background-color:var(--calcite-color-surface-3)}.label-override{--calcite-label-margin-bottom: var(--calcite-spacing-none)}.position-relative{position:relative}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.margin-block-start-end-0{margin-block-start:var(--calcite-spacing-none);margin-block-end:var(--calcite-spacing-none)}.panel-background-2{--calcite-panel-background-color: var(--calcite-color-surface-3);background-color:var(--calcite-color-surface-3)}.panel-background-1{--calcite-panel-background-color: var(--calcite-color-surface-2);--calcite-shell-panel-background-color: var(--calcite-color-surface-2)}.border-none{border:none}.font-color-1{color:var(--calcite-color-text-1)}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-surface-2);--calcite-panel-background-color: var(--calcite-color-surface-2)}.dialog-y-size{--calcite-dialog-size-y: 90% }.dialog-x-size{--calcite-dialog-size-x: 90% }.bottom-border{border-bottom:solid var(--calcite-spacing-px);color:var(--calcite-color-border-1)}.margin-start-end-xxl{margin-inline-start:var(--calcite-spacing-xxl);margin-inline-end:var(--calcite-spacing-xxl)}.margin-start-end-lg{margin-inline-start:var(--calcite-spacing-lg);margin-inline-end:var(--calcite-spacing-lg)}.margin-top-xxl{margin-top:var(--calcite-spacing-xxl)}.justify-between{justify-content:space-between}.items-baseline{align-items:baseline}.padding-xxl{padding:var(--calcite-spacing-xxl)}.padding-lg{padding:var(--calcite-spacing-lg)}.padding-top-xxl{padding-top:var(--calcite-spacing-xxl)}.padding-top-lg{padding-top:var(--calcite-spacing-lg)}.padding-bottom-xxl{padding-bottom:var(--calcite-spacing-xxl)}.padding-end-1{padding-inline-end:var(--calcite-spacing-lg)}.padding-end-xxl{padding-inline-end:var(--calcite-spacing-xxl)}.padding-start-sm{padding-inline-start:var(--calcite-spacing-sm)}.padding-start-xxl{padding-inline-start:var(--calcite-spacing-xxl)}.image-width{width:300px;flex-grow:0;flex-shrink:0}@container (max-width: 1280px){.image-width{flex-grow:0;flex-shrink:1}}img{max-width:100%;height:auto;overflow-clip-margin:content-box;overflow:clip;display:block}.margin-xl{margin:var(--calcite-spacing-xl)}.line-height-1{line-height:1.1}.line-height-xxl{line-height:var(--calcite-line-height-xxl)}@container (max-width: 800px){.font-size-override .display-flex.flex-direction-row{flex-direction:column!important}.image-width{width:100%!important;max-width:100%!important;margin:0!important;padding:var(--calcite-spacing-lg)!important;padding-bottom:0!important;box-sizing:border-box}.image-width img{width:100%;max-width:100%}.margin-xl{margin:0!important}.image-width+.display-flex{padding-inline-start:var(--calcite-spacing-lg)!important;padding-inline-end:var(--calcite-spacing-lg)!important}.padding-start-sm{padding-inline-start:0!important}.title-font{padding-inline-start:0!important;padding-top:var(--calcite-spacing-lg)!important;padding-bottom:var(--calcite-spacing-lg)!important}.align-items-start.padding-bottom-xxl,.padding-bottom-xxl.padding-start-sm{padding-bottom:var(--calcite-spacing-lg)!important}}calcite-shell-panel{--calcite-shell-panel-max-width: 20rem;--calcite-shell-panel-width: 24vw}calcite-shell{block-size:unset}.solution-deployed-action{--calcite-color-focus: initial}.skeleton-loader{background:linear-gradient(90deg,var(--calcite-color-foreground-1) 0%,var(--calcite-color-foreground-2) 50%,var(--calcite-color-foreground-1) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--calcite-border-radius)}.skeleton-folder{height:1.5rem;width:12rem;border-radius:var(--calcite-border-radius)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}`;
+class O extends f {
   constructor() {
     super(), this.diagramKey = "", this.open = !1, this.templateInfos = [], this._accordionLoading = !1, this._configureTitlesOpen = !1, this._deleteDialogOpen = !1, this._hasNewVersion = !1, this._isDiagramOpen = !1, this._isNameConflict = !1, this._invalidNameMessage = "", this._showFailedAlert = !1, this._showItemUpdateLoading = !1, this.isMobile = !1, this._templateInfoGraph = [], this._thumbnailUrl = "", this._folderName = "", this._folderId = null, this._folderLoading = !1, this._translations = m({ name: "solution-deployed-card-panel", blocking: !0 }), this._configContextConsumer = g({
       context: _,
@@ -47,7 +47,7 @@ class I extends f {
         this._folderId ? a = `${t}/home/content.html?user=${this.card?.owner}&folder=${this._folderId}` : a = `${t}/home/content.html?user=${this.card?.owner}&folder=${this.card?.owner}`;
       window.open(a, "_blank");
     }, this.listenOn(window, "deployedCardSelected", this._deployedCardSelected), this.listenOn(window, "deployAppTabSelected", this._handleDeployAppTabSelected), this.listenOn(window, "displayDeployedCard", () => {
-      D({
+      k({
         kind: "success",
         icon: "check-circle",
         title: this._translations.deploySuccessAlert.replace("{{solutionTitle}}", this.card?.title ?? ""),
@@ -63,7 +63,7 @@ class I extends f {
     this.properties = { card: 0, cardRef: 1, diagramKey: 1, open: 5, templateInfos: 0, _accordionLoading: 16, _configureTitlesOpen: 16, _deleteDialogOpen: 16, _hasNewVersion: 16, _isDiagramOpen: 16, _isNameConflict: 16, _invalidNameMessage: 16, _showFailedAlert: 16, _showItemUpdateLoading: 16, isMobile: 16, _templateInfoGraph: 16, _thumbnailUrl: 16, _folderName: 16, _folderId: 16, _folderLoading: 16, _translations: 16, _nonSolutionDependencyItems: 16 };
   }
   static {
-    this.styles = T;
+    this.styles = I;
   }
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
@@ -86,7 +86,7 @@ class I extends f {
   async _deployedCardSelected(e) {
     const t = e.detail;
     this.card = t.card, this.cardRef = t.cardRef, this.templateInfos = [], this._accordionLoading = !0, this.templateInfos = await this._getTemplates(), this._accordionLoading = !1;
-    const o = await S(this._configContextConsumer.value.userSession, this.card);
+    const o = await D(this._configContextConsumer.value.userSession, this.card);
     this._nonSolutionDependencyItems = o._nonSolutionDependencyItems;
     const n = C(this._configContextConsumer.value?.allCards || [], this.card.deployCommonId);
     let a = !1;
@@ -201,7 +201,7 @@ class I extends f {
     return i`<calcite-panel class="font-size-override panel-background-1"><div class="display-flex flex-direction-row"><div class="image-width margin-xl"><img alt=${this.card?.title ?? d} src=${this._thumbnailUrl ?? d}></div><div class="display-flex flex-direction-column"><h1 class="title-font margin-block-start-end-0 padding-end-xxl padding-start-sm padding-top-xxl padding-bottom-xxl line-height-1 negative-tabbing-offset" tabindex=0>${this.card?.title}</h1><div class="display-flex flex-direction-column padding-bottom-xxl padding-start-sm"><div class="display-flex align-items-start padding-bottom-xxl"><div class="font-1 padding-end-1 line-height-xxl negative-tabbing-offset" tabindex=0>${this.card?.snippet}</div></div><div class="display-flex"><div class="display-flex"><calcite-label class="label-override icon-color tabbing-offset" layout=inline tabindex=0><calcite-icon class="icon-color" icon=projects scale=s></calcite-icon>${this._translations.aboutYourSolutionDeployedDate.replace("{{deployedDate}}", this.card?.created || "")}</calcite-label></div></div></div></div></div></calcite-panel>`;
   }
   _getSolutionContents() {
-    const e = [...new Set(this._nonSolutionDependencyItems.map((t) => t.controlItemId))];
+    const e = T(this._nonSolutionDependencyItems, this.card.id);
     return i`<calcite-panel class="panel-background-1 padding-top-xxl"><calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded><div class="margin-block-start-end-0 heading-font " slot=content-start>${this._translations.solutionsContentsAndCount.replace("{{numberOfSolutions}}", this.templateInfos.length.toString())}</div><div class="overflow-auto">${this._accordionLoading ? i`<calcite-loader .label=${this._translations.loadingText} scale=m></calcite-loader>` : i`<solution-item-accordion .itemRelationshipDependencies=${e} .listSelectionMode=${e.length > 0 ? "multiple" : "single"} .reuseWarning=${this._translations.itemUsedInOtherSolutions} .templateInfos=${this.templateInfos} .typeKeywords=${this.card?.typeKeywords}></solution-item-accordion>`}</div></calcite-accordion-item></calcite-accordion></calcite-panel>`;
   }
   _getDeleteDialog() {
@@ -218,10 +218,10 @@ class I extends f {
     this._deleteDialogOpen = !0;
   }
   _updateThumbnailToken(e) {
-    this._thumbnailUrl !== "" && (this._thumbnailUrl = k(this._thumbnailUrl, e));
+    this._thumbnailUrl !== "" && (this._thumbnailUrl = S(this._thumbnailUrl, e));
   }
 }
-u("solution-deployed-card-panel", I);
+u("solution-deployed-card-panel", O);
 export {
-  I as SolutionDeployedCardPanel
+  O as SolutionDeployedCardPanel
 };

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

@@ -16,12 +16,16 @@ export abstract class SolutionDetailsCard extends LitElement {
       updated: string;
       deployed: string;
       viewDetails: string;
+      deployedTitle: string;
+      deployedPreviousTitle: string;
   } & T9nMeta<{
       arcgisSolutions: string;
       newSolution: string;
       updated: string;
       deployed: string;
       viewDetails: string;
+      deployedTitle: string;
+      deployedPreviousTitle: string;
   }>;
   /** The solutions card */
   accessor card: ISolutionInfoCard | undefined;

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

@@ -3,30 +3,31 @@ import { c as h } from "../../chunks/runtime.js";
 import { css as p, html as o } from "lit";
 import { u as m } from "../../chunks/useT9n.js";
 import { LitElement as u, createEvent as f, nothing as r, safeClassMap as g } from "@arcgis/lumina";
-import { useContextConsumer as b } from "@arcgis/lumina/context";
-import { c as x } from "../../chunks/deployAppContexts.js";
+import { useContextConsumer as y } from "@arcgis/lumina/context";
+import { c as b } from "../../chunks/deployAppContexts.js";
 import { T as v } from "../../chunks/interfaces.js";
-import { c as y } from "../../chunks/cardsHelpers.js";
-import { h as $ } from "../../chunks/helpers.js";
-const _ = p`calcite-card{height:100%;padding-bottom:2px;border:2px solid transparent;transition:border-color .1s ease;box-sizing:border-box}@media(max-width:400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(30%);filter:brightness(30%);-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{border-color:var(--calcite-color-brand);cursor:pointer}.chip-status{--calcite-chip-icon-color: var(--calcite-color-brand);cursor:pointer}.chip-deployed{--calcite-chip-icon-color: var(--calcite-color-status-success)}.hover-text{transition:.1s 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}.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)}.header-line-height{--calcite-label-margin-bottom: 0;margin-top:.5rem;margin-bottom:.7rem}.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}a{text-decoration:none;color:inherit;outline:0;padding:0;margin:0;display:inherit;height:100%}`;
-class C extends u {
+import { c as x } from "../../chunks/cardsHelpers.js";
+import { s as $, h as C } from "../../chunks/helpers.js";
+import * as _ from "@esri/solution-common";
+const S = p`calcite-card{height:100%;padding-bottom:2px;border:2px solid transparent;transition:border-color .1s ease;box-sizing:border-box}@media(max-width:400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(30%);filter:brightness(30%);-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{border-color:var(--calcite-color-brand);cursor:pointer}.chip-status{--calcite-chip-icon-color: var(--calcite-color-brand);cursor:pointer}.chip-deployed{--calcite-chip-icon-color: var(--calcite-color-status-success)}.hover-text{transition:.1s 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}.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)}.header-line-height{--calcite-label-margin-bottom: 0;margin-top:.5rem;margin-bottom:.7rem}.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}a{text-decoration:none;color:inherit;outline:0;padding:0;margin:0;display:inherit;height:100%}`;
+class w extends u {
   constructor() {
-    super(...arguments), this.referrerSolutionId = "", this.referrerSolutionTitle = "", this.referrerSolutionVersion = "", this.source = "all-solutions", this._translations = m({ name: "solution-details-card", blocking: !0 }), this._configContextConsumer = b({
-      context: x,
+    super(...arguments), this.referrerSolutionId = "", this.referrerSolutionTitle = "", this.referrerSolutionVersion = "", this.source = "all-solutions", this._deployedTooltipContent = "", this._translations = m({ name: "solution-details-card", blocking: !0 }), this._configContextConsumer = y({
+      context: b,
       subscribe: !0
     }), this.detailsCardSelected = f();
   }
   static {
-    this.properties = { card: 0, referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _translations: 16 };
+    this.properties = { card: 0, referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _deployedTooltipContent: 16, _translations: 16 };
   }
   static {
-    this.styles = _;
+    this.styles = S;
   }
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
   }
   render() {
-    const e = y(this.card.title);
+    const e = x(this.card.title);
     return o`<a href=${e ?? r} @click=${this._anchorClick} tabindex=-1 .title=${`${this._translations.arcgisSolutions} | ${this.card.title}`}>${this._renderCard()}</a>`;
   }
   _anchorClick(e) {
@@ -34,7 +35,7 @@ class C extends u {
   }
   _cardSelected() {
     if (this.source === "you-may-also-like") {
-      const t = [
+      const i = [
         this.referrerSolutionTitle,
         this.referrerSolutionId,
         this.referrerSolutionVersion,
@@ -45,24 +46,31 @@ class C extends u {
       this._telemetry?.logEvent({
         category: v.SOLUTION_DETAILS,
         action: "Related Solution",
-        dimensions: t
+        dimensions: i
       });
     }
     this.detailsCardSelected.emit(this.card);
   }
   _renderChips(e) {
-    const t = e.includes("deployed"), c = e.filter((i) => i !== "deployed"), s = [];
-    return c.forEach((i) => {
-      const n = "chip-status", l = `solution-details-card-chip-${i}`, d = i === "new" ? "star" : "mega-phone", a = i === "new" ? this._translations.newSolution : this._translations.updated;
-      s.push(o`<calcite-chip class=${g(n)} .icon=${d} id=${l ?? r} .label=${a} .value=${a} scale=s></calcite-chip><calcite-tooltip .referenceElement=${l}><span>${a}</span></calcite-tooltip>`);
-    }), t && s.push(o`<calcite-chip class="chip-deployed" icon=check-circle id=solution-details-card-chip-deployed .label=${this._translations.deployed} .value=${this._translations.deployed} scale=s></calcite-chip><calcite-tooltip reference-element=solution-details-card-chip-deployed><span>${this._translations.deployed}</span></calcite-tooltip>`), s;
+    const i = e.filter((t) => t === "deployed" || t === "deployedOlderVersion"), c = e.filter((t) => t !== "deployed" && t !== "deployedOlderVersion"), s = [];
+    return c.forEach((t) => {
+      const l = "chip-status", n = `solution-details-card-chip-${t}`, d = t === "new" ? "star" : "mega-phone", a = t === "new" ? this._translations.newSolution : this._translations.updated;
+      s.push(o`<calcite-chip class=${g(l)} .icon=${d} id=${n ?? r} .label=${a} .value=${a} scale=s></calcite-chip><calcite-tooltip .referenceElement=${n}><span>${a}</span></calcite-tooltip>`);
+    }), i.length > 0 && s.push(o`<calcite-chip class="chip-deployed" .icon=${i[0] === "deployedOlderVersion" ? "recent" : "check-circle"} id=solution-details-card-chip-deployed .label=${this._translations.deployed} .value=${this._translations.deployed} scale=s></calcite-chip><calcite-tooltip placement=bottom reference-element=solution-details-card-chip-deployed @calciteTooltipBeforeOpen=${async () => {
+      const t = {
+        q: `${this.card?.deployCommonId} and owner:${this._configContextConsumer.value?.userSession?.username}`,
+        authentication: this._configContextConsumer.value?.userSession,
+        pagingParam: { start: 1, num: 100 }
+      }, l = await _.searchItems(t);
+      this._deployedTooltipContent = o`<solutions-deployed-list .cards=${$(l.results)} has-links .listTitle=${i[0] === "deployedOlderVersion" ? this._translations.deployedPreviousTitle : this._translations.deployedTitle}></solutions-deployed-list>`;
+    }}>${this._deployedTooltipContent}</calcite-tooltip>`), s;
   }
   _renderCard() {
     const e = this.card;
-    return o`<calcite-card .label=${e.snippet} @click=${this._cardSelected} @keydown=${(t) => $(t, () => this._cardSelected())}><div class="card-image-wrap" slot=thumbnail><img alt=${e.title ?? r} class="thumbnail card-image" src=${e.thumbnailUrl ?? r}><div class="hover-text">${this._translations.viewDetails}</div></div><calcite-label slot=heading class="header-line-height" scale=l>${e.title}</calcite-label><p slot=description class="font-color-text-2 font-line-height font-size-size--1">${e.snippet}</p>${e.chips && e.chips.length > 0 ? o`<div slot=footer-end style="display: flex; gap: 0.5rem; justify-content: flex-end;">${this._renderChips(e.chips)}</div>` : void 0}<div slot=footer-start></div></calcite-card>`;
+    return o`<calcite-card .label=${e.snippet} @click=${this._cardSelected} @keydown=${(i) => C(i, () => this._cardSelected())}><div class="card-image-wrap" slot=thumbnail><img alt=${e.title ?? r} class="thumbnail card-image" src=${e.thumbnailUrl ?? r}><div class="hover-text">${this._translations.viewDetails}</div></div><calcite-label slot=heading class="header-line-height" scale=l>${e.title}</calcite-label><p slot=description class="font-color-text-2 font-line-height font-size-size--1">${e.snippet}</p>${e.chips && e.chips.length > 0 ? o`<div slot=footer-end style="display: flex; gap: 0.5rem; justify-content: flex-end;">${this._renderChips(e.chips)}</div>` : void 0}<div slot=footer-start></div></calcite-card>`;
   }
 }
-h("solution-details-card", C);
+h("solution-details-card", w);
 export {
-  C as SolutionDetailsCard
+  w as SolutionDetailsCard
 };

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

@@ -1,5 +1,6 @@
 import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-tooltip";
+import "../solutions-deployed-list/index.js";
 import "@esri/calcite-components/components/calcite-card";
 import "@esri/calcite-components/components/calcite-label";
 export * from "./customElement.js";

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

@@ -9,7 +9,7 @@ import { css as R, html as l } from "lit";
 import { request as T, getWorkflowBaseURL as P, getWorkflowManagerAuthorized as A, sanitizeHTML as _, getItemDataAsJson as O, getItem as U, getPropWithDefault as $, getProp as f, setCreateProp as N } from "@esri/solution-common";
 import { E as m, g as x, T as g, z as F, A as H } from "../../chunks/interfaces.js";
 import { _findExistingItem as V } from "@esri/solution-deployer";
-import { l as z, m as b, n as B, h as Y } from "../../chunks/helpers.js";
+import { m as z, n as b, o as B, h as Y } from "../../chunks/helpers.js";
 import { a as M, g as G } from "../../chunks/common.js";
 import "../../chunks/solution-deploy-dialog.js";
 import "../solution-snapshot-gallery/customElement.js";

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

@@ -1,6 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { ISolutionItemHover, ISolutionItemSelected, ISolutionTypeHover, ITemplateInfo } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { DependencyItem } from "../../utils/getRelatedInfos.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 export abstract class SolutionItemAccordion extends LitElement {
@@ -16,15 +17,17 @@ export abstract class SolutionItemAccordion extends LitElement {
       openDetails: string;
       solutionsTemplates: string;
       usedInAnotherSolution: string;
+      itemUsedInOtherSolutions: string;
   } & T9nMeta<{
       usedInOtherSolutionsDeleteWarning: string;
       noPrivilegeToManage: string;
       openDetails: string;
       solutionsTemplates: string;
       usedInAnotherSolution: string;
+      itemUsedInOtherSolutions: string;
   }>;
-  /** string[]: List of items that have relationship dependencies outside of this solution */
-  accessor itemRelationshipDependencies: string[];
+  /** DependencyItem[]: List of items that have relationship dependencies outside of this solution */
+  accessor itemRelationshipDependencies: DependencyItem[];
   /**
    * 'action' | 'item': Specifies the type of link that will be used for deployed items.
    *    'item' the items title will be underlined and clicking anywhere on the list item will open the items details page

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

@@ -1,15 +1,17 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as a } from "../../chunks/runtime.js";
-import { u as c } from "../../chunks/useT9n.js";
-import { css as d, html as o, nothing as h } from "lit";
-import { LitElement as p, createEvent as l, safeStyleMap as u } from "@arcgis/lumina";
-import { c as m } from "../../chunks/deployAppContexts.js";
-import { useContextConsumer as f } from "@arcgis/lumina/context";
-const g = d`:host{display:block}.padding-start-1{padding-inline-start:1rem}.border-override{--calcite-accordion-border-color: var(--calcite-color-border-1) !important}.display-flex{display:flex}.align-center{align-items:center}.solution-list-item-label{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size--1)}.solution-list-item-label,.solution-list-item-description{font-family:var(--calcite-font-family);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.solution-list-item-description{font-size:var(--calcite-font-size--2);margin-block-start:.125rem;color:var(--calcite-color-text-3)}.solution-list-item-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:1.375}.underline{text-decoration:underline}calcite-chip{--calcite-chip-icon-color: var(--calcite-color-brand)}`;
-class y extends p {
+import { c as h } from "../../chunks/runtime.js";
+import { u as p } from "../../chunks/useT9n.js";
+import { css as u, html as o, nothing as m } from "lit";
+import { LitElement as g, createEvent as l, safeStyleMap as y } from "@arcgis/lumina";
+import { c as f } from "../../chunks/deployAppContexts.js";
+import { useContextConsumer as _ } from "@arcgis/lumina/context";
+import * as T from "@esri/solution-common";
+import { s as x } from "../../chunks/helpers.js";
+const v = u`:host{display:block}.padding-start-1{padding-inline-start:1rem}.border-override{--calcite-accordion-border-color: var(--calcite-color-border-1) !important}.display-flex{display:flex}.align-center{align-items:center}.solution-list-item-label{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size--1)}.solution-list-item-label,.solution-list-item-description{font-family:var(--calcite-font-family);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.solution-list-item-description{font-size:var(--calcite-font-size--2);margin-block-start:.125rem;color:var(--calcite-color-text-3)}.solution-list-item-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:1.375}.underline{text-decoration:underline}calcite-chip{--calcite-chip-icon-color: var(--calcite-color-brand)}`;
+class w extends g {
   constructor() {
-    super(...arguments), this.itemRelationshipDependencies = [], this.linkType = "item", this.listSelectionMode = "none", this.reuseWarning = "", this.templateInfos = [], this.typeKeywords = [], this.usageContext = "content", this._canDeletePermission = !1, this._sortedTemplateInfos = [], this._translations = c({ name: "solution-item-accordion", blocking: !0 }), this._configContextConsumer = f({
-      context: m,
+    super(...arguments), this.itemRelationshipDependencies = [], this.linkType = "item", this.listSelectionMode = "none", this.reuseWarning = "", this.templateInfos = [], this.typeKeywords = [], this.usageContext = "content", this._canDeletePermission = !1, this._dependencyTooltipContent = "", this._sortedTemplateInfos = [], this._translations = p({ name: "solution-item-accordion", blocking: !0 }), this._configContextConsumer = _({
+      context: f,
       subscribe: !0
     }), this._sortOrder = [
       "Hub Site Application",
@@ -47,10 +49,10 @@ class y extends p {
     ], this.solutionItemHover = l(), this.solutionItemSelect = l(), this.solutionTypeHover = l();
   }
   static {
-    this.properties = { itemRelationshipDependencies: 0, linkType: 1, listSelectionMode: 1, reuseWarning: 1, templateInfos: 0, typeKeywords: 0, usageContext: 1, _canDeletePermission: 16, _sortedTemplateInfos: 16, _translations: 16 };
+    this.properties = { itemRelationshipDependencies: 0, linkType: 1, listSelectionMode: 1, reuseWarning: 1, templateInfos: 0, typeKeywords: 0, usageContext: 1, _canDeletePermission: 16, _dependencyTooltipContent: 16, _sortedTemplateInfos: 16, _translations: 16 };
   }
   static {
-    this.styles = g;
+    this.styles = v;
   }
   willUpdate(e) {
     e.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0) && this.templateInfosWatchHandler();
@@ -124,7 +126,7 @@ class y extends p {
   }
   _getListItem(e) {
     const i = this.typeKeywords.includes("Deployed") && e.url, t = this.linkType === "action";
-    return o`<calcite-list-item id=${e.id ?? h} @mouseenter=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !0 })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !1 })} @calciteListItemSelect=${() => {
+    return o`<calcite-list-item id=${e.id ?? m} @mouseenter=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !0 })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !1 })} @calciteListItemSelect=${() => {
       this._deselectOthers(e.id), this.solutionItemSelect.emit({ itemId: e.id, selected: !0 }), i && !t && window.open(e.url, "_blank");
     }} .value=${e.id}><div class="solution-list-item-content" slot=content><div class=${`solution-list-item-label ${i && !t ? "underline" : ""}`}>${e.title}</div><div class="solution-list-item-description">${e.snippet}</div></div>${this._checkUsageForWarnings(e)}${i && t ? o`<div slot=actions-end><calcite-action icon=launch .id=${`${e.id}-launch`} @click=${() => window.open(e.url, "_blank")} text></calcite-action><calcite-tooltip overlay-positioning=fixed .referenceElement=${`${e.id}-launch`}><span>${this._translations?.openDetails}</span></calcite-tooltip></div>` : null}</calcite-list-item>`;
   }
@@ -149,38 +151,46 @@ class y extends p {
     }
     return e === "Web Mapping Application" && (t = i.indexOf("configurableApp") > -1 ? "Instant App" : t), t = e === "Geoprocessing Service" ? "Tool" : t, t = e === "Feed" ? "Feed (hosted)" : t, t = e === "Real Time Analytic" ? "Real Time Analytic (hosted)" : t, t = e === "Big Data Analytic" ? "Big Data Analytic (hosted)" : t, t = e === "Vector Tile Service" ? "Tile Layer" : t, t;
   }
-  _getWarningChip(e, i) {
-    return o`<calcite-chip .icon=${i === "info" ? "information" : "exclamation-mark-triangle"} kind=neutral .label=${e} scale=s slot=actions-end style=${u({ "--calcite-chip-icon-color": i === "info" ? "var(--calcite-color-status-info)" : "var(--calcite-color-status-danger)" })}>${e}</calcite-chip>`;
+  _getWarningChip(e, i, t, s) {
+    const n = i === "info" ? "var(--calcite-color-status-info)" : "var(--calcite-color-status-danger)";
+    return o`<div slot=actions-end><calcite-chip .icon=${i === "info" ? "information" : "exclamation-mark-triangle"} .id=${t + "-warning"} kind=neutral .label=${e} scale=s style=${y({ "--calcite-chip-icon-color": n, cursor: s && s.length > 0 ? "pointer" : "default" })}>${e}</calcite-chip>${s && s.length > 0 ? o`<calcite-tooltip class=solution-list-item-content placement=bottom .referenceElement=${`${t}-warning`} scale=s @calciteTooltipBeforeOpen=${async () => {
+      const a = {
+        q: s.map((d) => `id:${d.dependencyItemId}`).join(" OR "),
+        authentication: this._configContextConsumer.value?.userSession,
+        pagingParam: { start: 1, num: 100 }
+      }, c = await T.searchItems(a);
+      this._dependencyTooltipContent = o`<solutions-deployed-list .cards=${x(c.results)} .listTitle=${this._translations?.itemUsedInOtherSolutions || ""}></solutions-deployed-list>`;
+    }}>${this._dependencyTooltipContent}</calcite-tooltip>` : null}</div>`;
   }
   _checkUsageForWarnings(e) {
-    const i = this._configContextConsumer.value?.userSession?.username ?? null, t = this.itemRelationshipDependencies.some((s) => s === e.id);
-    if (this.usageContext === "content" && t && this.reuseWarning)
-      return this._getWarningChip(this.reuseWarning, "info");
+    const i = this._configContextConsumer.value?.userSession?.username ?? null, t = this.itemRelationshipDependencies.filter((n) => n.controlItemId === e.id), s = t.length > 0;
+    if (this.usageContext === "content" && s && this.reuseWarning)
+      return this._getWarningChip(this.reuseWarning, "info", e.id, t);
     if (this.usageContext === "rename") {
-      const s = this._configContextConsumer.value?.authentication?.CanUpdateSolution ?? !1;
+      const n = this._configContextConsumer.value?.authentication?.CanUpdateSolution ?? !1;
       if (e.owner !== i)
-        if (s) {
-          if (t && this.reuseWarning)
-            return this._getWarningChip(this.reuseWarning, "info");
+        if (n) {
+          if (s && this.reuseWarning)
+            return this._getWarningChip(this.reuseWarning, "info", e.id, t);
         } else
-          return this._getWarningChip(this._translations?.noPrivilegeToManage || "", "warn");
-      else if (t && this.reuseWarning)
-        return this._getWarningChip(this.reuseWarning, "info");
+          return this._getWarningChip(this._translations?.noPrivilegeToManage || "", "warn", e.id);
+      else if (s && this.reuseWarning)
+        return this._getWarningChip(this.reuseWarning, "info", e.id, t);
     }
     if (this.usageContext === "delete") {
       if (e.owner !== i)
         if (this._canDeletePermission) {
-          if (t)
-            return this._getWarningChip(this._translations?.usedInOtherSolutionsDeleteWarning || "", "info");
+          if (s)
+            return this._getWarningChip(this._translations?.usedInOtherSolutionsDeleteWarning || "", "info", e.id);
         } else
-          return this._getWarningChip(this._translations?.noPrivilegeToManage || "", "warn");
-      else if (t)
-        return this._getWarningChip(this.reuseWarning, "info");
+          return this._getWarningChip(this._translations?.noPrivilegeToManage || "", "warn", e.id);
+      else if (s)
+        return this._getWarningChip(this.reuseWarning, "info", e.id, t);
     }
     return "";
   }
 }
-a("solution-item-accordion", y);
+h("solution-item-accordion", w);
 export {
-  y as SolutionItemAccordion
+  w as SolutionItemAccordion
 };

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

@@ -6,4 +6,5 @@ import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-chip";
+import "../solutions-deployed-list/index.js";
 export * from "./customElement.js";

package/dist/components/solutions-all-panel/customElement.d.ts

@@ -35,6 +35,8 @@ export abstract class SolutionsAllPanel extends LitElement {
    * @default 'relevance'
    */
   accessor sortType: SortType;
+  /** Returns displayed solution ids in the same order cards are currently rendered. */
+  getDisplayedSolutionIds(): string[];
   /**
    * Search solutions based on key criteria
    *