@esri/solutions-components 5.1.0-next.4 → 5.1.0-next.40

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

@@ -1,36 +1,189 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as f } from "../../chunks/runtime.js";
-import { P as g } from "../../chunks/popupUtils.js";
-import { u as b } from "../../chunks/useT9n.js";
-import { css as w, nothing as m, html as s } from "lit";
-import { LitElement as v, createEvent as r, noShadowRoot as y, safeStyleMap as $, safeClassMap as i } from "@arcgis/lumina";
-import x from "@arcgis/core/widgets/Features";
-import * as d from "@arcgis/core/core/reactiveUtils";
-const F = w`@layer{:host{display:block;--calcite-label-margin-bottom: 0}.padding-1-2{padding:.5rem}.display-none{display:none!important}.display-flex{display:flex}.position-absolute{position:absolute;inset:0;overflow:auto}.feature-node{position:relative!important}.feature-node .esri-features__footer{display:none!important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:.5rem!important;background-color:var(--calcite-color-foreground-1)!important;height:100%!important}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:700}.z-index-1{z-index:1}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:700}}`;
-class E extends v {
+import { c as customElement } from "../../chunks/runtime.js";
+import { P as PopupUtils } from "../../chunks/popupUtils.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, nothing, html } from "lit";
+import { LitElement, createEvent, noShadowRoot, safeStyleMap, safeClassMap } from "@arcgis/lumina";
+import Features from "@arcgis/core/widgets/Features";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
+const styles = css`@layer{
+/** @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.
+ */
+
+:host {
+  display: block;
+  --calcite-label-margin-bottom: 0;
+}
+
+.padding-1-2 {
+  padding: 0.5rem;
+}
+
+.display-none {
+  display: none !important;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.position-absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+}
+
+.feature-node {
+  position: relative !important;
+}
+
+.feature-node .esri-features__footer {
+  display: none !important;
+}
+
+.button-container {
+  justify-content: center;
+  align-items: center;
+}
+
+.top-border {
+  border-top: 1px solid var(--calcite-color-border-1);
+}
+
+.width-100 {
+  width: 100%;
+}
+
+.esri-features__container {
+  padding: 0.5rem !important;
+  background-color: var(--calcite-color-surface-2) !important;
+  height: 100% !important;
+}
+
+.end-border {
+  border-inline-end: 1px solid var(--calcite-color-border-1);
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.z-index-1 {
+  z-index: 1;
+}
+
+.visibility-hidden {
+  visibility: hidden;
+  height: 0px;
+}
+
+.padding-inline-start-1 {
+  padding-inline-start: 1rem;
+}
+
+.border-width-0 {
+  border-width: 0px;
+}
+
+.pagination-action {
+  position: relative;
+  left: 3px;
+}
+
+.pagination-count {
+  color: var(--calcite-color-brand);
+  border-bottom: 1px solid var(--calcite-color-brand);
+  font-weight: bold;
+}
+}`;
+class InfoCard extends LitElement {
   constructor() {
-    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphics = [], this.isLoading = !1, this.isMobile = !1, this.allowEditing = !1, this.highlightEnabled = !0, this.paginationEnabled = !0, this.position = "absolute", this.showCloseBtn = !1, this._alertOpen = !1, this._count = "", this._editRecordOpen = !1, this._isMultipleEdits = !1, this._mobileTitle = "", this._showListView = !1, this._translations = b({ name: "info-card", blocking: !0 }), this._navigatedToRelatedFeature = !1, this._editEnabled = !1, this._featuresNodeId = `features-node${(/* @__PURE__ */ new Date()).getMilliseconds().toString()}`, this.popupClosed = r(), this.clearSelection = r(), this.selectionChanged = r(), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "refreshGraphics", this.refreshGraphics), this.listenOn(window, "editMultipleFeatures", this.editMultipleFeatures), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated), this.listenOn(window, "clearSelection", this._alertClosed);
+    super();
+    this.enableEditGeometry = false;
+    this.enableSnapping = false;
+    this.graphics = [];
+    this.isLoading = false;
+    this.isMobile = false;
+    this.allowEditing = false;
+    this.highlightEnabled = true;
+    this.paginationEnabled = true;
+    this.position = "absolute";
+    this.showCloseBtn = false;
+    this._alertOpen = false;
+    this._count = "";
+    this._editRecordOpen = false;
+    this._isMultipleEdits = false;
+    this._mobileTitle = "";
+    this._showListView = false;
+    this._translations = useT9n({ name: "info-card", blocking: true });
+    this._navigatedToRelatedFeature = false;
+    this._editEnabled = false;
+    this._featuresNodeId = `features-node${(/* @__PURE__ */ new Date()).getMilliseconds().toString()}`;
+    this.popupClosed = createEvent();
+    this.clearSelection = createEvent();
+    this.selectionChanged = createEvent();
+    this.listenOn(window, "closeEdit", this.closeEdit);
+    this.listenOn(window, "layerSelectionChange", this.layerSelectionChange);
+    this.listenOn(window, "refreshGraphics", this.refreshGraphics);
+    this.listenOn(window, "editMultipleFeatures", this.editMultipleFeatures);
+    this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
+    this.listenOn(window, "clearSelection", this._alertClosed);
   }
   static {
-    this.properties = { enableEditGeometry: 5, enableSnapping: 5, graphics: 0, isLoading: 5, isMobile: 5, mapView: 0, allowEditing: 5, highlightEnabled: 5, paginationEnabled: 5, position: 1, showCloseBtn: 5, _alertOpen: 16, _count: 16, _editRecordOpen: 16, _isMultipleEdits: 16, _mobileTitle: 16, _showListView: 16, _translations: 16, _navigatedToRelatedFeature: 16 };
+    this.properties = { enableEditGeometry: [5, {}, { type: Boolean }], enableSnapping: [5, {}, { type: Boolean }], graphics: [0, {}, { attribute: false }], isLoading: [5, {}, { type: Boolean }], isMobile: [5, {}, { type: Boolean }], mapView: [0, {}, { attribute: false }], allowEditing: [5, {}, { type: Boolean }], highlightEnabled: [5, {}, { type: Boolean }], paginationEnabled: [5, {}, { type: Boolean }], position: 1, showCloseBtn: [5, {}, { type: Boolean }], _alertOpen: [16, {}, { state: true }], _count: [16, {}, { state: true }], _editRecordOpen: [16, {}, { state: true }], _isMultipleEdits: [16, {}, { state: true }], _mobileTitle: [16, {}, { state: true }], _showListView: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _navigatedToRelatedFeature: [16, {}, { state: true }] };
   }
   static {
-    this.styles = F;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = y;
-  }
-  willUpdate(e) {
-    if (e.has("graphics") && this.graphicsWatchHandler(), e.has("isMobile") && this.isMobileWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("_translations")) {
-      const t = this._translations._lang, a = e.get("_translations")?._lang;
-      if (t && a && t !== a && this._features) {
-        const n = [...this.graphics];
-        this.graphics = [], this.graphics = n;
+    this.shadowRootOptions = noShadowRoot;
+  }
+  willUpdate(changes) {
+    if (changes.has("graphics")) {
+      void this.graphicsWatchHandler();
+    }
+    if (changes.has("isMobile")) {
+      void this.isMobileWatchHandler();
+    }
+    if (changes.has("mapView")) {
+      void this.mapViewWatchHandler();
+    }
+    if (changes.has("_translations")) {
+      const newLang = this._translations._lang;
+      const oldLang = changes.get("_translations")?._lang;
+      if (newLang && oldLang && newLang !== oldLang) {
+        if (this._features) {
+          const graphics = [...this.graphics];
+          this.graphics = [];
+          this.graphics = graphics;
+        }
       }
     }
   }
   async graphicsWatchHandler() {
-    this._navigatedToRelatedFeature && this._features && (this._features.clear(), this._features.close(), this._count = "", this._navigatedToRelatedFeature = !1), await this.setGraphics();
+    if (this._navigatedToRelatedFeature && this._features) {
+      this._features.clear();
+      this._features.close();
+      this._count = "";
+      this._navigatedToRelatedFeature = false;
+    }
+    await this.setGraphics();
   }
   async isMobileWatchHandler() {
     await this._initFeaturesWidget();
@@ -45,121 +198,195 @@ class E extends v {
     await this.setGraphics();
   }
   async back() {
-    this._features?.previous(), this._count = this._getCount();
+    this._features?.previous();
+    this._count = this._getCount();
   }
   async next() {
-    this._features?.next(), this._count = this._getCount();
+    this._features?.next();
+    this._count = this._getCount();
   }
   async toggleListView() {
-    if (this._showListView = !this._showListView, this._features) {
-      const e = this._features.selectedFeatureIndex;
+    this._showListView = !this._showListView;
+    if (this._features) {
+      const i = this._features.selectedFeatureIndex;
       this._features.open({
         features: this.graphics,
         featureMenuOpen: this._showListView
-      }), this._features.selectedFeatureIndex = e;
+      });
+      this._features.selectedFeatureIndex = i;
     }
   }
-  async updateCurrentGraphic(e) {
-    this._features?.selectedFeatureWidget && console.log(e);
+  async updateCurrentGraphic(selectedGraphic) {
+    if (this._features?.selectedFeatureWidget) {
+      console.log(selectedGraphic);
+    }
   }
   async closeEdit() {
-    this._editRecordOpen = !1, this._isMultipleEdits = !1;
+    this._editRecordOpen = false;
+    this._isMultipleEdits = false;
   }
   async layerSelectionChange() {
-    this._showListView = !1, this._features?.viewModel && (this._features.viewModel.featureMenuOpen = !1, this._features.close());
+    this._showListView = false;
+    if (this._features?.viewModel) {
+      this._features.viewModel.featureMenuOpen = false;
+      this._features.close();
+    }
   }
-  async refreshGraphics(e) {
-    this._navigatedToRelatedFeature || (this.graphics = [...e.detail]);
+  async refreshGraphics(_evt) {
+    if (!this._navigatedToRelatedFeature) {
+      this.graphics = [..._evt.detail];
+    }
   }
-  async editMultipleFeatures(e) {
-    this._isMultipleEdits = !0, this._openEditRecord();
+  async editMultipleFeatures(_evt) {
+    this._isMultipleEdits = true;
+    this._openEditRecord();
   }
-  async selectedLanguageUpdated(e) {
-    this._features?.clear(), this._features?.close(), await this._initFeaturesWidget();
+  async selectedLanguageUpdated(_evt) {
+    this._features?.clear();
+    this._features?.close();
+    await this._initFeaturesWidget();
   }
   async load() {
-    this._popupUtils = new g();
+    this._popupUtils = new PopupUtils();
   }
   async loaded() {
-    this.graphics?.length > 0 && await this.setGraphics();
+    if (this.graphics?.length > 0) {
+      await this.setGraphics();
+    }
   }
   render() {
-    const e = this.isLoading ? "" : "display-none", t = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute", a = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none", n = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "", o = this._features?.features && this._features.features.length < 2 || this._navigatedToRelatedFeature, h = Number(this._features?.selectedFeature?.getObjectId()), p = Number.isNaN(h) ? [] : [h], c = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete, u = this._relatedFeature ? [this._relatedFeature] : this.graphics, _ = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex, l = this.isMobile ? "display-none" : "";
-    return s`<calcite-shell class="z-index-1" style=${$({ position: this.position })}>${this._getHeader()}<calcite-loader class=${i(e)} .label=${this._translations.fetchingData}></calcite-loader><div class=${i("esri-widget feature-node " + t)} id=${this._featuresNodeId ?? m}></div><div class=${`${n} width-100`} slot=footer>${this.allowEditing ? s`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && c ? s`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${p} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && c ? s`<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !o && s`<div class=${"display-flex padding-1-2 button-container top-border"}><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action appearance=solid class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s text text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${i(a)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${_} .graphics=${u} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
+    const loadingClass = this.isLoading ? "" : "display-none";
+    const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
+    const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
+    const editButtonClass = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "";
+    const nextBackDisabled = this._features?.features && this._features.features.length < 2 || this._navigatedToRelatedFeature;
+    const id = Number(this._features?.selectedFeature?.getObjectId());
+    const ids = Number.isNaN(id) ? [] : [id];
+    const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
+    const graphics = this._relatedFeature ? [this._relatedFeature] : this.graphics;
+    const selectedFeatureIndex = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
+    const toolTipClass = this.isMobile ? "display-none" : "";
+    return html`<calcite-shell class="z-index-1" style=${safeStyleMap({ position: this.position })}>${this._getHeader()}<calcite-loader class=${safeClassMap(loadingClass)} .label=${this._translations.fetchingData}></calcite-loader><div class=${safeClassMap("esri-widget feature-node " + featureNodeClass)} id=${this._featuresNodeId ?? nothing}></div><div class=${`${editButtonClass} width-100`} slot=footer>${this.allowEditing ? html`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && deleteEnabled ? html`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${ids} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${safeClassMap(toolTipClass)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && deleteEnabled ? html`<calcite-tooltip class=${safeClassMap(toolTipClass)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !nextBackDisabled && html`<div class=${`display-flex padding-1-2 button-container top-border`}><div><calcite-button appearance=transparent .disabled=${nextBackDisabled} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${safeClassMap(toolTipClass)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action appearance=solid class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s text text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${nextBackDisabled} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${safeClassMap(toolTipClass)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${safeClassMap(editClass)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${selectedFeatureIndex} .graphics=${graphics} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
   }
   async setGraphics() {
-    this._features || await this._initFeaturesWidget(), this.graphics.length > 0 ? (this._layer = this.graphics[0]?.layer, this._editEnabled = !!(this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate), this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "", this._features?.open({
-      features: this.graphics
-    })) : (this._features?.clear(), this._features?.close()), this._count = this._getCount();
+    if (!this._features) {
+      await this._initFeaturesWidget();
+    }
+    if (this.graphics.length > 0) {
+      this._layer = this.graphics[0]?.layer;
+      this._editEnabled = this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate ? true : false;
+      this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "";
+      this._features?.open({
+        features: this.graphics
+      });
+    } else {
+      this._features?.clear();
+      this._features?.close();
+    }
+    this._count = this._getCount();
   }
   async _initFeaturesWidget() {
     return this.isMobile !== void 0 ? await this.mapView?.when(() => {
-      if (this._features)
-        this._features.view = this.mapView, this._features.visibleElements.actionBar = !1, this._features.visibleElements.closeButton = !!this.showCloseBtn, this._features.visibleElements.heading = !this.isMobile;
-      else if (this._features = new x({
-        view: this.mapView,
-        container: this._featuresNodeId,
-        visibleElements: {
-          actionBar: !1,
-          closeButton: this.showCloseBtn,
-          featureMenuHeading: !1,
-          heading: !this.isMobile
-        }
-      }), this._features) {
-        this._features.viewModel.highlightEnabled = !!this.highlightEnabled, d.watch(() => (this._features?.viewModel).featureMenuOpen, (t) => {
-          this._updateCount(), t || (this._showListView = t);
-        }), d.watch(() => this._features?.selectedFeatureIndex, (t) => {
-          t !== void 0 && t > -1 && this._features?.selectedFeature && this.selectionChanged.emit({
-            selectedFeature: [this._features.selectedFeature],
-            selectedFeatureIndex: this._features.selectedFeatureIndex
-          });
-        }), d?.watch(() => this._features.selectedDrillInFeature, (t) => {
-          t ? (this._relatedFeature = t, this._navigatedToRelatedFeature = !0) : (this._relatedFeature = void 0, this._navigatedToRelatedFeature = !1);
-        });
-        const e = this.el.querySelector("#" + this._featuresNodeId);
-        this.listenOn(e, "calciteFlowItemClose", () => {
-          this.clearSelection.emit();
+      if (!this._features) {
+        this._features = new Features({
+          view: this.mapView,
+          container: this._featuresNodeId,
+          visibleElements: {
+            actionBar: false,
+            closeButton: this.showCloseBtn,
+            featureMenuHeading: false,
+            heading: !this.isMobile
+          }
         });
+        if (this._features) {
+          this._features.viewModel.highlightEnabled = this.highlightEnabled ? true : false;
+          reactiveUtils.watch(() => (this._features?.viewModel).featureMenuOpen, (isOpen) => {
+            void this._updateCount();
+            if (!isOpen) {
+              this._showListView = isOpen;
+            }
+          });
+          reactiveUtils.watch(() => this._features?.selectedFeatureIndex, (i) => {
+            if (i !== void 0 && i > -1) {
+              if (this._features?.selectedFeature) {
+                this.selectionChanged.emit({
+                  selectedFeature: [this._features.selectedFeature],
+                  selectedFeatureIndex: this._features.selectedFeatureIndex
+                });
+              }
+            }
+          });
+          reactiveUtils?.watch(() => this._features.selectedDrillInFeature, (f) => {
+            if (f) {
+              this._relatedFeature = f;
+              this._navigatedToRelatedFeature = true;
+            } else {
+              this._relatedFeature = void 0;
+              this._navigatedToRelatedFeature = false;
+            }
+          });
+          const infoCard = this.el.querySelector("#" + this._featuresNodeId);
+          this.listenOn(infoCard, "calciteFlowItemClose", () => {
+            this.clearSelection.emit();
+          });
+        }
+      } else {
+        this._features.view = this.mapView;
+        this._features.visibleElements.actionBar = false;
+        this._features.visibleElements.closeButton = this.showCloseBtn ? true : false;
+        this._features.visibleElements.heading = !this.isMobile;
       }
     }) : Promise.resolve();
   }
   _getHeader() {
-    return this.isMobile && !this._editRecordOpen ? s`<calcite-panel class="border-width-0" slot=header><calcite-action appearance=solid class="end-border" icon=chevron-left icon-flip-rtl @click=${() => this._closePopup()} scale=s slot=header-actions-start text></calcite-action><span class="font-bold" slot=header-content>${this._mobileTitle}</span></calcite-panel>` : void 0;
+    return this.isMobile && !this._editRecordOpen ? html`<calcite-panel class="border-width-0" slot=header><calcite-action appearance=solid class="end-border" icon=chevron-left icon-flip-rtl @click=${() => this._closePopup()} scale=s slot=header-actions-start text></calcite-action><span class="font-bold" slot=header-content>${this._mobileTitle}</span></calcite-panel>` : void 0;
   }
   _closePopup() {
     this.popupClosed.emit();
   }
   _alertClosed() {
-    this._alertOpen = !1;
+    this._alertOpen = false;
   }
   _openEditRecord() {
-    this._editEnabled ? this._editRecordOpen = !0 : this._alertOpen = !0;
+    if (this._editEnabled) {
+      this._editRecordOpen = true;
+    } else {
+      this._alertOpen = true;
+    }
   }
   async _back() {
-    this._features?.previous(), await this._updateCount();
+    this._features?.previous();
+    await this._updateCount();
   }
   async _next() {
-    this._features?.next(), await this._updateCount();
+    this._features?.next();
+    await this._updateCount();
   }
   async _updateCount() {
-    const e = this._features?.selectedFeatureIndex;
-    this._popupUtils && this.mapView && this.mapView.map && e !== void 0 && (this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[e], this.mapView.map)), this._count = this._getCount();
+    const i = this._features?.selectedFeatureIndex;
+    if (this._popupUtils && this.mapView && this.mapView.map && i !== void 0) {
+      this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[i], this.mapView.map);
+    }
+    this._count = this._getCount();
   }
   _getCount() {
-    const e = this._features?.viewModel && (this._features?.viewModel.selectedFeatureIndex + 1).toString() || "", t = this._features?.features?.length.toString() || "";
-    return this._translations.indexOfTotal.replace("{{index}}", e).replace("{{total}}", t) || "";
+    const index = this._features?.viewModel && (this._features?.viewModel.selectedFeatureIndex + 1).toString() || "";
+    const total = this._features?.features?.length.toString() || "";
+    return this._translations.indexOfTotal.replace("{{index}}", index).replace("{{total}}", total) || "";
   }
   _toggleListView() {
-    if (this._showListView = !this._showListView, this._features) {
-      const e = this._features.selectedFeatureIndex;
+    this._showListView = !this._showListView;
+    if (this._features) {
+      const i = this._features.selectedFeatureIndex;
       this._features.open({
         features: this.graphics,
         featureMenuOpen: this._showListView
-      }), this._features.selectedFeatureIndex = e;
+      });
+      this._features.selectedFeatureIndex = i;
     }
   }
 }
-f("info-card", E);
+customElement("info-card", InfoCard);
 export {
-  E as InfoCard
+  InfoCard
 };

package/dist/components/layer-list/customElement.d.ts

@@ -33,7 +33,7 @@ export abstract class LayerList extends LitElement {
   accessor filterByMapExtent: boolean;
   /** string[]: If passed will show only these layers in the list if they are present in map and are editable */
   accessor layers: string[];
-  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** esri/views/View: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
   accessor mapView: __esri.MapView | undefined;
   /**
    * boolean: if true display's feature count for each layer