@esri/solutions-components 1.2.0-next.2 → 1.2.0-next.20

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

@@ -0,0 +1,118 @@
+import { c as d } from "../../chunks/runtime.js";
+import { css as p, html as i } from "lit";
+import { keyed as g } from "lit/directives/keyed.js";
+import { u as h } from "../../chunks/useT9n.js";
+import { LitElement as u, createEvent as o, nothing as s } from "@arcgis/lumina";
+import { useContextConsumer as m } from "@arcgis/lumina/context";
+import { c as f } from "../../chunks/deployAppContexts.js";
+import { a as v, d as c, h as x } 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.20 */
+const b = p`/** @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.
+ */.align-self-center{align-self:center}.font-weight-med{font-weight:var(--calcite-font-weight-medium)}.font-weight-bold{font-weight:var(--calcite-font-weight-bold)}.heading-font{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium)}.title-font{font-size:1.8rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.font-1{font-size:var(--calcite-spacing-lg)}.display-flex{display:flex}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}.icon-color{color:var(--calcite-color-text-3)}.padding-end-1{padding-inline-end:var(--calcite-spacing-lg)}.padding-start-1{padding-inline-start:var(--calcite-spacing-lg)}.padding-bottom-1{padding-bottom:var(--calcite-spacing-lg)}.padding-side-1{padding-inline-start:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}.item-padding{--calcite-internal-accordion-item-padding: var(--calcite-spacing-xl)}.width-full{width:100%}.align-items-center{align-items:center}.align-items-start{align-items:start}.font-size-override{--calcite-font-size--2: var(--calcite-font-size--1)}.width-400{width:400px}.padding-3-4{padding:var(--calcite-spacing-md)}.margin-0{margin:var(--calcite-spacing-none)}.background-color-2{background-color:var(--calcite-color-foreground-2)}.label-override{--calcite-label-margin-bottom: var(--calcite-spacing-none)}.position-relative{position:relative}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.margin-block-start-end-0{margin-block-start:var(--calcite-spacing-none);margin-block-end:var(--calcite-spacing-none)}.panel-background-2{--calcite-panel-background-color: var(--calcite-color-foreground-2);background-color:var(--calcite-color-foreground-2)}.panel-background-1{--calcite-panel-background-color: var(--calcite-color-foreground-1);--calcite-shell-panel-background-color: var(--calcite-color-foreground-1)}.border-none{border:none}.padding-top-1{padding-top:var(--calcite-spacing-lg)}.padding-1{padding:var(--calcite-spacing-lg)}.font-color-1{color:var(--calcite-color-text-1)}.panel-bg-color{--calcite-panel-header-background-color: var(--calcite-color-foreground-1);--calcite-panel-background-color: var(--calcite-color-foreground-1)}.dialog-y-size{--calcite-dialog-size-y: 90% }.dialog-x-size{--calcite-dialog-size-x: 90% }.bottom-border{border-bottom:solid var(--calcite-spacing-px);color:var(--calcite-color-border-1)}.margin-start-end-xxl{margin-inline-start:var(--calcite-spacing-xxl);margin-inline-end:var(--calcite-spacing-xxl)}.justify-between{justify-content:space-between}.items-baseline{align-items:baseline}.padding-xxl{padding:var(--calcite-spacing-xxl)}.padding-top-xxl{padding-top:var(--calcite-spacing-xxl)}.padding-bottom-xxl{padding-bottom:var(--calcite-spacing-xxl)}.padding-sides-xxl{padding-inline-start:var(--calcite-spacing-xxl);padding-inline-end:var(--calcite-spacing-xxl)}.padding-sides-lg{padding-inline-start:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}.padding-start-lg{padding-inline-start:var(--calcite-spacing-lg)}.padding-end-lg{padding-inline-end:var(--calcite-spacing-lg)}.image-width{width:395px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.image-width{flex-grow:2;flex-shrink:.5}}img{max-width:100%;height:auto;overflow-clip-margin:content-box;overflow:clip}.margin-lg{margin:var(--calcite-spacing-lg)}.line-height-1{line-height:1.1}@media(max-width:800px){.image-width{display:none}}calcite-shell-panel{--calcite-shell-panel-max-width: 20rem;--calcite-shell-panel-width: 24vw}`;
+class w extends u {
+  constructor() {
+    super(), this.diagramKey = "", this.open = !1, this.showSuccessAlert = !1, this.templateInfos = [], this._configureTitlesOpen = !1, this._deleteDialogOpen = !1, this._hasNewVersion = !1, this._isDiagramOpen = !1, this._isNameConflict = !1, this._invalidNameMessage = "", this._showFailedAlert = !1, this._showItemUpdateLoading = !1, this._templateInfoGraph = [], this._translations = h({ name: "solution-deployed-card-panel", blocking: !0 }), this._configContextConsumer = m({
+      context: f,
+      subscribe: !0
+    }), this.navTabSelected = o(), this.sortTypeChanged = o(), this.solutionConfigureDialogClose = o(), this.listenOn(window, "deployedCardSelected", this._deployedCardSelected), this.listenOn(window, "deployAppTabSelected", this._handleDeployAppTabSelected);
+  }
+  static {
+    this.properties = { card: 0, cardRef: 1, diagramKey: 1, open: 5, showSuccessAlert: 5, templateInfos: 0, _configureTitlesOpen: 16, _deleteDialogOpen: 16, _hasNewVersion: 16, _isDiagramOpen: 16, _isNameConflict: 16, _invalidNameMessage: 16, _showFailedAlert: 16, _showItemUpdateLoading: 16, _templateInfoGraph: 16, _translations: 16 };
+  }
+  static {
+    this.styles = b;
+  }
+  render() {
+    return i`<calcite-shell class="position-relative background-color-2"><calcite-panel class="padding-end-1 panel-background-2 border-none" slot=panel-bottom><div class="display-flex flex-direction-column overflow-hidden"><div class="background-color-2 padding-top-xxl">${this._getSolutionPanel()}</div>${this._getSolutionContents()}</div></calcite-panel><calcite-shell-panel class="panel-background-1" slot=panel-end>${this._getButtons()}${this._getOwnerSection()}<div class="bottom-border padding-top-11 margin-start-end-xxl"></div>${this._getSolutionVersionCard()}</calcite-shell-panel>${this._renderDiagramDialog()}${this._getConfigureTitlesDialog()}${this._getDeleteDialog()}</calcite-shell>`;
+  }
+  async _deployedCardSelected(e) {
+    const t = e.detail;
+    this.card = t.card, this.cardRef = t.cardRef, this.cardRef.getTemplates().then((a) => {
+      this.templateInfos = a;
+    });
+    const n = v(this._configContextConsumer.value?.allCards || [], this.card.deployCommonId);
+    let l = !1;
+    if (n) {
+      const a = c(n), r = c(this.card);
+      l = a > r;
+    }
+    this._hasNewVersion = l;
+  }
+  _handleDeployAppTabSelected(e) {
+    e.detail === "deployed-card" && this.sortTypeChanged.emit("");
+  }
+  _getButtons() {
+    return i`<div class="display-flex flex-direction-column padding-xxl"><calcite-button appearance=outline class="padding-bottom-1" icon-start=model kind=neutral @click=${this._openDiagram}>${this._translations.viewTheDiagram}</calcite-button><calcite-button appearance=outline class="padding-bottom-1" icon-start=edit-attributes kind=neutral @click=${this._openConfigureTitlesDialog}>${this._translations.updateTitles}</calcite-button><calcite-button appearance=outline class="padding-bottom-1" icon-start=file-text kind=neutral @click=${this._viewDocumentation}>${this._translations.solutionDocumentation}</calcite-button><calcite-button appearance=outline class="padding-bottom-1" icon-start=launch kind=neutral @click=${this._openItemDetails}>${this._translations.itemDetails}</calcite-button><calcite-button appearance=outline class="padding-bottom-1" icon-start=trash kind=neutral @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-button></div>`;
+  }
+  _openConfigureTitlesDialog() {
+    this._configureTitlesOpen = !0;
+  }
+  _getConfigureTitlesDialog() {
+    return this._configureTitlesOpen ? i`<solution-configure-titles .card=${this.card} @solutionConfigureTitlesBeforeClose=${() => {
+      this._configureTitlesOpen = !1;
+    }} @solutionItemsTitlesChanged=${async () => {
+      this.templateInfos = await this.cardRef.getTemplates();
+    }} .open=${this._configureTitlesOpen} .templateInfos=${this.templateInfos}></solution-configure-titles>` : "";
+  }
+  _viewDocumentation(e) {
+    e.stopPropagation(), window.open(this.card.learnMoreUrl, "_blank");
+  }
+  _openItemDetails(e) {
+    e.stopPropagation(), window.open(this.card.itemUrl, "_blank");
+  }
+  _getOwnerSection() {
+    return i`<div class="display-flex padding-bottom-xxl margin-start-end-xxl flex-direction-column"><div class="display-flex justify-between items-baseline"><calcite-label class="font-weight-med label-override" layout=inline scale=l>${this._translations.aboutYourSolutionOwner}</calcite-label><calcite-button appearance=transparent kind=neutral icon-start=pencil @click=${() => {
+    }}>${this._translations.editSolutionOwner}</calcite-button></div>${g(this.card?.owner, i`<arcgis-user-popup api=4 appearance=outline .baseUrl=${this._configContextConsumer?.value?.orgUrl} class="padding-top-1" .portal=${this._configContextConsumer?.value?.authentication?.Portal} scale=l show-avatar show-name show-username underline .username=${this.card?.owner}></arcgis-user-popup>`)}</div>`;
+  }
+  async _openDiagram(e) {
+    e.stopPropagation(), this.cardRef && (this._templateInfoGraph = await this.cardRef.getTemplates(), this._isDiagramOpen = !0);
+  }
+  _getSolutionVersionCard() {
+    const e = this._hasNewVersion ? this._translations.newVersionAvailable : this._translations.youHaveTheLatestVersion;
+    return i`<div class="padding-xxl display-flex flex-direction-column"><calcite-label class="font-weight-med label-override" layout=inline scale=l slot=heading>${this._translations.solutionVersion}</calcite-label><div class="display-flex"><div class="display-flex flex-direction-row padding-top-xxl align-items-center"><calcite-icon class="icon-color" icon=clock-forward scale=m></calcite-icon><div class="display-flex flex-direction-column padding-start-lg"><span class="font-weight-bold font-color-1">${this.card?.deployVersion}</span><span>${e}</span></div></div></div>${this._hasNewVersion ? i`<calcite-button appearance=outline class="padding-top-xxl" kind=neutral @click=${this._openNewVersionSolution} width=full>${this._translations.viewNewVersion}</calcite-button>` : ""}</div>`;
+  }
+  _openNewVersionSolution(e) {
+    e.stopPropagation();
+    const t = x(this._configContextConsumer.value.allCards, this.card.deployCommonId), n = window.location.href, l = this._configContextConsumer.value.solutionsUrlMarker, a = n.indexOf(l);
+    a > -1 && t && window.open(`${n.substring(0, a + l.length)}/${t}`, "_blank");
+  }
+  _getSolutionPanel() {
+    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400"), t = this._configContextConsumer.value?.userSession;
+    return i`<calcite-panel class="font-size-override panel-background-1"><div class="display-flex flex-direction-row"><div class="image-width margin-lg"><img alt=${this.card?.title ?? s} src=${`${e}&token=${t?.token}`}></div><div class="display-flex flex-direction-column"><h1 class="title-font margin-block-start-end-0 padding-sides-lg padding-top-xxl padding-bottom-xxl line-height-1">${this.card?.title}</h1><div class="display-flex flex-direction-column padding-bottom-xxl padding-side-1"><div class="display-flex align-items-start padding-bottom-xxl"><calcite-label scale=l class="font-1 padding-end-1">${this.card?.snippet}</calcite-label></div><div class="display-flex"><div class="display-flex"><calcite-label class="label-override icon-color" layout=inline><calcite-icon class="icon-color" icon=projects scale=s></calcite-icon>${this._translations.aboutYourSolutionDeployedDate.replace("{{deployedDate}}", this.card?.created || "")}</calcite-label></div></div></div></div></div></calcite-panel>`;
+  }
+  _getSolutionContents() {
+    return i`<calcite-panel class="panel-background-1 padding-top-1"><calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded><div class="margin-block-start-end-0 heading-font " slot=content-start>${this._translations.solutionsContentsAndCount.replace("{{numberOfSolutions}}", this.templateInfos.length.toString())}</div><div class="overflow-auto"><solution-item-accordion list-selection-mode=single .templateInfos=${this.templateInfos} .typeKeywords=${this.card?.typeKeywords}></solution-item-accordion></div></calcite-accordion-item></calcite-accordion></calcite-panel>`;
+  }
+  _getDeleteDialog() {
+    return this._deleteDialogOpen ? i`<solution-delete-dialog .card=${this.card} @solutionDeleted=${() => setTimeout(() => this.navTabSelected.emit({ tabType: "deployments" }), 100)} @solutionDeleteDialogBeforeClose=${() => {
+      this._deleteDialogOpen = !1;
+    }} .open=${this._deleteDialogOpen}></solution-delete-dialog>` : "";
+  }
+  _renderDiagramDialog() {
+    return this._isDiagramOpen ? i`<calcite-dialog class="dialog-y-size dialog-x-size panel-bg-color" .heading=${this._translations.diagramOfTheSolution.replace("{{solution}}", this.card?.title ?? "")} id=${this._translations.diagramOfTheSolution.replace("{{solution}}", this.card?.title ?? "") ?? s} modal .open=${this._isDiagramOpen} @calciteDialogClose=${() => {
+      this._isDiagramOpen = !1;
+    }} outside-close-disabled resizable scale=l width=l><solution-item-diagram .diagramKey=${this.diagramKey !== "" ? this.diagramKey : this._configContextConsumer.value?.diagramKey ?? ""} .templateInfoGraph=${this._templateInfoGraph} .typeKeywords=${this.card?.typeKeywords}></solution-item-diagram></calcite-dialog>` : "";
+  }
+  async _deleteSolution() {
+    this._deleteDialogOpen = !0;
+  }
+}
+d("solution-deployed-card-panel", w);
+export {
+  w as SolutionDeployedCardPanel
+};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { LitElement as c } from "@arcgis/lumina";
 import { createRef as r, ref as h } from "lit-html/directives/ref.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
+v1.2.0-next.20 */
 const d = s`/** @license
  * Copyright 2025 Esri
  *

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

@@ -1,11 +1,11 @@
-import { c as s } from "../../chunks/runtime.js";
+import { c } from "../../chunks/runtime.js";
 import { css as r, html as i } from "lit";
 import { u as l } from "../../chunks/useT9n.js";
 import { LitElement as n, createEvent as d, nothing as a, safeClassMap as h } from "@arcgis/lumina";
 import { b as p } 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.2 */
+v1.2.0-next.20 */
 const m = r`/** @license
  * Copyright 2025 Esri
  *
@@ -33,7 +33,7 @@ class u extends n {
   }
   render() {
     const e = p(this.card.title);
-    return console.warn("TODO update string after R3 release"), i`<a href=${e ?? a} @click=${this._anchorClick} .title=${`${this.card.title} - ArcGIS Solutions`}>${this._renderCard()}</a>`;
+    return i`<a href=${e ?? a} @click=${this._anchorClick} .title=${`${this.card.title} - ${this._translations.arcgisSolutions}`}>${this._renderCard()}</a>`;
   }
   _anchorClick(e) {
     e.preventDefault();
@@ -42,11 +42,11 @@ class u extends n {
     this.detailsCardSelected.emit(this.card);
   }
   _renderCard() {
-    const e = this.card, c = e.chip === "new" || e.chip === "updated" ? "chip-status" : this.card.chip === "deployed" ? "chip-deployed" : "", o = "solution-details-card-chip", t = e.chip === "new" ? this._translations.newSolution : e.chip === "updated" ? this._translations.updated : this._translations.deployed;
-    return i`<calcite-card .label=${e.snippet} @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img alt=${e.title ?? a} class="thumbnail card-image" src=${e.thumbnailUrl ?? a}><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" ? i`<div slot=footer-end><calcite-chip class=${h(c)} .icon=${e.chip === "updated" || e.chip === "new" ? "mega-phone" : "check-circle"} id=${o} .label=${t} .value=${t} scale=s></calcite-chip><calcite-tooltip .referenceElement=${o}><span>${t}</span></calcite-tooltip></div>` : void 0}<div slot=footer-start></div></calcite-card>`;
+    const e = this.card, s = e.chip === "new" || e.chip === "updated" ? "chip-status" : this.card.chip === "deployed" ? "chip-deployed" : "", o = "solution-details-card-chip", t = e.chip === "new" ? this._translations.newSolution : e.chip === "updated" ? this._translations.updated : this._translations.deployed;
+    return i`<calcite-card .label=${e.snippet} @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img alt=${e.title ?? a} class="thumbnail card-image" src=${e.thumbnailUrl ?? a}><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" ? i`<div slot=footer-end><calcite-chip class=${h(s)} .icon=${e.chip === "updated" || e.chip === "new" ? "mega-phone" : "check-circle"} id=${o} .label=${t} .value=${t} scale=s></calcite-chip><calcite-tooltip .referenceElement=${o}><span>${t}</span></calcite-tooltip></div>` : void 0}<div slot=footer-start></div></calcite-card>`;
   }
 }
-s("solution-details-card", u);
+c("solution-details-card", u);
 export {
   u as SolutionDetailsCard
 };

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

@@ -1,18 +1,18 @@
-import { c as w } from "../../chunks/runtime.js";
-import { css as y, html as s } from "lit";
-import { u as b } from "../../chunks/useT9n.js";
+import { c as b } from "../../chunks/runtime.js";
+import { css as x, html as s } from "lit";
+import { u as w } from "../../chunks/useT9n.js";
 import { createRef as c, ref as d } from "lit-html/directives/ref.js";
-import { LitElement as x, createEvent as u, safeClassMap as p, nothing as m, safeStyleMap as $ } from "@arcgis/lumina";
+import { LitElement as y, createEvent as u, safeClassMap as p, nothing as m, safeStyleMap as $ } from "@arcgis/lumina";
 import { useContextConsumer as f } from "@arcgis/lumina/context";
 import { a as R, u as k } from "../../chunks/deployAppContexts.js";
-import { getItemDataAsJson as A, getItem as L, getPropWithDefault as _, getProp as g, setCreateProp as M } from "@esri/solution-common";
-import { a as S, b as I } from "../../chunks/privilegeUtils.js";
-import { _findExistingItem as E } from "@esri/solution-deployer";
-import { g as C, a as P } from "../../chunks/common.js";
+import { sanitizeHTML as M, getItemDataAsJson as L, getItem as S, getPropWithDefault as _, getProp as g, setCreateProp as I } from "@esri/solution-common";
+import { a as A, b as E } from "../../chunks/privilegeUtils.js";
+import { _findExistingItem as C } from "@esri/solution-deployer";
+import { g as P, a as T } from "../../chunks/common.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.2 */
-const T = y`/** @license
+v1.2.0-next.20 */
+const D = x`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26,13 +26,13 @@ const T = y`/** @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}ul{list-style-type:disc;margin-block-start:0px;margin-block-end:0px}calcite-label{--calcite-label-margin-bottom: 0px}.padding-1{padding:1rem}.padding-1-5{padding:1.5rem}.padding-2px{padding:2px}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-5{padding-bottom:1.5rem}.padding-top-1{padding-top:1rem}.padding-top-1-5{padding-top:1.5rem}.padding-top-1-2{padding-top:.5rem}.padding-end-1{padding-inline-end:1rem}.padding-end-2{padding-inline-end:2rem}.padding-start-1{padding-inline-start:1rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-1-5{margin-bottom:1.5rem}.margin-end-1{margin-inline-end:1rem}.margin-block-start-end-0{margin-block-start:0px;margin-block-end:0px}.align-self-center{align-self:center;padding:5px;--calcite-fab-shadow: #FFFFFF00}.align-items-center{align-items:center}.button-width{width:260px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.button-width{width:auto}}.image-width{width:395px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.image-width{flex-grow:2;flex-shrink:.5}}.width-full{width:100%}.card-group{overflow:hidden}calcite-card{width:450px}@media(max-width:1496px){calcite-card{width:calc(100% / 3 - .5rem)}}@media(max-width:1100px){calcite-card{width:calc(50% - .5rem)}}@media(max-width:550px){calcite-card{width:100%}}.max-height-300{max-height:300px}.display-none{display:none}.cursor-pointer{cursor:pointer}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{border:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer;padding:2px}.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%;font-size:1.2rem}.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}.margin-inline-unset{margin-inline:unset}.margin-top-0-5{margin-top:.5rem}.margin-top-0{margin-top:0}.collapsible-div{overflow:hidden;transition:max-height .3s ease-in-out}.collapsible-div.expanded{max-height:100%}.back-color-override{--calcite-panel-background-color: var(--calcite-color-foreground-2)}.back-color-override-1{background-color:var(--calcite-color-foreground-1)}.title-font{font-size:2rem;line-height:1.1;color:var(--calcite-color-text-1)}.line-height-1-5{line-height:1.5}.font-1rem{font-size:1rem}.font-color-1{color:var(--calcite-color-text-1)}h1{font-weight:unset;margin:0;padding:0}.item-padding{--calcite-internal-accordion-item-padding: 1.5rem}.accordion-bg{--calcite-accordion-background-color: var(--calcite-color-foreground-1)}`;
-class D extends x {
+ */.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:var(--calcite-spacing-px);border-bottom-style:solid}ul{list-style-type:disc;margin-block-start:var(--calcite-spacing-none);margin-block-end:var(--calcite-spacing-none)}ul ul{list-style-type:circle}li{margin:var(--calcite-spacing-sm) var(--calcite-spacing-none)}calcite-label{--calcite-label-margin-bottom: var(--calcite-spacing-none)}.padding-1{padding:var(--calcite-spacing-lg)}.padding-1-5{padding:var(--calcite-spacing-xl)}.padding-2px{padding:var(--calcite-spacing-base)}.padding-bottom-1{padding-bottom:var(--calcite-spacing-lg)}.padding-bottom-1-5{padding-bottom:var(--calcite-spacing-xxl)}.padding-top-1{padding-top:var(--calcite-spacing-lg)}.padding-top-1-5{padding-top:var(--calcite-spacing-xxl)}.padding-top-1-2{padding-top:var(--calcite-spacing-sm)}.padding-end-1{padding-inline-end:var(--calcite-spacing-lg)}.padding-end-2{padding-inline-end:var(--calcite-spacing-xxxl)}.padding-start-1{padding-inline-start:var(--calcite-spacing-lg)}.margin-bottom-1{margin-bottom:var(--calcite-spacing-lg)}.margin-bottom-1-5{margin-bottom:var(--calcite-spacing-xxl)}.margin-end-1{margin-inline-end:var(--calcite-spacing-lg)}.margin-top-0{margin-top:var(--calcite-spacing-none)}.margin-top-1{margin-top:var(--calcite-spacing-lg)}.margin-sides-0-5{margin-left:var(--calcite-spacing-sm);margin-right:var(--calcite-spacing-sm)}.margin-block-start-end-0{margin-block-start:var(--calcite-spacing-none);margin-block-end:var(--calcite-spacing-none)}.align-self-center{align-self:center;padding:5px;--calcite-fab-shadow: #FFFFFF00}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.button-width{width:260px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.button-width{width:auto}}.image-width{width:395px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.image-width{flex-grow:2;flex-shrink:.5}}.width-full{width:100%}.card-group{overflow:hidden}calcite-card{width:450px}@media(max-width:1496px){calcite-card{width:calc(100% / 3 - .5rem)}}@media(max-width:1100px){calcite-card{width:calc(50% - .5rem)}}@media(max-width:550px){calcite-card{width:100%}}.max-height-300{max-height:300px}.display-none{display:none}.cursor-pointer{cursor:pointer}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{border:var(--calcite-spacing-base) solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer;padding:var(--calcite-spacing-base)}.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%;font-size:var(--calcite-spacing-xl)}.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}.margin-inline-unset{margin-inline:unset}.collapsible-div{overflow:hidden;transition:max-height .3s ease-in-out}.collapsible-div.expanded{max-height:100%}.back-color-override{--calcite-panel-background-color: var(--calcite-color-foreground-2)}.back-color-override-1{background-color:var(--calcite-color-foreground-1)}.title-font{font-size:1.8rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.heading-font{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium)}.line-height-xxl{line-height:var(--calcite-spacing-xxl)}.font-1{font-size:var(--calcite-spacing-lg)}.font-color-1{color:var(--calcite-color-text-1)}h1{font-weight:unset;margin:var(--calcite-spacing-none);padding:var(--calcite-spacing-none)}.item-padding{--calcite-internal-accordion-item-padding: var(--calcite-spacing-xl)}.accordion-bg{--calcite-accordion-background-color: var(--calcite-color-foreground-1)}.release-notes-table-cell{display:flex;flex-direction:row;font-size:var(--calcite-spacing-lg);color:var(--calcite-color-text-1)}calcite-table-header{--calcite-internal-table-cell-font-size: var(--calcite-font-size-md);--calcite-font-weight-medium: var(--calcite-font-weight-semibold)}`;
+class O extends y {
   constructor() {
-    super(), this._showScreenshotsShowMore = !1, this._showYouMayAlsoLikeShowMore = !1, this._isScreenshotsRowExpanded = !1, this._isYouMayAlsoLikeRowExpanded = !1, this._screenshotsRowBaseHeight = 340, this._templates = [], this._translations = b({ name: "solution-details-panel", blocking: !0 }), this._youMayAlsoLikeBaseHeight = 340, this._allCards = [], this._authContextConsumer = f({
+    super(), this._showScreenshotsShowMore = !1, this._showYouMayAlsoLikeShowMore = !1, this._isScreenshotsRowExpanded = !1, this._isYouMayAlsoLikeRowExpanded = !1, this._screenshotsRowBaseHeight = 340, this._templates = [], this._translations = w({ name: "solution-details-panel", blocking: !0 }), this._youMayAlsoLikeBaseHeight = 340, this._allCards = [], this._authContextConsumer = f({
       context: R,
       subscribe: !0
-    }), this._configureLearnMore = "", this._customDeploymentMappings = {}, this._deployDialogRef = c(), this._deployingDialogRef = c(), this._overviewAccordionItemElement = c(), this._privilegePopoverRef = c(), this._privileges = [], this._regexFsUrl = "https?:\\/\\/.+FeatureServer\\b", this._regexID = "\\b[0-9A-F]{32}\\b", this._releaseNotesAccordionItemElement = c(), this._relatedArticlesAccordionItemElement = c(), this._screenshotsAccordionItemElement = c(), this._screenshotsDialogRef = c(), this._screenshotsElement = c(), this._termsOfUseAccordionItemElement = c(), this._userOptions = [], this._userSessionContextConsumer = f({
+    }), this._configureLearnMore = "", this._customDeploymentMappings = {}, this._deployDialogRef = c(), this._deployingDialogRef = c(), this._overviewAccordionItemElement = c(), this._privilegePopoverRef = c(), this._privileges = [], this._regexFsUrl = "https?:\\/\\/.+FeatureServer\\b", this._regexID = "\\b[0-9A-F]{32}\\b", this._releaseNotesAccordionItemElement = c(), this._relatedResourcesAccordionItemElement = c(), this._screenshotsAccordionItemElement = c(), this._screenshotsDialogRef = c(), this._screenshotsElement = c(), this._termsOfUseAccordionItemElement = c(), this._userOptions = [], this._userSessionContextConsumer = f({
       context: k,
       subscribe: !0
     }), this._youMayAlsoLikeAccordionItemElement = c(), this._youMayAlsoLikeElement = c(), this.templatesFetched = u(), this.itemPropertiesFetched = u(), this.sortTypeChanged = u(), this.tokenRefreshed = u(), this.listenOn(window, "detailsCardSelected", this._detailsCardSelected), this.listenOn(window, "allCardsFetched", this._allCardsFetched), this.listenOn(window, "deployAppTabSelected", this._handleDeployAppTabSelected);
@@ -41,7 +41,7 @@ class D extends x {
     this.properties = { card: 0, _showScreenshotsShowMore: 16, _showYouMayAlsoLikeShowMore: 16, _isScreenshotsRowExpanded: 16, _isYouMayAlsoLikeRowExpanded: 16, _itemProperties: 16, _missingPrivilegeMessages: 16, _screenshotsRowBaseHeight: 16, _templates: 16, _translations: 16, _youMayAlsoLikeBaseHeight: 16 };
   }
   static {
-    this.styles = T;
+    this.styles = D;
   }
   async connectedCallback() {
     super.connectedCallback(), this.listenOn(window, "calciteTabChange", this._cleanupPanel), this.listenOn(window, "detailsCardSelected", this._cleanupPanel);
@@ -55,35 +55,34 @@ class D extends x {
     super.disconnectedCallback(), this._resizeObserver?.disconnect();
   }
   render() {
-    const e = "padding-bottom-1-5", t = this._getRelatedArticles(), i = this._getYouMayAlsoLikeCards();
-    return s`<h1><calcite-panel class="back-color-override padding-top-1"><div class=${`${e} padding-1-5 back-color-override-1 margin-bottom-1-5`} id=solution-details-row>${this._getSolutionRow()}</div><div class=${p(e)}>${this._getScreenshotsRow()}</div><div class=${p(e)}>${this._getOverviewRow()}</div><div class=${p(e)}>${this._getReleaseNotesRow()}</div>${t.length > 0 ? s`<div class=${p(e)}>${this._getRelatedArticlesRow(t)}</div>` : ""}${i.length > 0 ? s`<div class=${p(e)}>${this._getYouMayAlsoLikeRow(i)}</div>` : ""}<div class=${p(e)}>${this._getTermsOfUseRow()}</div><solution-deploy-dialog .card=${this.card} @deployFailed=${this._closeDialogs} @deployProgressEnd=${this._closeDialogs} @deployProgressStart=${this._deployProgressStart} @deployProgressUpdated=${this._deployProgessUpdated} id=solutionDeployDialog .userOptions=${this._userOptions} ${d(this._deployDialogRef)}></solution-deploy-dialog><solution-snapshot-gallery .card=${this.card} id=solutionSnapshotGallery .itemProperties=${this._itemProperties} ${d(this._screenshotsDialogRef)}></solution-snapshot-gallery><solution-deploying-dialog .card=${this.card} ${d(this._deployingDialogRef)}></solution-deploying-dialog></calcite-panel></h1>`;
+    const e = "padding-bottom-1-5", t = this._getRelatedResources(), i = this._getYouMayAlsoLikeCards();
+    return s`<h1><calcite-panel class="back-color-override padding-top-1"><div class=${`${e} padding-1-5 back-color-override-1 margin-bottom-1-5`} id=solution-details-row>${this._getSolutionRow()}</div><div class=${p(e)}>${this._getScreenshotsRow()}</div><div class=${p(e)}>${this._getOverviewRow()}</div><div class=${p(e)}>${this._getReleaseNotesRow()}</div>${t.length > 0 ? s`<div class=${p(e)}>${this._getRelatedResourcesRow(t)}</div>` : ""}${i.length > 0 ? s`<div class=${p(e)}>${this._getYouMayAlsoLikeRow(i)}</div>` : ""}<div class=${p(e)}>${this._getTermsOfUseRow()}</div><solution-deploy-dialog .card=${this.card} @deployFailed=${this._closeDialogs} @deployProgressEnd=${this._closeDialogs} @deployProgressStart=${this._deployProgressStart} @deployProgressUpdated=${this._deployProgessUpdated} id=solutionDeployDialog .userOptions=${this._userOptions} ${d(this._deployDialogRef)}></solution-deploy-dialog><solution-snapshot-gallery .card=${this.card} id=solutionSnapshotGallery .itemProperties=${this._itemProperties} ${d(this._screenshotsDialogRef)}></solution-snapshot-gallery><solution-deploying-dialog .card=${this.card} ${d(this._deployingDialogRef)}></solution-deploying-dialog></calcite-panel></h1>`;
   }
   updated() {
     setTimeout(() => {
       const e = this._getYouMayAlsoLikeCards();
       let t = 340;
       for (let i = 0; i < e.length; i++) {
-        const o = this.el.shadowRoot?.getElementById(`you-may-also-like-${i}`), a = o?.offsetHeight ? o.offsetHeight + 40 : 0;
-        a > t && (t = a);
+        const a = this.el.shadowRoot?.getElementById(`you-may-also-like-${i}`), o = a?.offsetHeight ? a.offsetHeight + 40 : 0;
+        o > t && (t = o);
       }
       this._youMayAlsoLikeBaseHeight = t, this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight;
     }, 100);
   }
   _getSolutionRow() {
-    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400"), t = this._missingPrivilegeMessages?.leadingMessages || [], i = t.length > 0, o = this._missingPrivilegeMessages?.bulletedMessages || [], a = o.length > 0, l = this._missingPrivilegeMessages?.trailingMessages || [], r = l.length > 0;
-    return s`<div class="display-flex flex-direction-row"><div class="padding-end-2 image-width"><img alt=${this.card?.title ?? m} src=${e ?? m}></div><div class="display-flex flex-direction-row">${this._getTextSection(i, a, r, t, o, l)}${this._getButtons(i || a || r)}</div></div>`;
+    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400"), t = this._missingPrivilegeMessages?.leadingMessages || [], i = t.length > 0, a = this._missingPrivilegeMessages?.bulletedMessages || [], o = a.length > 0, l = this._missingPrivilegeMessages?.trailingMessages || [], r = l.length > 0;
+    return s`<div class="display-flex flex-direction-row"><div class="padding-end-2 image-width"><img alt=${this.card?.title ?? m} src=${e ?? m}></div><div class="display-flex flex-direction-row">${this._getTextSection(i, o, r, t, a, l)}${this._getButtons(i || o || r || !this._authContextConsumer.value?.IsSignedIn, this._authContextConsumer.value?.IsEnterprisePortal)}</div></div>`;
   }
-  _getTextSection(e, t, i, o, a, l) {
-    return s`<div class="display-flex flex-direction-column padding-end-1"><h2 class="padding-end-1 padding-top-1 title-font margin-top-0">${this.card?.title}</h2>${this.card?.categories?.some((r) => r.includes("New Release")) && s`<calcite-chip class="align-self-center" kind=brand .label=${this._translations.new} scale=m>${this._translations.new}</calcite-chip>` || ""}<calcite-label scale=l class="font-1rem padding-end-1">${this.card?.snippet}</calcite-label>${e || t || i ? s`<div class="display-flex flex-direction-row padding-top-1">${this._getMissingPrivilegesNotice(o, a, l)}</div>` : ""}</div>`;
+  _getTextSection(e, t, i, a, o, l) {
+    return s`<div class="display-flex flex-direction-column padding-end-1"><div class="display-flex flex-direction-row align-items-baseline"><h2 class="padding-top-1 title-font margin-top-0 margin-bottom-1-5">${this.card?.title}</h2>${this.card?.categories?.some((r) => r.includes("New Release")) && s`<calcite-chip class="margin-top-1 margin-bottom-1-5 margin-sides-0-5" kind=brand .label=${this._translations.new} scale=m icon=mega-phone>${this._translations.new}</calcite-chip>` || ""}</div><calcite-label scale=l class="font-1 padding-end-1">${this.card?.snippet}</calcite-label>${e || t || i ? s`<div class="display-flex flex-direction-row padding-top-1">${this._getMissingPrivilegesNotice(a, o, l)}</div>` : ""}</div>`;
   }
-  _getButtons(e) {
-    console.warn("TODO update learn more string after release");
-    const t = this._itemProperties?.demoURL || "", i = t ? "" : "display-none";
-    return s`<div class="display-flex flex-direction-column button-width"><calcite-button class="padding-bottom-1" .disabled=${e} icon-end=arrow-bold-right icon-flip-rtl=end @click=${() => this._openDeploy()} scale=l>${this._translations.deploy}</calcite-button><calcite-button appearance=outline-fill kind=neutral class=${`padding-bottom-1 ${i}`} @click=${() => this._openUrl(t)} scale=l>${this._translations.watchDemo}</calcite-button><calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1" @click=${() => this._openUrl(this.card?.learnMoreUrl || "")} scale=l>Learn more</calcite-button><solution-social-share button-appearance=outline-fill class="padding-bottom-1" share-button-kind=neutral .shareButtonText=${this._translations.share} share-button-scale=l></solution-social-share></div>`;
+  _getButtons(e, t) {
+    const i = this._itemProperties?.demoURL || "", a = i ? "" : "display-none";
+    return s`<div class="display-flex flex-direction-column button-width"><calcite-button class="padding-bottom-1" .disabled=${e} icon-end=arrow-bold-right icon-flip-rtl=end @click=${() => this._openDeploy()} scale=l>${this._translations.deploy}</calcite-button><calcite-button appearance=outline-fill kind=neutral class=${`padding-bottom-1 ${a}`} @click=${() => this._openUrl(i)} scale=l>${this._translations.watchDemo}</calcite-button><calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1" @click=${() => this._openUrl(this.card?.learnMoreUrl || "")} scale=l>${this._translations.learnMore}</calcite-button>${!t && s`<solution-social-share button-appearance=outline-fill class="padding-bottom-1" share-button-kind=neutral .shareButtonText=${this._translations.share} share-button-scale=l></solution-social-share>` || ""}</div>`;
   }
   _getMissingPrivilegesNotice(e, t, i) {
-    const o = "solutions-missing-privileges-notice", a = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges;
-    return s`<div><calcite-notice class="margin-inline-unset" kind=warning open><div slot=message>${`${a}`}</div><calcite-action icon=information id=${o} slot=actions-end .text=${a}></calcite-action></calcite-notice><calcite-popover closable .label=${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading} overlay-positioning=fixed placement=bottom reference-element=solutions-missing-privileges-notice ${d(this._privilegePopoverRef)}><div class="padding-1 display-flex flex-direction-column"><span class="padding-bottom-1">${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading}</span>${// Leading messages
+    const a = "solutions-missing-privileges-notice", o = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges;
+    return s`<div><calcite-notice class="margin-inline-unset" kind=warning open><div slot=message>${`${o}`}</div><calcite-action icon=information id=${a} slot=actions-end .text=${o}></calcite-action></calcite-notice><calcite-popover closable .label=${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading} overlay-positioning=fixed placement=bottom reference-element=solutions-missing-privileges-notice ${d(this._privilegePopoverRef)}><div class="padding-1 display-flex flex-direction-column"><span class="padding-bottom-1">${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading}</span>${// Leading messages
     this._getSpanMessages(e, "padding-bottom-1")}${// Bulleted messages
     this._getBulletedMessages(t)}${// Trailing messages
     this._getSpanMessages(i, "padding-top-1")}</div></calcite-popover></div>`;
@@ -96,60 +95,63 @@ class D extends x {
   }
   _getScreenshotsRow() {
     const e = this._isScreenshotsRowExpanded ? this._translations.showLess : this._translations.showMore, t = this._isScreenshotsRowExpanded ? "arrow-up" : "arrow-down", i = this._showScreenshotsShowMore ? "" : "display-none";
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._screenshotsAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.screenshots}</h3><calcite-panel><div class="display-flex flex-direction-column back-color-override-1"><div class="collapsible-div max-height-300" id=screenshots-subsection ${d(this._screenshotsElement)}>${this._getScreenshots()}</div><calcite-fab appearance=outline-fill class=${`align-self-center ${i}`} .icon=${t} kind=neutral @click=${() => {
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._screenshotsAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.screenshots}</div><calcite-panel><div class="display-flex flex-direction-column back-color-override-1"><div class="collapsible-div max-height-300" id=screenshots-subsection ${d(this._screenshotsElement)}>${this._getScreenshots()}</div><calcite-fab appearance=outline-fill class=${`align-self-center ${i}`} .icon=${t} kind=neutral @click=${() => {
       this._screenshotsElement.value?.classList.toggle("expanded"), this._isScreenshotsRowExpanded = this._screenshotsElement.value.classList.contains("expanded");
     }} .text=${e} text-enabled></calcite-fab></div></calcite-panel></calcite-accordion-item></calcite-accordion>`;
   }
   _getScreenshots() {
     const e = this._itemProperties?.preview || [];
-    return s`<calcite-card-group class="card-group" .label=${this._translations.screenshots}>${e.map((t) => this.card?.id ? s`<calcite-card class="cursor-pointer" .label=${t.alt} @click=${() => this._openScreenshotGallery(t)}><div class="card-image-wrap" slot=thumbnail><img alt=${t.alt ?? m} class="thumbnail card-image" slot=thumbnail src=${C(this.card.id || "", t.name, this._authContextConsumer.value) ?? m}><div class="hover-text">${this._translations.openInGallery}</div></div></calcite-card>` : "")}</calcite-card-group>`;
+    return s`<calcite-card-group class="card-group" .label=${this._translations.screenshots}>${e.map((t) => this.card?.id ? s`<calcite-card class="cursor-pointer" .label=${t.alt} @click=${() => this._openScreenshotGallery(t)}><div class="card-image-wrap" slot=thumbnail><img alt=${t.alt ?? m} class="thumbnail card-image" slot=thumbnail src=${P(this.card.id || "", t.name, this._authContextConsumer.value) ?? m}><div class="hover-text">${this._translations.openInGallery}</div></div></calcite-card>` : "")}</calcite-card-group>`;
   }
   _openScreenshotGallery(e) {
     const t = this._screenshotsDialogRef.value;
     t && (t.screenshot = e, t.open = !0);
   }
   _getOverviewRow() {
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._overviewAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.solutionOverview}</h3>${this._getDescriptionRow()}${this._getRequirementsRow()}${this._getInformationProductsRow()}</calcite-accordion-item></calcite-accordion>`;
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._overviewAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.solutionOverview}</div>${this._getDescriptionRow()}${this._getRequirementsRow()}${this._getInformationProductsRow()}</calcite-accordion-item></calcite-accordion>`;
   }
   _getDescriptionRow() {
-    return s`<div class="display-flex flex-direction-column"><p class="font-color-1 font-1rem margin-top-0 line-height-1-5" .innerHTML=${this.card?.description ?? ""}></p></div>`;
+    return s`<div class="display-flex flex-direction-column"><p class="font-color-1 font-1 margin-top-0 line-height-xxl" .innerHTML=${this.card?.description ?? ""}></p></div>`;
   }
   _getRequirementsRow() {
     const e = this._getRequirements();
-    return s`<div class="display-flex flex-direction-column font-1rem font-color-1"><p>${this.card?.title ? this._translations.requirementsSubText.replace("{{solutionTitle}}", this.card.title) : ""}</p>${e.map((t) => s`<ul class="display-flex flex-direction-row padding-top-1-2 font-1rem font-color-1"><li>${t}</li></ul>`)}</div>`;
+    return s`<div class="display-flex flex-direction-column font-1 font-color-1"><p>${this.card?.title ? this._translations.requirementsSubText.replace("{{solutionTitle}}", this.card.title) : ""}</p>${e.length > 0 && s`<ul class="padding-top-1-2 font-1 font-color-1">${e.map((t) => s`<li>${t}</li>`)}</ul>` || ""}</div>`;
   }
   _getRequirements() {
     return this._itemProperties?.requirements || [];
   }
   _getInformationProductsRow() {
-    return s`<div class="display-flex flex-direction-column padding-top-1-5 font-1rem line-height-1-5 font-color-1"><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>`;
+    return s`<div class="display-flex flex-direction-column padding-top-1-5 font-1 line-height-xxl font-color-1"><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><p class="display-flex flex-direction-row font-1rem font-color-1">${t.item}</p></calcite-table-cell><calcite-table-cell><p class="display-flex flex-direction-row font-1rem font-color-1">${t.description}</p></calcite-table-cell><calcite-table-cell><p class="display-flex flex-direction-row font-1rem font-color-1">${t.userType}</p></calcite-table-cell></calcite-table-row>`);
+    return (this._itemProperties?.infoProducts || []).map((t) => s`<calcite-table-row><calcite-table-cell><p class="display-flex flex-direction-row font-1 font-color-1">${t.item}</p></calcite-table-cell><calcite-table-cell><p class="display-flex flex-direction-row font-1 font-color-1">${t.description}</p></calcite-table-cell><calcite-table-cell><p class="display-flex flex-direction-row font-1 font-color-1">${t.userType}</p></calcite-table-cell></calcite-table-row>`);
   }
   _getReleaseNotesRow() {
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._releaseNotesAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.releaseNotes}</h3><div class="display-flex flex-direction-column"><calcite-table bordered caption>${this._getReleaseNotesTableHeaderRow()}${this._getReleaseNotesTableRows()}</calcite-table></div></calcite-accordion-item></calcite-accordion>`;
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._releaseNotesAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.releaseNotes}</div><div class="display-flex flex-direction-column"><calcite-table bordered caption>${this._getReleaseNotesTableHeaderRow()}${this._getReleaseNotesTableRows()}</calcite-table></div></calcite-accordion-item></calcite-accordion>`;
   }
   _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><p class="display-flex flex-direction-row font-1rem font-color-1">${t.version}</p></calcite-table-cell><calcite-table-cell alignment=start>${t.description.map((i) => s`<ul class="display-flex flex-direction-row font-1rem font-color-1"><li>${i.note}</li></ul>`)}</calcite-table-cell></calcite-table-row>`);
+    return (this._itemProperties?.releaseNotes || [])?.map((t) => {
+      const i = M(t.description);
+      return s`<calcite-table-row><calcite-table-cell><p class="release-notes-table-cell">${t.version}</p></calcite-table-cell><calcite-table-cell><p class="release-notes-table-cell" .innerHTML=${i ?? ""}></p></calcite-table-cell></calcite-table-row>`;
+    });
   }
-  _getRelatedArticlesRow(e) {
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._relatedArticlesAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.relatedArticles}</h3><div class="display-flex flex-direction-row">${e.map((t) => {
-      console.log(t), s`<solution-article-card></solution-article-card>`;
+  _getRelatedResourcesRow(e) {
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._relatedResourcesAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.relatedResources}</div><div class="display-flex flex-direction-row">${e.map((t) => {
+      console.log(t), s`<solution-resource-card></solution-resource-card>`;
     })}</div></calcite-accordion-item></calcite-accordion>`;
   }
-  _getRelatedArticles() {
+  _getRelatedResources() {
     return [];
   }
   _getYouMayAlsoLikeRow(e) {
-    const t = this._showYouMayAlsoLikeShowMore ? "" : "display-none", i = this._isYouMayAlsoLikeRowExpanded ? this._translations.showLess : this._translations.showMore, o = this._isYouMayAlsoLikeRowExpanded ? "arrow-up" : "arrow-down", a = this._isYouMayAlsoLikeRowExpanded ? "" : { height: `${this._youMayAlsoLikeBaseHeight}px` };
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._youMayAlsoLikeAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.youMayAlsoLike}</h3><div class="display-flex flex-direction-column"><div class="collapsible-div" id=you-may-also-like-subsection style=${$(a)} ${d(this._youMayAlsoLikeElement)}><div class="display-flex flex-direction-row"><calcite-card-group class="card-group" .label=${this._translations.youMayAlsoLike}>${e.map((l, r) => s`<solution-details-card .id=${`you-may-also-like-${r}`} .card=${l} class="padding-2px"></solution-details-card>`)}</calcite-card-group></div></div><calcite-fab appearance=outline-fill class=${`align-self-center ${t}`} .icon=${o} kind=inverse @click=${() => {
+    const t = this._showYouMayAlsoLikeShowMore ? "" : "display-none", i = this._isYouMayAlsoLikeRowExpanded ? this._translations.showLess : this._translations.showMore, a = this._isYouMayAlsoLikeRowExpanded ? "arrow-up" : "arrow-down", o = this._isYouMayAlsoLikeRowExpanded ? "" : { height: `${this._youMayAlsoLikeBaseHeight}px` };
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._youMayAlsoLikeAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.youMayAlsoLike}</div><div class="display-flex flex-direction-column"><div class="collapsible-div" id=you-may-also-like-subsection style=${$(o)} ${d(this._youMayAlsoLikeElement)}><div class="display-flex flex-direction-row"><calcite-card-group class="card-group" .label=${this._translations.youMayAlsoLike}>${e.map((l, r) => s`<solution-details-card .id=${`you-may-also-like-${r}`} .card=${l} class="padding-2px"></solution-details-card>`)}</calcite-card-group></div></div><calcite-fab appearance=outline-fill class=${`align-self-center ${t}`} .icon=${a} kind=inverse @click=${() => {
       this._youMayAlsoLikeElement.value?.classList.toggle("expanded"), this._isYouMayAlsoLikeRowExpanded = this._youMayAlsoLikeElement.value.classList.contains("expanded");
     }} .text=${i} text-enabled></calcite-fab></div></calcite-accordion-item></calcite-accordion>`;
   }
@@ -158,9 +160,7 @@ class D extends x {
     return this._allCards.filter((t) => e.indexOf(t.deployCommonId) > -1);
   }
   _getTermsOfUseRow() {
-    console.warn("TODO update string after release");
-    const e = "Copyright 2025 Esri", t = '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', i = "http://www.apache.org/licenses/LICENSE-2.0";
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._termsOfUseAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>Terms of Use</h3><div class="display-flex flex-direction-column"><p class="font-color-1 font-1rem margin-top-0 line-height-1-5" .innerHTML=${e}></p><p class="font-color-1 font-1rem margin-top-0 line-height-1-5" .innerHTML=${t}></p><calcite-link class="margin-top-0 line-height-1-5" .href=${i}>${i}</calcite-link><p class="font-color-1 font-1rem margin-top-1 line-height-1-5" .innerHTML=${'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.'}></p></div></calcite-accordion-item></calcite-accordion>`;
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._termsOfUseAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>Terms of Use</div><div class="display-flex flex-direction-column"><p class="font-color-1 font-1 margin-top-0 line-height-xxl" .innerHTML=${this._translations.copyrightHeading ?? ""}></p><p class="font-color-1 font-1 margin-top-0 line-height-xxl" .innerHTML=${this._translations.apacheLicense ?? ""}></p><calcite-link class="margin-top-0 line-height-xxl" .href=${this._translations.apacheLicenseUrl}>${this._translations.apacheLicenseUrl}</calcite-link><p class="font-color-1 font-1 margin-top-1 line-height-xxl" .innerHTML=${this._translations.asIsBasis ?? ""}></p></div></calcite-accordion-item></calcite-accordion>`;
   }
   _openDeploy() {
     if (this._authContextConsumer.value.IsSignedIn) {
@@ -176,27 +176,27 @@ class D extends x {
     this.card = e.detail, this._onResize(), this._missingPrivilegeMessages = void 0, await this._getItemData(), this._expandAccordions();
   }
   _expandAccordions() {
-    this._overviewAccordionItemElement.value && (this._overviewAccordionItemElement.value.expanded = !0), this._releaseNotesAccordionItemElement.value && (this._releaseNotesAccordionItemElement.value.expanded = !0), this._relatedArticlesAccordionItemElement.value && (this._relatedArticlesAccordionItemElement.value.expanded = !0), this._screenshotsAccordionItemElement.value && (this._screenshotsAccordionItemElement.value.expanded = !0), this._termsOfUseAccordionItemElement.value && (this._termsOfUseAccordionItemElement.value.expanded = !0), this._youMayAlsoLikeAccordionItemElement.value && (this._youMayAlsoLikeAccordionItemElement.value.expanded = !0);
+    this._overviewAccordionItemElement.value && (this._overviewAccordionItemElement.value.expanded = !0), this._releaseNotesAccordionItemElement.value && (this._releaseNotesAccordionItemElement.value.expanded = !0), this._relatedResourcesAccordionItemElement.value && (this._relatedResourcesAccordionItemElement.value.expanded = !0), this._screenshotsAccordionItemElement.value && (this._screenshotsAccordionItemElement.value.expanded = !0), this._termsOfUseAccordionItemElement.value && (this._termsOfUseAccordionItemElement.value.expanded = !0), this._youMayAlsoLikeAccordionItemElement.value && (this._youMayAlsoLikeAccordionItemElement.value.expanded = !0);
   }
   async _getItemData() {
-    const e = this._userSessionContextConsumer.value, t = await A(this.card.id, e), i = await L(this.card.id, e);
+    const e = this._userSessionContextConsumer.value, t = await L(this.card.id, e), i = await S(this.card.id, e);
     this._itemProperties = i.properties, this.itemPropertiesFetched.emit(this._itemProperties);
-    const o = S(t, this.card.typeKeywords, this._authContextConsumer.value);
-    this._privileges = e.username ? o : [], this._userPrivileges = this._authContextConsumer.value ? this._authContextConsumer.value.PortalUserPrivileges : [];
-    const a = this._privileges.filter((r) => !this._userPrivileges.includes(r));
-    this._missingPrivilegeMessages = I(this._translations, a), (t.params ? this.formatParams(t.params) : Promise.resolve([])).then((r) => {
+    const a = A(t, this.card.typeKeywords, this._authContextConsumer.value);
+    this._privileges = e.username ? a : [], this._userPrivileges = this._authContextConsumer.value ? this._authContextConsumer.value.PortalUserPrivileges : [];
+    const o = this._privileges.filter((r) => !this._userPrivileges.includes(r));
+    this._missingPrivilegeMessages = E(this._translations, o), (t.params ? this.formatParams(t.params) : Promise.resolve([])).then((r) => {
       this._userOptions = r;
     }), this._templates = t.templates, this.templatesFetched.emit(t.templates);
   }
   formatParams(e) {
-    const t = this._userSessionContextConsumer.value, i = [], o = e ? Object.keys(e) : [], a = {
+    const t = this._userSessionContextConsumer.value, i = [], a = e ? Object.keys(e) : [], o = {
       id: "",
       props: [],
       accordionDisplay: !1
     };
-    if (o.length > 0) {
+    if (a.length > 0) {
       const l = [];
-      return o.forEach((r) => {
+      return a.forEach((r) => {
         const h = e[r];
         h.valueType && h.valueType.toLowerCase() === "itemid" && l.push(this._findExistingItem(r, "Feature Service", t.username || ""));
       }), Promise.all(l).then((r) => {
@@ -209,32 +209,32 @@ class D extends x {
               response: n.results[0]
             };
           }
-        }), o.forEach((n) => {
+        }), a.forEach((n) => {
           if (n === "serviceLearnMore") {
             this._configureLearnMore = e[n], alert(this._configureLearnMore), delete e[n];
             return;
           }
-          e[n].enterpriseIDMapping && (this._customDeploymentMappings[n] = e[n].enterpriseIDMapping), a.id = n, h[n] && (e[n].existingItemId = h[n].resultId, this.updateUserProp(e[n], h[n].response)), this.updateOption(e[n], a, n);
-        }), i.push(a), Promise.resolve(i);
+          e[n].enterpriseIDMapping && (this._customDeploymentMappings[n] = e[n].enterpriseIDMapping), o.id = n, h[n] && (e[n].existingItemId = h[n].resultId, this.updateUserProp(e[n], h[n].response)), this.updateOption(e[n], o, n);
+        }), i.push(o), Promise.resolve(i);
       }).catch(() => Promise.resolve([]));
     } else
       return Promise.resolve([]);
   }
   _findExistingItem(e, t, i) {
-    const o = this._userSessionContextConsumer.value;
-    return E(`typekeywords:source-${e} type:${t} owner:${i}`, o);
+    const a = this._userSessionContextConsumer.value;
+    return C(`typekeywords:source-${e} type:${t} owner:${i}`, a);
   }
   updateUserProp(e, t) {
-    const i = e.itemType?.toLowerCase() === "feature service", o = new RegExp(i ? this._regexFsUrl : e.itemType, "iu"), a = _(t, i ? "url" : "type", "") || "", l = a !== "" && o.test(a);
-    return e.responseValue = l ? a : "", e.name = l && g(t, "name") || "", e.title = l && g(t, "title") || "", e.itemType = l ? g(t, "type") : e.itemType, e.validId = l, e.itemUrl = P(t.id, this._authContextConsumer.value), l;
+    const i = e.itemType?.toLowerCase() === "feature service", a = new RegExp(i ? this._regexFsUrl : e.itemType, "iu"), o = _(t, i ? "url" : "type", "") || "", l = o !== "" && a.test(o);
+    return e.responseValue = l ? o : "", e.name = l && g(t, "name") || "", e.title = l && g(t, "title") || "", e.itemType = l ? g(t, "type") : e.itemType, e.validId = l, e.itemUrl = T(t.id, this._authContextConsumer.value), l;
   }
   updateOption(e, t, i) {
-    const o = e.default || "", a = typeof o, l = o.toString();
+    const a = e.default || "", o = typeof a, l = a.toString();
     this._setFeatureServiceProps(e);
     const r = this.getValidation(e, l);
     t.props.push({
       id: i,
-      outType: a,
+      outType: o,
       prop: i,
       itemType: e.itemType || "",
       responseValue: e.responseValue || "",
@@ -256,15 +256,15 @@ class D extends x {
     });
   }
   _setFeatureServiceProps(e) {
-    e.valueType && e.valueType.toLowerCase() === "itemid" && M(e, "attributes.required", "true");
+    e.valueType && e.valueType.toLowerCase() === "itemid" && I(e, "attributes.required", "true");
   }
   getValidation(e, t) {
-    let i = "", o = g(e, "validation.message") || "", a = !0;
-    return g(e, "attributes.required") === "true" && (i = _(e, "validation.expression", "\\S{1,}"), a = new RegExp(i).test(t)), e.valueType && e.valueType.toLowerCase() === "itemid" && (i = this._regexID, o = this._translations.configure.invalidID), {
-      valid: a,
+    let i = "", a = g(e, "validation.message") || "", o = !0;
+    return g(e, "attributes.required") === "true" && (i = _(e, "validation.expression", "\\S{1,}"), o = new RegExp(i).test(t)), e.valueType && e.valueType.toLowerCase() === "itemid" && (i = this._regexID, a = this._translations.configure.invalidID), {
+      valid: o,
       validation: {
         expression: i,
-        message: o
+        message: a
       }
     };
   }
@@ -291,7 +291,7 @@ class D extends x {
     e.detail === "details" && this.sortTypeChanged.emit("");
   }
 }
-w("solution-details-panel", D);
+b("solution-details-panel", O);
 export {
-  D as SolutionDetailsPanel
+  O as SolutionDetailsPanel
 };

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

@@ -18,7 +18,7 @@ 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-resource-card/index.js";
 import "../solution-details-card/index.js";
 import "@esri/calcite-components/components/calcite-link";
 export * from "./customElement.js";