npm - @esri/solutions-components - Versions diffs - 1.2.0-next.98 → 5.0.0 - Mend

@esri/solutions-components 1.2.0-next.98 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2038) hide show

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

@@ -1,40 +1,89 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
-import { INavTab, ISolutionInfoCard, ITemplateInfo } from '../../utils/interfaces';
-import { ITemplateInfoGraph } from '../solution-item-diagram/utils/solutionGraph';
-import { DependencyItem } from '../../utils/getRelatedInfos';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { IActiveTab, INavTab, ISolutionInfoCard, ITemplateInfo } from "../../utils/interfaces.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
-export declare class SolutionDeployedCardPanel extends LitElement {
-    /** Key details about the solution */
-    card: ISolutionInfoCard | undefined;
-    /** Reference to the card that opened this dialog */
-    cardRef: any | undefined;
-    /**
-     * Digram license key to use view the diagram
-     *
-     * @default ''
-     */
-    diagramKey: string;
-    /**
-     * boolean: when true the dialog is open
-     *
-     * @default false
-     */
-    open: boolean;
-    /** ITemplateInfo[]: Collection of template infos */
-    templateInfos: ITemplateInfo[];
-    /** Tab selected event */
-    readonly navTabSelected: TargetedEvent<this, INavTab>;
-    /** Emitted on demand when the sort type changes */
-    readonly sortTypeChanged: TargetedEvent<this, string>;
-    /**
-     * This event will be emitted when this dialog is closed.
-     * When the emitted value is true the solution has been updated and needs to be fetched again
-     */
-    readonly solutionConfigureDialogClose: TargetedEvent<this, boolean>;
-    "@eventTypes": {
-        "navTabSelected": SolutionDeployedCardPanel["navTabSelected"]["detail"];
-        "solutionConfigureDialogClose": SolutionDeployedCardPanel["solutionConfigureDialogClose"]["detail"];
-        "sortTypeChanged": SolutionDeployedCardPanel["sortTypeChanged"]["detail"];
-    };
-}
+export abstract class SolutionDeployedCardPanel extends LitElement {
+  /**
+   * Contains the translations for this component.
+   * All UI strings should be defined here.
+   *
+   * @internal
+   */
+  protected _translations: {
+      aboutYourSolutionDeployedDate: string;
+      aboutYourSolutionOwner: string;
+      deleteSolution: string;
+      deploySuccessAlert: string;
+      diagramOfTheSolution: string;
+      editSolutionOwner: string;
+      itemDetails: string;
+      itemUsedInOtherSolutions: string;
+      loadingText: string;
+      mustOwnSolution: string;
+      viewTheDiagram: string;
+      learnMoreNewVersion: string;
+      showMoreSummary: string;
+      solutionsContentsAndCount: string;
+      solutionDocumentation: string;
+      updateTitles: string;
+      solutionVersion: string;
+      newVersionAvailable: string;
+      youHaveTheLatestVersion: string;
+  } & T9nMeta<{
+      aboutYourSolutionDeployedDate: string;
+      aboutYourSolutionOwner: string;
+      deleteSolution: string;
+      deploySuccessAlert: string;
+      diagramOfTheSolution: string;
+      editSolutionOwner: string;
+      itemDetails: string;
+      itemUsedInOtherSolutions: string;
+      loadingText: string;
+      mustOwnSolution: string;
+      viewTheDiagram: string;
+      learnMoreNewVersion: string;
+      showMoreSummary: string;
+      solutionsContentsAndCount: string;
+      solutionDocumentation: string;
+      updateTitles: string;
+      solutionVersion: string;
+      newVersionAvailable: string;
+      youHaveTheLatestVersion: string;
+  }>;
+  /** Key details about the solution */
+  accessor card: ISolutionInfoCard | undefined;
+  /** Reference to the card that opened this dialog */
+  accessor cardRef: any | undefined;
+  /**
+   * Digram license key to use view the diagram
+   *
+   * @default ''
+   */
+  accessor diagramKey: string;
+  /**
+   * boolean: when true the dialog is open
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /** ITemplateInfo[]: Collection of template infos */
+  accessor templateInfos: ITemplateInfo[];
+  /** Force tab selection, used to navigate to newer version of solution from a deployed solution */
+  readonly forceSelectTab: import("@arcgis/lumina").TargetedEvent<this, IActiveTab>;
+  /** Tab selected event */
+  readonly navTabSelected: import("@arcgis/lumina").TargetedEvent<this, INavTab>;
+  /**
+   * This event will be emitted when this dialog is closed.
+   * When the emitted value is true the solution has been updated and needs to be fetched again
+   */
+  readonly solutionConfigureDialogClose: import("@arcgis/lumina").TargetedEvent<this, boolean>;
+  /** Emitted on demand when the sort type changes */
+  readonly sortTypeChanged: import("@arcgis/lumina").TargetedEvent<this, string>;
+  readonly "@eventTypes": {
+    forceSelectTab: SolutionDeployedCardPanel["forceSelectTab"]["detail"];
+    navTabSelected: SolutionDeployedCardPanel["navTabSelected"]["detail"];
+    solutionConfigureDialogClose: SolutionDeployedCardPanel["solutionConfigureDialogClose"]["detail"];
+    sortTypeChanged: SolutionDeployedCardPanel["sortTypeChanged"]["detail"];
+  };
+}

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

@@ -1,46 +1,33 @@
-import { c as g } from "../../chunks/runtime.js";
-import { css as h, html as i } from "lit";
-import { keyed as u } from "lit/directives/keyed.js";
-import { ref as m } from "lit/directives/ref.js";
-import { u as f } from "../../chunks/useT9n.js";
-import { LitElement as _, createEvent as l, safeClassMap as x, nothing as c } from "@arcgis/lumina";
-import { useContextConsumer as v } from "@arcgis/lumina/context";
-import { c as y } from "../../chunks/deployAppContexts.js";
-import { F as b, D as w, T as o } from "../../chunks/interfaces.js";
-import { a as C, d as r, h as S } from "../../chunks/cardsHelpers.js";
-import { g as $ } from "../../chunks/getRelatedInfos.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.97 */
-const D = h`/** @license
- * Copyright 2025 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */.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-xxl)}.display-flex{display:flex}.display-none{display:none}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}.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-2{background-color:var(--calcite-color-foreground-2)}.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-foreground-2);background-color:var(--calcite-color-foreground-2)}.panel-background-1{--calcite-panel-background-color: var(--calcite-color-foreground-1);--calcite-shell-panel-background-color: var(--calcite-color-foreground-1)}.border-none{border:none}.font-color-1{color:var(--calcite-color-text-1)}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-foreground-1);--calcite-panel-background-color: var(--calcite-color-foreground-1)}.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)}.justify-between{justify-content:space-between}.items-baseline{align-items:baseline}.padding-xxl{padding:var(--calcite-spacing-xxl)}.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-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}@media(max-width:1280px){.image-width{flex-grow:2;flex-shrink:.5}}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}@media(max-width:800px){.image-width{display:none}}calcite-shell-panel{--calcite-shell-panel-max-width: 20rem;--calcite-shell-panel-width: 24vw}calcite-shell{block-size:unset}`;
-class I extends _ {
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
+import { c as h } from "../../chunks/runtime.js";
+import { u } from "../../chunks/useT9n.js";
+import { LitElement as m, createEvent as l, safeClassMap as f, nothing as r } from "@arcgis/lumina";
+import { useContextConsumer as d } from "@arcgis/lumina/context";
+import { css as b, html as i } from "lit";
+import { A as x, F as v, G as _, T as s, x as y, H as w } from "../../chunks/interfaces.js";
+import { f as $, g as p, a as C } from "../../chunks/cardsHelpers.js";
+import { g as S } from "../../chunks/getRelatedInfos.js";
+const D = b`.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}@media(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-foreground-1)}.background-color-2{background-color:var(--calcite-color-foreground-2)}.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-foreground-2);background-color:var(--calcite-color-foreground-2)}.panel-background-1{--calcite-panel-background-color: var(--calcite-color-foreground-1);--calcite-shell-panel-background-color: var(--calcite-color-foreground-1)}.border-none{border:none}.font-color-1{color:var(--calcite-color-text-1)}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-foreground-1);--calcite-panel-background-color: var(--calcite-color-foreground-1)}.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}@media(max-width:1280px){.image-width{flex-grow:2;flex-shrink:.5}}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)}@media(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}`;
+class T extends m {
   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._showSuccessAlert = !1, this._showFailedAlert = !1, this._showItemUpdateLoading = !1, this._templateInfoGraph = [], this._translations = f({ name: "solution-deployed-card-panel", blocking: !0 }), this._configContextConsumer = v({
-      context: y,
+    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._showSuccessAlert = !1, this._showFailedAlert = !1, this._showItemUpdateLoading = !1, this.isMobile = !1, this._templateInfoGraph = [], this._thumbnailUrl = "", this._translations = u({ name: "solution-deployed-card-panel", blocking: !0 }), this._configContextConsumer = d({
+      context: x,
       subscribe: !0,
       callback: async (e) => {
-        e && (this._isOrgAdmin = e.authentication?.PortalUserSubset?.role === "org_admin" || b(e.authentication), this._user = e.authentication?.Portal?.user);
+        e && (this._isOrgAdmin = v(e.authentication), this._user = e.authentication?.Portal?.user);
       }
-    }), this._isOrgAdmin = !1, this.navTabSelected = l(), this.sortTypeChanged = l(), this.solutionConfigureDialogClose = l(), this._nonSolutionDependencyItems = [], this.listenOn(window, "deployedCardSelected", this._deployedCardSelected), this.listenOn(window, "deployAppTabSelected", this._handleDeployAppTabSelected), this.listenOn(window, "deployProgressEnd", () => {
+    }), this._isOrgAdmin = !1, this._isMobileContextConsumer = d({
+      context: _,
+      subscribe: !0,
+      callback: (e) => this.isMobile = e
+    }), this.navTabSelected = l(), this.forceSelectTab = l(), this.sortTypeChanged = l(), this.solutionConfigureDialogClose = l(), this._nonSolutionDependencyItems = [], this.listenOn(window, "deployedCardSelected", this._deployedCardSelected), this.listenOn(window, "deployAppTabSelected", this._handleDeployAppTabSelected), this.listenOn(window, "displayDeployedCard", () => {
       this._showSuccessAlert = !0;
+    }), this.listenOn(window, "sessionRefreshed", (e) => {
+      this._updateThumbnailToken(e.detail);
     });
   }
   static {
-    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, _showSuccessAlert: 16, _showFailedAlert: 16, _showItemUpdateLoading: 16, _templateInfoGraph: 16, _translations: 16, _nonSolutionDependencyItems: 16 };
+    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, _showSuccessAlert: 16, _showFailedAlert: 16, _showItemUpdateLoading: 16, isMobile: 16, _templateInfoGraph: 16, _thumbnailUrl: 16, _translations: 16, _nonSolutionDependencyItems: 16 };
   }
   static {
     this.styles = D;
@@ -48,44 +35,54 @@ class I extends _ {
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
   }
+  async load() {
+    if (this._isMobileContextConsumer.value && (this.isMobile = this._isMobileContextConsumer.value), this.card?.thumbnailUrl) {
+      const e = this._configContextConsumer.value?.userSession, t = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400");
+      this._thumbnailUrl = `${t}&token=${e?.token}`;
+    }
+  }
+  willUpdate(e) {
+    if (e.has("card")) {
+      const t = this._configContextConsumer.value?.userSession, a = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400");
+      this._thumbnailUrl = `${a}&token=${t?.token}`;
+    }
+  }
   render() {
-    return 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._getSolutionVersionCard()}</calcite-shell-panel>${this._renderDiagramDialog()}${this._getConfigureTitlesDialog()}${this._getDeleteDialog()}${this._getSuccessDeployAlert()}</calcite-shell>`;
+    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._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._getSolutionVersionCard()}</calcite-shell-panel>${this._renderDiagramDialog()}${this._getConfigureTitlesDialog()}${this._getDeleteDialog()}${this._getSuccessDeployAlert()}</calcite-shell>`;
   }
   async _deployedCardSelected(e) {
     const t = e.detail;
-    this.card = t.card, this.cardRef = t.cardRef, this.templateInfos = [], this._accordionLoading = !0, this.templateInfos = this.cardRef ? await this.cardRef.getTemplates() : await w(this.card.id, this._configContextConsumer.value.userSession), this._accordionLoading = !1;
-    const a = await $(this._configContextConsumer.value.userSession, this.card);
-    this._nonSolutionDependencyItems = a._nonSolutionDependencyItems, setTimeout(() => {
-      a.uniqueIitemIds.length > 0 && (this._accordionRef.listSelectionMode = "multiple", this._accordionRef.selectItems(a.uniqueIitemIds));
-    }, 500);
-    const n = C(this._configContextConsumer.value?.allCards || [], this.card.deployCommonId);
-    let s = !1;
-    if (n) {
-      const d = r(n), p = r(this.card);
-      s = d > p;
+    this.card = t.card, this.cardRef = t.cardRef, this.templateInfos = [], this._accordionLoading = !0, this.templateInfos = await this._getTemplates(), this._accordionLoading = !1;
+    const a = await S(this._configContextConsumer.value.userSession, this.card);
+    this._nonSolutionDependencyItems = a._nonSolutionDependencyItems;
+    const o = $(this._configContextConsumer.value?.allCards || [], this.card.deployCommonId);
+    let n = !1;
+    if (o) {
+      const c = p(o), g = p(this.card);
+      n = c > g;
     }
-    this._hasNewVersion = s;
+    this._hasNewVersion = n;
   }
   _handleDeployAppTabSelected(e) {
     e.detail === "deployed-card" && this.sortTypeChanged.emit("");
   }
   _getButtons() {
-    const e = this._configContextConsumer.value?.userSession?.username, t = this.card?.owner === e || this._isOrgAdmin, a = t ? "display-none" : "";
-    return i`<div class="display-flex flex-direction-column padding-xxl"><calcite-button appearance=outline class="padding-bottom-lg" kind=neutral @click=${this._openDiagram}>${this._translations.viewTheDiagram}</calcite-button><calcite-button appearance=outline class="padding-bottom-lg" kind=neutral @click=${this._viewDocumentation}>${this._translations.solutionDocumentation}</calcite-button><calcite-button appearance=outline class="padding-bottom-lg" kind=neutral @click=${this._openItemDetails}>${this._translations.itemDetails}</calcite-button><calcite-button appearance=outline class="padding-bottom-lg" .disabled=${!t} id=solution-configure-titles-button kind=neutral @click=${this._openConfigureTitlesDialog}>${this._translations.updateTitles}</calcite-button><calcite-tooltip class=${x(a)} overlay-positioning=fixed reference-element=solution-configure-titles-button><span>${this._translations.mustOwnSolution}</span></calcite-tooltip><calcite-button appearance=outline class="padding-bottom-lg" kind=neutral @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-button></div>`;
+    const e = this._configContextConsumer.value?.userSession?.username, t = this._configContextConsumer.value?.authentication?.CanUpdateSolution, a = this.card?.owner === e || this._isOrgAdmin || t, o = this.card?.owner === e || this._isOrgAdmin, n = a ? "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>${a && !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=${f(n)} overlay-positioning=fixed reference-element=solution-configure-titles-button><span>${this._translations.mustOwnSolution}</span></calcite-tooltip>` || ""}${o && !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>`;
   }
   _openConfigureTitlesDialog() {
     this._configureTitlesOpen = !0;
   }
   _getConfigureTitlesDialog() {
-    return this._configureTitlesOpen ? i`<solution-configure-titles .card=${this.card} @solutionConfigureTitlesBeforeClose=${() => {
-      this._configureTitlesOpen = !1;
+    return this._configureTitlesOpen ? i`<solution-configure-titles .card=${this.card} @solutionConfigureTitlesBeforeClose=${async () => {
+      this.templateInfos = await this._getTemplates(), this._configureTitlesOpen = !1;
     }} @solutionItemsTitlesChanged=${async () => {
-      this.templateInfos = await this.cardRef.getTemplates();
+      this.templateInfos = await this._getTemplates();
     }} .open=${this._configureTitlesOpen} source="Details Page" .templateInfos=${this.templateInfos}></solution-configure-titles>` : "";
   }
   _viewDocumentation(e) {
     e.stopPropagation(), this._telemetry?.logEvent({
-      category: o.DEPLOYMENTS,
+      category: s.DEPLOYMENTS,
       action: "Open Help",
       dimensions: [
         this.card?.title || "",
@@ -97,7 +94,7 @@ class I extends _ {
   }
   _openItemDetails(e) {
     e.stopPropagation(), this._telemetry?.logEvent({
-      category: o.DEPLOYMENTS,
+      category: s.DEPLOYMENTS,
       action: "Open Item Details",
       dimensions: [
         this.card?.title || "",
@@ -108,22 +105,16 @@ class I extends _ {
     }), window.open(this.card.itemUrl, "_blank");
   }
   _getOwnerSection() {
-    if (this._configContextConsumer?.value)
-      return i`<div class="display-flex padding-bottom-xxl margin-start-end-xxl flex-direction-column"><div class="display-flex justify-between items-baseline"><calcite-label class="font-weight-med label-override" layout=inline scale=l>${this._translations.aboutYourSolutionOwner}</calcite-label><calcite-button appearance=transparent kind=neutral icon-start=pencil @click=${() => {
-        this._telemetry?.logEvent({
-          category: o.DEPLOYMENTS,
-          action: "Change Owner",
-          dimensions: [
-            this.card?.title || "",
-            this.card?.deployCommonId || "",
-            this.card?.deployVersion || ""
-          ]
-        });
-      }}>${this._translations.editSolutionOwner}</calcite-button></div>${u(this.card?.owner, i`<arcgis-user-popup api=4 appearance=outline .baseUrl=${this._configContextConsumer?.value?.authentication?.IsEnterprisePortal ? this._configContextConsumer?.value?.orgUrl : this._configContextConsumer?.value?.orgUrl + "/home/"} class="padding-top-lg" .portal=${this._configContextConsumer?.value?.authentication?.Portal} scale=l show-avatar show-name show-username underline .user=${this._user?.username === this.card?.owner ? this._user : void 0} .username=${this.card?.owner}></arcgis-user-popup>`)}</div>`;
+    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>`;
   }
   async _openDiagram(e) {
-    e.stopPropagation(), this.cardRef && (this._telemetry?.logEvent({
-      category: o.DEPLOYMENTS,
+    e.stopPropagation();
+    const t = await this._getTemplates();
+    t && (this._telemetry?.logEvent({
+      category: s.DEPLOYMENTS,
       action: "View Diagram",
       dimensions: [
         this.card?.title || "",
@@ -131,34 +122,34 @@ class I extends _ {
         this.card?.deployVersion || "",
         "Details Page"
       ]
-    }), this._templateInfoGraph = await this.cardRef.getTemplates(), this._isDiagramOpen = !0);
+    }), this._templateInfoGraph = t, this._isDiagramOpen = !0);
+  }
+  async _getTemplates() {
+    return this.cardRef ? await this.cardRef.getTemplates() : this.card ? await y(this.card.id, this._configContextConsumer.value.userSession) : void 0;
   }
   _getSolutionVersionCard() {
-    const e = this._hasNewVersion ? this._translations.newVersionAvailable : this._translations.youHaveTheLatestVersion;
-    return i`<div class="padding-xxl display-flex flex-direction-column"><calcite-label class="font-weight-med label-override" layout=inline scale=l slot=heading>${this._translations.solutionVersion}</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="font-weight-bold font-color-1">${this.card?.deployVersion}</span><span>${e}</span></div></div></div>${this._hasNewVersion ? i`<calcite-button appearance=outline class="padding-top-lg" kind=neutral @click=${this._openNewVersionSolution} width=full>${this._translations.learnMoreNewVersion}</calcite-button>` : ""}</div>`;
+    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>`;
   }
   async _openNewVersionSolution(e) {
     e.stopPropagation(), this._telemetry?.logEvent({
-      category: o.DEPLOYMENTS,
+      category: s.DEPLOYMENTS,
       action: "View Latest Version",
       dimensions: [
         this.card?.title || "",
         this.card?.deployCommonId || "",
         this.card?.deployVersion || ""
       ]
-    }), await new Promise((n) => setTimeout(n, 100));
-    const t = S(this._configContextConsumer.value.allCards, this.card.deployCommonId), a = window.location.href;
-    t && window.open(a.replace(/deployments\/.+/, t), "_self");
+    }), await new Promise((a) => setTimeout(a, 100));
+    const t = C(this._configContextConsumer.value.allCards, this.card.deployCommonId);
+    t && this.forceSelectTab.emit({ tabType: "details", tabTitleOrId: t });
   }
   _getSolutionPanel() {
-    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400"), t = this._configContextConsumer.value?.userSession;
-    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 ?? c} src=${e ? `${e}&token=${t?.token}` : ""}></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">${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"><calcite-label class="font-1 padding-end-xxl" scale=l>${this.card?.snippet}</calcite-label></div><div class="display-flex"><div class="display-flex"><calcite-label class="label-override icon-color" layout=inline><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 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 ?? r} src=${this._thumbnailUrl ?? r}></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} ${m(async (t) => {
-      t && !this._accordionRef && (this._accordionRef = t, await this._accordionRef.selectFirstItem());
-    })}></solution-item-accordion>`}</div></calcite-accordion-item></calcite-accordion></calcite-panel>`;
+    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() {
     return this._deleteDialogOpen ? i`<solution-delete-dialog .card=${this.card} @solutionDeleted=${() => setTimeout(() => this.navTabSelected.emit({ tabType: "deployments" }), 100)} @solutionDeleteDialogBeforeClose=${() => {
@@ -171,15 +162,18 @@ class I extends _ {
     }}><div slot=title>${this._translations.deploySuccessAlert.replace("{{solutionTitle}}", this.card?.title ?? "")}</div></calcite-alert>`;
   }
   _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 ?? "") ?? c} modal .open=${this._isDiagramOpen} @calciteDialogClose=${() => {
+    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 ?? "") ?? r} 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>` : "";
   }
   async _deleteSolution() {
     this._deleteDialogOpen = !0;
   }
+  _updateThumbnailToken(e) {
+    this._thumbnailUrl !== "" && (this._thumbnailUrl = w(this._thumbnailUrl, e));
+  }
 }
-g("solution-deployed-card-panel", I);
+h("solution-deployed-card-panel", T);
 export {
-  I as SolutionDeployedCardPanel
+  T as SolutionDeployedCardPanel
 };

package/dist/components/solution-deployed-card-panel/index.d.ts CHANGED Viewed

@@ -1,18 +1 @@
-import "@esri/calcite-components/components/calcite-shell";
-import "@esri/calcite-components/components/calcite-panel";
-import "@esri/calcite-components/components/calcite-shell-panel";
-import "@esri/calcite-components/components/calcite-button";
-import "@esri/calcite-components/components/calcite-tooltip";
-import "../solution-configure-titles/index.js";
-import "@esri/calcite-components/components/calcite-label";
-import "@arcgis/app-components/dist/components/arcgis-user-popup.js";
-import "@esri/calcite-components/components/calcite-icon";
-import "@esri/calcite-components/components/calcite-accordion";
-import "@esri/calcite-components/components/calcite-accordion-item";
-import "@esri/calcite-components/components/calcite-loader";
-import "../solution-item-accordion/index.js";
-import "../solution-delete-dialog/index.js";
-import "@esri/calcite-components/components/calcite-alert";
-import "@esri/calcite-components/components/calcite-dialog";
-import "../solution-item-diagram/index.js";
 export * from "./customElement.js";

package/dist/components/solution-deployed-card-panel/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "../solution-configure-titles/index.js";
 import "@esri/calcite-components/components/calcite-label";
-import "@arcgis/app-components/dist/components/arcgis-user-popup.js";
+import "../solution-user-avatar/index.js";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-accordion";
 import "@esri/calcite-components/components/calcite-accordion-item";

package/dist/components/solution-deploying-dialog/customElement.d.ts CHANGED Viewed

@@ -1,36 +1,86 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
-import { ISolutionInfoCard } from '../../utils/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ISolutionInfoCard } from "../../utils/interfaces.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
-export declare class SolutionDeployingDialog extends LitElement {
-    /** Abort controller to stop the deploying. Actual cancel callback is in solution-details */
-    abortController: AbortController | undefined;
-    /** Key details about the solution */
-    card: ISolutionInfoCard | undefined;
-    /**
-     * Percentage of completion for solution deployment
-     *
-     * @default 0
-     */
-    deploymentProgress: number;
-    /**
-     * When true the dialog will be shown
-     *
-     * @default false
-     */
-    open: boolean;
-    /** Closes the dialog */
-    close(): void;
-    /** Confirm cancel the deployment */
-    confirmCancel(): void;
-    /** Cancel the current deployment */
-    cancelDeployment(): void;
-    /** Emitted when the deploying dialog opens */
-    readonly deployingDialogOpened: TargetedEvent<this, void>;
-    /** Emitted when deployment is cancelled by the user during deployment */
-    readonly deploymentProcessCancelled: TargetedEvent<this, void>;
-    "@eventTypes": {
-        "deployingDialogOpened": SolutionDeployingDialog["deployingDialogOpened"]["detail"];
-        "deploymentProcessCancelled": SolutionDeployingDialog["deploymentProcessCancelled"]["detail"];
-    };
-}
+export abstract class SolutionDeployingDialog extends LitElement {
+  /**
+   * Contains the translations for this component.
+   * All UI strings should be defined here.
+   *
+   * @internal
+   */
+  protected _translations: {
+      cancel: string;
+      cancelCurrentDeployment: string;
+      cancelDeploymentHeader: string;
+      cancelDeploymentButton: string;
+      carousel: {
+          stockMessage1: string;
+          stockMessage2: string;
+          stockMessage3: string;
+          stockMessage4: string;
+          stockMessage5: string;
+          stockMessage6: string;
+      };
+      continueDeployment: string;
+      deploymentCancelMessage: string;
+      deploymentInProgress: string;
+      newsAndFeatures: string;
+      title: string;
+  } & T9nMeta<{
+      cancel: string;
+      cancelCurrentDeployment: string;
+      cancelDeploymentHeader: string;
+      cancelDeploymentButton: string;
+      carousel: {
+          stockMessage1: string;
+          stockMessage2: string;
+          stockMessage3: string;
+          stockMessage4: string;
+          stockMessage5: string;
+          stockMessage6: string;
+      };
+      continueDeployment: string;
+      deploymentCancelMessage: string;
+      deploymentInProgress: string;
+      newsAndFeatures: string;
+      title: string;
+  }>;
+  /** Abort controller to stop the deploying. Actual cancel callback is in solution-details */
+  accessor abortController: AbortController | undefined;
+  /** Key details about the solution */
+  accessor card: ISolutionInfoCard | undefined;
+  /**
+   * Percentage of completion for solution deployment
+   *
+   * @default 0
+   */
+  accessor deploymentProgress: number;
+  /**
+   * Track when deployment is complete and we're waiting for card to be ready
+   *
+   * @default false
+   */
+  accessor isWaitingForCard: boolean;
+  /**
+   * When true the dialog will be shown
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /** Cancel the current deployment */
+  cancelDeployment(): void;
+  /** Closes the dialog */
+  close(): void;
+  /** Confirm cancel the deployment */
+  confirmCancel(): void;
+  /** Emitted when the deploying dialog opens */
+  readonly deployingDialogOpened: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when deployment is cancelled by the user during deployment */
+  readonly deploymentProcessCancelled: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    deployingDialogOpened: SolutionDeployingDialog["deployingDialogOpened"]["detail"];
+    deploymentProcessCancelled: SolutionDeployingDialog["deploymentProcessCancelled"]["detail"];
+  };
+}