@esri/solutions-components 1.0.0-next.20250605 → 1.0.0-next.20250613

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

@@ -1,2 +1,11 @@
 import "@esri/calcite-components/components/calcite-dialog";
+import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-alert";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-input";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-block";
+import "@arcgis/analysis-components/dist/components/analysis-spatial-reference-selector.js";
 export * from "./customElement.js";

package/dist/components/solution-deploy-dialog/index.js

@@ -1,2 +1,11 @@
 import "@esri/calcite-components/components/calcite-dialog";
+import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-alert";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-input";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-block";
+import "@arcgis/analysis-components/dist/components/analysis-spatial-reference-selector.js";
 export * from "./customElement.js";

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

@@ -1,7 +1,12 @@
 /// <reference types="../../index.d.ts" />
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+import { ISolutionInfoCard } from '../../utils/interfaces';
 
 export declare class SolutionDeployedCard extends LitElement {
+    /** @default false */
+    allowDelete: boolean;
+    /** Key details about the solution */
+    card: ISolutionInfoCard | undefined;
     /** @default '' */
     deployedDate: string;
     /** @default '' */
@@ -16,4 +21,8 @@ export declare class SolutionDeployedCard extends LitElement {
     thumbnail: string;
     /** @default false */
     updateAvailable: boolean;
+    /** The user session to use for fetching solutions */
+    readonly userSessionContextConsumer: import('@lit/context').ContextConsumer<{
+        __context__: import('@esri/arcgis-rest-request').ArcGISIdentityManager;
+    }, HTMLElement & import('lit').ReactiveControllerHost>;
 }

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

@@ -1,12 +1,13 @@
 import { c as a } from "../../chunks/runtime.js";
 import { html as t } from "lit-html";
 import { u as o } from "../../chunks/useT9n.js";
-import { LitElement as l, nothing as i } from "@arcgis/lumina";
-import { css as n } from "@lit/reactive-element/css-tag.js";
+import { LitElement as l, useContextConsumer as s, nothing as i } from "@arcgis/lumina";
+import { u as n } from "../../chunks/deployAppContexts.js";
+import { css as r } 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.0-next.20250605 */
-const r = n`/** @license
+v1.0.0-next.20250613 */
+const c = r`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,21 +22,25 @@ const r = n`/** @license
  * 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}.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}.display-flex{display:flex}.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)}.update-icon-absolute{position:absolute;right:1rem}.update-icon-absolute[dir=rtl]{position:absolute;left:1rem}.header-line-height{line-height:2.5rem}`;
-class s extends l {
+class d extends l {
   constructor() {
-    super(...arguments), this.deployedDate = "", this.description = "", this.heading = "", this.itemId = "", this.owner = "", this.thumbnail = "", this.updateAvailable = !1, this._translations = o({ name: "solution-deployed-card", blocking: !0 });
+    super(...arguments), this.allowDelete = !1, this.deployedDate = "", this.description = "", this.heading = "", this.itemId = "", this.owner = "", this.thumbnail = "", this.updateAvailable = !1, this.userSessionContextConsumer = s({
+      context: n,
+      subscribe: !0
+    }), this._isDeleteOpen = !1, this._translations = o({ name: "solution-deployed-card", blocking: !0 });
   }
   static {
-    this.properties = { deployedDate: 1, description: 1, heading: 1, itemId: 1, owner: 1, thumbnail: 1, updateAvailable: 5, _translations: 16 };
+    this.properties = { allowDelete: 5, card: 0, deployedDate: 1, description: 1, heading: 1, itemId: 1, owner: 1, thumbnail: 1, updateAvailable: 5, userSessionContextConsumer: 32, _isDeleteOpen: 16, _translations: 16 };
   }
   static {
-    this.styles = r;
+    this.styles = c;
   }
   render() {
-    return t`<div><calcite-card .label=${this.description} @click=${this._cardSelected}>${this._getImage()}${this._getHeader()}<p slot=description>${this.description}</p><div>${this._getOwnerLabel()}${this._getDeployedDate()}</div><div class="width-full" slot=footer-start>${this._getConfigureButton()}</div></calcite-card></div>`;
+    return t`<div><calcite-card .label=${this.description} @click=${this._cardSelected}>${this._getImage()}${this._getHeader()}<p slot=description>${this.description}</p><div>${this._getOwnerLabel()}${this._getDeployedDate()}</div><div class="width-full" slot=footer-start>${this._getConfigureButton()}</div></calcite-card>${this._renderDeleteDialog()}</div>`;
   }
   _getImage() {
-    return t`<div class="card-image-wrap" slot=thumbnail><img class="thumbnail card-image" alt="Sample image alt" src=${this.thumbnail ?? i}><div class="hover-text">${this._translations.configure}</div></div>`;
+    const e = this.userSessionContextConsumer.value;
+    return t`<div class="card-image-wrap" slot=thumbnail><img class="thumbnail card-image" alt=${this.heading ?? i} src=${`${this.thumbnail}&token=${e?.token}`}><div class="hover-text">${this._translations.configure}</div></div>`;
   }
   _getHeader() {
     return t`<div class="display-flex align-items-center header-line-height" slot=heading>${this.heading}<calcite-icon class="icon-brand-color update-icon-absolute" icon=refresh id=solution-update-available-icon @click=${this._updateAvailable} scale=s></calcite-icon><calcite-tooltip placement=bottom reference-element=solution-update-available-icon>${this._translations.updateAvailable}</calcite-tooltip></div>`;
@@ -47,7 +52,12 @@ class s extends l {
     return t`<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 t`<calcite-split-button appearance=outline @click=${(e) => e.stopPropagation()} overlay-positioning=fixed primary-text=${this._translations.configure ?? i} 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><calcite-dropdown-item icon-start=trash @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-dropdown-item></calcite-dropdown-group></calcite-split-button>`;
+    return t`<calcite-split-button appearance=outline @click=${(e) => e.stopPropagation()} overlay-positioning=fixed primary-text=${this._translations.configure ?? i} 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 && t`<calcite-dropdown-item icon-start=trash @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-dropdown-item>` || ""}</calcite-dropdown-group></calcite-split-button>`;
+  }
+  _renderDeleteDialog() {
+    return t`<solution-delete-dialog .card=${this.card} .open=${this._isDeleteOpen} @dialogOpen=${(e) => {
+      this._isDeleteOpen = e.detail;
+    }}></solution-delete-dialog>`;
   }
   _cardSelected() {
     alert(`Do actions for ${this.itemId}`);
@@ -62,7 +72,7 @@ class s extends l {
     e.stopPropagation(), alert("_viewItemDetails");
   }
   _deleteSolution(e) {
-    e.stopPropagation(), alert("_viewDiagram");
+    e.stopPropagation(), this._isDeleteOpen = !0;
   }
   _openUserProfile(e) {
     e.stopPropagation(), alert("_openUserProfile");
@@ -71,7 +81,7 @@ class s extends l {
     e.stopPropagation(), alert("_updateAvailable");
   }
 }
-a("solution-deployed-card", s);
+a("solution-deployed-card", d);
 export {
-  s as SolutionDeployedCard
+  d as SolutionDeployedCard
 };

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

@@ -6,4 +6,5 @@ import "@esri/calcite-components/components/calcite-link";
 import "@esri/calcite-components/components/calcite-split-button";
 import "@esri/calcite-components/components/calcite-dropdown-group";
 import "@esri/calcite-components/components/calcite-dropdown-item";
+import "../solution-delete-dialog/index.js";
 export * from "./customElement.js";

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

@@ -6,4 +6,5 @@ import "@esri/calcite-components/components/calcite-link";
 import "@esri/calcite-components/components/calcite-split-button";
 import "@esri/calcite-components/components/calcite-dropdown-group";
 import "@esri/calcite-components/components/calcite-dropdown-item";
+import "../solution-delete-dialog/index.js";
 export * from "./customElement.js";

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

@@ -5,7 +5,7 @@ import { LitElement as l, noShadowRoot as c, nothing as r } from "@arcgis/lumina
 import { css as h } 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.0-next.20250605 */
+v1.0.0-next.20250613 */
 const u = h`@layer{/** @license
  * Copyright 2025 Esri
  *

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

@@ -1,16 +1,9 @@
 /// <reference types="../../index.d.ts" />
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
-import { ChipType } from '../../utils/interfaces';
+import { ISolutionInfoCard } from '../../utils/interfaces';
 
 export declare class SolutionDetailsCard extends LitElement {
-    /** @default "none" */
-    chip: ChipType;
-    /** @default "" */
-    description: string;
-    /** @default "" */
-    heading: string;
-    /** @default "" */
-    itemId: string;
-    /** @default "" */
-    thumbnail: string;
+    card: ISolutionInfoCard | undefined;
+    /** Emitted on demand when the details card is selected. */
+    readonly detailsCardSelected: TargetedEvent<this, ISolutionInfoCard>;
 }

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

@@ -1,12 +1,12 @@
-import { c as s } from "../../chunks/runtime.js";
-import { html as t } from "lit-html";
-import { u as o } from "../../chunks/useT9n.js";
-import { LitElement as c, nothing as r, safeClassMap as n } from "@arcgis/lumina";
-import { css as l } from "@lit/reactive-element/css-tag.js";
+import { c as o } from "../../chunks/runtime.js";
+import { html as a } from "lit-html";
+import { u as r } from "../../chunks/useT9n.js";
+import { LitElement as l, createEvent as n, nothing as s, safeClassMap as d } from "@arcgis/lumina";
+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.0-next.20250605 */
-const d = l`/** @license
+v1.0.0-next.20250613 */
+const h = p`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,25 +21,25 @@ const d = l`/** @license
  * 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}`;
-class h extends c {
+class m extends l {
   constructor() {
-    super(...arguments), this.chip = "none", this.description = "", this.heading = "", this.itemId = "", this.thumbnail = "", this._translations = o({ name: "solution-details-card", blocking: !0 });
+    super(...arguments), this._translations = r({ name: "solution-details-card", blocking: !0 }), this.detailsCardSelected = n();
   }
   static {
-    this.properties = { chip: 1, description: 1, heading: 1, itemId: 1, thumbnail: 1, _translations: 16 };
+    this.properties = { card: 0, _translations: 16 };
   }
   static {
-    this.styles = d;
+    this.styles = h;
   }
   render() {
-    const a = this.chip === "updated" ? "chip-updated" : "chip-deployed", e = "solution-details-card-chip", i = this.chip === "updated" ? this._translations.updated : this._translations.deployed;
-    return t`<div><calcite-card .label=${this.description} @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img class="thumbnail card-image" alt="Sample image alt" src=${this.thumbnail ?? r}><div class="hover-text">${this._translations.viewDetails}</div></div><span slot=heading>${this.heading}</span><p slot=description>${this.description}</p>${this.chip !== "none" ? t`<div slot=footer-end><calcite-chip class=${n(a)} .icon=${this.chip === "updated" ? "mega-phone" : "check-circle"} id=${e} .label=${i} .value=${i} scale=s></calcite-chip><calcite-tooltip .referenceElement=${e}><span>${i}</span></calcite-tooltip></div>` : void 0}<div slot=footer-start></div></calcite-card></div>`;
+    const e = this.card, c = e.chip === "updated" ? "chip-updated" : this.card.chip === "deployed" ? "chip-deployed" : "", t = "solution-details-card-chip", i = e.chip === "updated" ? this._translations.updated : this._translations.deployed;
+    return a`<div><calcite-card .label=${e.snippet} @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img class="thumbnail card-image" alt=${e.title ?? s} src=${e.thumbnailUrl ?? s}><div class="hover-text">${this._translations.viewDetails}</div></div><span slot=heading>${e.title}</span><p slot=description>${e.snippet}</p>${e.chip !== "none" ? a`<div slot=footer-end><calcite-chip class=${d(c)} .icon=${e.chip === "updated" ? "mega-phone" : "check-circle"} id=${t} .label=${i} .value=${i} scale=s></calcite-chip><calcite-tooltip .referenceElement=${t}><span>${i}</span></calcite-tooltip></div>` : void 0}<div slot=footer-start></div></calcite-card></div>`;
   }
   _cardSelected() {
-    alert(`Do actions for ${this.itemId}`);
+    this.detailsCardSelected.emit(this.card);
   }
 }
-s("solution-details-card", h);
+o("solution-details-card", m);
 export {
-  h as SolutionDetailsCard
+  m as SolutionDetailsCard
 };

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

@@ -1,5 +1,19 @@
 /// <reference types="../../index.d.ts" />
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+import { ISolutionInfoCard, IItemProperties } from '../../utils/interfaces';
+import { IItemTemplate } from '@esri/solution-common';
 
 export declare class SolutionDetailsPanel extends LitElement {
+    /** Key details about the solution */
+    card: ISolutionInfoCard | undefined;
+    /**
+     * When true the dialog will be shown
+     *
+     * @default false
+     */
+    open: boolean;
+    /** 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>;
 }

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

@@ -1,12 +1,20 @@
-import { c as e } from "../../chunks/runtime.js";
-import { html as t } from "lit-html";
-import { u as i } from "../../chunks/useT9n.js";
-import { LitElement as s, noShadowRoot as n } from "@arcgis/lumina";
-import { css as o } from "@lit/reactive-element/css-tag.js";
+import { c as y } from "../../chunks/runtime.js";
+import { html as s } from "lit-html";
+import { u as v } from "../../chunks/useT9n.js";
+import { createRef as m, ref as g } from "lit-html/directives/ref.js";
+import { LitElement as w, useContextProvider as u, createEvent as _, safeClassMap as c, nothing as p } from "@arcgis/lumina";
+import { a as x, i as $, u as S } from "../../chunks/deployAppContexts.js";
+import { css as R } from "@lit/reactive-element/css-tag.js";
+import { getItemDataAsJson as L, getItem as k, getPropWithDefault as b, getProp as h, setCreateProp as M } from "@esri/solution-common";
+import { a as C } from "../../chunks/privilegeUtils.js";
+import { _findExistingItem as I } from "@esri/solution-deployer";
+import { a as P } from "../../chunks/helpers.js";
+import { a as T, p as A, l as U } from "../../chunks/appConfig.js";
+import { A as E } from "../../chunks/Auth.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.0-next.20250605 */
-const r = o`@layer{/** @license
+v1.0.0-next.20250613 */
+const H = R`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -20,25 +28,240 @@ const r = o`@layer{/** @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.
- */}`;
-class a extends s {
+ */.display-flex{display:flex}.flex-direction-row{flex-direction:row}.flex-direction-column{flex-direction:column}.cursor-default{cursor:default}.border-bottom{border-bottom-color:var(--calcite-color-border-1);border-bottom-width:1px;border-bottom-style:solid}.row-margin-2{margin-inline-start:2rem;margin-inline-end:2rem}calcite-label{--calcite-label-margin-bottom: 0px}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.padding-top-1-2{padding-top:.5rem}.padding-end-1{padding-inline-end:1rem}.padding-end-2{padding-inline-end:2rem}.align-self-center{align-self:center}.align-items-center{align-items:center}.width-330{width:330px}.card-group{overflow:hidden;padding:.5rem}calcite-card{width:400px}@media (max-width: 800px){calcite-card{width:calc(50% - .5rem)}}@media (max-width: 400px){calcite-card{width:100%}}.max-height-240{max-height:240px}.max-height-300{max-height:300px}.scrollable-section{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.scrollable-section::-webkit-scrollbar{display:none}.display-none{display:none}`;
+class D extends w {
   constructor() {
-    super(...arguments), this._translations = i({ name: "solution-details-panel", blocking: !0 });
+    super(), this.open = !1, this._hideScreenshotsScroll = !1, this._hideYouMayAlsoLikeScroll = !1, this.isMobile = !1, this._templates = [], this._translations = v({ name: "solution-details-panel", blocking: !0 }), this._allCards = [], this._authContextProvider = u({ context: x }), this._configureLearnMore = "", this._customDeploymentMappings = {}, this._isMobileContextProvider = u({ context: $ }), this._privileges = [], this._regexFsUrl = "https?:\\/\\/.+FeatureServer\\b", this._regexID = "\\b[0-9A-F]{32}\\b", this._screenshotsBaseHeight = 240, this._screenshotsElement = m(), this._userOptions = [], this._userSessionContextProvider = u({ context: S }), this._youMayAlsoLikeElement = m(), this._youMayAlsoLikeBaseHeight = 300, this.templatesFetched = _(), this.itemPropertiesFetched = _(), this.listenOn(window, "detailsCardSelected", this._detailsCardSelected), this.listenOn(window, "allCardsFetched", this._allCardsFetched);
   }
   static {
-    this.properties = { _translations: 16 };
+    this.properties = { card: 0, open: 5, _hideScreenshotsScroll: 16, _hideYouMayAlsoLikeScroll: 16, isMobile: 16, _itemProperties: 16, _templates: 16, _translations: 16 };
   }
   static {
-    this.styles = r;
+    this.styles = H;
   }
-  static {
-    this.shadowRootOptions = n;
+  async connectedCallback() {
+    super.connectedCallback(), this._mediaQuery = window.matchMedia("(max-width: 800px)"), this.listenOn(this._mediaQuery, "change", this._mediaQueryChange);
+  }
+  async load() {
+    const e = new E(T, A, U);
+    await e.init(), e.SignedIn || e.signIn(), this._authContextProvider.setValue(e), e.RestUserSession && this._userSessionContextProvider.setValue(e.RestUserSession);
+  }
+  loaded() {
+    this._resizeObserver = new ResizeObserver(async () => {
+      this._onResize();
+    }), this._screenshotsElement.value && this._resizeObserver.observe(this._screenshotsElement.value);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver?.disconnect();
   }
   render() {
-    return t`<calcite-panel></calcite-panel>`;
+    const e = "border-bottom row-margin-2 padding-bottom-1", t = this._getRelatedArticles(), i = this._getYouMayAlsoLikeCards();
+    return s`<calcite-panel><div class=${`${e} padding-top-1`}>${this._getSolutionRow()}</div><div class=${c(e)}>${this._getScreenshotsRow()}</div><div class=${c(e)}>${this._getDescriptionRow()}</div><div class=${c(e)}>${this._getRequirementsRow()}</div><div class=${c(e)}>${this._getInformationProductsRow()}</div><div class=${c(e)}>${this._getReleaseNotesRow()}</div>${t.length > 0 ? s`<div class=${c(e)}>${this._getRelatedArticlesRow(t)}</div>` : ""}${i.length > 0 ? s`<div class=${c(e)}>${this._getYouMayAlsoLikeRow(i)}</div>` : ""}</calcite-panel>`;
+  }
+  _getSolutionRow() {
+    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=330"), t = this._itemProperties?.demoURL || "";
+    return s`<div class=" display-flex flex-direction-row"><div class="padding-end-2"><img alt=${this.card?.title ?? p} class="width-330" src=${e ?? p}></div><div class="display-flex flex-direction-column"><div class="display-flex flex-direction-row"><h3 class="padding-end-1"><calcite-label scale=l>${this.card?.title}</calcite-label></h3><calcite-chip class="align-self-center" kind=brand .label=${this._translations.new} scale=s>${this._translations.new}</calcite-chip></div><span>${this.card?.snippet}</span><div class="display-flex flex-direction-row padding-top-1"><calcite-button class="padding-end-1" icon-end=arrow-bold-right icon-flip-rtl=end @click=${() => this._deploy()}>${this._translations.deploy}</calcite-button><calcite-button appearance=outline class="padding-end-1" icon-end=video @click=${() => this._openUrl(t)}>${this._translations.watchDemo}</calcite-button><calcite-button appearance=outline class="padding-end-1" icon-end=share @click=${() => this._share()}>${this._translations.share}</calcite-button></div></div></div>`;
+  }
+  _getScreenshotsRow() {
+    const e = this._hideScreenshotsScroll ? "display-none" : "";
+    return s`<calcite-panel><div class="display-flex flex-direction-column">${this._getHeader(this._translations.screenshots)}<div class="scrollable-section max-height-240" @scroll=${() => this._onScreenshotsScroll()} ${g(this._screenshotsElement)}>${this._getScreenshots()}</div><calcite-fab appearance=outline-fill class=${`align-self-center ${e}`} icon=arrow-down kind=inverse @click=${() => {
+      this._scrollSubsection(this._screenshotsBaseHeight, this._screenshotsElement.value);
+    }} .text=${this._translations.showMore} text-enabled></calcite-fab></div></calcite-panel>`;
+  }
+  _getScreenshots() {
+    const e = this._itemProperties?.preview || [];
+    return s`<calcite-card-group class="card-group" .label=${this._translations.screenshots}>${e.map((t) => s`<calcite-card .label=${t.alt}><img alt=${t.alt ?? p} slot=thumbnail src=${this._getItemResourceUrl(this.card?.id || "", t.name) ?? p}></calcite-card>`)}</calcite-card-group>`;
+  }
+  _scrollSubsection(e, t) {
+    const i = t.scrollHeight, a = t.scrollTop;
+    e <= a && (e = a + e), t.scrollTop = i > e ? e : i;
+  }
+  _getDescriptionRow() {
+    return s`<div class="display-flex flex-direction-column">${this._getHeader(this._translations.description)}<p .innerHTML=${this.card?.description ?? ""}></p><div class="display-flex flex-direction-row">${this.card?.learnMoreUrl ? s`<calcite-link class="padding-end-2" icon-end=share @click=${() => {
+      this._openUrl(this.card?.learnMoreUrl || "");
+    }}>${this._translations.learnHowtoUse}</calcite-link>` : ""}${this._itemProperties?.dataDictionaryURL ? s`<calcite-link icon-end=share @click=${() => {
+      this._openUrl(this._itemProperties?.dataDictionaryURL || "");
+    }}>${this._translations.dataDictionary}</calcite-link>` : ""}</div></div>`;
+  }
+  _getRequirementsRow() {
+    const e = this._getRequirements();
+    return s`<div class="display-flex flex-direction-column">${this._getHeader(this._translations.requirements)}<span>${this.card?.title ? this._translations.requirementsSubText.replace("{{solutionTitle}}", this.card.title) : ""}</span>${e.map((t) => s`<div class="display-flex flex-direction-row padding-top-1-2"><calcite-icon icon=bullet-point></calcite-icon><calcite-label class="align-items-center">${t}</calcite-label></div>`)}</div>`;
+  }
+  _getRequirements() {
+    return this._itemProperties?.requirements || [];
+  }
+  _getInformationProductsRow() {
+    return s`<div class="display-flex flex-direction-column">${this._getHeader(this._translations.informationProducts)}<span>${this.card?.title ? this._translations.informationProductsSubText.replace("{{solutionTitle}}", this.card.title) : ""}</span><calcite-table bordered caption class="padding-top-1">${this._getInformationTableHeaderRow()}${this._getInformationTableRows()}</calcite-table><p>${this._translations.informationProductsFooterText}</p></div>`;
+  }
+  _getInformationTableHeaderRow() {
+    return s`<calcite-table-row slot=table-header><calcite-table-header .heading=${this._translations.item}></calcite-table-header><calcite-table-header .heading=${this._translations.description}></calcite-table-header><calcite-table-header .heading=${this._translations.minimumUserType}></calcite-table-header></calcite-table-row>`;
+  }
+  _getInformationTableRows() {
+    return (this._itemProperties?.infoProducts || []).map((t) => s`<calcite-table-row><calcite-table-cell>${t.item}</calcite-table-cell><calcite-table-cell>${t.description}</calcite-table-cell><calcite-table-cell>${t.userType}</calcite-table-cell></calcite-table-row>`);
+  }
+  _getReleaseNotesRow() {
+    return s`<div class="display-flex flex-direction-column">${this._getHeader(this._translations.releaseNotes)}<span>${this._translations.releaseNotesSubText}</span><calcite-table bordered caption class="padding-top-1">${this._getReleaseNotesTableHeaderRow()}${this._getReleaseNotesTableRows()}</calcite-table></div>`;
+  }
+  _getReleaseNotesTableHeaderRow() {
+    return s`<calcite-table-row slot=table-header><calcite-table-header .heading=${this._translations.version}></calcite-table-header><calcite-table-header .heading=${this._translations.description}></calcite-table-header></calcite-table-row>`;
+  }
+  _getReleaseNotesTableRows() {
+    return (this._itemProperties?.releaseNotes || [])?.map((t) => s`<calcite-table-row><calcite-table-cell>${t.version}</calcite-table-cell><calcite-table-cell alignment=end>${t.description.map((i) => s`<div class="display-flex flex-direction-row"><calcite-icon icon=bullet-point></calcite-icon><calcite-label class="align-items-center">${i.note}</calcite-label></div>`)}</calcite-table-cell></calcite-table-row>`);
+  }
+  _getRelatedArticlesRow(e) {
+    return s`<div class="display-flex flex-direction-column">${this._getHeader(this._translations.relatedArticles)}<div class="display-flex flex-direction-row">${e.map((t) => {
+      console.log(t), s`<solution-article-card></solution-article-card>`;
+    })}</div></div>`;
+  }
+  _getRelatedArticles() {
+    return [];
+  }
+  _getYouMayAlsoLikeRow(e) {
+    const t = this._hideYouMayAlsoLikeScroll ? "display-none" : "";
+    return s`<div class="display-flex flex-direction-column">${this._getHeader(this._translations.youMayAlsoLike)}<div class="scrollable-section max-height-300" @scroll=${() => this._onYouMayAlsoLikeScroll()} ${g(this._youMayAlsoLikeElement)}><div class="display-flex flex-direction-row "><calcite-card-group class="card-group" .label=${this._translations.youMayAlsoLike}>${e.map((i) => s`<solution-details-card .card=${i}></solution-details-card>`)}</calcite-card-group></div></div><calcite-fab appearance=outline-fill class=${`align-self-center ${t}`} icon=arrow-down kind=inverse @click=${() => {
+      this._scrollSubsection(this._youMayAlsoLikeBaseHeight, this._youMayAlsoLikeElement.value);
+    }} .text=${this._translations.showMore} text-enabled></calcite-fab></div>`;
+  }
+  _getYouMayAlsoLikeCards() {
+    const e = this._itemProperties?.relatedSolutions || [];
+    return this._allCards.filter((t) => e.indexOf(t.deployCommonId) > -1);
+  }
+  _getHeader(e) {
+    return s`<h3><calcite-label scale=l>${e}</calcite-label></h3>`;
+  }
+  _deploy() {
+    const e = "solutionDeployDialog";
+    let t = document.getElementById(e), i = !1;
+    t || (t = document.createElement("solution-deploy-dialog"), t.id = e, i = !0), t.card = this.card, i && document.body.appendChild(t), t.open = !0;
+  }
+  _openUrl(e) {
+    window.open(e, "_blank");
+  }
+  _share() {
+    alert("Share need to look at this more. I believe instant apps social share requires mapView");
+  }
+  async _detailsCardSelected(e) {
+    this.card = e.detail, this._onResize(), await this._getItemData();
+  }
+  async _getItemData() {
+    const e = this._userSessionContextProvider.value, t = await L(this.card.id, e), i = await k(this.card.id, e);
+    this._itemProperties = i.properties, this.itemPropertiesFetched.emit(this._itemProperties);
+    const a = C(t, this.card.typeKeywords, this._authContextProvider.value);
+    this._privileges = e.username ? a : [], console.log(this._privileges), (t.params ? this.formatParams(t.params) : Promise.resolve([])).then((o) => {
+      this._userOptions = o, console.log(this._userOptions);
+    }), this._templates = t.templates, this.templatesFetched.emit(t.templates);
+  }
+  formatParams(e) {
+    const t = this._userSessionContextProvider.value, i = [], a = e ? Object.keys(e) : [], r = {
+      id: "",
+      props: [],
+      accordionDisplay: !1
+    };
+    if (a.length > 0) {
+      const o = [];
+      return a.forEach((d) => {
+        const n = e[d];
+        n.valueType && n.valueType.toLowerCase() === "itemid" && o.push(this._findExistingItem(d, "Feature Service", t.username || ""));
+      }), Promise.all(o).then((d) => {
+        const n = {};
+        return d.forEach((l) => {
+          if (l.query && l.results && l.results.length > 0) {
+            const f = l.query.split(" ")[0].replace("typekeywords:source-", "");
+            n[f] = {
+              resultId: l.results[0].id,
+              response: l.results[0]
+            };
+          }
+        }), a.forEach((l) => {
+          if (l === "serviceLearnMore") {
+            this._configureLearnMore = e[l], alert(this._configureLearnMore), delete e[l];
+            return;
+          }
+          e[l].enterpriseIDMapping && (this._customDeploymentMappings[l] = e[l].enterpriseIDMapping), r.id = l, n[l] && (e[l].existingItemId = n[l].resultId, this.updateUserProp(e[l], n[l].response)), this.updateOption(e[l], r, l);
+        }), i.push(r), Promise.resolve(i);
+      }).catch(() => Promise.resolve([]));
+    } else
+      return Promise.resolve([]);
+  }
+  _findExistingItem(e, t, i) {
+    const a = this._userSessionContextProvider.value;
+    return I(`typekeywords:source-${e} type:${t} owner:${i}`, a);
+  }
+  updateUserProp(e, t) {
+    const i = e.itemType.toLowerCase() === "feature service", a = new RegExp(i ? this._regexFsUrl : e.itemType, "i"), r = b(t, i ? "url" : "type", "") || "", o = r !== "" && a.test(r);
+    return e.responseValue = o ? r : "", e.name = o && h(t, "name") || "", e.title = o && h(t, "title") || "", e.itemType = o ? h(t, "type") : e.itemType, e.validId = o, e.itemUrl = this._getItemUrl(t.id), o;
+  }
+  updateOption(e, t, i) {
+    const a = e.default || "", r = typeof a, o = a.toString();
+    this._setFeatureServiceProps(e);
+    const d = this.getValidation(e, o);
+    t.props.push({
+      id: i,
+      outType: r,
+      prop: i,
+      itemType: e.itemType || "",
+      responseValue: e.responseValue || "",
+      label: e.label || "",
+      choices: e.choices || [],
+      valueType: e.valueType.toLowerCase(),
+      attributes: e.attributes || {},
+      value: e.existingItemId && e.valueType.toLowerCase() === "itemid" ? e.existingItemId : o,
+      default: o,
+      srSearchText: o,
+      autoSelect: o !== "",
+      ...d,
+      loading: !1,
+      validId: !0,
+      tooltip: e.tooltip || "",
+      name: e.name || "",
+      title: e.title || "",
+      itemUrl: e.itemUrl || ""
+    });
+  }
+  _getItemUrl(e) {
+    const t = this._getOrgUrl(), i = P([{ k: "id", v: e }]) || "";
+    return t ? `${t}/home/item.html${i}` : "";
+  }
+  _getItemResourceUrl(e, t) {
+    const i = this._getOrgUrl();
+    return i ? `${i}/sharing/rest/content/items/${e}/resources/${t}` : "";
+  }
+  _getOrgUrl() {
+    const e = this._authContextProvider.value;
+    return e?.PortalSubset?.orgUrl || e?.PortalUrl || "";
+  }
+  _setFeatureServiceProps(e) {
+    e.valueType && e.valueType.toLowerCase() === "itemid" && M(e, "attributes.required", "true");
+  }
+  getValidation(e, t) {
+    let i = "", a = h(e, "validation.message") || "", r = !0;
+    return h(e, "attributes.required") === "true" && (i = b(e, "validation.expression", "\\S{1,}"), r = new RegExp(i).test(t)), e.valueType && e.valueType.toLowerCase() === "itemid" && (i = this._regexID, a = this._translations.configure.invalidID), {
+      valid: r,
+      validation: {
+        expression: i,
+        message: a
+      }
+    };
+  }
+  _mediaQueryChange(e) {
+    this.isMobile = e.matches, this._isMobileContextProvider.setValue(this.isMobile);
+  }
+  _allCardsFetched(e) {
+    this._allCards = e.detail;
+  }
+  _onResize() {
+    this._hideScreenshotsScroll = (this._screenshotsElement.value?.scrollHeight || 0) <= this._screenshotsBaseHeight + 2, this._hideYouMayAlsoLikeScroll = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) <= this._youMayAlsoLikeBaseHeight + 2;
+  }
+  _onScreenshotsScroll() {
+    const e = (this._screenshotsElement.value?.scrollTop || 0) + this._screenshotsBaseHeight;
+    e === this._screenshotsElement.value?.scrollHeight && !this._hideScreenshotsScroll ? this._hideScreenshotsScroll = !0 : e < (this._screenshotsElement.value?.scrollHeight || 0) && (this._hideScreenshotsScroll = !1);
+  }
+  _onYouMayAlsoLikeScroll() {
+    const e = (this._youMayAlsoLikeElement.value?.scrollTop || 0) + this._youMayAlsoLikeBaseHeight;
+    e === this._youMayAlsoLikeElement.value?.scrollHeight && !this._hideYouMayAlsoLikeScroll ? this._hideYouMayAlsoLikeScroll = !0 : e < (this._youMayAlsoLikeElement.value?.scrollHeight || 0) && (this._hideYouMayAlsoLikeScroll = !1);
   }
 }
-e("solution-details-panel", a);
+y("solution-details-panel", D);
 export {
-  a as SolutionDetailsPanel
+  D as SolutionDetailsPanel
 };

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

@@ -1,2 +1,16 @@
 import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-fab";
+import "@esri/calcite-components/components/calcite-card-group";
+import "@esri/calcite-components/components/calcite-card";
+import "@esri/calcite-components/components/calcite-link";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-table";
+import "@esri/calcite-components/components/calcite-table-row";
+import "@esri/calcite-components/components/calcite-table-header";
+import "@esri/calcite-components/components/calcite-table-cell";
+import "../solution-article-card/index.js";
+import "../solution-details-card/index.js";
 export * from "./customElement.js";

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

@@ -1,2 +1,16 @@
 import "@esri/calcite-components/components/calcite-panel";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-fab";
+import "@esri/calcite-components/components/calcite-card-group";
+import "@esri/calcite-components/components/calcite-card";
+import "@esri/calcite-components/components/calcite-link";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-table";
+import "@esri/calcite-components/components/calcite-table-row";
+import "@esri/calcite-components/components/calcite-table-header";
+import "@esri/calcite-components/components/calcite-table-cell";
+import "../solution-article-card/index.js";
+import "../solution-details-card/index.js";
 export * from "./customElement.js";

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

@@ -6,7 +6,7 @@ import { LitElement as n, noShadowRoot as c, safeStyleMap as e } from "@arcgis/l
 import { css as r } 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.0-next.20250605 */
+v1.0.0-next.20250613 */
 const b = r`@layer{/** @license
  * Copyright 2025 Esri
  *

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

@@ -5,7 +5,7 @@ import { LitElement as p, createEvent as n } from "@arcgis/lumina";
 import { css as h } 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.0-next.20250605 */
+v1.0.0-next.20250613 */
 const m = h`/** @license
  * Copyright 2025 Esri
  *

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

@@ -7,7 +7,7 @@ import { LitElement as r, noShadowRoot as c } from "@arcgis/lumina";
 import { css as h } 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.0-next.20250605 */
+v1.0.0-next.20250613 */
 const p = h`@layer{/** @license
  * Copyright 2025 Esri
  *