@esri/solutions-components 5.0.3 → 5.0.4-next.2

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

@@ -1,103 +1,198 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as c, html as t } from "lit";
-import { keyed as r } from "lit/directives/keyed.js";
-import { u as d } from "../../chunks/useT9n.js";
-import { LitElement as h, createEvent as a } from "@arcgis/lumina";
-import { createRef as i, ref as l } from "lit-html/directives/ref.js";
-const p = c`*[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.panel-bg-white{--calcite-panel-background-color: var(--calcite-color-foreground-1)}calcite-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.loader-text{margin-top:var(--calcite-spacing-sm);margin-bottom:var(--calcite-spacing-xxxl);text-align:center;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-1)}.carousel-style{height:120px;display:flex;align-items:center}`;
-class g extends h {
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { keyed } from "lit/directives/keyed.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, createEvent } from "@arcgis/lumina";
+import { createRef, ref } from "lit-html/directives/ref.js";
+const styles = css`/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Focus styles for tabbable text elements - only show on keyboard navigation */
+*[tabindex]:focus-visible {
+  outline: 2px solid var(--calcite-color-brand);
+  outline-offset: 2px;
+}
+
+.panel-bg-white {
+  --calcite-panel-background-color: var(--calcite-color-foreground-1);
+}
+
+calcite-loader {
+  --calcite-loader-spacing: var(--calcite-spacing-md);
+}
+
+.loader-text {
+  margin-top: var(--calcite-spacing-sm);
+  margin-bottom: var(--calcite-spacing-xxxl);
+  text-align: center;
+  font-size: var(--calcite-font-size-relative-base);
+  color: var(--calcite-color-text-1);
+}
+
+.carousel-style {
+  height: 120px;
+  display: flex;
+  align-items: center;
+}
+`;
+class SolutionDeployingDialog extends LitElement {
   constructor() {
-    super(), this.deploymentProgress = 0, this.open = !1, this.isWaitingForCard = !1, this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1, this._showIsCancelling = !1, this._translations = d({ name: "solution-deploying-dialog", blocking: !0 }), this._carouselKey = 0, this._deployingDialogRef = i(), this._carouselRef = i(), this._carouselMessages = [], this._confirmUnload = !1, this.deployingDialogOpened = a(), this.deploymentProcessCancelled = a(), this.listenOn(window, "beforeunload", (e) => {
-      (this._confirmUnload || this._showIsCancelling) && (e.preventDefault(), e.returnValue = !0);
+    super();
+    this.deploymentProgress = 0;
+    this.open = false;
+    this.isWaitingForCard = false;
+    this._isInCancelConfirmation = false;
+    this._showCancelConfirmation = false;
+    this._showIsCancelling = false;
+    this._translations = useT9n({ name: "solution-deploying-dialog", blocking: true });
+    this._carouselKey = 0;
+    this._deployingDialogRef = createRef();
+    this._carouselRef = createRef();
+    this._carouselMessages = [];
+    this._confirmUnload = false;
+    this.deployingDialogOpened = createEvent();
+    this.deploymentProcessCancelled = createEvent();
+    this.listenOn(window, "beforeunload", (evt) => {
+      if (this._confirmUnload || this._showIsCancelling) {
+        evt.preventDefault();
+        evt.returnValue = true;
+      }
     });
   }
   static {
-    this.properties = { abortController: 0, card: 0, deploymentProgress: 9, open: 5, isWaitingForCard: 5, _isInCancelConfirmation: 16, _showCancelConfirmation: 16, _showIsCancelling: 16, _translations: 16, _carouselKey: 16 };
+    this.properties = { abortController: [0, {}, { attribute: false }], card: [0, {}, { attribute: false }], deploymentProgress: [9, {}, { type: Number }], open: [5, {}, { type: Boolean }], isWaitingForCard: [5, {}, { type: Boolean }], _isInCancelConfirmation: [16, {}, { state: true }], _showCancelConfirmation: [16, {}, { state: true }], _showIsCancelling: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _carouselKey: [16, {}, { state: true }] };
   }
   static {
-    this.styles = p;
+    this.styles = styles;
   }
   close() {
-    this._showCancelConfirmation = !1, this._showIsCancelling = !1, this.isWaitingForCard = !1;
-    const e = this._deployingDialogRef.value;
-    e && (e.open = !1), this.open = !1;
+    this._showCancelConfirmation = false;
+    this._showIsCancelling = false;
+    this.isWaitingForCard = false;
+    const dialog = this._deployingDialogRef.value;
+    if (dialog) {
+      dialog.open = false;
+    }
+    this.open = false;
   }
   confirmCancel() {
-    const e = this._deployingDialogRef.value;
-    e && (e.open = !0, e.closeDisabled = !0, this._isInCancelConfirmation = !0, this._showIsCancelling = !1), this._showCancelConfirmation = !0;
+    const dialog = this._deployingDialogRef.value;
+    if (dialog) {
+      dialog.open = true;
+      dialog.closeDisabled = true;
+      this._isInCancelConfirmation = true;
+      this._showIsCancelling = false;
+    }
+    this._showCancelConfirmation = true;
   }
   cancelDeployment() {
-    this._isInCancelConfirmation && this.abortController && (this.deploymentProcessCancelled.emit(), this.abortController.abort(), this._showIsCancelling = !0, this._showCancelConfirmation = !1);
+    if (this._isInCancelConfirmation) {
+      if (this.abortController) {
+        this.deploymentProcessCancelled.emit();
+        this.abortController.abort();
+        this._showIsCancelling = true;
+        this._showCancelConfirmation = false;
+      }
+    }
   }
   async load() {
   }
   render() {
-    return t`<calcite-dialog close-disabled .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} escape-disabled modal width=m .open=${this.open} @calciteDialogBeforeClose=${(e) => {
-      e.preventDefault(), this._confirmUnload = !1;
-    }} @calciteDialogOpen=${() => this._onDialogOpen()} outside-close-disabled ${l(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : this._showIsCancelling ? this.renderCancellingModal() : t`<calcite-panel class="panel-bg-white">${this.isWaitingForCard ? t`<calcite-loader .label=${this._translations.deploymentInProgress} scale=l type=indeterminate></calcite-loader><div class="loader-text" tabindex=0>${this._translations.deploymentInProgress}</div>` : t`<calcite-loader .label=${this._translations.deploymentInProgress} scale=l type=determinate-value .value=${this.deploymentProgress}></calcite-loader><div class="loader-text" tabindex=0>${this._translations.deploymentInProgress}</div>`}<div class="carousel-style">${r(this._carouselKey, t`<calcite-carousel .label=${this._translations.newsAndFeatures} arrow-type=inline ${l(this._carouselRef)}>${this.renderCarouselItems()}</calcite-carousel>`)}</div></calcite-panel>`}${!this._showCancelConfirmation && !this._showIsCancelling && t`<calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button>` || ""}${this._showCancelConfirmation && t`<calcite-button kind=brand @click=${() => {
-      this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1;
+    return html`<calcite-dialog close-disabled .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} escape-disabled modal width=m .open=${this.open} @calciteDialogBeforeClose=${(event) => {
+      event.preventDefault();
+      this._confirmUnload = false;
+    }} @calciteDialogOpen=${() => this._onDialogOpen()} outside-close-disabled ${ref(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : this._showIsCancelling ? this.renderCancellingModal() : html`<calcite-panel class="panel-bg-white">${!this.isWaitingForCard ? html`<calcite-loader .label=${this._translations.deploymentInProgress} scale=l type=determinate-value .value=${this.deploymentProgress}></calcite-loader><div class="loader-text" tabindex=0>${this._translations.deploymentInProgress}</div>` : html`<calcite-loader .label=${this._translations.deploymentInProgress} scale=l type=indeterminate></calcite-loader><div class="loader-text" tabindex=0>${this._translations.deploymentInProgress}</div>`}<div class="carousel-style">${keyed(this._carouselKey, html`<calcite-carousel .label=${this._translations.newsAndFeatures} arrow-type=inline ${ref(this._carouselRef)}>${this.renderCarouselItems()}</calcite-carousel>`)}</div></calcite-panel>`}${!this._showCancelConfirmation && !this._showIsCancelling && html`<calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button>` || ""}${this._showCancelConfirmation && html`<calcite-button kind=brand @click=${() => {
+      this._isInCancelConfirmation = false;
+      this._showCancelConfirmation = false;
     }} slot=footer-end>${this._translations.continueDeployment}</calcite-button><calcite-button appearance=outline @click=${this.cancelDeployment} slot=footer-end>${this._translations.cancelDeploymentButton}</calcite-button>` || ""}</calcite-dialog>`;
   }
   renderCarouselItems() {
-    const e = [];
-    return this._carouselMessages.forEach((s, o) => {
-      e.push(t`<calcite-carousel-item .label=${`carousel-item-${o}`}><calcite-label layout=inline scale=m>${s.icon && t`<calcite-icon .icon=${s.icon} class="padding-end-0-5"></calcite-icon>` || ""}<span .innerHTML=${this._processCarouselMessage(s) ?? ""} tabindex=0></span></calcite-label></calcite-carousel-item>`);
-    }), e;
+    const items = [];
+    this._carouselMessages.forEach((carouselMessage, index) => {
+      items.push(html`<calcite-carousel-item .label=${`carousel-item-${index}`}><calcite-label layout=inline scale=m>${carouselMessage.icon && html`<calcite-icon .icon=${carouselMessage.icon} class="padding-end-0-5"></calcite-icon>` || ""}<span .innerHTML=${this._processCarouselMessage(carouselMessage) ?? ""} tabindex=0></span></calcite-label></calcite-carousel-item>`);
+    });
+    return items;
   }
   _getCarouselMessages() {
-    const e = this._translations.carousel, s = [
+    const carousel = this._translations.carousel;
+    const messages = [
       {
-        message: e.stockMessage1,
+        message: carousel.stockMessage1,
         //documentation
         icon: "question"
       },
       {
-        message: e.stockMessage2,
+        message: carousel.stockMessage2,
         //solution diagram
         icon: "model"
       },
       {
-        message: e.stockMessage3,
+        message: carousel.stockMessage3,
         //rename items
         icon: "lightbulb"
       },
       {
-        message: e.stockMessage4,
+        message: carousel.stockMessage4,
         //deploy solution
         icon: "information"
       },
       {
-        message: e.stockMessage5,
+        message: carousel.stockMessage5,
         //solutions assistant
         icon: "speech-bubbles"
       },
       {
-        message: e.stockMessage6,
+        message: carousel.stockMessage6,
         //versions
         icon: "information"
       }
     ];
-    return s.sort(() => Math.random() - 0.5), s;
+    messages.sort(() => Math.random() - 0.5);
+    return messages;
   }
-  _processCarouselMessage(e) {
-    let s = e.message || "";
-    return s.includes("{{url}}") && e.url && (s = s.replace("{{url}}", e.url)), s;
+  _processCarouselMessage(carouselMessage) {
+    let processedMessage = carouselMessage.message || "";
+    if (processedMessage.includes("{{url}}") && carouselMessage.url) {
+      processedMessage = processedMessage.replace("{{url}}", carouselMessage.url);
+    }
+    return processedMessage;
   }
   renderCancelModal() {
-    return t`<calcite-panel class="panel-bg-white"><div tabindex=0>${this._translations.deploymentCancelMessage}</div></calcite-panel>`;
+    return html`<calcite-panel class="panel-bg-white"><div tabindex=0>${this._translations.deploymentCancelMessage}</div></calcite-panel>`;
   }
   renderCancellingModal() {
-    return t`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.cancelCurrentDeployment}></calcite-loader><div class="loader-text" tabindex=0>${this._translations.cancelCurrentDeployment}</div></calcite-panel>`;
+    return html`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.cancelCurrentDeployment}></calcite-loader><div class="loader-text" tabindex=0>${this._translations.cancelCurrentDeployment}</div></calcite-panel>`;
   }
   _onDialogOpen() {
-    this._confirmUnload = !0, this._carouselKey++, this._translations.carousel && (this._carouselMessages = this._getCarouselMessages()), this.deployingDialogOpened.emit(), setTimeout(() => {
-      const e = this._carouselRef.value;
-      e && e.play();
+    this._confirmUnload = true;
+    this._carouselKey++;
+    if (this._translations.carousel) {
+      this._carouselMessages = this._getCarouselMessages();
+    }
+    this.deployingDialogOpened.emit();
+    setTimeout(() => {
+      const carousel = this._carouselRef.value;
+      if (carousel) {
+        carousel.play();
+      }
     }, 100);
   }
 }
-n("solution-deploying-dialog", g);
+customElement("solution-deploying-dialog", SolutionDeployingDialog);
 export {
-  g as SolutionDeployingDialog
+  SolutionDeployingDialog
 };

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

@@ -1,38 +1,189 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as h } from "../../chunks/runtime.js";
-import { css as p, html as o } from "lit";
-import { u as m } from "../../chunks/useT9n.js";
-import { LitElement as u, createEvent as f, nothing as r, safeClassMap as g } from "@arcgis/lumina";
-import { useContextConsumer as b } from "@arcgis/lumina/context";
-import { A as x, T as v, J as y } from "../../chunks/interfaces.js";
-import { c as $ } from "../../chunks/cardsHelpers.js";
-const _ = p`calcite-card{height:100%;padding-bottom:2px;border:2px solid transparent;transition:border-color .1s ease;box-sizing:border-box}@media(max-width:400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(30%);filter:brightness(30%);-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-color:var(--calcite-color-brand);cursor:pointer}.chip-status{--calcite-chip-icon-color: var(--calcite-color-brand);cursor:pointer}.chip-deployed{--calcite-chip-icon-color: var(--calcite-color-status-success)}.hover-text{transition:.1s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%;font-size:1.2rem}.font-color-text-2{--calcite-label-text-color: var(--calcite-color-text-2)}.font-line-height{line-height:1.4}.font-size-size--1{font-size:var(--calcite-font-size--1)}.header-line-height{--calcite-label-margin-bottom: 0;margin-top:.5rem;margin-bottom:.7rem}.info-icon{--calcite-icon-color: var(--calcite-color-text-inverse);padding-inline-end:.3rem}.card-image-wrap{flex:0 0 auto}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}a{text-decoration:none;color:inherit;outline:0;padding:0;margin:0;display:inherit;height:100%}`;
-class C extends u {
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, createEvent, nothing, safeClassMap } from "@arcgis/lumina";
+import { useContextConsumer } from "@arcgis/lumina/context";
+import { A as configContext, T as TELEMETRY_CATEGORY, J as handleKeyboardAction } from "../../chunks/interfaces.js";
+import { c as convertTitleToUrlForm } from "../../chunks/cardsHelpers.js";
+const styles = css`/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+calcite-card {
+  height: 100%;
+  padding-bottom: 2px;
+  border: 2px solid transparent;
+  transition: border-color .1s ease;
+  box-sizing: border-box;
+}
+
+/* @media (max-width: 600px) {
+  calcite-card {
+    width: calc(100% / 2 - .5rem);
+  }
+} */
+
+@media (max-width: 400px) {
+  calcite-card {
+    width: 100%;
+  }
+}
+
+calcite-card:hover img {
+  /* TODO check in dark mode */
+  -webkit-filter: brightness(30%);
+  filter: brightness(30%);
+  -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-color: var(--calcite-color-brand);
+  cursor: pointer;
+}
+
+.chip-status {
+  --calcite-chip-icon-color: var(--calcite-color-brand);
+  cursor: pointer;
+}
+
+.chip-deployed {
+  --calcite-chip-icon-color: var(--calcite-color-status-success);
+}
+
+.hover-text {
+  transition: .1s ease;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  font-size: 1.2rem;
+}
+
+.font-color-text-2 {
+  --calcite-label-text-color: var(--calcite-color-text-2);
+}
+
+.font-line-height {
+  line-height: 1.4;
+}
+
+.font-size-size--1 {
+  font-size: var(--calcite-font-size--1);
+}
+
+.header-line-height {
+  --calcite-label-margin-bottom: 0;
+  margin-top: 0.5rem;
+  margin-bottom: 0.7rem;
+}
+
+.info-icon {
+  /* TODO check in dark mode...likely just want to set this to #FFFFFF */
+  --calcite-icon-color: var(--calcite-color-text-inverse);
+  padding-inline-end: .3rem;
+}
+
+.card-image-wrap {
+  flex: 0 0 auto;
+}
+
+.card-image-wrap {
+  width: 100%;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-box-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+}
+
+.card-image {
+  width: 100%;
+  display: block;
+}
+
+video,
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+img {
+  overflow-clip-margin: content-box;
+  overflow: clip;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  display: inherit;
+  height: 100%;
+}`;
+class SolutionDetailsCard extends LitElement {
   constructor() {
-    super(...arguments), this.referrerSolutionId = "", this.referrerSolutionTitle = "", this.referrerSolutionVersion = "", this.source = "all-solutions", this._translations = m({ name: "solution-details-card", blocking: !0 }), this._configContextConsumer = b({
-      context: x,
-      subscribe: !0
-    }), this.detailsCardSelected = f();
+    super(...arguments);
+    this.referrerSolutionId = "";
+    this.referrerSolutionTitle = "";
+    this.referrerSolutionVersion = "";
+    this.source = "all-solutions";
+    this._translations = useT9n({ name: "solution-details-card", blocking: true });
+    this._configContextConsumer = useContextConsumer({
+      context: configContext,
+      subscribe: true
+    });
+    this.detailsCardSelected = createEvent();
   }
   static {
-    this.properties = { card: 0, referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _translations: 16 };
+    this.properties = { card: [0, {}, { attribute: false }], referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = _;
+    this.styles = styles;
   }
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
   }
   render() {
-    const e = $(this.card.title);
-    return o`<a href=${e ?? r} @click=${this._anchorClick} tabindex=-1 .title=${`${this._translations.arcgisSolutions} | ${this.card.title}`}>${this._renderCard()}</a>`;
+    const href = convertTitleToUrlForm(this.card.title);
+    return html`<a href=${href ?? nothing} @click=${this._anchorClick} tabindex=-1 .title=${`${this._translations.arcgisSolutions} | ${this.card.title}`}>${this._renderCard()}</a>`;
   }
-  _anchorClick(e) {
-    e.preventDefault();
+  _anchorClick(evt) {
+    evt.preventDefault();
   }
   _cardSelected() {
-    if (this.source === "you-may-also-like") {
-      const t = [
+    const isRelatedSolution = this.source === "you-may-also-like";
+    if (isRelatedSolution) {
+      const dimensions = [
         this.referrerSolutionTitle,
         this.referrerSolutionId,
         this.referrerSolutionVersion,
@@ -41,26 +192,35 @@ class C extends u {
         this.card?.deployVersion || ""
       ];
       this._telemetry?.logEvent({
-        category: v.SOLUTION_DETAILS,
+        category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,
         action: "Related Solution",
-        dimensions: t
+        dimensions
       });
     }
     this.detailsCardSelected.emit(this.card);
   }
-  _renderChips(e) {
-    const t = e.includes("deployed"), c = e.filter((i) => i !== "deployed"), s = [];
-    return c.forEach((i) => {
-      const n = "chip-status", l = `solution-details-card-chip-${i}`, d = i === "new" ? "star" : "mega-phone", a = i === "new" ? this._translations.newSolution : this._translations.updated;
-      s.push(o`<calcite-chip class=${g(n)} .icon=${d} id=${l ?? r} .label=${a} .value=${a} scale=s></calcite-chip><calcite-tooltip .referenceElement=${l}><span>${a}</span></calcite-tooltip>`);
-    }), t && s.push(o`<calcite-chip class="chip-deployed" icon=check-circle id=solution-details-card-chip-deployed .label=${this._translations.deployed} .value=${this._translations.deployed} scale=s></calcite-chip><calcite-tooltip reference-element=solution-details-card-chip-deployed><span>${this._translations.deployed}</span></calcite-tooltip>`), s;
+  _renderChips(chips) {
+    const deployedChip = chips.includes("deployed");
+    const otherChips = chips.filter((chip) => chip !== "deployed");
+    const renderedChips = [];
+    otherChips.forEach((chip) => {
+      const chipClass = "chip-status";
+      const chipId = `solution-details-card-chip-${chip}`;
+      const chipIcon = chip === "new" ? "star" : "mega-phone";
+      const chipTooltip = chip === "new" ? this._translations.newSolution : this._translations.updated;
+      renderedChips.push(html`<calcite-chip class=${safeClassMap(chipClass)} .icon=${chipIcon} id=${chipId ?? nothing} .label=${chipTooltip} .value=${chipTooltip} scale=s></calcite-chip><calcite-tooltip .referenceElement=${chipId}><span>${chipTooltip}</span></calcite-tooltip>`);
+    });
+    if (deployedChip) {
+      renderedChips.push(html`<calcite-chip class="chip-deployed" icon=check-circle id=solution-details-card-chip-deployed .label=${this._translations.deployed} .value=${this._translations.deployed} scale=s></calcite-chip><calcite-tooltip reference-element=solution-details-card-chip-deployed><span>${this._translations.deployed}</span></calcite-tooltip>`);
+    }
+    return renderedChips;
   }
   _renderCard() {
-    const e = this.card;
-    return o`<calcite-card .label=${e.snippet} @click=${this._cardSelected} @keydown=${(t) => y(t, () => this._cardSelected())}><div class="card-image-wrap" slot=thumbnail><img alt=${e.title ?? r} class="thumbnail card-image" src=${e.thumbnailUrl ?? r}><div class="hover-text">${this._translations.viewDetails}</div></div><calcite-label slot=heading class="header-line-height" scale=l>${e.title}</calcite-label><p slot=description class="font-color-text-2 font-line-height font-size-size--1">${e.snippet}</p>${e.chips && e.chips.length > 0 ? o`<div slot=footer-end style="display: flex; gap: 0.5rem; justify-content: flex-end;">${this._renderChips(e.chips)}</div>` : void 0}<div slot=footer-start></div></calcite-card>`;
+    const card = this.card;
+    return html`<calcite-card .label=${card.snippet} @click=${this._cardSelected} @keydown=${(evt) => handleKeyboardAction(evt, () => this._cardSelected())}><div class="card-image-wrap" slot=thumbnail><img alt=${card.title ?? nothing} class="thumbnail card-image" src=${card.thumbnailUrl ?? nothing}><div class="hover-text">${this._translations.viewDetails}</div></div><calcite-label slot=heading class="header-line-height" scale=l>${card.title}</calcite-label><p slot=description class="font-color-text-2 font-line-height font-size-size--1">${card.snippet}</p>${card.chips && card.chips.length > 0 ? html`<div slot=footer-end style="display: flex; gap: 0.5rem; justify-content: flex-end;">${this._renderChips(card.chips)}</div>` : void 0}<div slot=footer-start></div></calcite-card>`;
   }
 }
-h("solution-details-card", C);
+customElement("solution-details-card", SolutionDetailsCard);
 export {
-  C as SolutionDetailsCard
+  SolutionDetailsCard
 };