@esri/solutions-components 5.1.0-next.109 → 5.1.0-next.110

package/dist/components/buffer-tools/customElement.d.ts

@@ -17,11 +17,13 @@ export abstract class BufferTools extends LitElement {
       meters: string;
       miles: string;
       kilometers: string;
+      unit: string;
   } & T9nMeta<{
       feet: string;
       meters: string;
       miles: string;
       kilometers: string;
+      unit: string;
   }>;
   /**
    * string: The appearance of display. Can be a 'slider' or 'text' inputs for distance/value

package/dist/components/buffer-tools/customElement.js

@@ -5,7 +5,7 @@ import { css as u, html as s } from "lit";
 import { createRef as c, ref as d } from "lit-html/directives/ref.js";
 import { LitElement as m, createEvent as n } from "@arcgis/lumina";
 import * as i from "@arcgis/core/geometry/operators/geodesicBufferOperator.js";
-import * as l from "@arcgis/core/geometry/operators/bufferOperator.js";
+import * as r from "@arcgis/core/geometry/operators/bufferOperator.js";
 const f = u`:host{display:block}.c-container{display:inline-flex}.flex-1{flex:"1"}.padding-end-1{padding-inline-end:1rem}.w-50{width:50%}`;
 class p extends m {
   constructor() {
@@ -58,15 +58,15 @@ class p extends m {
   }
   _buffer() {
     this.disabled ? this.bufferComplete.emit(void 0) : (this._bufferTimeout && clearTimeout(this._bufferTimeout), this._bufferTimeout = setTimeout(async () => {
-      if (this.geometries?.length > 0 && this.unit && this.distance > 0 && i && l) {
+      if (this.geometries?.length > 0 && this.unit && this.distance > 0 && i && r) {
         i.isLoaded() || await i.load();
-        const e = this.geometries[0].spatialReference, a = this.geometries, r = e.isWGS84 || e.isWebMercator ? i.executeMany(a, [this.distance], { union: this.unionResults, unit: this.unit }) : l.executeMany(a, [this.distance], { unit: this.unit, union: this.unionResults });
-        this.bufferComplete.emit(r);
+        const e = this.geometries[0].spatialReference, a = this.geometries, l = e.isWGS84 || e.isWebMercator ? i.executeMany(a, [this.distance], { union: this.unionResults, unit: this.unit }) : r.executeMany(a, [this.distance], { unit: this.unit, union: this.unionResults });
+        this.bufferComplete.emit(l);
       }
     }, 400));
   }
   _getTextBoxDisplay() {
-    return s`<div class="c-container"><calcite-input class="padding-end-1 w-50" .max=${this.max && this.max > 0 ? this.max : void 0} .min=${this.min} number-button-type=vertical @calciteInputInput=${this._setDistance} placeholder=0 type=number .value=${this.distance ? this.distance.toString() : void 0}></calcite-input><calcite-select class="flex-1 w-50" label=label @calciteSelectChange=${() => {
+    return s`<div class="c-container"><calcite-input class="padding-end-1 w-50" .max=${this.max && this.max > 0 ? this.max : void 0} .min=${this.min} number-button-type=vertical @calciteInputInput=${this._setDistance} placeholder=0 type=number .value=${this.distance ? this.distance.toString() : void 0}></calcite-input><calcite-select class="flex-1 w-50" .label=${this._translations.unit} @calciteSelectChange=${() => {
       this._unitElement?.value && this._setUnit(this._unitElement?.value.value);
     }} ${d(this._unitElement)}>${this._getUnits()}</calcite-select></div>`;
   }

package/dist/components/card-manager/customElement.d.ts

@@ -17,12 +17,14 @@ export abstract class CardManager extends LitElement {
       createFeature: string;
       createRecord: string;
       create: string;
+      back: string;
   } & T9nMeta<{
       selectFeaturesToStart: string;
       selectFeaturesFromMapToStart: string;
       createFeature: string;
       createRecord: string;
       create: string;
+      back: string;
   }>;
   /**
    * string: Label to show for create button

package/dist/components/card-manager/customElement.js

@@ -39,7 +39,7 @@ class C extends F {
   }
   render() {
     const e = this._graphics?.length > 0 ? "" : "display-none", t = this._graphics?.length === 0 && this._showCreateFeatureComponent ? "" : "display-none", i = this._graphics?.length > 0 || this._showCreateFeatureComponent ? "display-none" : "", s = this.layerOrTable?.isTable, l = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart, n = this.enableCreateFeatures && this.layerOrTable?.capabilities?.operations?.supportsAdd, o = this.createBtnLabel ? this.createBtnLabel : s ? this._translations.createRecord : this._translations.createFeature, c = !this.layerOrTable, h = this.enableSnapping && !this.layerOrTable?.isTable;
-    return a`<div class="overflow-auto height-full"><calcite-shell class=${`position-relative ${e}`}><div class="position-static z-index-500 height-full"><info-card .allowEditing=${this.layerOrTable?.editingEnabled} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${h} .graphics=${this._graphics} .isLoading=${this._cardLoading} .isMobile=${this.isMobile} .mapView=${this.mapView} position=relative show-close-btn></info-card></div></calcite-shell><calcite-shell class=${`position-relative ${i}`}><calcite-panel><div class=padding-1><calcite-notice .icon=${this.selectingFeatureFromMap ? "map" : "table"} icon-flip-rtl open><div slot=message>${l}</div></calcite-notice></div>${!this.isMobile && n && a`<calcite-button .disabled=${c} @click=${() => this._createFeatureBtnClicked()} slot=footer width=full>${o}</calcite-button>` || ""}</calcite-panel></calcite-shell><calcite-shell class=${`position-relative ${t}`}><calcite-flow-item selected><calcite-panel .heading=${o}><calcite-action appearance=solid class="back-button hydrated" icon=chevron-left @click=${this._backFromCreateFeature} scale=s slot=header-actions-start text></calcite-action>${this.getEditorComponent()}${this._showSubmitBtn && a`<calcite-button appearance=solid class="footer-top-button footer-button" @click=${() => this._createFeature.value && void this._createFeature.value.submit()} slot=footer width=full>${this._translations.create}</calcite-button>` || ""}</calcite-panel></calcite-flow-item></calcite-shell></div>`;
+    return a`<div class="overflow-auto height-full"><calcite-shell class=${`position-relative ${e}`}><div class="position-static z-index-500 height-full"><info-card .allowEditing=${this.layerOrTable?.editingEnabled} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${h} .graphics=${this._graphics} .isLoading=${this._cardLoading} .isMobile=${this.isMobile} .mapView=${this.mapView} position=relative show-close-btn></info-card></div></calcite-shell><calcite-shell class=${`position-relative ${i}`}><calcite-panel><div class=padding-1><calcite-notice .icon=${this.selectingFeatureFromMap ? "map" : "table"} icon-flip-rtl open><div slot=message>${l}</div></calcite-notice></div>${!this.isMobile && n && a`<calcite-button .disabled=${c} @click=${() => this._createFeatureBtnClicked()} slot=footer width=full>${o}</calcite-button>` || ""}</calcite-panel></calcite-shell><calcite-shell class=${`position-relative ${t}`}><calcite-flow-item selected><calcite-panel .heading=${o}><calcite-action appearance=solid class="back-button hydrated" icon=chevron-left @click=${this._backFromCreateFeature} scale=s slot=header-actions-start .text=${this._translations.back}></calcite-action>${this.getEditorComponent()}${this._showSubmitBtn && a`<calcite-button appearance=solid class="footer-top-button footer-button" @click=${() => this._createFeature.value && void this._createFeature.value.submit()} slot=footer width=full>${this._translations.create}</calcite-button>` || ""}</calcite-panel></calcite-flow-item></calcite-shell></div>`;
   }
   getEditorComponent() {
     const e = this.enableSnapping && !this.layerOrTable?.isTable && this.enableCreateFeatures;

package/dist/components/create-feature/customElement.js

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as v } from "../../chunks/runtime.js";
-import { a as b, g as _ } from "../../chunks/mapViewUtils.js";
+import { a as b, g as w } from "../../chunks/mapViewUtils.js";
 import { u as M } from "../../chunks/useT9n.js";
-import { css as I, html as c, nothing as w } from "lit";
+import { css as I, html as c, nothing as f } from "lit";
 import { createRef as p, ref as m } from "lit-html/directives/ref.js";
-import { LitElement as A, createEvent as h, noShadowRoot as L, safeClassMap as f } from "@arcgis/lumina";
+import { LitElement as A, createEvent as h, noShadowRoot as L, safeClassMap as _ } from "@arcgis/lumina";
 import { p as V } from "../../chunks/queryUtils.js";
 import x from "@arcgis/core/widgets/Editor.js";
 import k from "@arcgis/core/form/ExpressionInfo.js";
@@ -93,7 +93,7 @@ class D extends A {
     const d = this._imageAnalysisInfo?.canUseAI && ["chooseReportType", "analyzingImage", "imageUpload"].includes(this._currentPage);
     return this._inValidGeomtryDrawn ? n = this.reportingAreaMessage || this._translations.reportOutsideAreaMessage : this._currentPage === "drawing" || this._currentPage === "editing" ? n = this._translations.provideLocationMsg : this._currentPage === "featureForm" ? n = this._imageAnalysisInfo?.results?.filter((u) => u.success).length ? this._translations.formReviewMsg : this._translations.provideDetailsMsg : o && (n = this._translations.enableFeatureTemplatesMessage), c`${this._imageAnalysisFailed && c`<calcite-alert auto-close icon=x-octagon kind=danger label @calciteAlertClose=${() => {
       this._imageAnalysisFailed = !1;
-    }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.imageExtractionError}</div></calcite-alert>` || ""}${d && c`<calcite-panel>${this._currentPage === "chooseReportType" && this._getReportTypePage() || ""}${this._currentPage === "imageUpload" && this._aiImageExtractionPage() || ""}${this._currentPage === "analyzingImage" && this._getAnalyzingImagePage() || ""}</calcite-panel>` || ""}${!d && c`${l && c`<calcite-notice class="notice-msg" .icon=${r} .kind=${s} open ${m(this._calciteNotice)}><div slot=message .innerHTML=${n ?? ""} ${m(this._guidingMessageRefNode)}></div></calcite-notice>` || ""}${this._selectedImageBase64 && this._currentPage === "featureForm" && c`<div class="image-preview-container"><calcite-label>${this._translations.photo}</calcite-label><img class="width-full" src=${this._selectedImageBase64 ?? w}></div>` || ""}<calcite-loader class=${f(i)} label scale=s></calcite-loader>${this._currentPage === "featureForm" && this.isMobile && c`<calcite-button appearance=transparent class="edit-location-btn" icon-start=pin @click=${this.editLocation}>${this._translations.editLocationLabel}</calcite-button>` || ""}<div class=${f(t)} id=feature-form></div>${this.enableSearch && c`<div class=${`search-widget ${e} ${t}`} id=search-widget-ref ${m(this._searchDiv)}></div>` || ""}` || ""}<div class=${f(a)} ${m(this._mapViewContainer)}></div>`;
+    }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.imageExtractionError}</div></calcite-alert>` || ""}${d && c`<calcite-panel>${this._currentPage === "chooseReportType" && this._getReportTypePage() || ""}${this._currentPage === "imageUpload" && this._aiImageExtractionPage() || ""}${this._currentPage === "analyzingImage" && this._getAnalyzingImagePage() || ""}</calcite-panel>` || ""}${!d && c`${l && c`<calcite-notice class="notice-msg" .icon=${r} .kind=${s} open ${m(this._calciteNotice)}><div slot=message .innerHTML=${n ?? ""} ${m(this._guidingMessageRefNode)}></div></calcite-notice>` || ""}${this._selectedImageBase64 && this._currentPage === "featureForm" && c`<div class="image-preview-container"><calcite-label>${this._translations.photo}</calcite-label><img alt=${this._translations.photo ?? f} class="width-full" src=${this._selectedImageBase64 ?? f}></div>` || ""}<calcite-loader class=${_(i)} label scale=s></calcite-loader>${this._currentPage === "featureForm" && this.isMobile && c`<calcite-button appearance=transparent class="edit-location-btn" icon-start=pin @click=${this.editLocation}>${this._translations.editLocationLabel}</calcite-button>` || ""}<div class=${_(t)} id=feature-form></div>${this.enableSearch && c`<div class=${`search-widget ${e} ${t}`} id=search-widget-ref ${m(this._searchDiv)}></div>` || ""}` || ""}<div class=${_(a)} ${m(this._mapViewContainer)}></div>`;
   }
   async init() {
     this.mapView && this.selectedLayerId && (this._updatedMapView = this.mapView, await (this.isMobile && this.updateMapPosition ? this.createMobileMapView() : this._loadWidgets()));
@@ -121,13 +121,13 @@ class D extends A {
   _getReportTypePage() {
     return c`<div class="report-selection-container"><calcite-label>${this._translations.createReportHeading}</calcite-label><calcite-card class="cursor-pointer" @click=${() => {
       this.progressStatus.emit(35), this._currentPage = "imageUpload";
-    }}><div slot=description class="card-body-content"><calcite-icon icon=effects scale=m style="color: var(--calcite-ui-text-2)"></calcite-icon><div class="text-stack"><span class="option-title">${this._translations.aiImgExtractionLabel}</span><span class="option-description">${this._translations.aiAssistantDescription}</span></div></div></calcite-card><calcite-card class="cursor-pointer" @click=${() => {
+    }}><div slot=description class="card-body-content"><calcite-icon aria-hidden=true icon=effects scale=m style="color: var(--calcite-ui-text-2)"></calcite-icon><div class="text-stack"><span class="option-title">${this._translations.aiImgExtractionLabel}</span><span class="option-description">${this._translations.aiAssistantDescription}</span></div></div></calcite-card><calcite-card class="cursor-pointer" @click=${() => {
       this._currentPage = "templatePicker", this.init();
-    }}><div slot=description class="card-body-content"><calcite-icon icon=pencil scale=m></calcite-icon><div class="text-stack"><span class="option-title">${this._translations.fillOutManually}</span><span class="option-description">${this._translations.startBlank}</span></div></div></calcite-card></div>`;
+    }}><div slot=description class="card-body-content"><calcite-icon aria-hidden=true icon=pencil scale=m></calcite-icon><div class="text-stack"><span class="option-title">${this._translations.fillOutManually}</span><span class="option-description">${this._translations.startBlank}</span></div></div></calcite-card></div>`;
   }
   _aiImageExtractionPage() {
     const e = this._selectedImageBase64 !== "", i = e ? this._translations.replaceImage : this._translations.imageUploadLimitHint;
-    return c`<calcite-notice class="notice-msg" icon=effects kind=brand open><div slot=message>${this._translations.aiAssistantProcessingHint}</div></calcite-notice><div class="padding-10"><calcite-label><div>${this._translations.photo}<span style="color: var(--calcite-color-status-danger)">*</span></div><calcite-input type=file accept="image/*;capture=camera" @calciteInputInput=${this._onImageUpload} ${m(this._inputImageForAI)}></calcite-input></calcite-label><div class="info-container"><calcite-icon icon=information scale=s></calcite-icon><span>${i}</span></div>${e && c`<img class="width-full" src=${this._selectedImageBase64 ?? w}>` || ""}</div><div slot=footer class="upload-img-footer-container"><calcite-button width=full .disabled=${!e} id=next-btn @click=${this._analyzeImage}>${this._translations.next}</calcite-button><calcite-button width=full appearance=outline kind=brand @click=${() => this.modeChanged.emit()}>${this._translations.cancel}</calcite-button></div>`;
+    return c`<calcite-notice class="notice-msg" icon=effects kind=brand open><div slot=message>${this._translations.aiAssistantProcessingHint}</div></calcite-notice><div class="padding-10"><calcite-label><div>${this._translations.photo}<span style="color: var(--calcite-color-status-danger)">*</span></div><calcite-input type=file accept="image/*;capture=camera" @calciteInputInput=${this._onImageUpload} ${m(this._inputImageForAI)}></calcite-input></calcite-label><div class="info-container"><calcite-icon aria-hidden=true icon=information scale=s></calcite-icon><span>${i}</span></div>${e && c`<img alt=${this._translations.photo ?? f} class="width-full" src=${this._selectedImageBase64 ?? f}>` || ""}</div><div slot=footer class="upload-img-footer-container"><calcite-button width=full .disabled=${!e} id=next-btn @click=${this._analyzeImage}>${this._translations.next}</calcite-button><calcite-button width=full appearance=outline kind=brand @click=${() => this.modeChanged.emit()}>${this._translations.cancel}</calcite-button></div>`;
   }
   _getAnalyzingImagePage() {
     return c`<div class="analysis-wrapper"><calcite-label layout=inline><calcite-icon class="analyzing-icon" icon=effects scale=s></calcite-icon><span>${this._translations.analyzingImage}</span></calcite-label><calcite-button class="skip-btn" appearance=transparent @click=${() => {
@@ -221,7 +221,7 @@ class D extends A {
     this._editor && this._editor.destroy();
     const e = [];
     this._container = document.createElement("div"), this._container?.classList.add("display-none"), this.enableSnapping || this._container.classList.add("hide-editor-toolbar");
-    const i = this._updatedMapView && await b(this._updatedMapView), t = this.mapView && await _(this.mapView, this.selectedLayerId);
+    const i = this._updatedMapView && await b(this._updatedMapView), t = this.mapView && await w(this.mapView, this.selectedLayerId);
     if (t && (this._selectedLayer = t, !this._selectedLayer?.isTable && i && i.forEach((a) => {
       e.push({
         layer: a,
@@ -275,7 +275,7 @@ class D extends A {
     }
   }
   async queryIntersectingFeatures() {
-    const e = this.mapView && await _(this.mapView, this.reportingAreaLayer);
+    const e = this.mapView && await w(this.mapView, this.reportingAreaLayer);
     if (e) {
       const i = e.createQuery();
       i.geometry = this._drawnGeometry, i.spatialRelationship = "intersects";

package/dist/components/create-related-feature/customElement.d.ts

@@ -12,7 +12,13 @@ export abstract class CreateRelatedFeature extends LitElement {
    *
    * @internal
    */
-  protected _translations: { provideDetailsMsg: string; } & T9nMeta<{ provideDetailsMsg: string; }>;
+  protected _translations: {
+      provideDetailsMsg: string;
+      loading: string;
+  } & T9nMeta<{
+      provideDetailsMsg: string;
+      loading: string;
+  }>;
   /**
    * boolean: Set this to true when have a custom submit button in the app.
    * This will hide the header and footer elements of the editor and user needs to execute the submit method manually.

package/dist/components/create-related-feature/customElement.js

@@ -2,13 +2,13 @@
 import { c as u } from "../../chunks/runtime.js";
 import { u as m } from "../../chunks/useT9n.js";
 import { css as p, html as c } from "lit";
-import { LitElement as f, createEvent as n, noShadowRoot as w, safeClassMap as b } from "@arcgis/lumina";
+import { LitElement as f, createEvent as d, noShadowRoot as w, safeClassMap as b } from "@arcgis/lumina";
 import y from "@arcgis/core/widgets/Editor.js";
 import * as l from "@arcgis/core/core/reactiveUtils.js";
 const _ = p`@layer{:host{display:block}.hide-editor-toolbar .esri-editor__panel-toolbar,.display-none{display:none!important}.esri-editor__panel-content{padding-block:10px!important}.notice-msg{padding:10px;width:calc(100% - 20px)}}`;
 class g extends f {
   constructor() {
-    super(...arguments), this.customizeSubmit = !1, this.enableSnapping = !1, this.showGuidingMsg = !0, this._editorLoading = !1, this._translations = m({ name: "create-related-feature", blocking: !0 }), this._addingAttachment = !1, this._isSubmitBtnClicked = !1, this.success = n(), this.fail = n(), this.isActionPending = n(), this.formReady = n();
+    super(...arguments), this.customizeSubmit = !1, this.enableSnapping = !1, this.showGuidingMsg = !0, this._editorLoading = !1, this._translations = m({ name: "create-related-feature", blocking: !0 }), this._addingAttachment = !1, this._isSubmitBtnClicked = !1, this.success = d(), this.fail = d(), this.isActionPending = d(), this.formReady = d();
   }
   static {
     this.properties = { customizeSubmit: 5, enableSnapping: 5, mapView: 0, selectedFeature: 0, showGuidingMsg: 5, table: 0, _editorLoading: 16, _translations: 16 };
@@ -38,7 +38,7 @@ class g extends f {
   }
   render() {
     const e = this._editorLoading ? "" : "display-none";
-    return c`${this.showGuidingMsg && c`<calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.provideDetailsMsg}</div></calcite-notice>` || ""}<calcite-loader class=${b(e)} label scale=s></calcite-loader>`;
+    return c`${this.showGuidingMsg && c`<calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.provideDetailsMsg}</div></calcite-notice>` || ""}<calcite-loader class=${b(e)} .label=${this._translations.loading} scale=s></calcite-loader>`;
   }
   loaded() {
     this.init();
@@ -78,10 +78,10 @@ class g extends f {
         const r = (await e.queryFeatures({
           objectIds: [s],
           outFields: [e.objectIdField, a.keyField]
-        })).features[0], d = t.templates[0], h = {
+        })).features[0], n = t.templates[0], h = {
           attributeOverrides: this.makeAttributesForRelatedFeature(r, a, i),
           layer: t,
-          template: d
+          template: n
         };
         await this._editor?.startCreateFeaturesWorkflowAtFeatureCreation(h), await this.hideEditorsElements(), this._editor?.viewModel?.featureFormViewModel?.addHandles(this._editor.viewModel.featureFormViewModel.on("submit", this.submitted.bind(this)));
       }
@@ -98,7 +98,7 @@ class g extends f {
     let s;
     e.attributes.hasOwnProperty(i) ? s = e.getAttribute(i) : e.attributes.hasOwnProperty(i.toLowerCase()) ? s = e.getAttribute(i.toLowerCase()) : e.attributes.hasOwnProperty(i.toUpperCase()) && (s = e.getAttribute(i.toUpperCase()));
     let o = a.keyField;
-    const r = this.table?.fields.find((d) => d.name.toLocaleLowerCase() === o.toLocaleLowerCase());
+    const r = this.table?.fields.find((n) => n.name.toLocaleLowerCase() === o.toLocaleLowerCase());
     if (r)
       return o = r.name, {
         [o]: s

package/dist/components/crowdsource-manager/customElement.d.ts

@@ -13,6 +13,7 @@ export abstract class CrowdsourceManager extends LitElement {
   protected _translations: {
       open: string;
       close: string;
+      coverPage: string;
       information: string;
       expandPopup: string;
       collapsePopup: string;
@@ -28,6 +29,7 @@ export abstract class CrowdsourceManager extends LitElement {
   } & T9nMeta<{
       open: string;
       close: string;
+      coverPage: string;
       information: string;
       expandPopup: string;
       collapsePopup: string;

package/dist/components/crowdsource-manager/customElement.js

@@ -128,7 +128,7 @@ class F extends M {
   }
   _getBody(e, t, i) {
     const a = e === "HORIZONTAL" ? "" : "display-flex", s = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", o = document.dir === "rtl" ? "left-0" : "right-0";
-    return l`<calcite-panel class="width-full height-full position-absolute"><div class=${`width-full height-full overflow-hidden ${a}`}>${this._getMapAndCard(e, t, i)}${this._getTable(e, t, i)}</div>${this.coverPageEnabled && l`<div class=${`floating-container ${o}`} @click=${this.coverPageButtonClick}><calcite-button appearance=solid class=${`floating-button ${s}`} icon-start=content-minimal kind=neutral label round scale=l split-child=primary width=auto></calcite-button></div>` || ""}${this.introductionWindowEnabled && l`<div class=${`floating-container ${o}`} @click=${this.infoButtonClick}><calcite-button appearance=solid class=${`floating-button ${s}`} icon-start=information-letter kind=neutral label round scale=l split-child=primary width=auto></calcite-button></div>` || ""}</calcite-panel>`;
+    return l`<calcite-panel class="width-full height-full position-absolute"><div class=${`width-full height-full overflow-hidden ${a}`}>${this._getMapAndCard(e, t, i)}${this._getTable(e, t, i)}</div>${this.coverPageEnabled && l`<div class=${`floating-container ${o}`} @click=${this.coverPageButtonClick}><calcite-button appearance=solid class=${`floating-button ${s}`} icon-start=content-minimal kind=neutral .label=${this._translations.coverPage} round scale=l split-child=primary width=auto></calcite-button></div>` || ""}${this.introductionWindowEnabled && l`<div class=${`floating-container ${o}`} @click=${this.infoButtonClick}><calcite-button appearance=solid class=${`floating-button ${s}`} icon-start=information-letter kind=neutral .label=${this._translations.information} round scale=l split-child=primary width=auto></calcite-button></div>` || ""}</calcite-panel>`;
   }
   infoButtonClick() {
     this.showIntroductionWindow.emit();
@@ -151,7 +151,7 @@ class F extends M {
       "--calcite-color-surface-3": this.popupHeaderHoverColor,
       "--calcite-color-text-3": this.popupHeaderTextColor,
       "--calcite-color-text-2": this.popupHeaderTextColor
-    })}><calcite-panel>${!this._isMobile && this._showInformationHeader || this._numSelected > 0 && !this._isMobile ? l`<div class=${`display-flex align-items-center ${t}`} slot=header-content><calcite-icon icon=information scale=s></calcite-icon><div class="padding-inline-start-75">${this._translations.information}</div></div>` : l`<div></div>`}${this._getCardNode()}</calcite-panel></div>`;
+    })}><calcite-panel>${!this._isMobile && this._showInformationHeader || this._numSelected > 0 && !this._isMobile ? l`<div class=${`display-flex align-items-center ${t}`} slot=header-content><calcite-icon aria-hidden=true icon=information scale=s></calcite-icon><div class="padding-inline-start-75">${this._translations.information}</div></div>` : l`<div></div>`}${this._getCardNode()}</calcite-panel></div>`;
   }
   _getCardNode() {
     const e = this.appLayout === "mapView", t = this.appLayout === "tableView", i = this._isMobile ? "height-full" : t && this._currentMapInfos?.length > 1 ? "adjusted-height-100-51" : e || t ? "height-full" : this._numSelected > 0 && !this._isMobile ? "height-50" : this._showInformationHeader ? this._isMobile ? "height-full" : "height-50" : "adjusted-height-50_25", a = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", s = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._relatedTableLayer : this._layer;
@@ -169,11 +169,11 @@ class F extends M {
     const i = this._getDividerIcon(e, t), a = t ? this._translations.close : this._translations.open, s = "toggle-layout";
     return l`<calcite-action .active=${this.appLayout === "splitView"} alignment=center appearance=solid class="toggle-node" icon=browser id=browser-action @click=${() => {
       this.appLayout = "splitView";
-    }} text></calcite-action><calcite-tooltip placement=right reference-element=browser-action><span>${this._translations.splitView}</span></calcite-tooltip><calcite-action .active=${this.appLayout === "tableView"} alignment=center appearance=solid class="toggle-node" icon=dock-left id=dock-left-action @click=${() => {
+    }} .text=${this._translations.splitView}></calcite-action><calcite-tooltip placement=right reference-element=browser-action><span>${this._translations.splitView}</span></calcite-tooltip><calcite-action .active=${this.appLayout === "tableView"} alignment=center appearance=solid class="toggle-node" icon=dock-left id=dock-left-action @click=${() => {
       this.appLayout = "tableView";
-    }} text></calcite-action><calcite-tooltip placement=right reference-element=dock-left-action><span>${this._translations.tableView}</span></calcite-tooltip><calcite-action .active=${this.appLayout === "mapView"} alignment=center appearance=solid class="toggle-node" .disabled=${this._layer?.isTable} icon=browser-map id=browser-map-action @click=${() => {
+    }} .text=${this._translations.tableView}></calcite-action><calcite-tooltip placement=right reference-element=dock-left-action><span>${this._translations.tableView}</span></calcite-tooltip><calcite-action .active=${this.appLayout === "mapView"} alignment=center appearance=solid class="toggle-node" .disabled=${this._layer?.isTable} icon=browser-map id=browser-map-action @click=${() => {
       this.appLayout = "mapView";
-    }} text></calcite-action><calcite-tooltip placement=right reference-element=browser-map-action><span>${this._translations.mapView}</span></calcite-tooltip><calcite-action alignment=center appearance=solid class="toggle-node" .icon=${i} id=${s} @click=${() => this._toggleLayout()} slot=actions-end text></calcite-action><calcite-tooltip placement=bottom .referenceElement=${s}><span>${a}</span></calcite-tooltip>`;
+    }} .text=${this._translations.mapView}></calcite-action><calcite-tooltip placement=right reference-element=browser-map-action><span>${this._translations.mapView}</span></calcite-tooltip><calcite-action alignment=center appearance=solid class="toggle-node" .icon=${i} id=${s} @click=${() => this._toggleLayout()} slot=actions-end .text=${a}></calcite-action><calcite-tooltip placement=bottom .referenceElement=${s}><span>${a}</span></calcite-tooltip>`;
   }
   _deleteModal() {
     const e = (this._layerTable.value?.selectedRelatedIds?.length ?? 0) > 0 ? this._relatedTableLayer : this._layer;

package/dist/components/crowdsource-reporter/customElement.d.ts

@@ -42,6 +42,10 @@ export abstract class CrowdsourceReporter extends LitElement {
       close: string;
       submitBelow: string;
       noResultsMsg: string;
+      loading: string;
+      notification: string;
+      sortOptions: string;
+      toggleListView: string;
   } & T9nMeta<{
       createReportButtonText: string;
       share: string;
@@ -73,6 +77,10 @@ export abstract class CrowdsourceReporter extends LitElement {
       close: string;
       submitBelow: string;
       noResultsMsg: string;
+      loading: string;
+      notification: string;
+      sortOptions: string;
+      toggleListView: string;
   }>;
   /** array: Configured AI image extraction field and prompt for the selected LayerId */
   accessor aiImageExtraction: IImageExtraction[];

package/dist/components/crowdsource-reporter/customElement.js

@@ -81,13 +81,13 @@ class M extends $ {
   }
   render() {
     const e = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return a`${this._reportSubmitted && a`<calcite-alert auto-close class=${`${e} report-submitted-msg`} icon=check-circle kind=success label @calciteAlertClose=${() => {
+    return a`${this._reportSubmitted && a`<calcite-alert auto-close class=${`${e} report-submitted-msg`} icon=check-circle kind=success .label=${this._translations.notification} @calciteAlertClose=${() => {
       this._reportSubmitted = !1;
-    }} open placement=top><div slot=message .innerHTML=${(this.reportSubmittedMessage || this._translations.submitMsg) ?? ""} ${n(this._reportSubmittedAlertNode)}></div></calcite-alert>` || ""}${this._featureCreationFailedErrorMsg && a`<calcite-alert auto-close class=${g(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=message .innerHTML=${(this.reportSubmittedMessage || this._translations.submitMsg) ?? ""} ${n(this._reportSubmittedAlertNode)}></div></calcite-alert>` || ""}${this._featureCreationFailedErrorMsg && a`<calcite-alert auto-close class=${g(e)} icon=x-octagon kind=danger .label=${this._translations.notification} @calciteAlertClose=${() => {
       this._featureCreationFailedErrorMsg = "";
-    }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${this._featureCreationFailedErrorMsg}</div></calcite-alert>` || ""}${this._commentSubmitted && a`<calcite-alert auto-close class=${`report-submitted ${e}`} icon=check-circle kind=success label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${this._featureCreationFailedErrorMsg}</div></calcite-alert>` || ""}${this._commentSubmitted && a`<calcite-alert auto-close class=${`report-submitted ${e}`} icon=check-circle kind=success .label=${this._translations.notification} @calciteAlertClose=${() => {
       this._commentSubmitted = !1;
-    }} open placement=top><div slot=message .innerHTML=${(this.commentSubmittedMessage || this._translations.commentSubmittedMsg) ?? ""} ${n(this._commentSubmittedAlertNode)}></div></calcite-alert>` || ""}${this._addingCommentFailed && a`<calcite-alert auto-close class=${g(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=message .innerHTML=${(this.commentSubmittedMessage || this._translations.commentSubmittedMsg) ?? ""} ${n(this._commentSubmittedAlertNode)}></div></calcite-alert>` || ""}${this._addingCommentFailed && a`<calcite-alert auto-close class=${g(e)} icon=x-octagon kind=danger .label=${this._translations.notification} @calciteAlertClose=${() => {
       this._addingCommentFailed = !1;
     }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.addingCommentFailedMsg}</div></calcite-alert>` || ""}<div><calcite-shell content-behind>${this._getReporter()}</calcite-shell></div>${this.isMobile && this.filterModal() || ""}`;
   }
@@ -133,7 +133,7 @@ class M extends $ {
       }
     });
     const t = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return a`<calcite-panel class=${`width-full ${t}`}>${this.mapView ? a`<calcite-flow>${e?.length > 0 && e || ""}</calcite-flow>` : a`<calcite-loader label scale=m></calcite-loader>`}</calcite-panel>`;
+    return a`<calcite-panel class=${`width-full ${t}`}>${this.mapView ? a`<calcite-flow>${e?.length > 0 && e || ""}</calcite-flow>` : a`<calcite-loader .label=${this._translations.loading} scale=m></calcite-loader>`}</calcite-panel>`;
   }
   filterModal() {
     return (this.layerExpressions ? this.layerExpressions.filter((t) => t.id === this._selectedLayerId) : []).length > 0 && a`<calcite-dialog aria-labelledby=modal-title class="modal" .heading=${this._translations.filterLayerTitle.replace("{{title}}", this._selectedLayerName)} kind=brand @calciteDialogClose=${() => {
@@ -166,7 +166,7 @@ class M extends $ {
   }
   _toggleSort() {
     const e = this.reportingOptions && this.reportingOptions[this._selectedLayerId] && this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-    return a`<calcite-popover auto-close label offset-distance=0 .placement=${this.isMobile ? "leading-start" : "bottom-start"} pointer-disabled reference-element=sort-popover ${n(this._sortPopoverNode)}><calcite-list label selection-mode=single-persist><calcite-list-item .label=${this._translations.sortNewest} @calciteListItemSelect=${() => {
+    return a`<calcite-popover auto-close .label=${this._translations.sortOptions} offset-distance=0 .placement=${this.isMobile ? "leading-start" : "bottom-start"} pointer-disabled reference-element=sort-popover ${n(this._sortPopoverNode)}><calcite-list .label=${this._translations.sortOptions} selection-mode=single-persist><calcite-list-item .label=${this._translations.sortNewest} @calciteListItemSelect=${() => {
       this._selectedLayer && this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "newest");
     }} .selected=${this._updatedSortOption === "newest"} value=newest></calcite-list-item><calcite-list-item .label=${this._translations.sortOldest} @calciteListItemSelect=${() => {
       this._selectedLayer && this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "oldest");
@@ -341,7 +341,7 @@ class M extends $ {
     }} .reportingOptions=${this.reportingOptions} .showFullCommentTitle=${this.showFullCommentTitle} .showUserImageInCommentsList=${this.showUserImageInCommentsList} ${n(this._featureDetails)}></feature-details>${t && a`<calcite-button appearance=solid @click=${this.showAddCommentsPanel} slot=footer width=full>${this.commentButtonText || this._translations.comment}</calcite-button>` || ""}</calcite-panel></calcite-flow-item>`;
   }
   getFeaturesPagination() {
-    return a`<div class="feature-pagination"><div><calcite-button appearance=transparent icon-start=chevron-left icon-flip-rtl=both id=solutions-back @click=${() => this._featureDetails.value && void this._featureDetails.value.back()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-button appearance=transparent @click=${() => this._featureDetails.value && void this._featureDetails.value.toggleListView()} scale=s><span class="pagination-count">${this._getCount()}</span></calcite-button><div><calcite-button appearance=transparent icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._featureDetails.value && void this._featureDetails.value.next()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>`;
+    return a`<div class="feature-pagination"><div><calcite-button appearance=transparent icon-start=chevron-left icon-flip-rtl=both id=solutions-back .label=${this._translations.back} @click=${() => this._featureDetails.value && void this._featureDetails.value.back()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-button appearance=transparent .label=${this._translations.toggleListView} @click=${() => this._featureDetails.value && void this._featureDetails.value.toggleListView()} scale=s><span class="pagination-count">${this._getCount()}</span></calcite-button><div><calcite-button appearance=transparent icon-flip-rtl=both icon-start=chevron-right id=solutions-next .label=${this._translations.next} @click=${() => this._featureDetails.value && void this._featureDetails.value.next()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>`;
   }
   getCommentDetailsFlowItem() {
     return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._relatedTable?.title || ""} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "comment-details"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<calcite-panel><info-card .enableSnapping=${this.enableSnapping} .graphics=${this._selectedRelatedFeature} .mapView=${this.mapView} @selectionChanged=${() => {

package/dist/components/deduct-calculator/customElement.js

@@ -5,7 +5,7 @@ import { E as i, a as c, c as p } from "../../chunks/pciUtils.js";
 import { createRef as s, ref as n } from "lit-html/directives/ref.js";
 import { LitElement as m, createEvent as y } from "@arcgis/lumina";
 const d = o`:host{display:block;--calcite-label-margin-bottom: 0}.label-display{display:block;padding-bottom:1rem}`;
-class b extends m {
+class v extends m {
   constructor() {
     super(...arguments), this._densityElement = s(), this._typeElement = s(), this._severityElement = s(), this._types = Object.keys(i).filter((e) => !Number.isNaN(Number(i[e]))), this.deductValueComplete = y();
   }
@@ -19,10 +19,10 @@ class b extends m {
     return l`<calcite-input max=100 min=0 type=number ${n(this._densityElement)}></calcite-input>`;
   }
   _getTypeInput() {
-    return l`<calcite-select label ${n(this._typeElement)}>${this._types.map((e, t) => l`<calcite-option .value=${i[e].toString()}>${`${e} (${t + 1})`}</calcite-option>`)}</calcite-select>`;
+    return l`<calcite-select label=Type ${n(this._typeElement)}>${this._types.map((e, t) => l`<calcite-option .value=${i[e].toString()}>${`${e} (${t + 1})`}</calcite-option>`)}</calcite-select>`;
   }
   _getSeverityInput() {
-    return l`<calcite-select label ${n(this._severityElement)}><calcite-option .value=${c.H}>\r\n          High</calcite-option><calcite-option .value=${c.M}>\r\n          Medium</calcite-option><calcite-option .value=${c.L}>\r\n          Low</calcite-option></calcite-select>`;
+    return l`<calcite-select label=Severity ${n(this._severityElement)}><calcite-option .value=${c.H}>\r\n          High</calcite-option><calcite-option .value=${c.M}>\r\n          Medium</calcite-option><calcite-option .value=${c.L}>\r\n          Low</calcite-option></calcite-select>`;
   }
   _getCalculateInput() {
     const e = this._typeElement.value && Number.parseFloat(this._typeElement.value.value), t = this._severityElement.value && this._severityElement.value.value, a = this._densityElement.value && Number.parseFloat(this._densityElement.value.value);
@@ -36,7 +36,7 @@ class b extends m {
       alert("Type, severity, and a density number are required");
   }
 }
-u("deduct-calculator", b);
+u("deduct-calculator", v);
 export {
-  b as DeductCalculator
+  v as DeductCalculator
 };

package/dist/components/delete-button/customElement.js

@@ -24,7 +24,7 @@ class r extends d {
     this._setDeleteEnabled();
   }
   render() {
-    return e`${this.buttonType === "button" ? e`<calcite-button appearance=outline .disabled=${!this._deleteEndabled} id=solutions-delete kind=danger @click=${() => this._delete()} width=full>${this.showDeleteCount ? this._translations.deleteCount?.replace("{{n}}", this.ids?.length.toString()) : this._translations.delete}</calcite-button>` : e`<calcite-action appearance=solid .disabled=${!this._deleteEndabled} id=${this.icon ?? n} @click=${() => this._delete()} scale=s .text=${this._translations.delete}><calcite-button appearance=transparent .iconStart=${this.icon} kind=danger>${this._translations.delete}</calcite-button></calcite-action>`}${this._deleteMessage()}<calcite-tooltip placement=bottom .referenceElement=${this.buttonType === "button" ? "solutions-delete" : this.icon}><span>${this._translations.delete}</span></calcite-tooltip>`;
+    return e`${this.buttonType === "button" ? e`<calcite-button appearance=outline .disabled=${!this._deleteEndabled} id=solutions-delete kind=danger @click=${() => this._delete()} width=full>${this.showDeleteCount ? this._translations.deleteCount?.replace("{{n}}", this.ids?.length.toString()) : this._translations.delete}</calcite-button>` : e`<calcite-action appearance=solid .disabled=${!this._deleteEndabled} id=${this.icon ?? n} @click=${() => this._delete()} scale=s .text=${this._translations.delete}><calcite-button appearance=transparent aria-hidden=true .iconStart=${this.icon} kind=danger>${this._translations.delete}</calcite-button></calcite-action>`}${this._deleteMessage()}<calcite-tooltip placement=bottom .referenceElement=${this.buttonType === "button" ? "solutions-delete" : this.icon}><span>${this._translations.delete}</span></calcite-tooltip>`;
   }
   loaded() {
     this._setDeleteEnabled();

package/dist/components/edit-card/customElement.d.ts

@@ -12,7 +12,13 @@ export abstract class EditCard extends LitElement {
    *
    * @internal
    */
-  protected _translations: { enableEditing: string; } & T9nMeta<{ enableEditing: string; }>;
+  protected _translations: {
+      enableEditing: string;
+      loading: string;
+  } & T9nMeta<{
+      enableEditing: string;
+      loading: string;
+  }>;
   /**
    * When true allow multiple editing
    *

package/dist/components/edit-card/customElement.js

@@ -44,7 +44,7 @@ class y extends _ {
   }
   render() {
     const t = this.graphics?.length > 0 && this.graphics[0] ? !this.graphics[0].layer.editingEnabled : !0, e = this._editorLoading ? "display-none" : "position-absolute", a = this._editorLoading ? "" : "display-none";
-    return r`<div class="position-absolute">${t ? r`<calcite-notice kind=warning open slot=content-top width=full><div slot=message>${this._translations.enableEditing}</div></calcite-notice>` : void 0}<div class="position-absolute"><div class=${l(e)} id=feature-form ${g(this._editContainer)}></div><calcite-loader class=${l(a)} label scale=s></calcite-loader></div></div>`;
+    return r`<div class="position-absolute">${t ? r`<calcite-notice kind=warning open slot=content-top width=full><div slot=message>${this._translations.enableEditing}</div></calcite-notice>` : void 0}<div class="position-absolute"><div class=${l(e)} id=feature-form ${g(this._editContainer)}></div><calcite-loader class=${l(a)} .label=${this._translations.loading} scale=s></calcite-loader></div></div>`;
   }
   async _initEditorWidget() {
     if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {

package/dist/components/feature-details/customElement.js

@@ -45,9 +45,9 @@ class I extends g {
     const i = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : "1=0";
     return o`<calcite-panel><info-card .enableSnapping=${this.enableSnapping} .graphics=${this.graphics} .mapView=${this.mapView} @selectionChanged=${(e) => {
       this.featureSelectionChange.emit(e.detail);
-    }} position=relative ${k(this._infoCard)}></info-card>${(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && o`<div class="buttons-container">${this._commentsAvailable && o`<calcite-button appearance=transparent icon-end=speech-bubble kind=neutral @click=${() => {
+    }} position=relative ${k(this._infoCard)}></info-card>${(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && o`<div class="buttons-container">${this._commentsAvailable && o`<calcite-button appearance=transparent aria-label=${`${this._relatedFeaturesOIDs.length} comments`} icon-end=speech-bubble kind=neutral @click=${() => {
       this.addComment.emit();
-    }} scale=m>${this._relatedFeaturesOIDs.length}</calcite-button>` || ""}${this._likeFieldAvailable && o`<calcite-button appearance=transparent icon-end=thumbs-up .kind=${this._isLikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onLikeButtonClick} scale=m>${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0}</calcite-button>` || ""}${this._dislikeFieldAvailable && o`<calcite-button appearance=transparent icon-end=thumbs-down .kind=${this._isDislikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onDislikeButtonClick} scale=m>${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0}</calcite-button>` || ""}</div>` || ""}${this.relatedTableId && this._commentsAvailable && o`<feature-list class="height-full" .mapView=${this.mapView} @featureClick=${() => {
+    }} scale=m>${this._relatedFeaturesOIDs.length}</calcite-button>` || ""}${this._likeFieldAvailable && o`<calcite-button appearance=transparent aria-label=${`${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0} likes`} icon-end=thumbs-up .kind=${this._isLikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onLikeButtonClick} scale=m>${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0}</calcite-button>` || ""}${this._dislikeFieldAvailable && o`<calcite-button appearance=transparent aria-label=${`${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0} dislikes`} icon-end=thumbs-down .kind=${this._isDislikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onDislikeButtonClick} scale=m>${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0}</calcite-button>` || ""}</div>` || ""}${this.relatedTableId && this._commentsAvailable && o`<feature-list class="height-full" .mapView=${this.mapView} @featureClick=${() => {
       this.commentClick.emit();
     }} @featureSelect=${(e) => {
       this.commentSelect.emit(e.detail);

package/dist/components/feature-list/customElement.js

@@ -232,7 +232,7 @@ class T extends F {
         this.onFeatureHover(t);
       }} @calciteListItemSelect=${(h) => {
         this.featureClicked(h, t);
-      }} .value=${a}>${this.showUserImageInList && l`<calcite-avatar class=profile-img .fullName=${i?.fullName} scale=m slot=content-start .thumbnail=${i?.userProfileUrl} .userId=${i?.id} .username=${i?.fullName ? i.username : void 0}></calcite-avatar>` || ""}${this.showFeatureSymbol && s && l`<div class=feature-symbol slot=content-start ${d((h) => h && h.replaceChildren(s))}></div>` || ""}<div class=${`popup-title ${n}`} slot=content-start style=${S({ maxWidth: this.textSize === "large" ? "none" : `${p}px` })}>${e}</div>${this._likeFieldAvailable && l`<div class=like-container id=${a.concat("like") ?? v} slot=content-end><span>${this._abbreviatedLikeCount}</span><calcite-icon icon=thumbs-up scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top .referenceElement=${a.concat("like")}>${r}</calcite-tooltip></div>` || ""}<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`;
+      }} .value=${a}>${this.showUserImageInList && l`<calcite-avatar class=profile-img .fullName=${i?.fullName} scale=m slot=content-start .thumbnail=${i?.userProfileUrl} .userId=${i?.id} .username=${i?.fullName ? i.username : void 0}></calcite-avatar>` || ""}${this.showFeatureSymbol && s && l`<div class=feature-symbol slot=content-start ${d((h) => h && h.replaceChildren(s))}></div>` || ""}<div class=${`popup-title ${n}`} slot=content-start style=${S({ maxWidth: this.textSize === "large" ? "none" : `${p}px` })}>${e}</div>${this._likeFieldAvailable && l`<div class=like-container id=${a.concat("like") ?? v} slot=content-end><span>${this._abbreviatedLikeCount}</span><calcite-icon aria-hidden=true icon=thumbs-up scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top .referenceElement=${a.concat("like")}>${r}</calcite-tooltip></div>` || ""}<calcite-icon aria-hidden=true flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`;
     } else
       return;
   }