@esri/solutions-components 1.2.0-next.186 → 1.2.0-next.187

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

@@ -5,7 +5,7 @@ import { createRef as d, ref as h } from "lit-html/directives/ref.js";
 import { LitElement as C, createEvent as f, safeClassMap as u, nothing as y, safeStyleMap as D } from "@arcgis/lumina";
 import { useContextConsumer as w } from "@arcgis/lumina/context";
 import { c as E, i as L } from "../../chunks/deployAppContexts.js";
-import { css as R, html as l } from "lit";
+import { css as R, html as a } from "lit";
 import { request as T, getWorkflowBaseURL as P, getWorkflowManagerAuthorized as A, sanitizeHTML as _, getItemDataAsJson as O, getItem as U, getPropWithDefault as $, getProp as v, setCreateProp as N } from "@esri/solution-common";
 import { E as m, R as F, g as x, T as g, U as b, V as H, H as I, G as V, W as z, X as B, C as Y } from "../../chunks/interfaces.js";
 import { _findExistingItem as G } from "@esri/solution-deployer";
@@ -23,8 +23,8 @@ async function K(n, e, t) {
     x.VELOCITYFEEDS,
     x.VELOCITYBIGDATA,
     x.VELOCITYREALTIME
-  ].forEach((o) => {
-    const r = t.indexOf(o) || -1;
+  ].forEach((l) => {
+    const r = t.indexOf(l) || -1;
     r !== -1 && t.splice(r, 1);
   }), i = i.concat(
     q(
@@ -61,7 +61,7 @@ async function X(n, e) {
       f: "json"
     }
   };
-  return T(`${t}/portals/self/servers`, i).then((s) => s?.servers?.find((a) => a.serverFunction.indexOf("NotebookServer") > -1), (s) => (console.error(s), !1));
+  return T(`${t}/portals/self/servers`, i).then((s) => s?.servers?.find((o) => o.serverFunction.indexOf("NotebookServer") > -1), (s) => (console.error(s), !1));
 }
 function Q(n) {
   const e = n?.PortalUserSubset?.privileges, t = [
@@ -170,15 +170,15 @@ class te extends C {
   }
   render() {
     const e = "padding-bottom-1-5", t = this._getRelatedResources(), i = this._getYouMayAlsoLikeCards();
-    return l`<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=${u(e)}>${this._getScreenshotsRow()}</div><div class=${u(e)}>${this._getOverviewRow()}</div><div class=${u(e)}>${this._getReleaseNotesRow()}</div>${t.length > 0 ? l`<div class=${u(e)}>${this._getRelatedResourcesRow(t)}</div>` : ""}${i.length > 0 ? l`<div class=${u(e)}>${this._getYouMayAlsoLikeRow(i)}</div>` : ""}<div class=${u(e)}>${this._getTermsOfUseRow()}</div>${this.isMobile ? "" : l`<solution-deploy-dialog .card=${this.card} @deployCancelled=${this._handleDeployCancelled} @deployFailed=${this._handleDeployFailed} @deployProgressEnd=${this._handleDeploySuccess} @deployProgressStart=${this._deployProgressStart} @deployProgressUpdated=${this._deployProgessUpdated} id=solutionDeployDialog .userOptions=${this._userOptions} ${h(this._deployDialogRef)}></solution-deploy-dialog>`}<solution-snapshot-gallery .card=${this.card} id=solutionSnapshotGallery .itemProperties=${this._itemProperties} ${h(this._screenshotsDialogRef)}></solution-snapshot-gallery><solution-deploying-dialog .card=${this.card} @deploymentProcessCancelled=${this._handleDeploymentProcessCancelled} ${h(this._deployingDialogRef)}></solution-deploying-dialog></calcite-panel></calcite-shell>`;
+    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=${u(e)}>${this._getScreenshotsRow()}</div><div class=${u(e)}>${this._getOverviewRow()}</div><div class=${u(e)}>${this._getReleaseNotesRow()}</div>${t.length > 0 ? a`<div class=${u(e)}>${this._getRelatedResourcesRow(t)}</div>` : ""}${i.length > 0 ? a`<div class=${u(e)}>${this._getYouMayAlsoLikeRow(i)}</div>` : ""}<div class=${u(e)}>${this._getTermsOfUseRow()}</div>${this.isMobile ? "" : a`<solution-deploy-dialog .card=${this.card} @deployCancelled=${this._handleDeployCancelled} @deployFailed=${this._handleDeployFailed} @deployProgressEnd=${this._handleDeploySuccess} @deployProgressStart=${this._deployProgressStart} @deployProgressUpdated=${this._deployProgessUpdated} id=solutionDeployDialog .userOptions=${this._userOptions} ${h(this._deployDialogRef)}></solution-deploy-dialog>`}<solution-snapshot-gallery .card=${this.card} id=solutionSnapshotGallery .itemProperties=${this._itemProperties} ${h(this._screenshotsDialogRef)}></solution-snapshot-gallery><solution-deploying-dialog .card=${this.card} @deploymentProcessCancelled=${this._handleDeploymentProcessCancelled} ${h(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}`), a = s?.offsetHeight ? s.offsetHeight + 40 : 0;
-        a > t && (t = a);
+        const s = this.el.shadowRoot?.getElementById(`you-may-also-like-${i}`), o = s?.offsetHeight ? s.offsetHeight + 40 : 0;
+        o > t && (t = o);
       }
       this._youMayAlsoLikeBaseHeight = t, this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight;
     }, 100);
@@ -190,41 +190,41 @@ class te extends C {
     }
   }
   _getSolutionRow() {
-    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400"), t = this._missingPrivilegeMessages?.leadingMessages || [], i = t.length > 0, s = this._missingPrivilegeMessages?.bulletedMessages || [], a = s.length > 0, o = this._missingPrivilegeMessages?.trailingMessages || [], r = o.length > 0;
-    return l`<div class="display-flex flex-direction-row width-full"><div class="padding-end-1-75 image-width"><img alt=${this.card?.title ?? y} src=${e ?? y}></div><div class="display-flex flex-direction-row flex-1">${this._getTextSection(i, a, r, t, s, o)}${this._getButtons()}</div></div>`;
+    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, l = this._missingPrivilegeMessages?.trailingMessages || [], r = l.length > 0;
+    return a`<div class="display-flex flex-direction-row width-full"><div class="padding-end-1-75 image-width"><img alt=${this.card?.title ?? y} src=${e ?? y}></div><div class="display-flex flex-direction-row flex-1">${this._getTextSection(i, o, r, t, s, l)}${this._getButtons()}</div></div>`;
   }
-  _getTextSection(e, t, i, s, a, o) {
-    return l`<div class="display-flex flex-direction-column padding-end-1 flex-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")) && l`<calcite-chip class="margin-bottom-1-5 margin-sides-1" kind=brand .label=${this._translations.newChip} scale=m icon=star>${this._translations.newChip}</calcite-chip>` || ""}</div><div class="font-1 padding-end-1 line-height-xxl">${this.card?.snippet}</div>${e || t || i ? l`<div class="display-flex flex-direction-row padding-top-1">${this._getMissingPrivilegesNotice(s, a, o)}</div>` : ""}</div>`;
+  _getTextSection(e, t, i, s, o, l) {
+    return a`<div class="display-flex flex-direction-column padding-end-1 flex-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-1" kind=brand .label=${this._translations.newChip} scale=m icon=star>${this._translations.newChip}</calcite-chip>` || ""}</div><div class="font-1 padding-end-1 line-height-xxl">${this.card?.snippet}</div>${this.isMobile ? "" : e || t || i ? a`<div class="display-flex flex-direction-row padding-top-1">${this._getMissingPrivilegesNotice(s, o, l)}</div>` : ""}</div>`;
   }
   _getButtons() {
     const e = this._itemProperties?.demoURL || "";
-    return l`<div class="display-flex flex-direction-column button-width"><calcite-button class="padding-bottom-1 solution-detail-action" .disabled=${this.isMobile ? !0 : this._isDeployDisabled} icon-flip-rtl=end @click=${() => this._checkPermissionsBeforeDeploy()} scale=m>${this._showLoader ? l`<calcite-loader inline label></calcite-loader>` : this._translations.deployButton}</calcite-button>${!this._configContextConsumer.value?.isEnterprise && e && l`<calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1 solution-detail-action" @click=${() => this._handleWatchDemoClick(e)} scale=m>${this._translations.watchDemo}</calcite-button>` || ""}<calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1 solution-detail-action" @click=${() => this._handleLearnMoreClick()} scale=m>${this._translations.openHelp}</calcite-button>${!this._configContextConsumer.value?.isEnterprise && l`<solution-social-share button-appearance=outline-fill class="padding-bottom-1" share-button-kind=neutral .shareButtonText=${this._translations.share} share-button-scale=m .solutionId=${this.card?.deployCommonId || ""} .solutionTitle=${this.card?.title || ""} .solutionVersion=${this.card?.deployVersion || ""}></solution-social-share>` || ""}</div>`;
+    return a`<div class="display-flex flex-direction-column button-width">${!this.isMobile && a`<calcite-button class="padding-bottom-1 solution-detail-action" .disabled=${this._isDeployDisabled} icon-flip-rtl=end @click=${() => this._checkPermissionsBeforeDeploy()} scale=m>${this._showLoader ? a`<calcite-loader inline label></calcite-loader>` : this._translations.deployButton}</calcite-button>` || ""}${!this._configContextConsumer.value?.isEnterprise && e && a`<calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1 solution-detail-action" @click=${() => this._handleWatchDemoClick(e)} scale=m>${this._translations.watchDemo}</calcite-button>` || ""}<calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1 solution-detail-action" @click=${() => this._handleLearnMoreClick()} scale=m>${this._translations.openHelp}</calcite-button>${!this._configContextConsumer.value?.isEnterprise && a`<solution-social-share button-appearance=outline-fill class="padding-bottom-1" share-button-kind=neutral .shareButtonText=${this._translations.share} share-button-scale=m .solutionId=${this.card?.deployCommonId || ""} .solutionTitle=${this.card?.title || ""} .solutionVersion=${this.card?.deployVersion || ""}></solution-social-share>` || ""}</div>`;
   }
   _getMissingPrivilegesNotice(e, t, i) {
-    const s = "solutions-missing-privileges-notice", a = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges, o = t.length > 0 ? "" : "display-none", r = t.length > 0 ? "padding-top-sm" : "";
-    return l`<div><calcite-notice class="margin-inline-unset" kind=info open><div slot=message>${`${a}`}</div><calcite-action icon=information id=${s} slot=actions-end .text=${a}></calcite-action></calcite-notice><calcite-popover closable label overlay-positioning=fixed placement=bottom reference-element=solutions-missing-privileges-notice ${h(this._privilegePopoverRef)}><div class="padding-1 display-flex flex-direction-column">${// Leading messages
-    this._getSpanMessages(e, "padding-bottom-1")}<span class=${`padding-bottom-1-2 ${o}`}>${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading}</span>${// Bulleted messages
+    const s = "solutions-missing-privileges-notice", o = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges, l = t.length > 0 ? "" : "display-none", r = t.length > 0 ? "padding-top-sm" : "";
+    return a`<div><calcite-notice class="margin-inline-unset" kind=info open><div slot=message>${`${o}`}</div><calcite-action icon=information id=${s} slot=actions-end .text=${o}></calcite-action></calcite-notice><calcite-popover closable label overlay-positioning=fixed placement=bottom reference-element=solutions-missing-privileges-notice ${h(this._privilegePopoverRef)}><div class="padding-1 display-flex flex-direction-column">${// Leading messages
+    this._getSpanMessages(e, "padding-bottom-1")}<span class=${`padding-bottom-1-2 ${l}`}>${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading}</span>${// Bulleted messages
     this._getBulletedMessages(t)}${// Trailing messages
     this._getSpanMessages(i, r)}</div></calcite-popover></div>`;
   }
   _getSpanMessages(e, t) {
-    return e.length > 0 ? e.map((i) => l`<span class=${u(t)}>${i}</span>`) : "";
+    return e.length > 0 ? e.map((i) => a`<span class=${u(t)}>${i}</span>`) : "";
   }
   _getBulletedMessages(e) {
-    return e.length > 0 ? l`<ul>${e.map((t) => l`<li>${t}</li>`)}</ul>` : "";
+    return e.length > 0 ? a`<ul>${e.map((t) => a`<li>${t}</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 l`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(this._screenshotsAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.solutionOverview}</div><calcite-panel><div class="display-flex flex-direction-column back-color-override-1"><div class="collapsible-div max-height-300" id=screenshots-subsection ${h(this._screenshotsElement)}>${this._getScreenshots()}</div><calcite-fab appearance=outline-fill class=${`align-self-center ${i}`} .icon=${t} kind=neutral @click=${() => {
+    return a`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(this._screenshotsAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.solutionOverview}</div><calcite-panel><div class="display-flex flex-direction-column back-color-override-1"><div class="collapsible-div max-height-300" id=screenshots-subsection ${h(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.filter((i) => i.format === "image") || [], t = this._configContextConsumer.value;
-    return l`<calcite-card-group class="card-group" .label=${this._translations.solutionOverview}>${e.reduce((i, s) => {
-      const a = I(this.card?.id || "", s.name, t.authentication);
-      let o;
-      return t.agoBasedEnterpriseSolutionsGroupId && t.isEnterprise && (o = I(this.card?.id || "", s.name, void 0, t.agolPortalUrl)), this.card?.id ? i.push(l`<calcite-card class="cursor-pointer" .label=${s.alt} @click=${() => this._openScreenshotGallery(s)} @keydown=${(r) => V(r, () => this._openScreenshotGallery(s))}><div class="card-image-wrap" slot=thumbnail><img alt=${s.alt ?? y} class="thumbnail card-image" slot=thumbnail src=${(o || a) ?? y}><div class="hover-text">${this._translations.openInGallery}</div></div></calcite-card>`) : i.push(""), i;
+    return a`<calcite-card-group class="card-group" .label=${this._translations.solutionOverview}>${e.reduce((i, s) => {
+      const o = I(this.card?.id || "", s.name, t.authentication);
+      let l;
+      return t.agoBasedEnterpriseSolutionsGroupId && t.isEnterprise && (l = I(this.card?.id || "", s.name, void 0, t.agolPortalUrl)), this.card?.id ? i.push(a`<calcite-card class="cursor-pointer" .label=${s.alt} @click=${() => this._openScreenshotGallery(s)} @keydown=${(r) => V(r, () => this._openScreenshotGallery(s))}><div class="card-image-wrap" slot=thumbnail><img alt=${s.alt ?? y} class="thumbnail card-image" slot=thumbnail src=${(l || o) ?? y}><div class="hover-text">${this._translations.openInGallery}</div></div></calcite-card>`) : i.push(""), i;
     }, [])}</calcite-card-group>`;
   }
   _openScreenshotGallery(e) {
@@ -241,40 +241,40 @@ class te extends C {
     t && (t.screenshot = e, t.open = !0);
   }
   _getOverviewRow() {
-    return l`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(this._overviewAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.solutionDetails}</div>${this._getDescriptionRow()}${this._getInformationProductsRow()}</calcite-accordion-item></calcite-accordion>`;
+    return a`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(this._overviewAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.solutionDetails}</div>${this._getDescriptionRow()}${this._getInformationProductsRow()}</calcite-accordion-item></calcite-accordion>`;
   }
   _getDescriptionRow() {
-    return l`<div class="display-flex flex-direction-column"><div class="font-color-2 font-1 margin-top-0 line-height-xxl padding-bottom-xxl">${this.card?.snippet}</div><div class="font-color-2 font-1 margin-top-0 line-height-xxl padding-bottom-xxl" .innerHTML=${this.card?.description ?? ""}></div></div>`;
+    return a`<div class="display-flex flex-direction-column"><div class="font-color-2 font-1 margin-top-0 line-height-xxl padding-bottom-xxl">${this.card?.snippet}</div><div class="font-color-2 font-1 margin-top-0 line-height-xxl padding-bottom-xxl" .innerHTML=${this.card?.description ?? ""}></div></div>`;
   }
   _getInformationProductsRow() {
-    return l`<div class="display-flex flex-direction-column font-1 line-height-xxl font-color-2"><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 a`<div class="display-flex flex-direction-column font-1 line-height-xxl font-color-2"><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 l`<calcite-table-row slot=table-header><calcite-table-header .heading=${this._translations.solutionItem}></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 a`<calcite-table-row slot=table-header><calcite-table-header .heading=${this._translations.solutionItem}></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) => l`<calcite-table-row><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.item) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.description) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.userType) ?? ""}></p></calcite-table-cell></calcite-table-row>`);
+    return (this._itemProperties?.infoProducts || []).map((t) => a`<calcite-table-row><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.item) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.description) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.userType) ?? ""}></p></calcite-table-cell></calcite-table-row>`);
   }
   _getReleaseNotesRow() {
-    return l`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(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 a`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(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 l`<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 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>`;
   }
   _getReleaseNotesTableRows() {
-    return (this._itemProperties?.releaseNotes || [])?.map((t) => l`<calcite-table-row><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.version) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.description) ?? ""}></p></calcite-table-cell></calcite-table-row>`);
+    return (this._itemProperties?.releaseNotes || [])?.map((t) => a`<calcite-table-row><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.version) ?? ""}></p></calcite-table-cell><calcite-table-cell><p class="table-cell" .innerHTML=${_(t.description) ?? ""}></p></calcite-table-cell></calcite-table-row>`);
   }
   _getRelatedResourcesRow(e) {
-    return l`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(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(() => {
-      l`<solution-resource-card></solution-resource-card>`;
+    return a`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(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(() => {
+      a`<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", a = this._isYouMayAlsoLikeRowExpanded ? "" : { height: `${this._youMayAlsoLikeBaseHeight}px` };
-    return l`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(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=${D(a)} ${h(this._youMayAlsoLikeElement)}><div class="display-flex flex-direction-row"><calcite-card-group class="card-group" .label=${this._translations.youMayAlsoLike}>${e.map((o, r) => l`<solution-details-card .id=${`you-may-also-like-${r}`} .card=${o} class="padding-2px" source=you-may-also-like .referrerSolutionId=${this.card?.deployCommonId || ""} .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 ${t}`} .icon=${s} kind=inverse @click=${() => {
+    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 ${h(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=${D(o)} ${h(this._youMayAlsoLikeElement)}><div class="display-flex flex-direction-row"><calcite-card-group class="card-group" .label=${this._translations.youMayAlsoLike}>${e.map((l, r) => a`<solution-details-card .id=${`you-may-also-like-${r}`} .card=${l} class="padding-2px" source=you-may-also-like .referrerSolutionId=${this.card?.deployCommonId || ""} .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 ${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>`;
   }
@@ -283,7 +283,7 @@ class te extends C {
     return this._allCards.filter((t) => e.indexOf(t.deployCommonId) > -1);
   }
   _getTermsOfUseRow() {
-    return l`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(this._termsOfUseAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.termsOfUse}</div><div class="font-color-2" .innerHTML=${(this.card?.licenseInfo || "") ?? ""}></div></calcite-accordion-item></calcite-accordion>`;
+    return a`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${h(this._termsOfUseAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.termsOfUse}</div><div class="font-color-2" .innerHTML=${(this.card?.licenseInfo || "") ?? ""}></div></calcite-accordion-item></calcite-accordion>`;
   }
   _openDeploy() {
     if (this._configContextConsumer.value.authentication.IsSignedIn) {
@@ -334,25 +334,25 @@ class te extends C {
   async _getItemData() {
     const e = this._configContextConsumer.value, t = e?.agoBasedEnterpriseSolutionsGroupId && e?.isEnterprise ? e.anonAgolSession : e?.userSession, i = await O(this.card.id, t), s = await U(this.card.id, t);
     this._itemProperties = s.properties, this.itemPropertiesFetched.emit(this._itemProperties);
-    const a = z(i, this.card.typeKeywords, e?.authentication);
-    this._privileges = t.username ? a : [], this._userPrivileges = e?.authentication && e?.userSession ? await K(e.authentication, e.userSession, e.authentication.PortalUserPrivileges) : [];
-    const o = this._privileges.filter((p) => !this._userPrivileges.includes(p));
-    this._missingPrivilegeMessages = B(this._translations, o), this._isDeployDisabled = this._missingPrivilegeMessages && (this._missingPrivilegeMessages.leadingMessages.length > 0 || this._missingPrivilegeMessages.bulletedMessages.length > 0 || this._missingPrivilegeMessages.trailingMessages.length > 0);
+    const o = z(i, this.card.typeKeywords, e?.authentication);
+    this._privileges = t.username ? o : [], this._userPrivileges = e?.authentication && e?.userSession ? await K(e.authentication, e.userSession, e.authentication.PortalUserPrivileges) : [];
+    const l = this._privileges.filter((p) => !this._userPrivileges.includes(p));
+    this._missingPrivilegeMessages = B(this._translations, l), this._isDeployDisabled = this._missingPrivilegeMessages && (this._missingPrivilegeMessages.leadingMessages.length > 0 || this._missingPrivilegeMessages.bulletedMessages.length > 0 || this._missingPrivilegeMessages.trailingMessages.length > 0);
     const r = i.params ? await this.formatParams(i.params) : [];
     this._userOptions = r, this._templates = i.templates, this.templatesFetched.emit(i.templates), this._checkUrlParametersForAutoDeployment(), this._isLoaded = !0, this._showLoader && (this._showLoader = !1, this._isDeployDisabled || this._openDeploy());
   }
   formatParams(e) {
-    const t = this._configContextConsumer.value.userSession, i = [], s = e ? Object.keys(e) : [], a = {
+    const t = this._configContextConsumer.value.userSession, i = [], s = e ? Object.keys(e) : [], o = {
       id: "",
       props: [],
       accordionDisplay: !1
     };
     if (s.length > 0) {
-      const o = [];
+      const l = [];
       return s.forEach((r) => {
         const p = e[r];
-        p.valueType && p.valueType.toLowerCase() === "itemid" && o.push(this._findExistingItem(r, "Feature Service", t.username || ""));
-      }), Promise.all(o).then((r) => {
+        p.valueType && p.valueType.toLowerCase() === "itemid" && l.push(this._findExistingItem(r, "Feature Service", t.username || ""));
+      }), Promise.all(l).then((r) => {
         const p = {};
         return r.forEach((c) => {
           if (c.query && c.results && c.results.length > 0) {
@@ -367,8 +367,8 @@ class te extends C {
             this._configureLearnMore = e[c], alert(this._configureLearnMore), delete e[c];
             return;
           }
-          e[c].enterpriseIDMapping && (this._customDeploymentMappings[c] = e[c].enterpriseIDMapping), a.id = c, p[c] && (e[c].existingItemId = p[c].resultId, this.updateUserProp(e[c], p[c].response)), this.updateOption(e[c], a, c);
-        }), i.push(a), Promise.resolve(i);
+          e[c].enterpriseIDMapping && (this._customDeploymentMappings[c] = e[c].enterpriseIDMapping), o.id = c, p[c] && (e[c].existingItemId = p[c].resultId, this.updateUserProp(e[c], p[c].response)), this.updateOption(e[c], o, c);
+        }), i.push(o), Promise.resolve(i);
       }).catch(() => Promise.resolve([]));
     } else
       return Promise.resolve([]);
@@ -378,16 +378,16 @@ class te extends C {
     return G(`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"), a = $(t, i ? "url" : "type", "") || "", o = a !== "" && s.test(a);
-    return e.responseValue = o ? a : "", e.name = o && v(t, "name") || "", e.title = o && v(t, "title") || "", e.itemType = o ? v(t, "type") : e.itemType, e.validId = o, e.itemUrl = Y(t.id, this._configContextConsumer.value.authentication), o;
+    const i = e.itemType?.toLowerCase() === "feature service", s = new RegExp(i ? this._regexFsUrl : e.itemType, "iu"), o = $(t, i ? "url" : "type", "") || "", l = o !== "" && s.test(o);
+    return e.responseValue = l ? o : "", e.name = l && v(t, "name") || "", e.title = l && v(t, "title") || "", e.itemType = l ? v(t, "type") : e.itemType, e.validId = l, e.itemUrl = Y(t.id, this._configContextConsumer.value.authentication), l;
   }
   updateOption(e, t, i) {
-    const s = e.default || "", a = typeof s, o = s.toString();
+    const s = e.default || "", o = typeof s, l = s.toString();
     this._setFeatureServiceProps(e);
-    const r = this.getValidation(e, o);
+    const r = this.getValidation(e, l);
     t.props.push({
       id: i,
-      outType: a,
+      outType: o,
       prop: i,
       itemType: e.itemType || "",
       responseValue: e.responseValue || "",
@@ -395,10 +395,10 @@ class te extends C {
       choices: e.choices || [],
       valueType: e.valueType.toLowerCase(),
       attributes: e.attributes || {},
-      value: e.existingItemId && e.valueType.toLowerCase() === "itemid" ? e.existingItemId : o,
-      default: o,
-      srSearchText: o,
-      autoSelect: o !== "",
+      value: e.existingItemId && e.valueType.toLowerCase() === "itemid" ? e.existingItemId : l,
+      default: l,
+      srSearchText: l,
+      autoSelect: l !== "",
       ...r,
       loading: !1,
       validId: !0,
@@ -412,9 +412,9 @@ class te extends C {
     e.valueType && e.valueType.toLowerCase() === "itemid" && N(e, "attributes.required", "true");
   }
   getValidation(e, t) {
-    let i = "", s = v(e, "validation.message") || "", a = !0;
-    return v(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, s = this._translations.configure.invalidID), {
-      valid: a,
+    let i = "", s = v(e, "validation.message") || "", o = !0;
+    return v(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, s = this._translations.configure.invalidID), {
+      valid: o,
       validation: {
         expression: i,
         message: s

package/dist/components/solutions-all-shell/customElement.js

@@ -9,7 +9,7 @@ import { c as b, i as y } from "../../chunks/deployAppContexts.js";
 import { e as o, d as c, T as d } from "../../chunks/interfaces.js";
 import { createRef as h, ref as r } from "lit/directives/ref.js";
 import "../solutions-filter-panel/customElement.js";
-const v = m`.display-flex{display:flex}.border-override{border-top-width:var(--calcite-border-width-none);border-bottom-width:var(--calcite-border-width-none)}.header-override{--calcite-panel-header-content-space: 0px;--calcite-panel-header-background-color: var(--calcite-color-foreground-2)}.panel-override{--calcite-panel-background-color: var(--calcite-color-foreground-2);--calcite-panel-border-color: none}.label-override{--calcite-label-margin-bottom: 0px;padding-inline-start:var(--calcite-spacing-md);font-weight:var(--calcite-font-weight-medium)}.header-button-padding{padding-top:var(--calcite-spacing-sm);padding-bottom:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}.padding-start{padding-inline-start:var(--calcite-spacing-lg)}.align-items-center{align-items:center}.justify-content-end{justify-content:end}.filter-width-350{--calcite-shell-panel-width: 350px}.z-index-1{z-index:1}.z-index-2{z-index:2}h1{font-weight:unset;margin:0;padding:0}@media(max-width:800px){.filter{display:none}}.mock-fab{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}.background-override{--calcite-shell-panel-background-color: var(--calcite-color-foreground-3);--calcite-panel-background-color: var(--calcite-color-foreground-3)}.chips-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--calcite-spacing-xs);flex:1;padding-block:var(--calcite-spacing-xs)}.header-content-wrapper{min-height:50px;flex-wrap:wrap;gap:var(--calcite-spacing-xs)}.position-relative{position:relative}.height-100{height:100%}.border-none{border:none}.height-50{height:50px}.padding-top-3{padding-top:3px}`;
+const v = m`.display-flex{display:flex}.border-override{border-top-width:var(--calcite-border-width-none);border-bottom-width:var(--calcite-border-width-none)}.header-override{--calcite-panel-header-content-space: 0px;--calcite-panel-header-background-color: var(--calcite-color-foreground-2)}.panel-override{--calcite-panel-background-color: var(--calcite-color-foreground-2);--calcite-panel-border-color: none}.label-override{--calcite-label-margin-bottom: 0px;padding-inline-start:var(--calcite-spacing-md);font-weight:var(--calcite-font-weight-medium)}.header-button-padding{padding-top:var(--calcite-spacing-sm);padding-bottom:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}.padding-start{padding-inline-start:var(--calcite-spacing-lg)}.align-items-center{align-items:center}.justify-content-end{justify-content:end}.filter-width-350{--calcite-shell-panel-width: 350px}.z-index-1{z-index:1}.z-index-2{z-index:2}h1{font-weight:unset;margin:0;padding:0}@media(max-width:800px){.filter{display:none}}.mock-fab{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}.background-override{--calcite-shell-panel-background-color: var(--calcite-color-foreground-3);--calcite-panel-background-color: var(--calcite-color-foreground-3)}.chips-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--calcite-spacing-xs);flex:1;padding-block:var(--calcite-spacing-xs)}.header-content-wrapper{min-height:50px;flex-wrap:wrap;gap:var(--calcite-spacing-xs)}.position-relative{position:relative}.height-100{height:100%}.border-none{border:none}.height-50{height:50px}.padding-top-3{padding-top:3px}.responsive-chip .chip-text{white-space:nowrap}@media(max-width:800px){.responsive-chip{max-width:100%}.responsive-chip .chip-text{white-space:normal;overflow-wrap:anywhere}}`;
 class x extends g {
   constructor() {
     super(), this.solutionsCount = 0, this._isLoading = !0, this._filterOpen = !0, this._filters = {
@@ -75,7 +75,7 @@ class x extends g {
     if (!this._filters.categories)
       return;
     const e = this._filters.categories.filter((t) => t.type === "industry" || t.type === "domain");
-    return e.length > 0 ? p(e, (t) => `${t.type}:${t.value}`, (t) => s`<calcite-chip appearance=outline-fill class="padding-start" closable kind=neutral .label=${t.displayValue} @calciteChipClose=${() => this._chipClosed(t.displayValue, t.type)} .value=${t.displayValue}>${t.displayValue}</calcite-chip>`) : void 0;
+    return e.length > 0 ? p(e, (t) => `${t.type}:${t.value}`, (t) => s`<calcite-chip appearance=outline-fill class="padding-start responsive-chip" closable kind=neutral .label=${t.displayValue} @calciteChipClose=${() => this._chipClosed(t.displayValue, t.type)} .value=${t.displayValue}><span class="chip-text">${t.displayValue}</span></calcite-chip>`) : void 0;
   }
   _updateSolutionCount(e) {
     this.solutionsCount = e.detail;