@esri/solutions-components 1.2.0-next.56 → 1.2.0-next.58

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

@@ -1,21 +1,21 @@
-import { c as b } from "../../chunks/runtime.js";
-import { css as x, html as a } from "lit";
-import { u as y } from "../../chunks/useT9n.js";
-import { createRef as c, ref as d } from "lit-html/directives/ref.js";
-import { LitElement as w, createEvent as m, safeClassMap as p, nothing as _, safeStyleMap as $ } from "@arcgis/lumina";
-import { useContextConsumer as M } from "@arcgis/lumina/context";
-import { c as k } from "../../chunks/deployAppContexts.js";
-import { sanitizeHTML as g, getItemDataAsJson as R, getItem as L, getPropWithDefault as v, getProp as u, setCreateProp as I } from "@esri/solution-common";
-import { T as P, F as A, G as S } from "../../chunks/interfaces.js";
-import { _findExistingItem as E } from "@esri/solution-deployer";
-import { g as C, 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.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent, safeClassMap, nothing, safeStyleMap } from "@arcgis/lumina";
+import { useContextConsumer } from "@arcgis/lumina/context";
+import { c as configContext } from "../../chunks/deployAppContexts.js";
+import { sanitizeHTML, getItemDataAsJson, getItem, getPropWithDefault, getProp, setCreateProp } from "@esri/solution-common";
+import { T as TELEMETRY_CATEGORY, F as getRequiredSolutionPrivileges, G as getPrivilegeMessages } from "../../chunks/interfaces.js";
+import { _findExistingItem } from "@esri/solution-deployer";
+import { g as getItemResourceUrl, a as getItemUrl } from "../../chunks/common.js";
 import "../solution-deploy-dialog/customElement.js";
 import "../solution-snapshot-gallery/customElement.js";
 import "../solution-deploying-dialog/customElement.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.56 */
-const D = x`/** @license
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -29,279 +29,877 @@ const D = x`/** @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}solution-details-card[id*=you-may-also-like]{width:240px}.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-top-md{padding-top:var(--calcite-spacing-md)}.padding-top-sm{padding-top:var(--calcite-spacing-sm)}.padding-top-xs{padding-top:.25rem}.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-1-75{padding-inline-end:1.75rem}.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-top-875{margin-top:.875rem}.margin-top-1-5{margin-top:var(--calcite-spacing-xxl)}.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;--calcite-card-border-color: transparent}@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;display:block}.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)}.line-height-1{line-height:1.1}.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)}.table-cell{font-size:var(--calcite-spacing-lg);color:var(--calcite-color-text-1)}calcite-table-header{font-weight:var(--calcite-font-weight-medium);--calcite-internal-table-cell-font-size: var(--calcite-font-size-md)}.position-relative{position:relative}.background-color-2{background-color:var(--calcite-color-foreground-2)}.panel-background-2{--calcite-panel-background-color: var(--calcite-color-foreground-2);background-color:var(--calcite-color-foreground-2)}.border-none{border:none}.padding-end-xxl{padding-inline-end:var(--calcite-spacing-xxl)}calcite-shell{block-size:unset}`;
-class O extends w {
+ */
+
+.display-flex {
+  display: flex;
+}
+
+.flex-direction-row {
+  flex-direction: row;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+solution-details-card[id*="you-may-also-like"] {
+  width: 240px;
+}
+
+.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-top-md {
+  padding-top: var(--calcite-spacing-md);
+}
+
+.padding-top-sm {
+  padding-top: var(--calcite-spacing-sm);
+}
+
+.padding-top-xs {
+  padding-top: 0.25rem;
+}
+
+.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-1-75 {
+  padding-inline-end: 1.75rem;
+}
+
+.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-top-875 {
+  margin-top: 0.875rem;
+}
+
+.margin-top-1-5 {
+  margin-top: var(--calcite-spacing-xxl);
+}
+
+.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: 0.5;
+  }
+}
+
+.width-full {
+  width: 100%;
+}
+
+.card-group {
+  overflow: hidden;
+}
+
+calcite-card {
+  width: 450px;
+  --calcite-card-border-color: transparent;
+}
+
+@media (max-width: 1496px) {
+  calcite-card {
+    width: calc(100% / 3 - .5rem);
+  }
+}
+
+@media (max-width: 1100px) {
+  calcite-card {
+    width: calc(100% / 2 - .5rem);
+  }
+}
+
+@media (max-width: 550px) {
+  calcite-card {
+    width: 100%;
+  }
+}
+
+/* This is tied to a supporting prop _screenshotsBaseHeight */
+.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: #ffffff;
+}
+
+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;
+  display: block;
+}
+
+.margin-inline-unset {
+  margin-inline: unset;
+}
+
+.collapsible-div {
+  overflow: hidden;
+  transition: max-height 0.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);
+}
+
+.line-height-1 {
+  line-height: 1.1;
+}
+
+.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);
+}
+
+.table-cell {
+  font-size: var(--calcite-spacing-lg);
+  color: var(--calcite-color-text-1);
+}
+
+calcite-table-header {
+  font-weight: var(--calcite-font-weight-medium);
+  --calcite-internal-table-cell-font-size: var(--calcite-font-size-md);
+}
+
+.position-relative {
+  position: relative;
+}
+
+.background-color-2 {
+  background-color: var(--calcite-color-foreground-2);
+}
+
+.panel-background-2 {
+  --calcite-panel-background-color: var(--calcite-color-foreground-2);
+  background-color: var(--calcite-color-foreground-2);
+}
+
+.border-none {
+  border: none;
+}
+
+.padding-end-xxl {
+  padding-inline-end: var(--calcite-spacing-xxl);
+}
+
+calcite-shell {
+  block-size: unset;
+}
+`;
+class SolutionDetailsPanel extends LitElement {
   constructor() {
-    super(), this._showScreenshotsShowMore = !1, this._showYouMayAlsoLikeShowMore = !1, this._isScreenshotsRowExpanded = !1, this._isYouMayAlsoLikeRowExpanded = !1, this._screenshotsRowBaseHeight = 340, this._templates = [], this._translations = y({ name: "solution-details-panel", blocking: !0 }), this._youMayAlsoLikeBaseHeight = 340, this._allCards = [], this._configContextConsumer = M({
-      context: k,
-      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._relatedResourcesAccordionItemElement = c(), this._screenshotsAccordionItemElement = c(), this._screenshotsDialogRef = c(), this._screenshotsElement = c(), this._termsOfUseAccordionItemElement = c(), this._userOptions = [], this._youMayAlsoLikeAccordionItemElement = c(), this._youMayAlsoLikeElement = c(), this._signInParamValue = null, this.templatesFetched = m(), this.itemPropertiesFetched = m(), this.sortTypeChanged = m(), this.tokenRefreshed = m(), this.listenOn(window, "detailsCardSelected", this._detailsCardSelected), this.listenOn(window, "allCardsFetched", this._allCardsFetched), this.listenOn(window, "deployAppTabSelected", this._handleDeployAppTabSelected);
+    super();
+    this._showScreenshotsShowMore = false;
+    this._showYouMayAlsoLikeShowMore = false;
+    this._isScreenshotsRowExpanded = false;
+    this._isYouMayAlsoLikeRowExpanded = false;
+    this._screenshotsRowBaseHeight = 340;
+    this._templates = [];
+    this._translations = useT9n({ name: "solution-details-panel", blocking: true });
+    this._youMayAlsoLikeBaseHeight = 340;
+    this._allCards = [];
+    this._configContextConsumer = useContextConsumer({
+      context: configContext,
+      subscribe: true
+    });
+    this._configureLearnMore = "";
+    this._customDeploymentMappings = {};
+    this._deployDialogRef = createRef();
+    this._deployingDialogRef = createRef();
+    this._overviewAccordionItemElement = createRef();
+    this._privilegePopoverRef = createRef();
+    this._privileges = [];
+    this._regexFsUrl = "https?:\\/\\/.+FeatureServer\\b";
+    this._regexID = "\\b[0-9A-F]{32}\\b";
+    this._releaseNotesAccordionItemElement = createRef();
+    this._relatedResourcesAccordionItemElement = createRef();
+    this._screenshotsAccordionItemElement = createRef();
+    this._screenshotsDialogRef = createRef();
+    this._screenshotsElement = createRef();
+    this._termsOfUseAccordionItemElement = createRef();
+    this._userOptions = [];
+    this._youMayAlsoLikeAccordionItemElement = createRef();
+    this._youMayAlsoLikeElement = createRef();
+    this._signInParamValue = null;
+    this.templatesFetched = createEvent();
+    this.itemPropertiesFetched = createEvent();
+    this.sortTypeChanged = createEvent();
+    this.tokenRefreshed = createEvent();
+    this.listenOn(window, "detailsCardSelected", this._detailsCardSelected);
+    this.listenOn(window, "allCardsFetched", this._allCardsFetched);
+    this.listenOn(window, "deployAppTabSelected", this._handleDeployAppTabSelected);
   }
   static {
-    this.properties = { card: 0, _showScreenshotsShowMore: 16, _showYouMayAlsoLikeShowMore: 16, _isScreenshotsRowExpanded: 16, _isYouMayAlsoLikeRowExpanded: 16, _itemProperties: 16, _missingPrivilegeMessages: 16, _screenshotsRowBaseHeight: 16, _templates: 16, _translations: 16, _youMayAlsoLikeBaseHeight: 16 };
+    this.properties = { card: [0, {}, { attribute: false }], _showScreenshotsShowMore: [16, {}, { state: true }], _showYouMayAlsoLikeShowMore: [16, {}, { state: true }], _isScreenshotsRowExpanded: [16, {}, { state: true }], _isYouMayAlsoLikeRowExpanded: [16, {}, { state: true }], _itemProperties: [16, {}, { state: true }], _missingPrivilegeMessages: [16, {}, { state: true }], _screenshotsRowBaseHeight: [16, {}, { state: true }], _templates: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _youMayAlsoLikeBaseHeight: [16, {}, { state: true }] };
   }
   static {
-    this.styles = D;
+    this.styles = styles;
   }
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
   }
   async connectedCallback() {
-    super.connectedCallback(), this.listenOn(window, "calciteTabChange", this._cleanupPanel), this.listenOn(window, "detailsCardSelected", this._cleanupPanel);
+    super.connectedCallback();
+    this.listenOn(window, "calciteTabChange", this._cleanupPanel);
+    this.listenOn(window, "detailsCardSelected", this._cleanupPanel);
   }
   loaded() {
-    this._signInParamValue === null && this._configContextConsumer.value?.authentication?.SignInParam && (this._signInParamValue = this._configContextConsumer.value.authentication.SignInParam), this._resizeObserver = new ResizeObserver(async () => {
+    if (this._signInParamValue === null && this._configContextConsumer.value?.authentication?.SignInParam) {
+      this._signInParamValue = this._configContextConsumer.value.authentication.SignInParam;
+    }
+    this._resizeObserver = new ResizeObserver(async () => {
       this._onResize();
-    }), this._screenshotsElement.value && this._resizeObserver.observe(this._screenshotsElement.value);
+    });
+    if (this._screenshotsElement.value) {
+      this._resizeObserver.observe(this._screenshotsElement.value);
+    }
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._resizeObserver?.disconnect();
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
   }
   render() {
-    const e = "padding-bottom-1-5", t = this._getRelatedResources(), i = this._getYouMayAlsoLikeCards();
-    return a`<calcite-shell class="position-relative background-color-2"><calcite-panel class="panel-background-2 border-none" slot=panel-bottom><div class="margin-top-875 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 ? a`<div class=${p(e)}>${this._getRelatedResourcesRow(t)}</div>` : ""}${i.length > 0 ? a`<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></calcite-shell>`;
+    const rowClass = "padding-bottom-1-5";
+    const relatedResources = this._getRelatedResources();
+    const youMayAlsoLikeCards = this._getYouMayAlsoLikeCards();
+    return html`<calcite-shell class="position-relative background-color-2"><calcite-panel class="panel-background-2 border-none" slot=panel-bottom><div class="margin-top-875 padding-1-5 back-color-override-1 margin-bottom-1-5" id=solution-details-row>${this._getSolutionRow()}</div><div class=${safeClassMap(rowClass)}>${this._getScreenshotsRow()}</div><div class=${safeClassMap(rowClass)}>${this._getOverviewRow()}</div><div class=${safeClassMap(rowClass)}>${this._getReleaseNotesRow()}</div>${relatedResources.length > 0 ? html`<div class=${safeClassMap(rowClass)}>${this._getRelatedResourcesRow(relatedResources)}</div>` : ""}${youMayAlsoLikeCards.length > 0 ? html`<div class=${safeClassMap(rowClass)}>${this._getYouMayAlsoLikeRow(youMayAlsoLikeCards)}</div>` : ""}<div class=${safeClassMap(rowClass)}>${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} ${ref(this._deployDialogRef)}></solution-deploy-dialog><solution-snapshot-gallery .card=${this.card} id=solutionSnapshotGallery .itemProperties=${this._itemProperties} ${ref(this._screenshotsDialogRef)}></solution-snapshot-gallery><solution-deploying-dialog .card=${this.card} ${ref(this._deployingDialogRef)}></solution-deploying-dialog></calcite-panel></calcite-shell>`;
   }
   updated() {
     setTimeout(() => {
-      const e = this._getYouMayAlsoLikeCards();
-      let t = 340;
-      for (let i = 0; i < e.length; i++) {
-        const s = this.el.shadowRoot?.getElementById(`you-may-also-like-${i}`), o = s?.offsetHeight ? s.offsetHeight + 40 : 0;
-        o > t && (t = o);
+      const youMayAlsoLikeCards = this._getYouMayAlsoLikeCards();
+      let height = 340;
+      for (let i = 0; i < youMayAlsoLikeCards.length; i++) {
+        const cNode = this.el.shadowRoot?.getElementById(`you-may-also-like-${i}`);
+        const cNodeHeight = cNode?.offsetHeight ? cNode.offsetHeight + 40 : 0;
+        if (cNodeHeight > height) {
+          height = cNodeHeight;
+        }
       }
-      this._youMayAlsoLikeBaseHeight = t, this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight;
+      this._youMayAlsoLikeBaseHeight = height;
+      this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight;
     }, 100);
   }
   _checkUrlParametersForAutoDeployment() {
-    if (this._signInParamValue === "deploy") {
-      const t = this._missingPrivilegeMessages && (this._missingPrivilegeMessages.leadingMessages.length > 0 || this._missingPrivilegeMessages.bulletedMessages.length > 0 || this._missingPrivilegeMessages.trailingMessages.length > 0);
-      this._configContextConsumer.value?.authentication?.IsSignedIn && this.card && this._deployDialogRef.value && !t && (this._signInParamValue = null, this._openDeploy());
+    const signInParam = this._signInParamValue;
+    if (signInParam === "deploy") {
+      const hasMissingPrivileges = this._missingPrivilegeMessages && (this._missingPrivilegeMessages.leadingMessages.length > 0 || this._missingPrivilegeMessages.bulletedMessages.length > 0 || this._missingPrivilegeMessages.trailingMessages.length > 0);
+      if (this._configContextConsumer.value?.authentication?.IsSignedIn && this.card && this._deployDialogRef.value && !hasMissingPrivileges) {
+        this._signInParamValue = null;
+        this._openDeploy();
+      }
     }
   }
   _getSolutionRow() {
-    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400"), t = this._missingPrivilegeMessages?.leadingMessages || [], i = t.length > 0, s = this._missingPrivilegeMessages?.bulletedMessages || [], o = s.length > 0, n = this._missingPrivilegeMessages?.trailingMessages || [], r = n.length > 0;
-    return a`<div class="display-flex flex-direction-row"><div class="padding-end-1-75 image-width"><img alt=${this.card?.title ?? _} src=${e ?? _}></div><div class="display-flex flex-direction-row">${this._getTextSection(i, o, r, t, s, n)}${this._getButtons(i || o || r, this._configContextConsumer.value?.authentication?.IsEnterprisePortal)}</div></div>`;
-  }
-  _getTextSection(e, t, i, s, o, n) {
-    return a`<div class="display-flex flex-direction-column padding-end-1"><div class="display-flex flex-direction-row align-items-baseline"><h1 class="padding-top-xs title-font margin-top-0 margin-bottom-1-5 line-height-1">${this.card?.title}</h1>${this.card?.categories?.some((r) => r.includes("New Release")) && a`<calcite-chip class="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 ? a`<div class="display-flex flex-direction-row padding-top-1">${this._getMissingPrivilegesNotice(s, o, n)}</div>` : ""}</div>`;
-  }
-  _getButtons(e, t) {
-    const i = this._itemProperties?.demoURL || "", s = i ? "" : "display-none";
-    return a`<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 ${s}`} @click=${() => this._openUrl(i)} scale=l>${this._translations.watchDemo}</calcite-button><calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1" @click=${() => this._handleLearnMoreClick()} scale=l>${this._translations.learnMore}</calcite-button>${!t && a`<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 s = "solutions-missing-privileges-notice", o = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges;
-    return a`<div><calcite-notice class="margin-inline-unset" kind=warning open><div slot=message>${`${o}`}</div><calcite-action appearance=solid icon=information id=${s} 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>`;
-  }
-  _getSpanMessages(e, t) {
-    return e.length > 0 ? e.map((i) => a`<span class=${p(t)}>${i}</span>`) : "";
-  }
-  _getBulletedMessages(e) {
-    return e.length > 0 ? a`<ul>${e.map((t) => a`<li>${t}</li>`)}</ul>` : "";
+    const thumbnailUrl = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400");
+    const leadingMessages = this._missingPrivilegeMessages?.leadingMessages || [];
+    const hasLeading = leadingMessages.length > 0;
+    const bulletedMessages = this._missingPrivilegeMessages?.bulletedMessages || [];
+    const hasBulleted = bulletedMessages.length > 0;
+    const trailingMessages = this._missingPrivilegeMessages?.trailingMessages || [];
+    const hasTrailing = trailingMessages.length > 0;
+    return html`<div class="display-flex flex-direction-row"><div class="padding-end-1-75 image-width"><img alt=${this.card?.title ?? nothing} src=${thumbnailUrl ?? nothing}></div><div class="display-flex flex-direction-row">${this._getTextSection(hasLeading, hasBulleted, hasTrailing, leadingMessages, bulletedMessages, trailingMessages)}${this._getButtons(hasLeading || hasBulleted || hasTrailing, this._configContextConsumer.value?.authentication?.IsEnterprisePortal)}</div></div>`;
+  }
+  _getTextSection(hasLeading, hasBulleted, hasTrailing, leadingMessages, bulletedMessages, trailingMessages) {
+    return html`<div class="display-flex flex-direction-column padding-end-1"><div class="display-flex flex-direction-row align-items-baseline"><h1 class="padding-top-xs title-font margin-top-0 margin-bottom-1-5 line-height-1">${this.card?.title}</h1>${this.card?.categories?.some((c) => c.includes("New Release")) && html`<calcite-chip class="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>${hasLeading || hasBulleted || hasTrailing ? html`<div class="display-flex flex-direction-row padding-top-1">${this._getMissingPrivilegesNotice(leadingMessages, bulletedMessages, trailingMessages)}</div>` : ""}</div>`;
+  }
+  _getButtons(disabled, isEnterprisePortal) {
+    const demoUrl = this._itemProperties?.demoURL || "";
+    const demoClass = demoUrl ? "" : "display-none";
+    return html`<div class="display-flex flex-direction-column button-width"><calcite-button class="padding-bottom-1" .disabled=${disabled} 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 ${demoClass}`} @click=${() => this._handleWatchDemoClick(demoUrl)} scale=l>${this._translations.watchDemo}</calcite-button><calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1" @click=${() => this._handleLearnMoreClick()} scale=l>${this._translations.learnMore}</calcite-button>${!isEnterprisePortal && html`<solution-social-share button-appearance=outline-fill class="padding-bottom-1" share-button-kind=neutral .shareButtonText=${this._translations.share} share-button-scale=l .solutionId=${this.card?.id || ""} .solutionTitle=${this.card?.title || ""} .solutionVersion=${this.card?.deployVersion || ""}></solution-social-share>` || ""}</div>`;
+  }
+  _getMissingPrivilegesNotice(leadingMessages, bulletedMessages, trailingMessages) {
+    const referenceElement = "solutions-missing-privileges-notice";
+    const heading = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges;
+    return html`<div><calcite-notice class="margin-inline-unset" kind=warning open><div slot=message>${`${heading}`}</div><calcite-action appearance=solid icon=information id=${referenceElement} slot=actions-end .text=${heading}></calcite-action></calcite-notice><calcite-popover closable .label=${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading} overlay-positioning=fixed placement=bottom reference-element=solutions-missing-privileges-notice ${ref(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(leadingMessages, "padding-bottom-1")}${// Bulleted messages
+    this._getBulletedMessages(bulletedMessages)}${// Trailing messages
+    this._getSpanMessages(trailingMessages, "padding-top-1")}</div></calcite-popover></div>`;
+  }
+  _getSpanMessages(messages, css2) {
+    return messages.length > 0 ? messages.map((message) => {
+      return html`<span class=${safeClassMap(css2)}>${message}</span>`;
+    }) : "";
+  }
+  _getBulletedMessages(messages) {
+    return messages.length > 0 ? html`<ul>${messages.map((p) => {
+      return html`<li>${p}</li>`;
+    })}</ul>` : "";
   }
   _getScreenshotsRow() {
-    const e = this._isScreenshotsRowExpanded ? this._translations.showLess : this._translations.showMore, t = this._isScreenshotsRowExpanded ? "arrow-up" : "arrow-down", i = this._showScreenshotsShowMore ? "" : "display-none";
-    return a`<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>`;
+    const showText = this._isScreenshotsRowExpanded ? this._translations.showLess : this._translations.showMore;
+    const fabIcon = this._isScreenshotsRowExpanded ? "arrow-up" : "arrow-down";
+    const showMoreClass = this._showScreenshotsShowMore ? "" : "display-none";
+    return html`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${ref(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 ${ref(this._screenshotsElement)}>${this._getScreenshots()}</div><calcite-fab appearance=outline-fill class=${`align-self-center ${showMoreClass}`} .icon=${fabIcon} kind=neutral @click=${() => {
+      this._screenshotsElement.value?.classList.toggle("expanded");
+      this._isScreenshotsRowExpanded = this._screenshotsElement.value.classList.contains("expanded");
+    }} .text=${showText} text-enabled></calcite-fab></div></calcite-panel></calcite-accordion-item></calcite-accordion>`;
   }
   _getScreenshots() {
-    const e = this._itemProperties?.preview.filter((t) => t.format === "image") || [];
-    return a`<calcite-card-group class="card-group" .label=${this._translations.screenshots}>${e.reduce((t, i) => (this.card?.id ? t.push(a`<calcite-card class="cursor-pointer" .label=${i.alt} @click=${() => this._openScreenshotGallery(i)}><div class="card-image-wrap" slot=thumbnail><img alt=${i.alt ?? _} class="thumbnail card-image" slot=thumbnail src=${C(this.card.id || "", i.name, this._configContextConsumer.value.authentication) ?? _}><div class="hover-text">${this._translations.openInGallery}</div></div></calcite-card>`) : t.push(""), t), [])}</calcite-card-group>`;
+    const screenshots = this._itemProperties?.preview.filter((ss) => ss.format === "image") || [];
+    return html`<calcite-card-group class="card-group" .label=${this._translations.screenshots}>${screenshots.reduce((prev, cur) => {
+      this.card?.id ? prev.push(html`<calcite-card class="cursor-pointer" .label=${cur.alt} @click=${() => this._openScreenshotGallery(cur)}><div class="card-image-wrap" slot=thumbnail><img alt=${cur.alt ?? nothing} class="thumbnail card-image" slot=thumbnail src=${getItemResourceUrl(this.card.id || "", cur.name, this._configContextConsumer.value.authentication) ?? nothing}><div class="hover-text">${this._translations.openInGallery}</div></div></calcite-card>`) : prev.push("");
+      return prev;
+    }, [])}</calcite-card-group>`;
   }
-  _openScreenshotGallery(e) {
-    const t = this._screenshotsDialogRef.value;
-    t && (t.screenshot = e, t.open = !0);
+  _openScreenshotGallery(screenshot) {
+    this._telemetry?.logEvent({
+      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,
+      action: "Screenshot Gallery",
+      dimensions: [
+        this.card?.title || "",
+        this.card?.id || "",
+        this.card?.deployVersion || ""
+      ]
+    });
+    const dialog = this._screenshotsDialogRef.value;
+    if (dialog) {
+      dialog.screenshot = screenshot;
+      dialog.open = true;
+    }
   }
   _getOverviewRow() {
-    return a`<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._getInformationProductsRow()}</calcite-accordion-item></calcite-accordion>`;
+    return html`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${ref(this._overviewAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.solutionOverview}</div>${this._getDescriptionRow()}${this._getInformationProductsRow()}</calcite-accordion-item></calcite-accordion>`;
   }
   _getDescriptionRow() {
-    return a`<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>`;
+    return html`<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>`;
   }
   _getInformationProductsRow() {
-    return a`<div class="display-flex flex-direction-column padding-top-md 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>`;
+    return html`<div class="display-flex flex-direction-column padding-top-md 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 a`<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 html`<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) => a`<calcite-table-row><calcite-table-cell><p class="table-cell" .innerHTML=${g(t.item) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${g(t.description) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${g(t.userType) ?? ""}></p></calcite-table-cell></calcite-table-row>`);
+    const infoProducts = this._itemProperties?.infoProducts || [];
+    return infoProducts.map((i) => {
+      return html`<calcite-table-row><calcite-table-cell><p class="table-cell" .innerHTML=${sanitizeHTML(i.item) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${sanitizeHTML(i.description) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${sanitizeHTML(i.userType) ?? ""}></p></calcite-table-cell></calcite-table-row>`;
+    });
   }
   _getReleaseNotesRow() {
-    return a`<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>`;
+    return html`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${ref(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 a`<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 html`<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) => a`<calcite-table-row><calcite-table-cell><p class="table-cell" .innerHTML=${g(t.version) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${g(t.description) ?? ""}></p></calcite-table-cell></calcite-table-row>`);
+    const releaseNotes = this._itemProperties?.releaseNotes || [];
+    return releaseNotes?.map((n) => {
+      return html`<calcite-table-row><calcite-table-cell><p class="table-cell" .innerHTML=${sanitizeHTML(n.version) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${sanitizeHTML(n.description) ?? ""}></p></calcite-table-cell></calcite-table-row>`;
+    });
   }
-  _getRelatedResourcesRow(e) {
-    return a`<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), a`<solution-resource-card></solution-resource-card>`;
+  _getRelatedResourcesRow(relatedResources) {
+    return html`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${ref(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">${relatedResources.map((r) => {
+      console.log(r);
+      html`<solution-resource-card></solution-resource-card>`;
     })}</div></calcite-accordion-item></calcite-accordion>`;
   }
   _getRelatedResources() {
     return [];
   }
-  _getYouMayAlsoLikeRow(e) {
-    const t = this._showYouMayAlsoLikeShowMore ? "" : "display-none", i = this._isYouMayAlsoLikeRowExpanded ? this._translations.showLess : this._translations.showMore, s = this._isYouMayAlsoLikeRowExpanded ? "arrow-up" : "arrow-down", o = this._isYouMayAlsoLikeRowExpanded ? "" : { height: `${this._youMayAlsoLikeBaseHeight}px` };
-    return a`<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((n, r) => a`<solution-details-card .id=${`you-may-also-like-${r}`} .card=${n} class="padding-2px"></solution-details-card>`)}</calcite-card-group></div></div><calcite-fab appearance=outline-fill class=${`align-self-center ${t}`} .icon=${s} 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>`;
+  _getYouMayAlsoLikeRow(cards) {
+    const showMoreFabClass = this._showYouMayAlsoLikeShowMore ? "" : "display-none";
+    const showText = this._isYouMayAlsoLikeRowExpanded ? this._translations.showLess : this._translations.showMore;
+    const fabIcon = this._isYouMayAlsoLikeRowExpanded ? "arrow-up" : "arrow-down";
+    const height = this._isYouMayAlsoLikeRowExpanded ? "" : { "height": `${this._youMayAlsoLikeBaseHeight}px` };
+    return html`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${ref(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=${safeStyleMap(height)} ${ref(this._youMayAlsoLikeElement)}><div class="display-flex flex-direction-row"><calcite-card-group class="card-group" .label=${this._translations.youMayAlsoLike}>${cards.map((card, i) => {
+      return html`<solution-details-card .id=${`you-may-also-like-${i}`} .card=${card} class="padding-2px" source=you-may-also-like .referrerSolutionId=${this.card?.id || ""} .referrerSolutionTitle=${this.card?.title || ""} .referrerSolutionVersion=${this.card?.deployVersion || ""}></solution-details-card>`;
+    })}</calcite-card-group></div></div><calcite-fab appearance=outline-fill class=${`align-self-center ${showMoreFabClass}`} .icon=${fabIcon} kind=inverse @click=${() => {
+      this._youMayAlsoLikeElement.value?.classList.toggle("expanded");
+      this._isYouMayAlsoLikeRowExpanded = this._youMayAlsoLikeElement.value.classList.contains("expanded");
+    }} .text=${showText} text-enabled></calcite-fab></div></calcite-accordion-item></calcite-accordion>`;
   }
   _getYouMayAlsoLikeCards() {
-    const e = this._itemProperties?.relatedSolutions || [];
-    return this._allCards.filter((t) => e.indexOf(t.deployCommonId) > -1);
+    const relatedSolutions = this._itemProperties?.relatedSolutions || [];
+    return this._allCards.filter((c) => relatedSolutions.indexOf(c.deployCommonId) > -1);
   }
   _getTermsOfUseRow() {
-    return a`<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>`;
+    return html`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${ref(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._configContextConsumer.value.authentication.IsSignedIn) {
-      const e = this._deployDialogRef.value;
-      e && (e.userOptions = this._userOptions, e.open = !0);
-    } else
+      const dialog = this._deployDialogRef.value;
+      if (dialog) {
+        dialog.userOptions = this._userOptions;
+        dialog.open = true;
+      }
+    } else {
       this._configContextConsumer.value.authentication.signIn("deploy");
+    }
   }
-  _openUrl(e) {
-    window.open(e, "_blank");
+  _openUrl(url) {
+    window.open(url, "_blank");
+  }
+  _handleWatchDemoClick(url) {
+    this._telemetry?.logEvent({
+      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,
+      action: "Watch Demo",
+      dimensions: [
+        this.card?.title || "",
+        this.card?.id || "",
+        this.card?.deployVersion || ""
+      ]
+    });
+    this._openUrl(url);
   }
   _handleLearnMoreClick() {
     this._telemetry?.logEvent({
-      category: P.SOLUTION_DETAILS,
+      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,
       action: "Learn More",
       dimensions: [
         this.card?.title || "",
         this.card?.id || "",
         this.card?.deployVersion || ""
       ]
-    }), this._openUrl(this.card?.learnMoreUrl || "");
+    });
+    this._openUrl(this.card?.learnMoreUrl || "");
   }
-  async _detailsCardSelected(e) {
-    this.card = e.detail, this._onResize(), this._missingPrivilegeMessages = void 0, await this._getItemData(), this._expandAccordions();
+  async _detailsCardSelected(evt) {
+    this.card = evt.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._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);
+    if (this._overviewAccordionItemElement.value) {
+      this._overviewAccordionItemElement.value.expanded = true;
+    }
+    if (this._releaseNotesAccordionItemElement.value) {
+      this._releaseNotesAccordionItemElement.value.expanded = true;
+    }
+    if (this._relatedResourcesAccordionItemElement.value) {
+      this._relatedResourcesAccordionItemElement.value.expanded = true;
+    }
+    if (this._screenshotsAccordionItemElement.value) {
+      this._screenshotsAccordionItemElement.value.expanded = true;
+    }
+    if (this._termsOfUseAccordionItemElement.value) {
+      this._termsOfUseAccordionItemElement.value.expanded = true;
+    }
+    if (this._youMayAlsoLikeAccordionItemElement.value) {
+      this._youMayAlsoLikeAccordionItemElement.value.expanded = true;
+    }
   }
   async _getItemData() {
-    const e = this._configContextConsumer.value.userSession, t = await R(this.card.id, e), i = await L(this.card.id, e);
-    this._itemProperties = i.properties, this.itemPropertiesFetched.emit(this._itemProperties);
-    const s = A(t, this.card.typeKeywords, this._configContextConsumer.value.authentication);
-    this._privileges = e.username ? s : [], this._userPrivileges = this._configContextConsumer.value?.authentication ? this._configContextConsumer.value.authentication.PortalUserPrivileges : [];
-    const o = this._privileges.filter((r) => !this._userPrivileges.includes(r));
-    this._missingPrivilegeMessages = S(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), this._checkUrlParametersForAutoDeployment();
-  }
-  formatParams(e) {
-    const t = this._configContextConsumer.value.userSession, i = [], s = e ? Object.keys(e) : [], o = {
+    const userSession = this._configContextConsumer.value.userSession;
+    const solutionData = await getItemDataAsJson(this.card.id, userSession);
+    const item = await getItem(this.card.id, userSession);
+    this._itemProperties = item.properties;
+    this.itemPropertiesFetched.emit(this._itemProperties);
+    const privilegeList = getRequiredSolutionPrivileges(solutionData, this.card.typeKeywords, this._configContextConsumer.value.authentication);
+    this._privileges = userSession.username ? privilegeList : [];
+    this._userPrivileges = this._configContextConsumer.value?.authentication ? this._configContextConsumer.value.authentication.PortalUserPrivileges : [];
+    const privilegesDiff = this._privileges.filter((p) => !this._userPrivileges.includes(p));
+    this._missingPrivilegeMessages = getPrivilegeMessages(this._translations, privilegesDiff);
+    const userOptionsDef = solutionData.params ? this.formatParams(solutionData.params) : Promise.resolve([]);
+    void userOptionsDef.then((userOptions) => {
+      this._userOptions = userOptions;
+    });
+    this._templates = solutionData.templates;
+    this.templatesFetched.emit(solutionData.templates);
+    this._checkUrlParametersForAutoDeployment();
+  }
+  formatParams(params) {
+    const userSession = this._configContextConsumer.value.userSession;
+    const userOptions = [];
+    const paramKeys = params ? Object.keys(params) : [];
+    const userOption = {
       id: "",
       props: [],
-      accordionDisplay: !1
+      accordionDisplay: false
     };
-    if (s.length > 0) {
-      const n = [];
-      return s.forEach((r) => {
-        const h = e[r];
-        h.valueType && h.valueType.toLowerCase() === "itemid" && n.push(this._findExistingItem(r, "Feature Service", t.username || ""));
-      }), Promise.all(n).then((r) => {
-        const h = {};
-        return r.forEach((l) => {
-          if (l.query && l.results && l.results.length > 0) {
-            const f = l.query.split(" ")[0].replace("typekeywords:source-", "");
-            h[f] = {
-              resultId: l.results[0].id,
-              response: l.results[0]
+    if (paramKeys.length > 0) {
+      const existingItemDefs = [];
+      paramKeys.forEach((id) => {
+        const p = params[id];
+        if (p.valueType && p.valueType.toLowerCase() === "itemid") {
+          existingItemDefs.push(this._findExistingItem(id, "Feature Service", userSession.username || ""));
+        }
+      });
+      return Promise.all(existingItemDefs).then((results) => {
+        const idHash = {};
+        results.forEach((r) => {
+          if (r.query && r.results && r.results.length > 0) {
+            const sourceId = r.query.split(" ")[0].replace("typekeywords:source-", "");
+            idHash[sourceId] = {
+              resultId: r.results[0].id,
+              response: r.results[0]
             };
           }
-        }), s.forEach((l) => {
-          if (l === "serviceLearnMore") {
-            this._configureLearnMore = e[l], alert(this._configureLearnMore), delete e[l];
+        });
+        paramKeys.forEach((id) => {
+          if (id === "serviceLearnMore") {
+            this._configureLearnMore = params[id];
+            alert(this._configureLearnMore);
+            delete params[id];
             return;
           }
-          e[l].enterpriseIDMapping && (this._customDeploymentMappings[l] = e[l].enterpriseIDMapping), o.id = l, h[l] && (e[l].existingItemId = h[l].resultId, this.updateUserProp(e[l], h[l].response)), this.updateOption(e[l], o, l);
-        }), i.push(o), Promise.resolve(i);
+          if (params[id].enterpriseIDMapping) {
+            this._customDeploymentMappings[id] = params[id].enterpriseIDMapping;
+          }
+          userOption.id = id;
+          if (idHash[id]) {
+            params[id].existingItemId = idHash[id].resultId;
+            this.updateUserProp(params[id], idHash[id].response);
+          }
+          this.updateOption(params[id], userOption, id);
+        });
+        userOptions.push(userOption);
+        return Promise.resolve(userOptions);
       }).catch(() => Promise.resolve([]));
-    } else
+    } else {
       return Promise.resolve([]);
+    }
   }
-  _findExistingItem(e, t, i) {
-    const s = this._configContextConsumer.value.userSession;
-    return E(`typekeywords:source-${e} type:${t} owner:${i}`, s);
-  }
-  updateUserProp(e, t) {
-    const i = e.itemType?.toLowerCase() === "feature service", s = new RegExp(i ? this._regexFsUrl : e.itemType, "iu"), o = v(t, i ? "url" : "type", "") || "", n = o !== "" && s.test(o);
-    return e.responseValue = n ? o : "", e.name = n && u(t, "name") || "", e.title = n && u(t, "title") || "", e.itemType = n ? u(t, "type") : e.itemType, e.validId = n, e.itemUrl = T(t.id, this._configContextConsumer.value.authentication), n;
-  }
-  updateOption(e, t, i) {
-    const s = e.default || "", o = typeof s, n = s.toString();
-    this._setFeatureServiceProps(e);
-    const r = this.getValidation(e, n);
-    t.props.push({
-      id: i,
-      outType: o,
-      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 : n,
-      default: n,
-      srSearchText: n,
-      autoSelect: n !== "",
-      ...r,
-      loading: !1,
-      validId: !0,
-      tooltip: e.tooltip || "",
-      name: e.name || "",
-      title: e.title || "",
-      itemUrl: e.itemUrl || ""
+  _findExistingItem(itemId, type, userName) {
+    const userSession = this._configContextConsumer.value.userSession;
+    return _findExistingItem(`typekeywords:source-${itemId} type:${type} owner:${userName}`, userSession);
+  }
+  updateUserProp(userProp, response) {
+    const isLayer = userProp.itemType?.toLowerCase() === "feature service";
+    const responseTest = new RegExp(isLayer ? this._regexFsUrl : userProp.itemType, "iu");
+    const responseProp = getPropWithDefault(response, isLayer ? "url" : "type", "") || "";
+    const validProp = responseProp !== "" && responseTest.test(responseProp);
+    userProp.responseValue = validProp ? responseProp : "";
+    userProp.name = validProp ? getProp(response, "name") || "" : "";
+    userProp.title = validProp ? getProp(response, "title") || "" : "";
+    userProp.itemType = validProp ? getProp(response, "type") : userProp.itemType;
+    userProp.validId = validProp;
+    userProp.itemUrl = getItemUrl(response.id, this._configContextConsumer.value.authentication);
+    return validProp;
+  }
+  updateOption(v, userOption, id) {
+    const defValue = v.default || "";
+    const outType = typeof defValue;
+    const defaultValue = defValue.toString();
+    this._setFeatureServiceProps(v);
+    const validation = this.getValidation(v, defaultValue);
+    userOption.props.push({
+      id,
+      outType,
+      prop: id,
+      itemType: v.itemType || "",
+      responseValue: v.responseValue || "",
+      label: v.label || "",
+      choices: v.choices || [],
+      valueType: v.valueType.toLowerCase(),
+      attributes: v.attributes || {},
+      value: v.existingItemId && v.valueType.toLowerCase() === "itemid" ? v.existingItemId : defaultValue,
+      default: defaultValue,
+      srSearchText: defaultValue,
+      autoSelect: defaultValue !== "",
+      ...validation,
+      loading: false,
+      validId: true,
+      tooltip: v.tooltip || "",
+      name: v.name || "",
+      title: v.title || "",
+      itemUrl: v.itemUrl || ""
     });
   }
-  _setFeatureServiceProps(e) {
-    e.valueType && e.valueType.toLowerCase() === "itemid" && I(e, "attributes.required", "true");
+  _setFeatureServiceProps(v) {
+    if (v.valueType && v.valueType.toLowerCase() === "itemid") {
+      setCreateProp(v, "attributes.required", "true");
+    }
   }
-  getValidation(e, t) {
-    let i = "", s = u(e, "validation.message") || "", o = !0;
-    return u(e, "attributes.required") === "true" && (i = v(e, "validation.expression", "\\S{1,}"), o = new RegExp(i).test(t)), e.valueType && e.valueType.toLowerCase() === "itemid" && (i = this._regexID, s = this._translations.configure.invalidID), {
-      valid: o,
+  getValidation(v, defaultValue) {
+    let expression = "";
+    let message = getProp(v, "validation.message") || "";
+    let valid = true;
+    if (getProp(v, "attributes.required") === "true") {
+      expression = getPropWithDefault(v, "validation.expression", "\\S{1,}");
+      const regEx = new RegExp(expression);
+      valid = regEx.test(defaultValue);
+    }
+    if (v.valueType && v.valueType.toLowerCase() === "itemid") {
+      expression = this._regexID;
+      message = this._translations.configure.invalidID;
+    }
+    return {
+      valid,
       validation: {
-        expression: i,
-        message: s
+        expression,
+        message
       }
     };
   }
-  _allCardsFetched(e) {
-    this._allCards = e.detail;
+  _allCardsFetched(event) {
+    this._allCards = event.detail;
   }
   _onResize() {
-    this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight, this._showScreenshotsShowMore = (this._screenshotsElement.value?.scrollHeight || 0) > this._screenshotsRowBaseHeight + 2;
+    this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight;
+    this._showScreenshotsShowMore = (this._screenshotsElement.value?.scrollHeight || 0) > this._screenshotsRowBaseHeight + 2;
   }
   _cleanupPanel() {
-    this.el.scrollIntoView(!0), this._isScreenshotsRowExpanded = !1, this._showScreenshotsShowMore = !1, this._screenshotsElement.value?.classList.remove("expanded"), this._isYouMayAlsoLikeRowExpanded = !1, this._showYouMayAlsoLikeShowMore = !1, this._youMayAlsoLikeElement.value?.classList.remove("expanded"), this._privilegePopoverRef.value?.open && (this._privilegePopoverRef.value.open = !1), this._expandAccordions();
+    this.el.scrollIntoView(true);
+    this._isScreenshotsRowExpanded = false;
+    this._showScreenshotsShowMore = false;
+    this._screenshotsElement.value?.classList.remove("expanded");
+    this._isYouMayAlsoLikeRowExpanded = false;
+    this._showYouMayAlsoLikeShowMore = false;
+    this._youMayAlsoLikeElement.value?.classList.remove("expanded");
+    if (this._privilegePopoverRef.value?.open) {
+      this._privilegePopoverRef.value.open = false;
+    }
+    this._expandAccordions();
   }
-  _deployProgressStart(e) {
-    this._deployingDialogRef.value && (this._deployingDialogRef.value.open = !0, this._deployingDialogRef.value.abortController = e.detail), this._deployDialogRef.value && this._deployDialogRef.value.classList.add("display-none");
+  _deployProgressStart(abortController) {
+    if (this._deployingDialogRef.value) {
+      this._deployingDialogRef.value.open = true;
+      this._deployingDialogRef.value.abortController = abortController.detail;
+    }
+    if (this._deployDialogRef.value) {
+      this._deployDialogRef.value.classList.add("display-none");
+    }
   }
-  _deployProgessUpdated(e) {
-    const t = e.detail;
-    this._deployingDialogRef.value.deploymentProgress = t.progress;
+  _deployProgessUpdated(evt) {
+    const update = evt.detail;
+    this._deployingDialogRef.value.deploymentProgress = update.progress;
   }
   _closeDialogs() {
-    this._deployingDialogRef.value.close(), this._deployDialogRef.value.open = !1, this._deployDialogRef.value.classList.remove("display-none");
-  }
-  _handleDeployAppTabSelected(e) {
-    e.detail === "details" && this.sortTypeChanged.emit("");
+    this._deployingDialogRef.value.close();
+    this._deployDialogRef.value.open = false;
+    this._deployDialogRef.value.classList.remove("display-none");
+  }
+  _handleDeployAppTabSelected(evt) {
+    const activeTab = evt.detail;
+    if (activeTab === "details") {
+      this.sortTypeChanged.emit("");
+    }
   }
 }
-b("solution-details-panel", O);
+customElement("solution-details-panel", SolutionDetailsPanel);
 export {
-  O as SolutionDetailsPanel
+  SolutionDetailsPanel
 };
+//# sourceMappingURL=customElement.js.map