@esri/solutions-components 1.0.4 → 1.0.6

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

@@ -7,6 +7,10 @@ import { SolutionDeleteDialog } from '../solution-delete-dialog/customElement.js
 export declare class SolutionDeployedCard extends LitElement {
     /** @default false */
     allowDelete: boolean;
+    /** The authentication from global nav */
+    authContextConsumer: import('@lit/context').ContextConsumer<{
+        __context__: import('../../utils/Auth').Auth;
+    }, HTMLElement & import('lit').ReactiveControllerHost>;
     /** Key details about the solution */
     card: ISolutionInfoCard | undefined;
     /** @default '' */
@@ -27,6 +31,11 @@ export declare class SolutionDeployedCard extends LitElement {
     readonly userSessionContextConsumer: import('@lit/context').ContextConsumer<{
         __context__: import('@esri/arcgis-rest-request').ArcGISIdentityManager;
     }, HTMLElement & import('lit').ReactiveControllerHost>;
+    /**
+     * Show the configure dialog
+     * This allows other components to leverage the logic that is built into this card.
+     */
+    renderConfigureDialog(showSuccessAlert: boolean): Promise<void>;
     /**
      * Show the delete dialog
      * This allows other components to leverage the logic that is built into this card.
@@ -39,4 +48,6 @@ export declare class SolutionDeployedCard extends LitElement {
      * It will return a reference to the dialog so the other component can respond to its events.
      */
     renderDiagramDialog(evt: MouseEvent): Promise<HTMLCalciteDialogElement | undefined>;
+    /** Get the templates from the current card */
+    getTemplates(): Promise<ITemplateInfoGraph[]>;
 }

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

@@ -1,15 +1,15 @@
-import { c as l } from "../../chunks/runtime.js";
+import { c as n } from "../../chunks/runtime.js";
 import { html as i } from "lit-html";
-import { u as s } from "../../chunks/useT9n.js";
-import { LitElement as n, useContextConsumer as r, nothing as t } from "@arcgis/lumina";
-import { u as c } from "../../chunks/deployAppContexts.js";
-import { css as d } from "@lit/reactive-element/css-tag.js";
-import { p } from "../../chunks/prepareDataForSolutionDisplay.js";
+import { u as r } from "../../chunks/useT9n.js";
+import { LitElement as c, useContextConsumer as s, nothing as t } from "@arcgis/lumina";
+import { a as d, u as p } from "../../chunks/deployAppContexts.js";
+import { css as h } from "@lit/reactive-element/css-tag.js";
+import { p as g } from "../../chunks/prepareDataForSolutionDisplay.js";
 import { createRef as a, ref as o } from "lit-html/directives/ref.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.4 */
-const h = d`/** @license
+v1.0.6 */
+const u = h`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,19 +23,25 @@ const h = d`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */calcite-card{width:295px}@media (max-width: 400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:var(--calcite-color-text-inverse)}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%}.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}.width-full{width:100%}.deployed-label-override{--calcite-label-text-color: var(--calcite-color-text-3);--calcite-label-margin-bottom: 0px}.deployed-icon-override{--calcite-icon-color: var(--calcite-color-text-3)}.padding-end-1-2{padding-inline-end:.5rem}.padding-bottom-1-2{padding-bottom:.5rem}.display-flex{display:flex}.flex-direction-column{flex-direction:column}.align-items-center{align-items:center}.font-weight-bold{font-weight:700}.font-weight-normal{font-weight:400}.icon-brand-color{--calcite-icon-color: var(--calcite-color-brand)}.header-line-height{line-height:2.5rem}.dialog-y-size{--calcite-dialog-size-y: 90% }.dialog-x-size{--calcite-dialog-size-x: 90% }.justify-content-space-between{justify-content:space-between}`;
-class g extends n {
+ */calcite-card{width:295px}@media (max-width: 400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%}.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}.width-full{width:100%}.deployed-label-override{--calcite-label-text-color: var(--calcite-color-text-3);--calcite-label-margin-bottom: 0px}.deployed-icon-override{--calcite-icon-color: var(--calcite-color-text-3)}.padding-end-1-2{padding-inline-end:.5rem}.padding-bottom-1-2{padding-bottom:.5rem}.display-flex{display:flex}.flex-direction-column{flex-direction:column}.align-items-center{align-items:center}.font-weight-bold{font-weight:700}.font-weight-normal{font-weight:400}.icon-brand-color{--calcite-icon-color: var(--calcite-color-brand)}.header-line-height{line-height:2.5rem}.dialog-y-size{--calcite-dialog-size-y: 90% }.dialog-x-size{--calcite-dialog-size-x: 90% }.justify-content-space-between{justify-content:space-between}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-foreground-1);--calcite-panel-background-color: var(--calcite-color-foreground-1)}`;
+class m extends c {
   constructor() {
-    super(...arguments), this.allowDelete = !1, this.deployedDate = "", this.description = "", this.heading = "", this.itemId = "", this.owner = "", this.thumbnail = "", this.updateAvailable = !1, this.userSessionContextConsumer = r({
-      context: c,
+    super(...arguments), this.allowDelete = !1, this.authContextConsumer = s({
+      context: d,
       subscribe: !0
-    }), this._isConfigureOpen = !1, this._isDeleteOpen = !1, this._isDiagramOpen = !1, this.templateInfoGraph = [], this._translations = s({ name: "solution-deployed-card", blocking: !0 }), this._deleteDialogRef = a(), this._diagramDialogRef = a();
+    }), this.deployedDate = "", this.description = "", this.heading = "", this.itemId = "", this.owner = "", this.thumbnail = "", this.updateAvailable = !1, this.userSessionContextConsumer = s({
+      context: p,
+      subscribe: !0
+    }), this._isConfigureOpen = !1, this._isDeleteOpen = !1, this._isDiagramOpen = !1, this.templateInfoGraph = [], this._translations = r({ name: "solution-deployed-card", blocking: !0 }), this._configureDialogRef = a(), this._deleteDialogRef = a(), this._diagramDialogRef = a();
   }
   static {
-    this.properties = { allowDelete: 5, card: 0, deployedDate: 1, description: 1, heading: 1, itemId: 1, owner: 1, thumbnail: 1, updateAvailable: 5, userSessionContextConsumer: 32, _isConfigureOpen: 16, _isDeleteOpen: 16, _isDiagramOpen: 16, templateInfoGraph: 16, _translations: 16 };
+    this.properties = { allowDelete: 5, authContextConsumer: 0, card: 0, deployedDate: 1, description: 1, heading: 1, itemId: 1, owner: 1, thumbnail: 1, updateAvailable: 5, userSessionContextConsumer: 32, _isConfigureOpen: 16, _isDeleteOpen: 16, _isDiagramOpen: 16, templateInfoGraph: 16, _translations: 16 };
   }
   static {
-    this.styles = h;
+    this.styles = u;
+  }
+  async renderConfigureDialog(e) {
+    this._cardSelected(), this._configureDialogRef.value && (this._configureDialogRef.value.showSuccessAlert = e);
   }
   async renderDeleteDialog() {
     return this._isDeleteOpen = !0, this._renderDeleteDialog(), this._deleteDialogRef.value;
@@ -43,10 +49,11 @@ class g extends n {
   async renderDiagramDialog(e) {
     return this._isDiagramOpen = !0, await this._viewDiagram(e), await this._renderDiagramDialog(), this._diagramDialogRef.value;
   }
+  async getTemplates() {
+    return this._processTemplates(this.card);
+  }
   render() {
-    return i`<div><calcite-card .label=${this.description} @click=${this._cardSelected}>${this._getImage()}${this._getHeader()}<p slot=description>${this.description}</p><div class="width-full display-flex flex-direction-column" slot=footer-start><div class="padding-bottom-1-2">${this._getOwnerLabel()}${this._getDeployedDate()}</div>${this._getConfigureButton()}</div></calcite-card>${this._renderDeleteDialog()}${this._renderDiagramDialog()}<solution-configure-dialog .card=${this.card} .cardRef=${this.el} @solutionConfigureDialogClose=${() => {
-      this._isConfigureOpen = !1;
-    }} .open=${this._isConfigureOpen}></solution-configure-dialog></div>`;
+    return i`<div><calcite-card .label=${this.description} @click=${this._cardSelected}>${this._getImage()}${this._getHeader()}<p slot=description>${this.description}</p><div class="width-full display-flex flex-direction-column" slot=footer-start><div class="padding-bottom-1-2">${this._getOwnerLabel()}${this._getDeployedDate()}</div>${this._getConfigureButton()}</div></calcite-card>${this._renderDeleteDialog()}${this._renderDiagramDialog()}${this._renderConfigureDialog()}</div>`;
   }
   _getImage() {
     const e = this.userSessionContextConsumer.value;
@@ -62,17 +69,24 @@ class g extends n {
     return i`<div class="display-flex align-items-center"><calcite-icon class="deployed-icon-override padding-end-1-2" icon=projects scale=s></calcite-icon><calcite-label class="deployed-label-override">${this._translations.deployedDate.replace("{{date}}", this.deployedDate)}</calcite-label></div>`;
   }
   _getConfigureButton() {
-    return i`<calcite-split-button appearance=outline @click=${(e) => e.stopPropagation()} overlay-positioning=fixed primary-text=${this._translations.configure ?? t} width=full><calcite-dropdown-group selection-mode=none><calcite-dropdown-item icon-start=model @click=${this._viewDiagram}>${this._translations.viewDiagram}</calcite-dropdown-item><calcite-dropdown-item icon-start=file-text @click=${this._viewDocumentation}>${this._translations.documentation}</calcite-dropdown-item><calcite-dropdown-item icon-start=information @click=${this._viewItemDetails}>${this._translations.viewItemDetails}</calcite-dropdown-item>${this.allowDelete && i`<calcite-dropdown-item icon-start=trash @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-dropdown-item>` || ""}</calcite-dropdown-group></calcite-split-button>`;
+    return i`<calcite-split-button appearance=outline @calciteSplitButtonPrimaryClick=${() => {
+      this._isConfigureOpen = !0;
+    }} @click=${(e) => e.stopPropagation()} overlay-positioning=fixed primary-text=${this._translations.configure ?? t} width=full><calcite-dropdown-group selection-mode=none><calcite-dropdown-item icon-start=model @click=${this._viewDiagram}>${this._translations.viewDiagram}</calcite-dropdown-item><calcite-dropdown-item icon-start=file-text @click=${this._viewDocumentation}>${this._translations.documentation}</calcite-dropdown-item><calcite-dropdown-item icon-start=information @click=${this._viewItemDetails}>${this._translations.viewItemDetails}</calcite-dropdown-item>${this.allowDelete && i`<calcite-dropdown-item icon-start=trash @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-dropdown-item>` || ""}</calcite-dropdown-group></calcite-split-button>`;
   }
   _renderDeleteDialog() {
-    return i`<solution-delete-dialog .card=${this.card} .open=${this._isDeleteOpen} @dialogOpen=${(e) => {
+    return this._isDeleteOpen ? i`<solution-delete-dialog .card=${this.card} .open=${this._isDeleteOpen} @dialogOpen=${(e) => {
       this._isDeleteOpen = e.detail;
-    }} ${o(this._deleteDialogRef)}></solution-delete-dialog>`;
+    }} ${o(this._deleteDialogRef)}></solution-delete-dialog>` : "";
   }
   _renderDiagramDialog() {
-    return i`<calcite-dialog class="dialog-y-size dialog-x-size" heading id modal .open=${this._isDiagramOpen} @calciteDialogClose=${() => {
+    return this._isDiagramOpen ? i`<calcite-dialog class="dialog-y-size dialog-x-size panel-bg-color" .heading=${this._translations.diagramTitle.replace("{{solution}}", this.card?.title ?? "")} id=${this._translations.diagramTitle.replace("{{solution}}", this.card?.title ?? "") ?? t} modal .open=${this._isDiagramOpen} @calciteDialogClose=${() => {
       this._isDiagramOpen = !1;
-    }} outside-close-disabled resizable scale=l width=l ${o(this._diagramDialogRef)}><solution-item-diagram .templateInfoGraph=${this.templateInfoGraph}></solution-item-diagram></calcite-dialog>`;
+    }} outside-close-disabled resizable scale=l width=l ${o(this._diagramDialogRef)}><solution-item-diagram .templateInfoGraph=${this.templateInfoGraph}></solution-item-diagram></calcite-dialog>` : "";
+  }
+  _renderConfigureDialog() {
+    return i`<solution-configure-dialog .card=${this.card} .cardRef=${this.el} @solutionConfigureDialogClose=${() => {
+      this._isConfigureOpen = !1;
+    }} .open=${this._isConfigureOpen} ${o(this._configureDialogRef)}></solution-configure-dialog>`;
   }
   _cardSelected() {
     this._isConfigureOpen = !0;
@@ -81,25 +95,27 @@ class g extends n {
     e.stopPropagation(), this.card && (this.templateInfoGraph = await this._processTemplates(this.card), this._isDiagramOpen = !0);
   }
   _viewDocumentation(e) {
-    e.stopPropagation(), alert("_viewDocumentation");
+    e.stopPropagation(), window.open(this.card.learnMoreUrl, "_blank");
   }
   _viewItemDetails(e) {
-    e.stopPropagation(), alert("_viewItemDetails");
+    e.stopPropagation(), window.open(this.card.itemUrl, "_blank");
   }
   _deleteSolution(e) {
     e.stopPropagation(), this._isDeleteOpen = !0;
   }
   _openUserProfile(e) {
-    e.stopPropagation(), alert("_openUserProfile");
+    e.stopPropagation();
+    const l = this.authContextConsumer.value?.PortalSubset?.orgUrl;
+    l && window.open(`${l}/home/user.html`, "_blank");
   }
   _updateAvailable(e) {
     e.stopPropagation(), alert("_updateAvailable");
   }
   async _processTemplates(e) {
-    return await p(e.id, this.userSessionContextConsumer.value);
+    return await g(e.id, this.userSessionContextConsumer.value);
   }
 }
-l("solution-deployed-card", g);
+n("solution-deployed-card", m);
 export {
-  g as SolutionDeployedCard
+  m as SolutionDeployedCard
 };

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

@@ -1,5 +1,4 @@
 import "@esri/calcite-components/components/calcite-card";
-import "../solution-configure-dialog/index.js";
 import "@esri/calcite-components/components/calcite-label";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-tooltip";
@@ -10,4 +9,5 @@ import "@esri/calcite-components/components/calcite-dropdown-item";
 import "../solution-delete-dialog/index.js";
 import "@esri/calcite-components/components/calcite-dialog";
 import "../solution-item-diagram/index.js";
+import "../solution-configure-dialog/index.js";
 export * from "./customElement.js";

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

@@ -1,5 +1,4 @@
 import "@esri/calcite-components/components/calcite-card";
-import "../solution-configure-dialog/index.js";
 import "@esri/calcite-components/components/calcite-label";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-tooltip";
@@ -10,4 +9,5 @@ import "@esri/calcite-components/components/calcite-dropdown-item";
 import "../solution-delete-dialog/index.js";
 import "@esri/calcite-components/components/calcite-dialog";
 import "../solution-item-diagram/index.js";
+import "../solution-configure-dialog/index.js";
 export * from "./customElement.js";

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

@@ -0,0 +1,24 @@
+/// <reference types="../../index.d.ts" />
+import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+import { ISolutionInfoCard } from '../../utils/interfaces';
+
+export declare class SolutionDeployingDialog extends LitElement {
+    /** 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;
+}

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

@@ -0,0 +1,71 @@
+import { c as a } from "../../chunks/runtime.js";
+import { html as t } from "lit-html";
+import { u as s } from "../../chunks/useT9n.js";
+import { LitElement as l } from "@arcgis/lumina";
+import { css as c } from "@lit/reactive-element/css-tag.js";
+import { createRef as r, ref as h } from "lit-html/directives/ref.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/1.0/esri/copyright.txt for details.
+v1.0.6 */
+const p = c`/** @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.
+ */.panel-bg-white{--calcite-panel-background-color: var(--calcite-color-foreground-1)}`;
+class d extends l {
+  constructor() {
+    super(...arguments), this.deploymentProgress = 0, this.open = !1, this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1, this._translations = s({ name: "solution-deploying-dialog", blocking: !0 }), this._deployingDialogRef = r();
+  }
+  static {
+    this.properties = { card: 0, deploymentProgress: 9, open: 5, _isInCancelConfirmation: 16, _showCancelConfirmation: 16, _translations: 16 };
+  }
+  static {
+    this.styles = p;
+  }
+  close() {
+    this._showCancelConfirmation = !1;
+    const e = this._deployingDialogRef.value;
+    e && (e.open = !1), this.open = !1;
+  }
+  confirmCancel() {
+    if (this._isInCancelConfirmation)
+      this.close();
+    else {
+      const e = this._deployingDialogRef.value;
+      e && (e.open = !0, e.closeDisabled = !0, this._isInCancelConfirmation = !0), this._showCancelConfirmation = !0;
+    }
+  }
+  async load() {
+  }
+  render() {
+    return t`<calcite-dialog .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} modal .open=${this.open} @calciteDialogBeforeClose=${(e) => {
+      e.preventDefault();
+    }} outside-close-disabled ${h(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : t`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.deploymentInProgress} scale=l .text=${this._translations.deploymentInProgress} type=determinate-value .value=${this.deploymentProgress}></calcite-loader><calcite-carousel autoplay .label=${this._translations.newsAndFeatures} arrow-type=inline>${this.renderCarouselItems()}</calcite-carousel><calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button></calcite-panel>`}</calcite-dialog>`;
+  }
+  renderCarouselItems() {
+    const e = [], o = this._translations.carousel;
+    for (const [i, n] of Object.entries(o))
+      e.push(t`<calcite-carousel-item .label=${i}><calcite-label layout=inline>${i === "stockMessage1" && t`<calcite-icon icon=workflow-diagram></calcite-icon>` || ""}${i === "stockMessage2" && t`<calcite-icon icon=trash></calcite-icon>` || ""}${n}</calcite-label></calcite-carousel-item>`);
+    return e;
+  }
+  renderCancelModal() {
+    return t`<calcite-panel class="panel-bg-white">${this._translations.deploymentCancelMessage}<calcite-button kind=brand @click=${() => {
+      const e = this._deployingDialogRef.value;
+      e && (e.closeDisabled = !1), this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1;
+    }} slot=footer-end>${this._translations.continueDeployment}</calcite-button><calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancelDeploymentButton}</calcite-button></calcite-panel>`;
+  }
+}
+a("solution-deploying-dialog", d);
+export {
+  d as SolutionDeployingDialog
+};

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

@@ -5,7 +5,7 @@ import { LitElement as l, createEvent as n, nothing as s, safeClassMap as d } fr
 import { css as p } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.4 */
+v1.0.6 */
 const h = p`/** @license
  * Copyright 2025 Esri
  *
@@ -20,7 +20,7 @@ const h = p`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */calcite-card{width:220px}@media (max-width: 400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:var(--calcite-color-text-inverse)}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer}.chip-updated{--calcite-chip-icon-color: var(--calcite-ui-brand);cursor:pointer}.chip-deployed{--calcite-chip-icon-color: var(--calcite-color-status-success)}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%}.info-icon{--calcite-icon-color: var(--calcite-color-text-inverse);padding-inline-end:.3rem}.card-image-wrap{flex:0 0 auto}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}`;
+ */calcite-card{width:220px}@media (max-width: 400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer}.chip-updated{--calcite-chip-icon-color: var(--calcite-ui-brand);cursor:pointer}.chip-deployed{--calcite-chip-icon-color: var(--calcite-color-status-success)}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%}.info-icon{--calcite-icon-color: var(--calcite-color-text-inverse);padding-inline-end:.3rem}.card-image-wrap{flex:0 0 auto}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}`;
 class m extends l {
   constructor() {
     super(...arguments), this._translations = r({ name: "solution-details-card", blocking: !0 }), this.detailsCardSelected = n();

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

@@ -1,7 +1,7 @@
 /// <reference types="../../index.d.ts" />
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
 import { IItemTemplate } from '@esri/solution-common';
-import { IItemProperties, ISolutionInfoCard } from '../../utils/interfaces';
+import { IItemProperties, IPrivilegeMessages, ISolutionInfoCard } from '../../utils/interfaces';
 
 export declare class SolutionDetailsPanel extends LitElement {
     /** Key details about the solution */