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

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

@@ -1,41 +1,25 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
 import { c as n } from "../../chunks/runtime.js";
 import { css as c, html as t } from "lit";
 import { keyed as r } from "lit/directives/keyed.js";
-import { u as h } from "../../chunks/useT9n.js";
-import { LitElement as u, createEvent as i } from "@arcgis/lumina";
-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.2/esri/copyright.txt for details.
-v1.2.0-next.97 */
-const d = 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 g extends u {
+import { u as d } from "../../chunks/useT9n.js";
+import { LitElement as h, createEvent as a } from "@arcgis/lumina";
+import { createRef as i, ref as l } from "lit-html/directives/ref.js";
+const p = c`*[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.panel-bg-white{--calcite-panel-background-color: var(--calcite-color-foreground-1)}calcite-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.loader-text{margin-top:var(--calcite-spacing-sm);margin-bottom:var(--calcite-spacing-xxxl);text-align:center;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-1)}.carousel-style{height:120px;display:flex;align-items:center}`;
+class g extends h {
   constructor() {
-    super(), this.deploymentProgress = 0, this.open = !1, this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1, this._showIsCancelling = !1, this._translations = h({ name: "solution-deploying-dialog", blocking: !0 }), this._carouselKey = 0, this._deployingDialogRef = a(), this._carouselRef = a(), this._carouselMessages = [], this._confirmUnload = !1, this.deployingDialogOpened = i(), this.deploymentProcessCancelled = i(), this.listenOn(window, "beforeunload", (e) => {
+    super(), this.deploymentProgress = 0, this.open = !1, this.isWaitingForCard = !1, this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1, this._showIsCancelling = !1, this._translations = d({ name: "solution-deploying-dialog", blocking: !0 }), this._carouselKey = 0, this._deployingDialogRef = i(), this._carouselRef = i(), this._carouselMessages = [], this._confirmUnload = !1, this.deployingDialogOpened = a(), this.deploymentProcessCancelled = a(), this.listenOn(window, "beforeunload", (e) => {
       (this._confirmUnload || this._showIsCancelling) && (e.preventDefault(), e.returnValue = !0);
     });
   }
   static {
-    this.properties = { abortController: 0, card: 0, deploymentProgress: 9, open: 5, _isInCancelConfirmation: 16, _showCancelConfirmation: 16, _showIsCancelling: 16, _translations: 16, _carouselKey: 16 };
+    this.properties = { abortController: 0, card: 0, deploymentProgress: 9, open: 5, isWaitingForCard: 5, _isInCancelConfirmation: 16, _showCancelConfirmation: 16, _showIsCancelling: 16, _translations: 16, _carouselKey: 16 };
   }
   static {
-    this.styles = d;
+    this.styles = p;
   }
   close() {
-    this._showCancelConfirmation = !1, this._showIsCancelling = !1;
+    this._showCancelConfirmation = !1, this._showIsCancelling = !1, this.isWaitingForCard = !1;
     const e = this._deployingDialogRef.value;
     e && (e.open = !1), this.open = !1;
   }
@@ -49,62 +33,49 @@ class g extends u {
   async load() {
   }
   render() {
-    return t`<calcite-dialog close-disabled .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} modal width=m .open=${this.open} @calciteDialogBeforeClose=${(e) => {
+    return t`<calcite-dialog close-disabled .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} escape-disabled modal width=m .open=${this.open} @calciteDialogBeforeClose=${(e) => {
       e.preventDefault(), this._confirmUnload = !1;
-    }} @calciteDialogOpen=${() => this._onDialogOpen()} outside-close-disabled ${o(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : this._showIsCancelling ? this.renderCancellingModal() : 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><div style="height: 120px; display: flex; align-items: center;">${r(this._carouselKey, t`<calcite-carousel autoplay=paused autoplay-duration=8000 .label=${this._translations.newsAndFeatures} arrow-type=inline ${o(this._carouselRef)}>${this.renderCarouselItems()}</calcite-carousel>`)}</div><calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button></calcite-panel>`}</calcite-dialog>`;
+    }} @calciteDialogOpen=${() => this._onDialogOpen()} outside-close-disabled ${l(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : this._showIsCancelling ? this.renderCancellingModal() : t`<calcite-panel class="panel-bg-white">${this.isWaitingForCard ? t`<calcite-loader .label=${this._translations.deploymentInProgress} scale=l type=indeterminate></calcite-loader><div class="loader-text" tabindex=0>${this._translations.deploymentInProgress}</div>` : t`<calcite-loader .label=${this._translations.deploymentInProgress} scale=l type=determinate-value .value=${this.deploymentProgress}></calcite-loader><div class="loader-text" tabindex=0>${this._translations.deploymentInProgress}</div>`}<div class="carousel-style">${r(this._carouselKey, t`<calcite-carousel .label=${this._translations.newsAndFeatures} arrow-type=inline ${l(this._carouselRef)}>${this.renderCarouselItems()}</calcite-carousel>`)}</div></calcite-panel>`}${!this._showCancelConfirmation && !this._showIsCancelling && t`<calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button>` || ""}${this._showCancelConfirmation && t`<calcite-button kind=brand @click=${() => {
+      this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1;
+    }} slot=footer-end>${this._translations.continueDeployment}</calcite-button><calcite-button appearance=outline @click=${this.cancelDeployment} slot=footer-end>${this._translations.cancelDeploymentButton}</calcite-button>` || ""}</calcite-dialog>`;
   }
   renderCarouselItems() {
     const e = [];
-    return this._carouselMessages.forEach((s, l) => {
-      e.push(t`<calcite-carousel-item .label=${`carousel-item-${l}`}><calcite-label layout=inline>${s.icon && t`<calcite-icon .icon=${s.icon} class="padding-end-0-5"></calcite-icon>` || ""}<span .innerHTML=${this._processCarouselMessage(s) ?? ""}></span></calcite-label></calcite-carousel-item>`);
+    return this._carouselMessages.forEach((s, o) => {
+      e.push(t`<calcite-carousel-item .label=${`carousel-item-${o}`}><calcite-label layout=inline scale=m>${s.icon && t`<calcite-icon .icon=${s.icon} class="padding-end-0-5"></calcite-icon>` || ""}<span .innerHTML=${this._processCarouselMessage(s) ?? ""} tabindex=0></span></calcite-label></calcite-carousel-item>`);
     }), e;
   }
   _getCarouselMessages() {
     const e = this._translations.carousel, s = [
       {
         message: e.stockMessage1,
-        icon: "mega-phone",
-        url: "https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/what-s-new-in-arcgis-solutions.htm"
+        //documentation
+        icon: "question"
       },
       {
         message: e.stockMessage2,
-        icon: "question",
-        url: this.card?.learnMoreUrl
+        //solution diagram
+        icon: "model"
       },
       {
         message: e.stockMessage3,
-        icon: "model",
-        url: void 0
+        //rename items
+        icon: "lightbulb"
       },
       {
         message: e.stockMessage4,
-        icon: "trash",
-        url: void 0
+        //deploy solution
+        icon: "information"
       },
       {
         message: e.stockMessage5,
-        icon: "lightbulb",
-        url: void 0
+        //solutions assistant
+        icon: "speech-bubbles"
       },
       {
         message: e.stockMessage6,
-        icon: "information",
-        url: void 0
-      },
-      {
-        message: e.stockMessage7,
-        icon: "speech-bubbles",
-        url: void 0
-      },
-      {
-        message: e.stockMessage8,
-        icon: "information",
-        url: "https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/releases-and-versions.htm"
-      },
-      {
-        message: e.stockMessage9,
-        icon: "lightbulb",
-        url: "https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/upgrading-an-arcgis-solution.htm"
+        //versions
+        icon: "information"
       }
     ];
     return s.sort(() => Math.random() - 0.5), s;
@@ -114,13 +85,10 @@ class g extends u {
     return s.includes("{{url}}") && e.url && (s = s.replace("{{url}}", e.url)), s;
   }
   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.cancelDeployment} slot=footer-end>${this._translations.cancelDeploymentButton}</calcite-button></calcite-panel>`;
+    return t`<calcite-panel class="panel-bg-white"><div tabindex=0>${this._translations.deploymentCancelMessage}</div></calcite-panel>`;
   }
   renderCancellingModal() {
-    return t`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.cancelCurrentDeployment} .text=${this._translations.cancelCurrentDeployment}></calcite-loader></calcite-panel>`;
+    return t`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.cancelCurrentDeployment}></calcite-loader><div class="loader-text" tabindex=0>${this._translations.cancelCurrentDeployment}</div></calcite-panel>`;
   }
   _onDialogOpen() {
     this._confirmUnload = !0, this._carouselKey++, this._translations.carousel && (this._carouselMessages = this._getCarouselMessages()), this.deployingDialogOpened.emit(), setTimeout(() => {

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

@@ -1,9 +1 @@
-import "@esri/calcite-components/components/calcite-dialog";
-import "@esri/calcite-components/components/calcite-panel";
-import "@esri/calcite-components/components/calcite-loader";
-import "@esri/calcite-components/components/calcite-carousel";
-import "@esri/calcite-components/components/calcite-button";
-import "@esri/calcite-components/components/calcite-carousel-item";
-import "@esri/calcite-components/components/calcite-label";
-import "@esri/calcite-components/components/calcite-icon";
 export * from "./customElement.js";

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

@@ -1,37 +1,57 @@
 /// <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 SolutionDetailsCard extends LitElement {
-    /** The solutions card */
-    card: ISolutionInfoCard | undefined;
-    /**
-     * Referrer solution ID for telemetry tracking (used when card is in 'you-may-also-like')
-     *
-     * @default ''
-     */
-    referrerSolutionId: string;
-    /**
-     * Referrer solution title for telemetry tracking (used when card is in 'you-may-also-like')
-     *
-     * @default ''
-     */
-    referrerSolutionTitle: string;
-    /**
-     * Referrer solution version for telemetry tracking (used when card is in 'you-may-also-like')
-     *
-     * @default ''
-     */
-    referrerSolutionVersion: string;
-    /**
-     * Source context for telemetry tracking (e.g., 'all-solutions', 'you-may-also-like')
-     *
-     * @default 'all-solutions'
-     */
-    source: string;
-    /** Emitted on demand when the details card is selected. */
-    readonly detailsCardSelected: TargetedEvent<this, ISolutionInfoCard>;
-    "@eventTypes": {
-        "detailsCardSelected": SolutionDetailsCard["detailsCardSelected"]["detail"];
-    };
-}
+export abstract class SolutionDetailsCard extends LitElement {
+  /**
+   * Contains the translations for this component.
+   * All UI strings should be defined here.
+   *
+   * @internal
+   */
+  protected _translations: {
+      arcgisSolutions: string;
+      newSolution: string;
+      updated: string;
+      deployed: string;
+      viewDetails: string;
+  } & T9nMeta<{
+      arcgisSolutions: string;
+      newSolution: string;
+      updated: string;
+      deployed: string;
+      viewDetails: string;
+  }>;
+  /** The solutions card */
+  accessor card: ISolutionInfoCard | undefined;
+  /**
+   * Referrer solution ID for telemetry tracking (used when card is in 'you-may-also-like')
+   *
+   * @default ''
+   */
+  accessor referrerSolutionId: string;
+  /**
+   * Referrer solution title for telemetry tracking (used when card is in 'you-may-also-like')
+   *
+   * @default ''
+   */
+  accessor referrerSolutionTitle: string;
+  /**
+   * Referrer solution version for telemetry tracking (used when card is in 'you-may-also-like')
+   *
+   * @default ''
+   */
+  accessor referrerSolutionVersion: string;
+  /**
+   * Source context for telemetry tracking (e.g., 'all-solutions', 'you-may-also-like')
+   *
+   * @default 'all-solutions'
+   */
+  accessor source: string;
+  /** Emitted on demand when the details card is selected. */
+  readonly detailsCardSelected: import("@arcgis/lumina").TargetedEvent<this, ISolutionInfoCard>;
+  readonly "@eventTypes": {
+    detailsCardSelected: SolutionDetailsCard["detailsCardSelected"]["detail"];
+  };
+}

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

@@ -1,48 +1,31 @@
-import { c as a } from "../../chunks/runtime.js";
-import { css as l, html as o } from "lit";
-import { u as c } from "../../chunks/useT9n.js";
-import { LitElement as n, createEvent as d, nothing as r, safeClassMap as h } from "@arcgis/lumina";
-import { useContextConsumer as p } from "@arcgis/lumina/context";
-import { c as m } from "../../chunks/deployAppContexts.js";
-import { T as u } from "../../chunks/interfaces.js";
-import { b as f } from "../../chunks/cardsHelpers.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 g = l`/** @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.
- */calcite-card{height:100%;padding-bottom:2px}@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{outline:2px solid var(--calcite-color-brand);box-sizing:border-box;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 b extends n {
+/* COPYRIGHT Esri - https://js.arcgis.com/5.0/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 { A as x, T as v, J as y } from "../../chunks/interfaces.js";
+import { c as $ } from "../../chunks/cardsHelpers.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 {
   constructor() {
-    super(...arguments), this.referrerSolutionId = "", this.referrerSolutionTitle = "", this.referrerSolutionVersion = "", this.source = "all-solutions", this._translations = c({ name: "solution-details-card", blocking: !0 }), this._configContextConsumer = p({
-      context: m,
+    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,
       subscribe: !0
-    }), this.detailsCardSelected = d();
+    }), this.detailsCardSelected = f();
   }
   static {
     this.properties = { card: 0, referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _translations: 16 };
   }
   static {
-    this.styles = g;
+    this.styles = _;
   }
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
   }
   render() {
-    const e = f(this.card.title);
-    return o`<a href=${e ?? r} @click=${this._anchorClick} .title=${`${this.card.title} - ${this._translations.arcgisSolutions}`}>${this._renderCard()}</a>`;
+    const e = $(this.card.title);
+    return o`<a href=${e ?? r} @click=${this._anchorClick} tabindex=-1 .title=${`${this._translations.arcgisSolutions} | ${this.card.title}`}>${this._renderCard()}</a>`;
   }
   _anchorClick(e) {
     e.preventDefault();
@@ -58,19 +41,26 @@ class b extends n {
         this.card?.deployVersion || ""
       ];
       this._telemetry?.logEvent({
-        category: u.SOLUTION_DETAILS,
+        category: v.SOLUTION_DETAILS,
         action: "Related Solution",
         dimensions: t
       });
     }
     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;
+  }
   _renderCard() {
-    const e = this.card, t = e.chip === "new" || e.chip === "updated" ? "chip-status" : this.card.chip === "deployed" ? "chip-deployed" : "", s = "solution-details-card-chip", i = e.chip === "new" ? this._translations.newSolution : e.chip === "updated" ? this._translations.updated : this._translations.deployed;
-    return o`<calcite-card .label=${e.snippet} @click=${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.chip !== "none" ? o`<div slot=footer-end><calcite-chip class=${h(t)} .icon=${e.chip === "new" ? "star" : e.chip === "updated" ? "mega-phone" : "check-circle"} id=${s} .label=${i} .value=${i} scale=s></calcite-chip><calcite-tooltip .referenceElement=${s}><span>${i}</span></calcite-tooltip></div>` : void 0}<div slot=footer-start></div></calcite-card>`;
+    const e = this.card;
+    return o`<calcite-card .label=${e.snippet} @click=${this._cardSelected} @keydown=${(t) => y(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>`;
   }
 }
-a("solution-details-card", b);
+h("solution-details-card", C);
 export {
-  b as SolutionDetailsCard
+  C as SolutionDetailsCard
 };

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

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

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

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

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

@@ -1,23 +1,159 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
-import { IItemTemplate } from '@esri/solution-common';
-import { IItemProperties, IPrivilegeMessages, ISolutionInfoCard } from '../../utils/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { IItemTemplate } from "@esri/solution-common";
+import type { IItemProperties, ISolutionInfoCard } from "../../utils/interfaces.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-export declare class SolutionDetailsPanel extends LitElement {
-    /** Key details about the solution */
-    card: ISolutionInfoCard | undefined;
-    /** Emitted on demand when the templates have been fetched from the solution */
-    readonly templatesFetched: TargetedEvent<this, IItemTemplate[]>;
-    /** Emitted on demand when the item properties have been fetched */
-    readonly itemPropertiesFetched: TargetedEvent<this, IItemProperties>;
-    /** Emitted on demand when the sort type changes */
-    readonly sortTypeChanged: TargetedEvent<this, string>;
-    /** Emitted on demand when the auth token is updated */
-    readonly tokenRefreshed: TargetedEvent<this, string>;
-    "@eventTypes": {
-        "itemPropertiesFetched": SolutionDetailsPanel["itemPropertiesFetched"]["detail"];
-        "sortTypeChanged": SolutionDetailsPanel["sortTypeChanged"]["detail"];
-        "templatesFetched": SolutionDetailsPanel["templatesFetched"]["detail"];
-        "tokenRefreshed": SolutionDetailsPanel["tokenRefreshed"]["detail"];
-    };
-}
+export abstract class SolutionDetailsPanel extends LitElement {
+  /**
+   * Contains the translations for this component.
+   * All UI strings should be defined here.
+   *
+   * @internal
+   */
+  protected _translations: {
+      dataDictionary: string;
+      deployButton: string;
+      description: string;
+      solutionOverview: string;
+      solutionDetails: string;
+      informationProducts: string;
+      informationProductsFooterText: string;
+      informationProductsSubText: string;
+      solutionItem: string;
+      learnHowtoUse: string;
+      learnMore: string;
+      openHelp: string;
+      minimumUserType: string;
+      newChip: string;
+      openInGallery: string;
+      relatedResources: string;
+      releaseNotes: string;
+      releaseNotesSubText: string;
+      requirements: string;
+      requirementsSubText: string;
+      share: string;
+      showLess: string;
+      showMore: string;
+      termsOfUse: string;
+      version: string;
+      watchDemo: string;
+      youMayAlsoLike: string;
+      configure: {
+          servicesLabel: string;
+          featureServiceInfo: string;
+          validate: string;
+          invalidID: string;
+          spatialReferencePlaceholder: string;
+          spatialReferenceLabel: string;
+          spatialReferenceInfo: string;
+          itemIdPlaceholder: string;
+      };
+      missingPrivilegesPopup: {
+          missingLicensingOrPrivileges: string;
+          missingPrivilegesListHeading: string;
+          requiredPrivilegesList: {
+              addMembers: string;
+              createGroup: string;
+              createItem: string;
+              publishFeatures: string;
+              shareToGroup: string;
+              publishFeeds: string;
+              publishRealTimeAnalytics: string;
+              publishBigDataAnalytics: string;
+              requiresAdmin: string;
+              requiresLocationTrackingAndAdmin: string;
+              requiresLocationTracking: string;
+              requiresNotebookServer: string;
+              hubPremium: string;
+              workflowManager: string;
+              velocity: string;
+              publishGPServices: string;
+              webtool: string;
+              writableEnterprise: string;
+              writableOnline: string;
+          };
+          suggestedProblemRemedyMessage: string;
+      };
+  } & T9nMeta<{
+      dataDictionary: string;
+      deployButton: string;
+      description: string;
+      solutionOverview: string;
+      solutionDetails: string;
+      informationProducts: string;
+      informationProductsFooterText: string;
+      informationProductsSubText: string;
+      solutionItem: string;
+      learnHowtoUse: string;
+      learnMore: string;
+      openHelp: string;
+      minimumUserType: string;
+      newChip: string;
+      openInGallery: string;
+      relatedResources: string;
+      releaseNotes: string;
+      releaseNotesSubText: string;
+      requirements: string;
+      requirementsSubText: string;
+      share: string;
+      showLess: string;
+      showMore: string;
+      termsOfUse: string;
+      version: string;
+      watchDemo: string;
+      youMayAlsoLike: string;
+      configure: {
+          servicesLabel: string;
+          featureServiceInfo: string;
+          validate: string;
+          invalidID: string;
+          spatialReferencePlaceholder: string;
+          spatialReferenceLabel: string;
+          spatialReferenceInfo: string;
+          itemIdPlaceholder: string;
+      };
+      missingPrivilegesPopup: {
+          missingLicensingOrPrivileges: string;
+          missingPrivilegesListHeading: string;
+          requiredPrivilegesList: {
+              addMembers: string;
+              createGroup: string;
+              createItem: string;
+              publishFeatures: string;
+              shareToGroup: string;
+              publishFeeds: string;
+              publishRealTimeAnalytics: string;
+              publishBigDataAnalytics: string;
+              requiresAdmin: string;
+              requiresLocationTrackingAndAdmin: string;
+              requiresLocationTracking: string;
+              requiresNotebookServer: string;
+              hubPremium: string;
+              workflowManager: string;
+              velocity: string;
+              publishGPServices: string;
+              webtool: string;
+              writableEnterprise: string;
+              writableOnline: string;
+          };
+          suggestedProblemRemedyMessage: string;
+      };
+  }>;
+  /** Key details about the solution */
+  accessor card: ISolutionInfoCard | undefined;
+  /** Emitted on demand when the item properties have been fetched */
+  readonly itemPropertiesFetched: import("@arcgis/lumina").TargetedEvent<this, IItemProperties>;
+  /** Emitted on demand when the sort type changes */
+  readonly sortTypeChanged: import("@arcgis/lumina").TargetedEvent<this, string>;
+  /** Emitted on demand when the templates have been fetched from the solution */
+  readonly templatesFetched: import("@arcgis/lumina").TargetedEvent<this, IItemTemplate[]>;
+  /** Emitted on demand when the auth token is updated */
+  readonly tokenRefreshed: import("@arcgis/lumina").TargetedEvent<this, string>;
+  readonly "@eventTypes": {
+    itemPropertiesFetched: SolutionDetailsPanel["itemPropertiesFetched"]["detail"];
+    sortTypeChanged: SolutionDetailsPanel["sortTypeChanged"]["detail"];
+    templatesFetched: SolutionDetailsPanel["templatesFetched"]["detail"];
+    tokenRefreshed: SolutionDetailsPanel["tokenRefreshed"]["detail"];
+  };
+}