@esri/solutions-components 5.1.0-next.93 → 5.1.0-next.95

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

@@ -1,20 +1,20 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as u } from "../../chunks/runtime.js";
-import { u as m } from "../../chunks/useT9n.js";
+import { c as m } from "../../chunks/runtime.js";
+import { u } from "../../chunks/useT9n.js";
 import { LitElement as f, createEvent as r, safeClassMap as b, nothing as d } from "@arcgis/lumina";
 import { useContextConsumer as g } from "@arcgis/lumina/context";
-import { css as x, html as i } from "lit";
+import { css as x, html as o } 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 { f as $, g as p, a as C } 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 { u as D } from "../../chunks/common.js";
+import { d as k } 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 T 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({
+    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 = u({ name: "solution-deployed-card-panel", blocking: !0 }), this._configContextConsumer = g({
       context: _,
       subscribe: !0,
       callback: async (e) => {
@@ -38,7 +38,7 @@ class I extends f {
       const t = this._configContextConsumer.value?.orgUrl;
       if (!t)
         return;
-      const o = this._configContextConsumer.value?.userSession?.username, n = this.card?.owner === o;
+      const i = this._configContextConsumer.value?.userSession?.username, n = this.card?.owner === i;
       let a;
       if (n) {
         const l = this._folderId || this.card?.owner;
@@ -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;
@@ -76,19 +76,19 @@ class I extends f {
   }
   willUpdate(e) {
     if (e.has("card")) {
-      const t = this._configContextConsumer.value?.userSession, o = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400");
-      this._thumbnailUrl = `${o}&token=${t?.token}`, this._folderLoading = !0, this._folderName = "", this._folderId = null;
+      const t = this._configContextConsumer.value?.userSession, i = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400");
+      this._thumbnailUrl = `${i}&token=${t?.token}`, this._folderLoading = !0, this._folderName = "", this._folderId = null;
     }
   }
   render() {
-    return this.isMobile ? i`<calcite-shell class="position-relative background-color-2"><calcite-panel class="panel-background-2 border-none" slot=panel-bottom><div class="background-color-2 padding-top-lg">${this._getSolutionPanel()}</div><div class="background-color-1 margin-top-xxl">${this._getButtons()}${this._getOwnerSection()}<div class="bottom-border margin-start-end-xxl"></div>${this._getFolderSection()}<div class="bottom-border margin-start-end-xxl"></div>${this._getSolutionVersionCard()}</div>${this._getSolutionContents()}</calcite-panel></calcite-shell>` : i`<calcite-shell class="position-relative background-color-2"><calcite-panel class="padding-end-xxl panel-background-2 border-none" slot=panel-bottom><div class="display-flex flex-direction-column overflow-hidden"><div class="background-color-2 padding-top-xxl">${this._getSolutionPanel()}</div>${this._getSolutionContents()}</div></calcite-panel><calcite-shell-panel class="panel-background-1" slot=panel-end>${this._getButtons()}${this._getOwnerSection()}<div class="bottom-border margin-start-end-xxl"></div>${this._getFolderSection()}<div class="bottom-border margin-start-end-xxl"></div>${this._getSolutionVersionCard()}</calcite-shell-panel>${this._renderDiagramDialog()}${this._getConfigureTitlesDialog()}${this._getDeleteDialog()}</calcite-shell>`;
+    return this.isMobile ? o`<calcite-shell class="position-relative background-color-2"><calcite-panel class="panel-background-2 border-none" slot=panel-bottom><div class="background-color-2 padding-top-lg">${this._getSolutionPanel()}</div><div class="background-color-1 margin-top-xxl">${this._getButtons()}${this._getOwnerSection()}<div class="bottom-border margin-start-end-xxl"></div>${this._getFolderSection()}<div class="bottom-border margin-start-end-xxl"></div>${this._getSolutionVersionCard()}</div>${this._getSolutionContents()}</calcite-panel></calcite-shell>` : o`<calcite-shell class="position-relative background-color-2"><calcite-panel class="padding-end-xxl panel-background-2 border-none" slot=panel-bottom><div class="display-flex flex-direction-column overflow-hidden"><div class="background-color-2 padding-top-xxl">${this._getSolutionPanel()}</div>${this._getSolutionContents()}</div></calcite-panel><calcite-shell-panel class="panel-background-1" slot=panel-end>${this._getButtons()}${this._getOwnerSection()}<div class="bottom-border margin-start-end-xxl"></div>${this._getFolderSection()}<div class="bottom-border margin-start-end-xxl"></div>${this._getSolutionVersionCard()}</calcite-shell-panel>${this._renderDiagramDialog()}${this._getConfigureTitlesDialog()}${this._getDeleteDialog()}</calcite-shell>`;
   }
   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);
-    this._nonSolutionDependencyItems = o._nonSolutionDependencyItems;
-    const n = C(this._configContextConsumer.value?.allCards || [], this.card.deployCommonId);
+    const i = await S(this._configContextConsumer.value.userSession, this.card);
+    this._nonSolutionDependencyItems = i._nonSolutionDependencyItems;
+    const n = $(this._configContextConsumer.value?.allCards || [], this.card.deployCommonId);
     let a = !1;
     if (n) {
       const l = p(n), c = p(this.card);
@@ -100,14 +100,14 @@ class I extends f {
     e.detail === "deployed-card" && this.sortTypeChanged.emit("");
   }
   _getButtons() {
-    const e = this._configContextConsumer.value?.userSession?.username, t = this._configContextConsumer.value?.authentication?.CanUpdateSolution, o = this._configContextConsumer.value?.authentication?.CanDeleteSolution && this._configContextConsumer.value?.authentication?.CanUpdateSolution, n = this.card?.owner === e || this._isOrgAdmin || t, a = this.card?.owner === e || this._isOrgAdmin || o, l = n ? "display-none" : "", c = this.isMobile ? "padding-lg" : "padding-xxl";
-    return i`<div class=${`display-flex flex-direction-column ${c}`}>${!this.isMobile && i`<calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" kind=neutral @click=${this._openDiagram}>${this._translations.viewTheDiagram}</calcite-button>` || ""}<calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" kind=neutral @click=${this._viewDocumentation}>${this._translations.solutionDocumentation}</calcite-button><calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" kind=neutral @click=${this._openItemDetails}>${this._translations.itemDetails}</calcite-button>${n && !this.isMobile && i`<calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" id=solution-configure-titles-button kind=neutral @click=${this._openConfigureTitlesDialog}>${this._translations.updateTitles}</calcite-button><calcite-tooltip class=${b(l)} overlay-positioning=fixed reference-element=solution-configure-titles-button><span>${this._translations.mustOwnSolution}</span></calcite-tooltip>` || ""}${a && !this.isMobile && i`<calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" kind=neutral @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-button>` || ""}</div>`;
+    const e = this._configContextConsumer.value?.userSession?.username, t = this._configContextConsumer.value?.authentication?.CanUpdateSolution, i = this._configContextConsumer.value?.authentication?.CanDeleteSolution && this._configContextConsumer.value?.authentication?.CanUpdateSolution, n = this.card?.owner === e || this._isOrgAdmin || t, a = this.card?.owner === e || this._isOrgAdmin || i, l = n ? "display-none" : "", c = this.isMobile ? "padding-lg" : "padding-xxl";
+    return o`<div class=${`display-flex flex-direction-column ${c}`}>${!this.isMobile && o`<calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" kind=neutral @click=${this._openDiagram}>${this._translations.viewTheDiagram}</calcite-button>` || ""}<calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" kind=neutral @click=${this._viewDocumentation}>${this._translations.solutionDocumentation}</calcite-button><calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" kind=neutral @click=${this._openItemDetails}>${this._translations.itemDetails}</calcite-button>${n && !this.isMobile && o`<calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" id=solution-configure-titles-button kind=neutral @click=${this._openConfigureTitlesDialog}>${this._translations.updateTitles}</calcite-button><calcite-tooltip class=${b(l)} overlay-positioning=fixed reference-element=solution-configure-titles-button><span>${this._translations.mustOwnSolution}</span></calcite-tooltip>` || ""}${a && !this.isMobile && o`<calcite-button appearance=outline class="padding-bottom-lg solution-deployed-action" kind=neutral @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-button>` || ""}</div>`;
   }
   _openConfigureTitlesDialog() {
     this._configureTitlesOpen = !0;
   }
   _getConfigureTitlesDialog() {
-    return this._configureTitlesOpen ? i`<solution-configure-titles .card=${this.card} @solutionConfigureTitlesBeforeClose=${async () => {
+    return this._configureTitlesOpen ? o`<solution-configure-titles .card=${this.card} @solutionConfigureTitlesBeforeClose=${async () => {
       this.templateInfos = await this._getTemplates(), this._configureTitlesOpen = !1;
     }} @solutionItemsTitlesChanged=${async () => {
       this.templateInfos = await this._getTemplates();
@@ -141,7 +141,7 @@ class I extends f {
     if (!this._configContextConsumer?.value)
       return;
     const e = this.isMobile ? "margin-start-end-lg" : "margin-start-end-xxl";
-    return i`<div class=${`display-flex padding-bottom-xxl ${e} flex-direction-column`}><div class="display-flex justify-between items-baseline"><calcite-label class="font-weight-med label-override tabbing-offset" layout=inline scale=l tabindex=0>${this._translations.aboutYourSolutionOwner}</calcite-label></div><solution-user-avatar .fullname=${this._user?.username === this.card?.owner ? this._user?.fullName : void 0} .lookupProfile=${this._user?.username !== this.card?.owner} .thumbnailUrl=${this._user?.username === this.card?.owner ? this._user?.thumbnailUrl : void 0} .username=${this.card?.owner}></solution-user-avatar></div>`;
+    return o`<div class=${`display-flex padding-bottom-xxl ${e} flex-direction-column`}><div class="display-flex justify-between items-baseline"><calcite-label class="font-weight-med label-override tabbing-offset" layout=inline scale=l tabindex=0>${this._translations.aboutYourSolutionOwner}</calcite-label></div><solution-user-avatar .fullname=${this._user?.username === this.card?.owner ? this._user?.fullName : void 0} .lookupProfile=${this._user?.username !== this.card?.owner} .thumbnailUrl=${this._user?.username === this.card?.owner ? this._user?.thumbnailUrl : void 0} .username=${this.card?.owner}></solution-user-avatar></div>`;
   }
   async _openDiagram(e) {
     e.stopPropagation();
@@ -168,8 +168,8 @@ class I extends f {
           return;
         const t = await h.getItemBase(this.card.id, e);
         if (this._folderId = t.ownerFolder ?? null, this._folderId) {
-          const o = await h.getUserFolder(this.card.owner, this._folderId, e);
-          this._folderName = o?.currentFolder?.title || this._folderId;
+          const i = await h.getUserFolder(this.card.owner, this._folderId, e);
+          this._folderName = i?.currentFolder?.title || this._folderId;
         } else
           this._folderName = this.card.owner || "Root";
       } catch (e) {
@@ -177,12 +177,12 @@ class I extends f {
       }
   }
   _getFolderSection() {
-    const e = this.isMobile ? "padding-lg" : "padding-xxl", o = !this._folderId ? "home" : "folder";
-    return i`<div class=${`${e} display-flex flex-direction-column`}><div class="display-flex justify-between items-baseline"><calcite-label class="font-weight-med label-override tabbing-offset" layout=inline scale=l slot=heading tabindex=0>${this._translations.folder}</calcite-label><calcite-button appearance=transparent .disabled=${this._folderLoading} kind=neutral icon-start=launch2 @click=${this._openFolder}>${this._translations.openFolder}</calcite-button></div><div class="display-flex"><div class="display-flex flex-direction-row padding-top-lg align-items-center">${this._folderLoading ? i`<div class="skeleton-loader skeleton-folder"></div>` : i`<calcite-icon class="icon-color" .icon=${o} scale=m></calcite-icon><div class="display-flex flex-direction-column padding-start-xxl"><span class="tabbing-offset" tabindex=0>${this._folderName || "Root"}</span></div>`}</div></div></div>`;
+    const e = this.isMobile ? "padding-lg" : "padding-xxl", i = !this._folderId ? "home" : "folder";
+    return o`<div class=${`${e} display-flex flex-direction-column`}><div class="display-flex justify-between items-baseline"><calcite-label class="font-weight-med label-override tabbing-offset" layout=inline scale=l slot=heading tabindex=0>${this._translations.folder}</calcite-label><calcite-button appearance=transparent .disabled=${this._folderLoading} kind=neutral icon-start=launch2 @click=${this._openFolder}>${this._translations.openFolder}</calcite-button></div><div class="display-flex"><div class="display-flex flex-direction-row padding-top-lg align-items-center">${this._folderLoading ? o`<div class="skeleton-loader skeleton-folder"></div>` : o`<calcite-icon class="icon-color" .icon=${i} scale=m></calcite-icon><div class="display-flex flex-direction-column padding-start-xxl"><span class="tabbing-offset" tabindex=0>${this._folderName || "Root"}</span></div>`}</div></div></div>`;
   }
   _getSolutionVersionCard() {
     const e = this._hasNewVersion ? this._translations.newVersionAvailable : this._translations.youHaveTheLatestVersion, t = this.isMobile ? "padding-lg" : "padding-xxl";
-    return i`<div class=${`${t} display-flex flex-direction-column`}><calcite-label class="font-weight-med label-override tabbing-offset" layout=inline scale=l slot=heading tabindex=0>${this._translations.solutionVersion.replace("{{version}}", this.card?.deployVersion || "")}</calcite-label><div class="display-flex"><div class="display-flex flex-direction-row padding-top-lg align-items-center"><calcite-icon class="icon-color" icon=clock-forward scale=m></calcite-icon><div class="display-flex flex-direction-column padding-start-xxl"><span class="tabbing-offset" tabindex=0>${e}</span></div></div></div>${this._hasNewVersion ? i`<calcite-button appearance=outline class="padding-top-lg solution-deployed-action" kind=neutral @click=${this._openNewVersionSolution} width=full>${this._translations.learnMoreNewVersion}</calcite-button>` : ""}</div>`;
+    return o`<div class=${`${t} display-flex flex-direction-column`}><calcite-label class="font-weight-med label-override tabbing-offset" layout=inline scale=l slot=heading tabindex=0>${this._translations.solutionVersion.replace("{{version}}", this.card?.deployVersion || "")}</calcite-label><div class="display-flex"><div class="display-flex flex-direction-row padding-top-lg align-items-center"><calcite-icon class="icon-color" icon=clock-forward scale=m></calcite-icon><div class="display-flex flex-direction-column padding-start-xxl"><span class="tabbing-offset" tabindex=0>${e}</span></div></div></div>${this._hasNewVersion ? o`<calcite-button appearance=outline class="padding-top-lg solution-deployed-action" kind=neutral @click=${this._openNewVersionSolution} width=full>${this._translations.learnMoreNewVersion}</calcite-button>` : ""}</div>`;
   }
   async _openNewVersionSolution(e) {
     e.stopPropagation(), this._telemetry?.logEvent({
@@ -193,24 +193,27 @@ class I extends f {
         this.card?.deployCommonId || "",
         this.card?.deployVersion || ""
       ]
-    }), await new Promise((o) => setTimeout(o, 100));
-    const t = $(this._configContextConsumer.value.allCards, this.card.deployCommonId);
+    }), await new Promise((i) => setTimeout(i, 100));
+    const t = C(this._configContextConsumer.value.allCards, this.card.deployCommonId);
     t && this.forceSelectTab.emit({ tabType: "details", tabTitleOrId: t });
   }
   _getSolutionPanel() {
-    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>`;
+    return o`<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))];
-    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>`;
+    const e = new Set(this._nonSolutionDependencyItems.filter((i) => i.dependencyItemId !== this.card.id).map((i) => `${i.controlItemId}|${i.dependencyItemId}`)), t = Array.from(e).map((i) => {
+      const [n, a] = i.split("|");
+      return { controlItemId: n, dependencyItemId: a };
+    });
+    return o`<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 ? o`<calcite-loader .label=${this._translations.loadingText} scale=m></calcite-loader>` : o`<solution-item-accordion .itemRelationshipDependencies=${t} .listSelectionMode=${t.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() {
-    return this._deleteDialogOpen ? i`<solution-delete-dialog .card=${this.card} @solutionDeleted=${() => setTimeout(() => this.navTabSelected.emit({ tabType: "deployments" }), 100)} @solutionDeleteDialogBeforeClose=${() => {
+    return this._deleteDialogOpen ? o`<solution-delete-dialog .card=${this.card} @solutionDeleted=${() => setTimeout(() => this.navTabSelected.emit({ tabType: "deployments" }), 100)} @solutionDeleteDialogBeforeClose=${() => {
       this._deleteDialogOpen = !1;
     }} .open=${this._deleteDialogOpen} source="Details Page"></solution-delete-dialog>` : "";
   }
   _renderDiagramDialog() {
-    return this._isDiagramOpen ? i`<calcite-dialog class="dialog-y-size dialog-x-size panel-bg-color" .heading=${this._translations.diagramOfTheSolution.replace("{{solution}}", this.card?.title ?? "")} id=${this._translations.diagramOfTheSolution.replace("{{solution}}", this.card?.title ?? "") ?? d} modal .open=${this._isDiagramOpen} @calciteDialogClose=${() => {
+    return this._isDiagramOpen ? o`<calcite-dialog class="dialog-y-size dialog-x-size panel-bg-color" .heading=${this._translations.diagramOfTheSolution.replace("{{solution}}", this.card?.title ?? "")} id=${this._translations.diagramOfTheSolution.replace("{{solution}}", this.card?.title ?? "") ?? d} modal .open=${this._isDiagramOpen} @calciteDialogClose=${() => {
       this._isDiagramOpen = !1;
     }} outside-close-disabled scale=m width=l><solution-item-diagram .diagramKey=${this.diagramKey !== "" ? this.diagramKey : this._configContextConsumer.value?.diagramKey ?? ""} .templateInfoGraph=${this._templateInfoGraph} .typeKeywords=${this.card?.typeKeywords}></solution-item-diagram></calcite-dialog>` : "";
   }
@@ -218,10 +221,10 @@ class I extends f {
     this._deleteDialogOpen = !0;
   }
   _updateThumbnailToken(e) {
-    this._thumbnailUrl !== "" && (this._thumbnailUrl = k(this._thumbnailUrl, e));
+    this._thumbnailUrl !== "" && (this._thumbnailUrl = D(this._thumbnailUrl, e));
   }
 }
-u("solution-deployed-card-panel", I);
+m("solution-deployed-card-panel", T);
 export {
-  I as SolutionDeployedCardPanel
+  T 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

@@ -1,40 +1,41 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-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 { 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 p } from "../../chunks/runtime.js";
+import { css as m, html as r } from "lit";
+import { u } from "../../chunks/useT9n.js";
+import { LitElement as f, createEvent as g, nothing as n, safeClassMap as y } from "@arcgis/lumina";
+import { useContextConsumer as v } from "@arcgis/lumina/context";
+import { c as b } from "../../chunks/deployAppContexts.js";
+import { T as x } from "../../chunks/interfaces.js";
+import { c as $ } from "../../chunks/cardsHelpers.js";
+import { h as C } from "../../chunks/helpers.js";
+import * as _ from "@esri/solution-common";
+const S = m`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 f {
   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 = u({ name: "solution-details-card", blocking: !0 }), this._configContextConsumer = v({
+      context: b,
       subscribe: !0
-    }), this.detailsCardSelected = f();
+    }), this.detailsCardSelected = g();
   }
   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);
-    return o`<a href=${e ?? r} @click=${this._anchorClick} tabindex=-1 .title=${`${this._translations.arcgisSolutions} | ${this.card.title}`}>${this._renderCard()}</a>`;
+    const e = $(this.card.title);
+    return r`<a href=${e ?? n} @click=${this._anchorClick} tabindex=-1 .title=${`${this._translations.arcgisSolutions} | ${this.card.title}`}>${this._renderCard()}</a>`;
   }
   _anchorClick(e) {
     e.preventDefault();
   }
   _cardSelected() {
     if (this.source === "you-may-also-like") {
-      const t = [
+      const i = [
         this.referrerSolutionTitle,
         this.referrerSolutionId,
         this.referrerSolutionVersion,
@@ -43,26 +44,41 @@ class C extends u {
         this.card?.deployVersion || ""
       ];
       this._telemetry?.logEvent({
-        category: v.SOLUTION_DETAILS,
+        category: x.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"), d = e.filter((t) => t !== "deployed" && t !== "deployedOlderVersion"), c = [];
+    return d.forEach((t) => {
+      const l = "chip-status", o = `solution-details-card-chip-${t}`, a = t === "new" ? "star" : "mega-phone", s = t === "new" ? this._translations.newSolution : this._translations.updated;
+      c.push(r`<calcite-chip class=${y(l)} .icon=${a} id=${o ?? n} .label=${s} .value=${s} scale=s></calcite-chip><calcite-tooltip .referenceElement=${o}><span>${s}</span></calcite-tooltip>`);
+    }), i.length > 0 && c.push(r`<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);
+      console.log(l), this._deployedTooltipContent = r`<solutions-deployed-list .cards=${l.results.map((o) => {
+        const a = o.typeKeywords?.find((h) => h.startsWith("solutionversion-")), s = a ? a.split("-")[1] : "unknown";
+        return {
+          id: o.id,
+          title: o.title,
+          deployVersion: s,
+          created: o.created
+        };
+      })} .listTitle=${i[0] === "deployedOlderVersion" ? this._translations.deployedPreviousTitle : this._translations.deployedTitle}></solutions-deployed-list>`;
+    }}>${this._deployedTooltipContent}</calcite-tooltip>`), c;
   }
   _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 r`<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 ?? n} class="thumbnail card-image" src=${e.thumbnailUrl ?? n}><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 ? r`<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);
+p("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-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 {
@@ -11,20 +12,20 @@ export abstract class SolutionItemAccordion extends LitElement {
    * @internal
    */
   protected _translations: {
-      differentOwnerDeleteWarning: string;
+      usedInOtherSolutionsDeleteWarning: string;
       noPrivilegeToManage: string;
       openDetails: string;
       solutionsTemplates: string;
       usedInAnotherSolution: string;
   } & T9nMeta<{
-      differentOwnerDeleteWarning: string;
+      usedInOtherSolutionsDeleteWarning: string;
       noPrivilegeToManage: string;
       openDetails: string;
       solutionsTemplates: string;
       usedInAnotherSolution: 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,16 @@
 /* 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 } from "@arcgis/lumina";
-import { c as u } from "../../chunks/deployAppContexts.js";
-import { useContextConsumer as m } from "@arcgis/lumina/context";
-const f = 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 g extends p {
+import { c as m } from "../../chunks/runtime.js";
+import { u as g } from "../../chunks/useT9n.js";
+import { css as y, html as o, nothing as f } from "lit";
+import { LitElement as _, createEvent as r, safeStyleMap as T } from "@arcgis/lumina";
+import { c as v } from "../../chunks/deployAppContexts.js";
+import { useContextConsumer as x } from "@arcgis/lumina/context";
+import * as w from "@esri/solution-common";
+const $ = y`: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 S extends _ {
   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 = m({
-      context: u,
+    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 = g({ name: "solution-item-accordion", blocking: !0 }), this._configContextConsumer = x({
+      context: v,
       subscribe: !0
     }), this._sortOrder = [
       "Hub Site Application",
@@ -44,13 +45,13 @@ class g extends p {
       "Report Template",
       "Rule Package",
       "Group"
-    ], this.solutionItemHover = l(), this.solutionItemSelect = l(), this.solutionTypeHover = l();
+    ], this.solutionItemHover = r(), this.solutionItemSelect = r(), this.solutionTypeHover = r();
   }
   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 = f;
+    this.styles = $;
   }
   willUpdate(e) {
     e.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0) && this.templateInfosWatchHandler();
@@ -124,7 +125,7 @@ class g 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 ?? f} @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>`;
   }
@@ -133,8 +134,8 @@ class g extends p {
   }
   _sortTemplates() {
     return this.templateInfos.sort((e, i) => {
-      const t = this._getTypeForSort(e), s = this._getTypeForSort(i), n = this._sortOrder.indexOf(t), r = this._sortOrder.indexOf(s);
-      return n - r;
+      const t = this._getTypeForSort(e), s = this._getTypeForSort(i), n = this._sortOrder.indexOf(t), a = this._sortOrder.indexOf(s);
+      return n - a;
     });
   }
   _getTypeForSort(e) {
@@ -149,35 +150,54 @@ class g 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>${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=${T({ "--calcite-chip-icon-color": n, cursor: s && s.length > 0 ? "pointer" : "default" })}>${e}</calcite-chip>${s && s.length > 0 ? o`<calcite-popover auto-close class=solution-list-item-content .label=${`${t}-warning`} placement=bottom .referenceElement=${`${t}-warning`} scale=s @calcitePopoverBeforeOpen=${async () => {
+      const p = {
+        q: s.map((l) => `id:${l.dependencyItemId}`).join(" OR "),
+        authentication: this._configContextConsumer.value?.userSession,
+        pagingParam: { start: 1, num: 100 }
+      }, c = await w.searchItems(p);
+      console.log(c), this._dependencyTooltipContent = o`<solutions-deployed-list .cards=${c.results.map((l) => {
+        const d = l.typeKeywords?.find((u) => u.startsWith("solutionversion-")), h = d ? d.split("-")[1] : "unknown";
+        return {
+          id: l.id,
+          title: l.title,
+          deployVersion: h,
+          created: l.created
+        };
+      })}></solutions-deployed-list>`;
+    }}>${this._dependencyTooltipContent}</calcite-popover>` : 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)
-          return t ? this._getWarningChip(this._translations?.differentOwnerDeleteWarning || "", "info") : this._getWarningChip(this._translations?.noPrivilegeToManage || "", "warn");
-      } else if (t)
-        return this._getWarningChip(this._translations?.differentOwnerDeleteWarning || "", "info");
+      if (e.owner !== i)
+        if (this._canDeletePermission) {
+          if (s)
+            return this._getWarningChip(this._translations?.usedInOtherSolutionsDeleteWarning || "", "info", e.id);
+        } else
+          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", g);
+m("solution-item-accordion", S);
 export {
-  g as SolutionItemAccordion
+  S as SolutionItemAccordion
 };

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

@@ -6,4 +6,6 @@ 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";
+import "@esri/calcite-components/components/calcite-popover";
 export * from "./customElement.js";