@esri/solutions-components 1.0.0-next.20250610 → 1.0.0-next.20250617

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

@@ -1,13 +1,20 @@
-import { c as o } from "../../chunks/runtime.js";
-import { html as i } from "lit-html";
-import { u as r } from "../../chunks/useT9n.js";
-import { LitElement as c, useContextConsumer as n, safeClassMap as a, nothing as s } from "@arcgis/lumina";
-import { a as d, u as h } from "../../chunks/deployAppContexts.js";
-import { css as p } 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.20250610 */
-const u = p`/** @license
+v1.0.0-next.20250617 */
+const H = R`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,119 +28,240 @@ const u = 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.
- */.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}`;
-class m extends c {
+ */.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(), this.authContextConsumer = n({
-      context: d,
-      subscribe: !0
-    }), this.open = !1, this.userSessionContextConsumer = n({
-      context: h,
-      subscribe: !0
-    }), this._translations = r({ name: "solution-details-panel", blocking: !0 }), this.listenOn(window, "detailsCardSelected", this._detailsCardSelected);
+    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 = { authContextConsumer: 32, card: 0, open: 5, userSessionContextConsumer: 32, _translations: 16 };
+    this.properties = { card: 0, open: 5, _hideScreenshotsScroll: 16, _hideYouMayAlsoLikeScroll: 16, isMobile: 16, _itemProperties: 16, _templates: 16, _translations: 16 };
   }
   static {
-    this.styles = u;
+    this.styles = H;
+  }
+  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() {
-    const e = "border-bottom row-margin-2 padding-bottom-1";
-    return i`<calcite-panel><div class=${`${e} padding-top-1`}>${this._getSolutionRow()}</div><div class=${a(e)}>${this._getScreenshotsRow()}</div><div class=${a(e)}>${this._getDescriptionRow()}</div><div class=${a(e)}>${this._getRequirementsRow()}</div><div class=${a(e)}>${this._getInformationProductsRow()}</div><div class=${a(e)}>${this._getReleaseNotesRow()}</div><div class=${a(e)}>${this._getRelatedArticlesRow()}</div><div class=${a(e)}>${this._getYouMayAlsoLikeRow()}</div></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=300");
-    return i`<div class=" display-flex flex-direction-row"><div class="padding-end-2"><img alt=${this.card?.title ?? s} src=${e ?? s}></div><div class="display-flex flex-direction-column"><div class="display-flex flex-direction-row"><h3 class="padding-end-1">${this.card?.title}</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._watchDemo()}>${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>`;
+    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() {
-    return i`<calcite-panel><div class="display-flex flex-direction-column">${this._getHeader(this._translations.screenshots)}<calcite-fab appearance=outline-fill class="align-self-center" icon=arrow-down kind=inverse @click=${() => {
-      this._showMoreScreenshots();
+    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>`;
   }
-  _showMoreScreenshots() {
-    alert("Show more screenshots");
+  _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 i`<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"><calcite-link class="padding-end-2" icon-end=share @click=${() => {
-      this._learnHowtoUse();
-    }}>${this._translations.learnHowtoUse}</calcite-link><calcite-link icon-end=share @click=${() => {
-      this._showDataDictionary();
-    }}>${this._translations.dataDictionary}</calcite-link></div></div>`;
+    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 i`<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) => i`<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.value}</calcite-label></div>`)}</div>`;
+    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 [{
-      value: "Test value"
-    }];
+    return this._itemProperties?.requirements || [];
   }
   _getInformationProductsRow() {
-    return i`<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 caption class="padding-top-1">${this._getInformationTableHeaderRow()}${this._getInformationTableRows([])}</calcite-table><p>${this._translations.informationProductsFooterText}</p></div>`;
+    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 i`<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>`;
+    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(e) {
-    return e?.map((t) => i`<calcite-table-row><calcite-table-cell>${t.title}</calcite-table-cell><calcite-table-cell>${t.description}</calcite-table-cell><calcite-table-cell alignment=end>${t.minimumUserType}</calcite-table-cell></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 i`<div class="display-flex flex-direction-column">${this._getHeader(this._translations.releaseNotes)}<span>${this._translations.releaseNotesSubText}</span><calcite-table caption class="padding-top-1">${this._getReleaseNotesTableHeaderRow()}${this._getReleaseNotesTableRows([])}</calcite-table></div>`;
+    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 i`<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>`;
+    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(e) {
-    return e?.map((t) => i`<calcite-table-row><calcite-table-cell>${t.version}</calcite-table-cell><calcite-table-cell alignment=end>${t.descriptionInfos.map((l) => i`<div class="display-flex flex-direction-row"><calcite-icon icon=bullet-point></calcite-icon><calcite-label class="align-items-center">${l.value}</calcite-label></div>`)}</calcite-table-cell></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() {
-    const e = this._getRelatedArticles();
-    return i`<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), i`<solution-article-card></solution-article-card>`;
+  _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() {
-    const e = this._getYouMayAlsoLikeInfos();
-    return i`<div class="display-flex flex-direction-column">${this._getHeader(this._translations.youMayAlsoLike)}<div class="display-flex flex-direction-row">${e.map((t) => i`<solution-details-card title=${t.title ?? s}></solution-details-card>`)}</div><calcite-fab appearance=outline-fill class="align-self-center" icon=arrow-down kind=inverse @click=${() => {
-      this._showMoreYouMayAlsoLike();
+  _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>`;
   }
-  _showMoreYouMayAlsoLike() {
-    alert("Show more you may also like cards");
-  }
-  _getYouMayAlsoLikeInfos() {
-    return [];
+  _getYouMayAlsoLikeCards() {
+    const e = this._itemProperties?.relatedSolutions || [];
+    return this._allCards.filter((t) => e.indexOf(t.deployCommonId) > -1);
   }
   _getHeader(e) {
-    return i`<h3>${e}</h3>`;
+    return s`<h3><calcite-label scale=l>${e}</calcite-label></h3>`;
   }
   _deploy() {
     const e = "solutionDeployDialog";
-    let t = document.getElementById(e), l = !1;
-    t || (t = document.createElement("solution-deploy-dialog"), t.id = e, l = !0), t.card = this.card, l && document.body.appendChild(t), t.open = !0;
+    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;
   }
-  _watchDemo() {
-    alert("Watch demo");
+  _openUrl(e) {
+    window.open(e, "_blank");
   }
   _share() {
-    alert("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;
   }
-  _showDataDictionary() {
-    alert("Show data dictionary");
+  _onResize() {
+    this._hideScreenshotsScroll = (this._screenshotsElement.value?.scrollHeight || 0) <= this._screenshotsBaseHeight + 2, this._hideYouMayAlsoLikeScroll = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) <= this._youMayAlsoLikeBaseHeight + 2;
   }
-  _learnHowtoUse() {
-    alert("Learn how to use");
+  _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);
   }
-  _detailsCardSelected(e) {
-    this.card = e.detail;
+  _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);
   }
 }
-o("solution-details-panel", m);
+y("solution-details-panel", D);
 export {
-  m as SolutionDetailsPanel
+  D as SolutionDetailsPanel
 };

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

@@ -1,10 +1,12 @@
 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-label";
 import "@esri/calcite-components/components/calcite-table";
 import "@esri/calcite-components/components/calcite-table-row";
 import "@esri/calcite-components/components/calcite-table-header";

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

@@ -1,10 +1,12 @@
 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-label";
 import "@esri/calcite-components/components/calcite-table";
 import "@esri/calcite-components/components/calcite-table-row";
 import "@esri/calcite-components/components/calcite-table-header";

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.20250610 */
+v1.0.0-next.20250617 */
 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.20250610 */
+v1.0.0-next.20250617 */
 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.20250610 */
+v1.0.0-next.20250617 */
 const p = h`@layer{/** @license
  * Copyright 2025 Esri
  *

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

@@ -4,7 +4,7 @@ import { LitElement as p, noShadowRoot as u, nothing as c } from "@arcgis/lumina
 import { css as d } 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.20250610 */
+v1.0.0-next.20250617 */
 const g = d`@layer{/** @license
  * Copyright 2025 Esri
  *

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

@@ -6,7 +6,7 @@ import { LitElement as h } 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.20250610 */
+v1.0.0-next.20250617 */
 const d = p`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-items-diagram/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as s, noShadowRoot as o } from "@arcgis/lumina";
 import { css as n } 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.20250610 */
+v1.0.0-next.20250617 */
 const r = n`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-organization-variables/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as n, createEvent as o } from "@arcgis/lumina";
 import { css as l } 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.20250610 */
+v1.0.0-next.20250617 */
 const c = l`/** @license
  * Copyright 2025 Esri
  *

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

@@ -8,7 +8,7 @@ import { LitElement as u, safeStyleMap as p, safeClassMap as m } from "@arcgis/l
 import { css as f } 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.20250610 */
+v1.0.0-next.20250617 */
 const _ = f`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-snapshot-gallery/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as i, noShadowRoot as o } from "@arcgis/lumina";
 import { css as n } 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.20250610 */
+v1.0.0-next.20250617 */
 const r = n`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-spatial-ref/customElement.js

@@ -1,14 +1,14 @@
 import { c as f } from "../../chunks/runtime.js";
-import { _ as i } from "../../chunks/solution-store.js";
+import { _ as s } from "../../chunks/solution-store.js";
 import { n as d } from "../../chunks/common.js";
-import { C as l, e as h } from "../../chunks/interfaces.js";
+import { C as l, s as h } from "../../chunks/interfaces.js";
 import { u as p } from "../../chunks/useT9n.js";
 import { html as n } from "lit";
 import { LitElement as u, createEvent as c, noShadowRoot as m } from "@arcgis/lumina";
 import { css as b } 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.20250610 */
+v1.0.0-next.20250617 */
 const S = b`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -53,9 +53,9 @@ class g extends u {
     return this._updateUIFromStore(), n`<label class="switch-label"><calcite-switch .checked=${this.enabled} class="spatial-ref-switch" @calciteSwitchChange=${(e) => this.enabled = e.target.checked} scale=m></calcite-switch>${this._translations.enableSpatialReference}</label><br><div class="spatial-ref-component" id=spatialRefDefn>${this._renderFeatureServicesList(this.featureServices)}</div><label class="switch-label spatial-ref-component"><calcite-switch .checked=${this.enableDefault} class="spatial-ref-switch" .disabled=${!this.enabled} @calciteSwitchChange=${(e) => this.enableDefault = e.target.checked} scale=m></calcite-switch>${this._translations.enableDefaultSpatialReference}</label>`;
   }
   solutionStoreHasChanges() {
-    this.featureServices = i.getStoreInfo("featureServices");
+    this.featureServices = s.getStoreInfo("featureServices");
   }
-  async _testAccess(e, t, a, s) {
+  async _testAccess(e, t, a, i) {
     switch (e) {
       case "_parameterizeWkid":
         return Promise.resolve(this._parameterizeWkid(t));
@@ -81,12 +81,12 @@ class g extends u {
     return e && (e.toString().startsWith(l) ? e : `${l}${e}${h}`);
   }
   _renderFeatureServicesList(e) {
-    const t = i.getStoreInfo("spatialReferenceInfo"), a = e.filter((s) => Object.keys(t.services).some((r) => r === s.id));
-    return a.length > 0 ? n`<div><label class="spatial-ref-item-title">${this._translations.featureServicesHeading}</label><ul class="spatial-ref-services-list">${a.map((s) => n`<li class="spatial-ref-services-list-item"><label class="switch-label"><calcite-switch .checked=${t.services[s.id]} class="spatial-ref-item-switch" .disabled=${!this.enabled} @calciteSwitchChange=${(r) => this._updateEnabledServices(r, s)} scale=m></calcite-switch>${s.name}</label></li>`)}</ul></div>` : null;
+    const t = s.getStoreInfo("spatialReferenceInfo"), a = e.filter((i) => Object.keys(t.services).some((r) => r === i.id));
+    return a.length > 0 ? n`<div><label class="spatial-ref-item-title">${this._translations.featureServicesHeading}</label><ul class="spatial-ref-services-list">${a.map((i) => n`<li class="spatial-ref-services-list-item"><label class="switch-label"><calcite-switch .checked=${t.services[i.id]} class="spatial-ref-item-switch" .disabled=${!this.enabled} @calciteSwitchChange=${(r) => this._updateEnabledServices(r, i)} scale=m></calcite-switch>${i.name}</label></li>`)}</ul></div>` : null;
   }
   _updateEnabledServices(e, t) {
-    const a = i.getStoreInfo("spatialReferenceInfo"), s = e.detail?.switched !== void 0 ? e.detail.switched : e.target?.checked !== void 0 ? e.target.checked : !0;
-    a.services[t.id] = s, i.setStoreInfo("spatialReferenceInfo", a), this._updateStore(), this.featureServiceSpatialReferenceChange.emit(t);
+    const a = s.getStoreInfo("spatialReferenceInfo"), i = e.detail?.switched !== void 0 ? e.detail.switched : e.target?.checked !== void 0 ? e.target.checked : !0;
+    a.services[t.id] = i, s.setStoreInfo("spatialReferenceInfo", a), this._updateStore(), this.featureServiceSpatialReferenceChange.emit(t);
   }
   _unparameterizeWkid(e) {
     return e && e.toString().startsWith(l) ? e.substring(l.length, e.length - h.length) : e;
@@ -96,15 +96,15 @@ class g extends u {
       e.services[t] = !1;
     }), this.featureServices.forEach((t) => {
       t.enabled = e.services[t.id], t.wkid = t.enabled ? this._parameterizeWkid(t.wkid) : this._unparameterizeWkid(t.wkid);
-    }), i.setStoreInfo("featureServices", this.featureServices);
+    }), s.setStoreInfo("featureServices", this.featureServices);
   }
   _updateStore() {
-    const e = i.getStoreInfo("spatialReferenceInfo");
-    e.enabled = this.enabled, this.enabled && this.enableDefault ? e.default = o : e.hasOwnProperty("default") && delete e.default, i.setStoreInfo("spatialReferenceInfo", e), this._updateFeatureServices(e);
+    const e = s.getStoreInfo("spatialReferenceInfo");
+    e.enabled = this.enabled, this.enabled && this.enableDefault ? e.default = o : e.hasOwnProperty("default") && delete e.default, s.setStoreInfo("spatialReferenceInfo", e), this._updateFeatureServices(e);
   }
   _updateUIFromStore() {
-    const e = i.getStoreInfo("spatialReferenceInfo");
-    this.enabled = e.enabled, this.enableDefault = !!e.default, this.featureServices = i.getStoreInfo("featureServices");
+    const e = s.getStoreInfo("spatialReferenceInfo");
+    this.enabled = e.enabled, this.enableDefault = !!e.default, this.featureServices = s.getStoreInfo("featureServices");
   }
 }
 f("solution-spatial-ref", g);

package/dist/components/solution-template-data/customElement.js

@@ -6,7 +6,7 @@ import { LitElement as p, noShadowRoot as u, safeClassMap as s } from "@arcgis/l
 import { css as m } 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.20250610 */
+v1.0.0-next.20250617 */
 const v = m`@layer{/** @license
  * Copyright 2025 Esri
  *

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

@@ -5,7 +5,7 @@ import { LitElement as l, createEvent as c } from "@arcgis/lumina";
 import { css as o } 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.20250610 */
+v1.0.0-next.20250617 */
 const h = o`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solutions-all-panel/customElement.d.ts

@@ -55,4 +55,6 @@ export declare class SolutionsAllPanel extends LitElement {
     searchSolutions(searchOptions?: IFilterOption | ISearchOption | ISortOption): Promise<void>;
     /** Emitted on demand when cards are fetched */
     readonly cardsFetched: TargetedEvent<this, number>;
+    /** Emitted on demand when all of the cards are first fetched */
+    readonly allCardsFetched: TargetedEvent<this, ISolutionInfoCard[]>;
 }