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

package/dist/components/field-selection/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/field-selection/field-selection.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  h,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type { JsxNode } from '@arcgis/lumina';\r\nimport { styles } from './field-selection.css';\r\nimport type { FieldSortType } from '../../utils/interfaces';\r\nimport { LayerTable } from '../layer-table/layer-table';\r\nimport type { IPickListFieldInfo } from '@arcgis/common-components';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'field-selection': FieldSelection;\r\n  }\r\n}\r\n\r\nexport class FieldSelection extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  constructor() {\r\n    super();\r\n    this.listenOn<CustomEvent>(window, 'columnReorder', this.handleColumnReorder, { capture: true });\r\n  }\r\n\r\n  static override styles = styles;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Extra fields such as attachments and related fields from IA config */\r\n  @property() configExtraFields: any;\r\n\r\n  /** esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */\r\n  @property() layer: __esri.FeatureLayer | undefined;\r\n\r\n  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */\r\n  @property() mapView: __esri.MapView | undefined;\r\n\r\n  /** esri/widgets/FeatureTable: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable.html */\r\n  @property() table: __esri.FeatureTable | undefined;\r\n\r\n  /** LayerTable reference to support column reorder */\r\n  @property() tableRef!: LayerTable['el'];\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @state() _translations = useT9n<typeof T9nStrings>({ name: 'field-selection', blocking: true });\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** The popover node for field Visibility */\r\n  private _fieldVisibilityPopoverNode?: HTMLArcgisFieldPickListElement | undefined;\r\n\r\n  /** The action element for field Visibility */\r\n  private _fieldVisibilityActionNode?: HTMLCalciteActionElement;\r\n\r\n  /** 'default' | 'display' | 'field' | 'type' */\r\n  private _fieldSortOrder?: FieldSortType = 'default';\r\n\r\n  /** expose __esri.templateUtils */\r\n  private _modules?: {\r\n    attributeTableTemplateUtils: typeof __esri.templateUtils;\r\n  };\r\n\r\n  /** The currently selected fields */\r\n  private _selectedFields: string[] = [];\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    return (\r\n      <calcite-action\r\n        appearance='solid'\r\n        class='height-51 width-51'\r\n        id='solutions-field-selection'\r\n        text={this._translations.fieldVisibility}\r\n        scale='m'\r\n        onClick={() => this._handleFieldVisibilityClick()}\r\n        ref={(node?: HTMLCalciteActionElement) => (this._fieldVisibilityActionNode = node)}\r\n        onMouseOver={() => this._addTableTooltip(this._fieldVisibilityActionNode!, this._translations.fieldVisibility)}\r\n        onMouseOut={() => this._removeTableTooltip()}\r\n        onFocus={() => this._addTableTooltip(this._fieldVisibilityActionNode!, this._translations.fieldVisibility)}\r\n      >\r\n        <calcite-icon scale='s' icon='gear'></calcite-icon>\r\n      </calcite-action>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Respond to click/drag reorder of fields from the table */\r\n  private handleColumnReorder(): void {\r\n    this._fieldSortOrder = 'default';\r\n    if (this._fieldVisibilityPopoverNode) {\r\n      this.removeFieldsPickList();\r\n      this._handleFieldVisibilityClick();\r\n    }\r\n  }\r\n\r\n  /** Show the field selection popover */\r\n  private _handleFieldVisibilityClick(): void {\r\n    if (this._fieldVisibilityPopoverNode) {\r\n      // already open, do nothing\r\n      return;\r\n    }\r\n\r\n    const columnTemplates = this.table?.tableTemplate?.columnTemplates;\r\n    if (this.layer && this.mapView && columnTemplates && this._fieldVisibilityActionNode) {\r\n      document.removeEventListener('click', this._fieldVisibilityPopoverClickHandler);\r\n\r\n      // get the fields in the order they are in the table\r\n      const fields = this.table!.fieldColumns.map(c => {\r\n        return {\r\n          alias: c.field.alias,\r\n          description: c.field.description,\r\n          name: c.field.name,\r\n          type: c.field.type\r\n        } as IPickListFieldInfo;\r\n      });\r\n\r\n      if (this._hasAttachmentsEnabled(this.layer)) {\r\n        const attachments = 'Attachments';\r\n        if (this._shouldShowField(attachments.toUpperCase(), false)) {\r\n          if (!columnTemplates.some(ct => ct.fieldName.toUpperCase() === attachments.toUpperCase())) {\r\n            // add attachment column template\r\n            const attachmentColumnTemplate = {\r\n              fieldName: attachments,\r\n              type: 'attachment',\r\n              visible: true,\r\n            } as __esri.AttachmentsColumnTemplate;\r\n            columnTemplates.push(attachmentColumnTemplate);\r\n          }\r\n          fields.push({\r\n            name: attachments,\r\n            alias: 'Photos and files',\r\n            type: 'none',\r\n            description: attachments,\r\n          } as any);\r\n        }\r\n      }\r\n\r\n      const relationshipEnabled = this.table!.relatedRecordsEnabled;\r\n      if (relationshipEnabled && this.layer.relationships && this.layer.relationships.length > 0) {\r\n        const parent = this.layer.parent;\r\n        this.layer.relationships.forEach(rel => {\r\n          let name;\r\n          let shouldPush = this._shouldShowField(rel.name || '', true);\r\n          if (!columnTemplates.some(ct => {\r\n            if (ct.fieldName.toLowerCase() === rel.name?.toLowerCase()) {\r\n              name = rel.name;\r\n              return true;\r\n            } else {\r\n              return false;\r\n            }\r\n          })) {\r\n            if (rel.name) {\r\n              name = rel.name;\r\n              // add relationship column template\r\n              const relationshipColumnTemplate = {\r\n                fieldName: name,\r\n                type: 'relationship',\r\n                visible: true,\r\n              } as __esri.RelationshipColumnTemplate;\r\n              shouldPush = this._shouldShowField(name!, true);\r\n              columnTemplates.push(relationshipColumnTemplate);\r\n            } else {\r\n              // if name isn't set get name based on ids\r\n              const allLayersAndTables = [...(parent as any)?.layers || [], ...(parent as any)?.tables];\r\n              let relItem;\r\n              allLayersAndTables.some(lt => {\r\n                if (lt.layerId === rel.relatedTableId) {\r\n                  relItem = lt;\r\n                  return true;\r\n                }\r\n                return false;\r\n              });\r\n              if (relItem) {\r\n                name = (relItem as any).title;\r\n                // set the name on the rel so we can show/hide\r\n                rel.name = name;\r\n                // add relationship column template\r\n                const relationshipColumnTemplate = {\r\n                  fieldName: name,\r\n                  type: 'relationship',\r\n                  visible: true,\r\n                } as __esri.RelationshipColumnTemplate;\r\n                shouldPush = this._shouldShowField(name!, true);\r\n                columnTemplates.push(relationshipColumnTemplate);\r\n              }\r\n            }\r\n          }\r\n          if (name && shouldPush) {\r\n            fields.push({\r\n              name,\r\n              alias: `Related ${name}`,\r\n              type: 'none',\r\n              description: `related:${name}`,\r\n            } as any)\r\n          }\r\n        });\r\n      }\r\n\r\n      const popover = !this._fieldVisibilityPopoverNode ? document.createElement('arcgis-field-pick-list') : this._fieldVisibilityPopoverNode;\r\n      popover.layer = this.layer;\r\n      popover.fields = fields;\r\n      popover.showFieldInfo = true;\r\n      popover.showFieldName = true;\r\n      popover.showDescription = false;\r\n      popover.showSelectionAll = true;\r\n      popover.hideCancel = true;\r\n      popover.hideSort = false;\r\n      popover.showFilterLength = 5;\r\n      popover.multiple = true;\r\n      popover.heading = this._translations.fieldVisibility;\r\n      popover.okBtnText = this._translations.doneWithFieldChanges;\r\n      popover.filterPlaceholderText = this._translations.filterFields;\r\n      popover.sortBy = this._fieldSortOrder ?? 'default';\r\n      const visibleFields = this.table?.visibleColumns.map(vc => {\r\n        return vc.fieldName.startsWith('EsriFeatureTableRelationshipColumn') ?\r\n          vc.effectiveLabel : vc.fieldName.startsWith('EsriFeatureTableAttachmentsColumn') ?\r\n            vc.effectiveLabel : vc.fieldName;\r\n      });\r\n      popover.selectedFields = columnTemplates.reduce((prev: any, cur: any) => {\r\n        if (visibleFields ? visibleFields.indexOf(cur.fieldName) > -1 : cur.visible) {\r\n          prev.push(cur.fieldName);\r\n        }\r\n        return prev;\r\n      }, [] as string[]);\r\n\r\n      this._selectedFields = popover.selectedFields;\r\n\r\n      popover.style.minHeight = '340px';\r\n      popover.popoverProps = {\r\n        refElement: this._fieldVisibilityActionNode!,\r\n        popoverWidth: 300,\r\n        placement: 'bottom-end',\r\n        offsetDistance: -20,\r\n        triggerDisabled: false,\r\n        autoClose: false,\r\n      };\r\n      popover.addEventListener('arcgisChange', (event) => {\r\n        event.stopPropagation();\r\n        const updatedFieldNames = event.detail.selectedFields;\r\n        const added = this._getDifference(updatedFieldNames, this._selectedFields!);\r\n        const removed = this._getDifference(this._selectedFields!, updatedFieldNames);\r\n        const diffs = added.concat(removed);\r\n        diffs.forEach((fieldName: string) => {\r\n          const relationships = this.layer?.relationships?.map(rel => rel.name) || [];\r\n          if (fieldName === 'Attachments') {\r\n            const attachmentsColumn: any = this.table!.columns.find(\r\n              (column: any) => 'onShowAttachments' in column,\r\n            );\r\n            attachmentsColumn.hidden = removed.indexOf(fieldName) > -1;\r\n          } else if (relationships.indexOf(fieldName) > -1) {\r\n            const relationshipColumns: any = this.table!.columns.filter(\r\n              (column: any) => 'relationshipId' in column,\r\n            );\r\n            relationshipColumns.forEach((relationshipColumn: any) => {\r\n              removed.indexOf(fieldName) > -1\r\n              if (fieldName == relationshipColumn.effectiveLabel) {\r\n                relationshipColumn.hidden = removed.indexOf(fieldName) > -1;\r\n              }\r\n            });\r\n          } else {\r\n            this.table!.toggleColumnVisibility(fieldName);\r\n          }\r\n        });\r\n        this._selectedFields = updatedFieldNames;\r\n        this._updateTable(this.table!.tableTemplate);\r\n      });\r\n\r\n      popover.addEventListener('arcgisSortByChange', (event: CustomEvent) => {\r\n        event.stopPropagation();\r\n        this._fieldSortOrder = event.detail;\r\n        this._sortFields(event.detail);\r\n      });\r\n      popover.addEventListener('arcgisClose', () => {\r\n        this._closePopovers();\r\n        setTimeout(() => this._fieldVisibilityActionNode!.setFocus(), 200);\r\n      });\r\n      document.body.appendChild(popover);\r\n      this._fieldVisibilityPopoverNode = popover;\r\n\r\n      setTimeout(() => document.addEventListener('click', this._fieldVisibilityPopoverClickHandler), 200);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Returns true if the field name is listed in the extra fields we get from IA config\r\n   * @param name the name of the field\r\n   * @param isRelatedField is this a related field\r\n   */\r\n  private _shouldShowField(\r\n    name: string,\r\n    isRelatedField: boolean\r\n  ): boolean {\r\n    return (this.configExtraFields || []).some((f: any) => isRelatedField ? f.replace('related:', '').toUpperCase() === name.toUpperCase() :\r\n      f.toUpperCase() === name.toUpperCase());\r\n  }\r\n\r\n  /** Remove the fields pick list */\r\n  private removeFieldsPickList() {\r\n    if (this._fieldVisibilityPopoverNode) {\r\n      document.body.removeChild(this._fieldVisibilityPopoverNode);\r\n      this._fieldVisibilityPopoverNode = undefined;\r\n    }\r\n  }\r\n\r\n  /** Sort the fields by type */\r\n  private _sortFields(\r\n    type: FieldSortType\r\n  ): void {\r\n    const columnTemplates = this.table!.tableTemplate!.columnTemplates;\r\n    const order: string[] = this._getSortOrder(type);\r\n    const columns = columnTemplates.filter(_ct => {\r\n      return _ct.type !== 'attachment' && _ct.type !== 'relationship';\r\n    });\r\n\r\n    const sortedColumns = columns.sort((a, b) => {\r\n      const indexA = order.indexOf(a.fieldName);\r\n      const indexB = order.indexOf(b.fieldName);\r\n\r\n      if (indexA === -1 && indexB !== -1) return 1;\r\n      if (indexA !== -1 && indexB === -1) return -1;\r\n      if (indexA === -1 && indexB === -1) return 0;\r\n\r\n      return indexA - indexB;\r\n    });\r\n\r\n    const specialColumns = columnTemplates.filter(_ct => {\r\n      return _ct.type === 'attachment' || _ct.type === 'relationship';\r\n    });\r\n\r\n    this.tableRef.setColumnOrder([...sortedColumns, ...specialColumns]);\r\n    this._updateTable(this.table!.tableTemplate);\r\n  }\r\n\r\n  /** Sort the layer fields based on sortBy order */\r\n  private _getSortOrder(\r\n    lastSortBy: FieldSortType\r\n  ): string[] {\r\n    const tempSorted = [...this.layer!.fields];\r\n    if (lastSortBy === 'display') {\r\n      tempSorted.sort((a, b) => a.alias!.localeCompare(b.alias!));\r\n    } else if (lastSortBy === 'field') {\r\n      tempSorted.sort((a, b) => a.name.localeCompare(b.name));\r\n    } else if (lastSortBy === 'type') {\r\n      tempSorted.sort((a, b) => a.type.localeCompare(b.type));\r\n    }\r\n    return tempSorted.map(t => t.name);\r\n  }\r\n\r\n  /** Get the difference between two string arrays */\r\n  private _getDifference(\r\n    a: string[],\r\n    b: string[]\r\n  ): string[] {\r\n    return a.filter(s => !b.includes(s));\r\n  }\r\n\r\n  /** Update the table with the changed tableTemplate */\r\n  private _updateTable(\r\n    tableTemplate: __esri.TableTemplate | nullish\r\n  ): void {\r\n    this.table!.tableTemplate = tableTemplate;\r\n    if (this._isStandardView()) {\r\n      this._syncAttributeTableTemplate();\r\n    }\r\n  }\r\n\r\n  /** Sync the table with the changes */\r\n  private async _syncAttributeTableTemplate(): Promise<void> {\r\n    const layer = this.table!.layer as any;\r\n\r\n    if (layer.attributeTableTemplate) {\r\n      const { _modules } = this;\r\n\r\n      // clone the attributeTableTemplate and set it back on the layer to ensure its origin of truth changes\r\n      const updatedAttributeTableTemplate = layer.attributeTableTemplate.clone();\r\n      _modules?.attributeTableTemplateUtils.syncAttributeTableTemplate(this.table!, updatedAttributeTableTemplate);\r\n\r\n      // avoid unnecessary updates that could trigger excess changes in other components, like arcgis-layer-override\r\n      if (JSON.stringify(updatedAttributeTableTemplate) !== JSON.stringify(layer.attributeTableTemplate)) {\r\n        layer.attributeTableTemplate = updatedAttributeTableTemplate;\r\n      }\r\n    }\r\n\r\n    // ensure orderByFields in MV only ever contains one element\r\n    if (layer.attributeTableTemplate?.orderByFields?.length > 1) {\r\n      // clone the attributeTableTemplate and set it back on the layer to ensure its origin of truth changes\r\n      const updatedAttributeTableTemplate = layer.attributeTableTemplate.clone();\r\n\r\n      const activeSortField = this.table!.activeSortOrders[0];\r\n      updatedAttributeTableTemplate.orderByFields = [\r\n        { field: activeSortField.fieldName, order: activeSortField.direction },\r\n      ];\r\n\r\n      layer.attributeTableTemplate = updatedAttributeTableTemplate;\r\n      this._syncColumnDirectionsWithOrderByFields();\r\n    }\r\n  }\r\n\r\n  /** Sync Column Directions With OrderBy Fields */\r\n  private _syncColumnDirectionsWithOrderByFields(): void {\r\n    const currentSortFieldName = this.table!.activeSortOrders[0]?.fieldName;\r\n    this.table!.columns.forEach((column: any) => {\r\n      if ('fieldName' in column && column.fieldName !== currentSortFieldName) {\r\n        column.direction = undefined as any;\r\n      }\r\n    });\r\n    this.table!.tableTemplate?.columnTemplates.forEach((template: any) => {\r\n      if ('fieldName' in template && template.fieldName !== currentSortFieldName) {\r\n        template.direction = undefined;\r\n      }\r\n    });\r\n  }\r\n\r\n  /** Check if we are dealing with a standard view */\r\n  private _isStandardView(): boolean {\r\n    return !this.table!.relatedTable && !(this.table as any).attachmentsViewOptions.objectId;\r\n  }\r\n\r\n  /** Close any popovers */\r\n  private _closePopovers(): void {\r\n    document.removeEventListener('click', this._fieldVisibilityPopoverClickHandler);\r\n\r\n    if (this._fieldVisibilityPopoverNode) {\r\n      document.body.removeChild(this._fieldVisibilityPopoverNode);\r\n      this._fieldVisibilityPopoverNode = undefined;\r\n    }\r\n  }\r\n\r\n  /** Add the table tooltip */\r\n  private _addTableTooltip(\r\n    node: HTMLCalciteActionElement,\r\n    message: string\r\n  ): void {\r\n    const tooltip = document.createElement('calcite-tooltip');\r\n    tooltip.className = 'table-tooltip';\r\n    tooltip.referenceElement = node;\r\n    tooltip.placement = 'trailing-start';\r\n    tooltip.open = true;\r\n\r\n    const div = document.createElement('div');\r\n    div.className = 'tooltip';\r\n    div.innerHTML = message;\r\n\r\n    tooltip.append(div);\r\n    document.body.append(tooltip);\r\n  }\r\n\r\n  /** Remove the table tooltip */\r\n  private _removeTableTooltip(): void {\r\n    document.querySelectorAll('.table-tooltip').forEach((tooltip: any) => tooltip.parentNode?.removeChild(tooltip));\r\n  }\r\n\r\n  /**\r\n   * Handle the field visibility popover click\r\n   *\r\n   * @param event\r\n   */\r\n  private _fieldVisibilityPopoverClickHandler = (event: MouseEvent) => {\r\n    if (!this._fieldVisibilityPopoverNode) {\r\n      // popover got removed another way\r\n      document.removeEventListener('click', this._fieldVisibilityPopoverClickHandler);\r\n    } else if (!this._isInNode(event.target as HTMLElement, 'arcgis-field-pick-list')) {\r\n      document.body.removeChild(this._fieldVisibilityPopoverNode);\r\n      this._fieldVisibilityPopoverNode = undefined;\r\n      document.removeEventListener('click', this._fieldVisibilityPopoverClickHandler);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Returns true if node has nodeName or is contained in a parent node with nodeName\r\n   * @param node\r\n   * @param nodeName\r\n   */\r\n  private _isInNode(\r\n    node: HTMLElement,\r\n    nodeName: string\r\n  ): boolean {\r\n    while (node) {\r\n      if (node.nodeName === nodeName.toUpperCase()) {\r\n        return true;\r\n      }\r\n      node = node.parentElement!;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Check if attachments are enabled\r\n   *\r\n   * @param layer the current layer\r\n   *\r\n   * @returns true when attachments are enabled\r\n   */\r\n  private _hasAttachmentsEnabled(\r\n    layer: __esri.FeatureLayer\r\n  ): boolean {\r\n    if (!layer?.capabilities) {\r\n      return false;\r\n    }\r\n    const {\r\n      capabilities: {\r\n        data: { supportsAttachment },\r\n        operations: { supportsQueryAttachments },\r\n      },\r\n    } = layer;\r\n    return supportsAttachment && supportsQueryAttachments;\r\n  }\r\n\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -16,7 +16,7 @@ export declare class InfoCard extends LitElement {
      * @default false
      */
     enableSnapping: boolean;
-    /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
+    /** esri/Graphic: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
     graphics: __esri.Graphic[];
     /**
      * boolean: when true a loading indicator will be shown
@@ -30,7 +30,7 @@ export declare class InfoCard extends LitElement {
      * @default false
      */
     isMobile: boolean;
-    /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+    /** esri/views/MapView: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /**
      * boolean: If true will show edit button

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

@@ -1,14 +1,15 @@
-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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.56 */
-const E = w`@layer{/** @license
+v1.2.0-next.58 */
+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");
@@ -22,31 +23,168 @@ const E = w`@layer{/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */: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 F extends v {
+ */
+
+: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-foreground-1) !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);
+    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);
   }
   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 = E;
+    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 l = [...this.graphics];
-        this.graphics = [], this.graphics = l;
+    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();
@@ -61,121 +199,196 @@ class F 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", l = !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, n = 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=${`${l} 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(n)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && c ? s`<calcite-tooltip class=${i(n)} 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(n)} 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(n)} 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 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 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", F);
+customElement("info-card", InfoCard);
 export {
-  F as InfoCard
+  InfoCard
 };
+//# sourceMappingURL=customElement.js.map