@arcgis/map-components 5.2.0-next.156 → 5.2.0-next.157

package/dist/components/arcgis-features-next/customElement.js

@@ -1,29 +1,29 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as P } from "../../chunks/runtime.js";
-import { css as H, html as n } from "lit";
+import { css as B, html as n } from "lit";
 import { keyed as E } from "lit/directives/keyed.js";
-import B from "@arcgis/core/support/actions/ActionButton.js";
+import H from "@arcgis/core/support/actions/ActionButton.js";
 import T from "@arcgis/core/core/Collection.js";
 import z from "@arcgis/core/popup/FeaturesModel.js";
 import { LitElement as V, createEvent as y, renderElement as Z, nothing as g, safeClassMap as x } from "@arcgis/lumina";
 import { useDirection as U, usePropertyChange as K, bypassReadOnly as D } from "@arcgis/lumina/controllers";
 import { classes as I } from "@arcgis/toolkit/dom";
-import { slotChangeHasContent as S } from "@arcgis/toolkit/dom/slots";
-import { createRef as F, ref as m } from "lit/directives/ref.js";
+import { slotChangeHasContent as L } from "@arcgis/toolkit/dom/slots";
+import { createRef as _, ref as m } from "lit/directives/ref.js";
 import { initializeProjection as j } from "@arcgis/core/applications/Components/featureUtils.js";
 import { t as q } from "../../chunks/action-utils.js";
 import { m as G } from "../../chunks/useViewModel.js";
 import { renderingSanitizer as w } from "@arcgis/core/applications/Components/sanitizerUtils.js";
-import { stripHTML as C } from "@arcgis/core/applications/Components/stringUtils.js";
-import { substitute as h, formatNumber as b } from "@arcgis/core/intl.js";
+import { stripHTML as M } from "@arcgis/core/applications/Components/stringUtils.js";
+import { substitute as u, formatNumber as b } from "@arcgis/core/intl.js";
 import { u as W } from "../../chunks/useT9n.js";
-import { when as X, watch as u } from "@arcgis/core/core/reactiveUtils.js";
+import { when as X, watch as h } from "@arcgis/core/core/reactiveUtils.js";
 import { getGraphicOriginTitle as J } from "@arcgis/core/graphic/getGraphicOriginTitle.js";
-import { a as L } from "../../chunks/maybe.js";
+import { a as S } from "../../chunks/maybe.js";
 import { b as Q, a as Y, c as ee } from "../../chunks/keyboard-utils.js";
 import { g as R } from "../../chunks/feature-utils.js";
 import { c as k } from "../../chunks/loader-utils.js";
-const te = H`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.content-feature{--calcite-flow-item-footer-padding: 0;--calcite-flow-header-top-space: 0}.feature-menu-observer{flex:0 0 1px;height:1px;margin-block-start:-1px}.action-exit{transform:scaleX(-1)}.flow-item-drill-in{--calcite-flow-item-footer-padding: 0}.diagnostics-notice{padding:var(--calcite-space-md)}`;
+const te = B`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.content-feature{--calcite-flow-item-footer-padding: 0;--calcite-flow-header-top-space: 0}.feature-menu-observer{flex:0 0 1px;height:1px;margin-block-start:-1px}.action-exit{transform:scaleX(-1)}.flow-item-drill-in{--calcite-flow-item-footer-padding: 0}.diagnostics-notice{padding:var(--calcite-space-md)}`;
 function ie(v) {
   return v?.declaredClass.startsWith("esri.layers.") ?? !1;
 }
@@ -34,7 +34,7 @@ function se(v) {
 const ae = G(z), ne = 5;
 class oe extends V {
   constructor() {
-    super(...arguments), this._zoomToFeature = new B({
+    super(...arguments), this._zoomToFeature = new H({
       icon: "magnifying-glass-plus",
       id: "zoom-to-feature",
       title: "{messages.zoom}"
@@ -42,12 +42,12 @@ class oe extends V {
       e?.isIntersecting && this._loadMoreFeatures();
     }, this._featureMenuIntersectionObserver = new IntersectionObserver(this._featureMenuIntersectionObserverCallback, {
       root: window.document
-    }), this._featureMenuIntersectionObserverNode = null, this._setFocusAnimationFrameId = null, this._setFocusAnimationFrameResolve = null, this._rootFlowItemNode = F(), this._featureMenuViewportNode = F(), this._actionBarMenuNode = F(), this._flowContainerNode = F(), this._aggregatedFeaturesComponent = F(), this.messages = W(), this._selectedFeatureComponent = F(), this._actionFlowItems = /* @__PURE__ */ new WeakSet(), this._direction = U(), this._cancelOpenRelatedFeature = () => {
-      this._openRelatedFeatureAbortController = L(this._openRelatedFeatureAbortController);
+    }), this._featureMenuIntersectionObserverNode = null, this._setFocusAnimationFrameId = null, this._setFocusAnimationFrameResolve = null, this._rootFlowItemNode = _(), this._featureMenuViewportNode = _(), this._actionBarMenuNode = _(), this._flowContainerNode = _(), this._aggregatedFeaturesComponent = _(), this.messages = W(), this._selectedFeatureComponent = _(), this._actionFlowItems = /* @__PURE__ */ new WeakSet(), this._direction = U(), this._cancelOpenRelatedFeature = () => {
+      this._openRelatedFeatureAbortController = S(this._openRelatedFeatureAbortController);
     }, this._spinnerVisible = !1, this._openRelatedFeatureAbortController = null, this.flowItems = new T(), this._aggregatedFeatureCount = 0, this._selectedAggregatedFeatureIndex = -1, this._aggregatedFeaturesLoading = !1, this._hasActionsStartSlotContent = !1, this._hasActionsEndSlotContent = !1, this._selectedFeatureLoading = !1, this._lastSettledCollapseEnabled = !1, this._lastSettledHeading = "", this.viewModel = ae(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.focusTrapEnabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.diagnostics = this.viewModel.diagnostics, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.effectiveHeading = this.viewModel.effectiveHeading, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureItemAbilities = this.viewModel.featureItemAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new T(), this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSelectFeature = !1, this.hideSpinner = !1, this.hideContent = !1, this.chartAnimationDisabled = this.viewModel.featureItemAbilities?.chartAnimation, this.hideAttachmentsContent = this.viewModel.featureItemAbilities?.attachmentsContent, this.hideEmptyRelationshipContent = !1, this.hideCustomContent = this.viewModel.featureItemAbilities?.customContent, this.hideExpressionContent = !1, this.hideFieldsContent = this.viewModel.featureItemAbilities?.fieldsContent, this.hideMediaContent = this.viewModel.featureItemAbilities?.mediaContent, this.hideRelationshipContent = this.viewModel.featureItemAbilities?.relationshipContent, this.hideTextContent = this.viewModel.featureItemAbilities?.textContent, this.hideUtilityNetworkContent = this.viewModel.featureItemAbilities?.utilityNetworkAssociationsContent, this.hideLastEditedInfo = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.open = this.viewModel.open, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisClose = y(), this.arcgisPropertyChange = K()("active", "collapsed", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = y(), this.arcgisTriggerAction = y();
   }
   static {
-    this.properties = { _openRelatedFeatureAbortController: 16, flowItems: 16, _aggregatedFeatureCount: 16, _selectedAggregatedFeatureIndex: 16, _aggregatedFeaturesLoading: 16, _hasActionsStartSlotContent: 16, _hasActionsEndSlotContent: 16, _selectedFeatureLoading: 16, _lastSettledCollapseEnabled: 16, _lastSettledHeading: 16, _selectedFeatureViewModel: 16, _hideActionText: 16, _featureNavigationVisible: 16, _isCollapsed: 16, _collapseEnabled: 16, _selectedFeatureHeading: 16, _selectedFeatureHeadingText: 16, _selectedFeatureContent: 16, _selectedFeaturePending: 16, _featureFlowItemSelected: 16, viewModel: 0, actions: 0, active: 0, autoDestroyDisabled: 5, focusTrapEnabled: 5, collapseDirection: 1, collapsed: 5, content: 1, diagnostics: 0, defaultPopupTemplateEnabled: 5, effectiveHeading: 32, featureCount: 9, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureItemAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSelectFeature: 5, hideSpinner: 5, hideContent: 5, chartAnimationDisabled: 5, hideAttachmentsContent: 5, hideEmptyRelationshipContent: 5, hideCustomContent: 5, hideExpressionContent: 5, hideFieldsContent: 5, hideMediaContent: 5, hideRelationshipContent: 5, hideTextContent: 5, hideUtilityNetworkContent: 5, hideLastEditedInfo: 5, highlightDisabled: 5, icon: 1, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, open: 5, referenceElement: 1, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, showCollapseButton: 5, spatialReference: 0, state: 32, timeZone: 1, updateLocationEnabled: 5, view: 0 };
+    this.properties = { _openRelatedFeatureAbortController: 16, flowItems: 16, _aggregatedFeatureCount: 16, _selectedAggregatedFeatureIndex: 16, _aggregatedFeaturesLoading: 16, _hasActionsStartSlotContent: 16, _hasActionsEndSlotContent: 16, _selectedFeatureLoading: 16, _lastSettledCollapseEnabled: 16, _lastSettledHeading: 16, _selectedFeatureViewModel: 16, _hideActionText: 16, _featureNavigationVisible: 16, _isCollapsed: 16, _collapseEnabled: 16, _selectedFeatureHeading: 16, _headingLabel: 16, _backLabel: 16, _selectedFeatureContent: 16, _selectedFeaturePending: 16, _featureFlowItemSelected: 16, viewModel: 0, actions: 0, active: 0, autoDestroyDisabled: 5, focusTrapEnabled: 5, collapseDirection: 1, collapsed: 5, content: 1, diagnostics: 0, defaultPopupTemplateEnabled: 5, effectiveHeading: 32, featureCount: 9, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureItemAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSelectFeature: 5, hideSpinner: 5, hideContent: 5, chartAnimationDisabled: 5, hideAttachmentsContent: 5, hideEmptyRelationshipContent: 5, hideCustomContent: 5, hideExpressionContent: 5, hideFieldsContent: 5, hideMediaContent: 5, hideRelationshipContent: 5, hideTextContent: 5, hideUtilityNetworkContent: 5, hideLastEditedInfo: 5, highlightDisabled: 5, icon: 1, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, open: 5, referenceElement: 1, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, showCollapseButton: 5, spatialReference: 0, state: 32, timeZone: 1, updateLocationEnabled: 5, view: 0 };
   }
   static {
     this.styles = te;
@@ -70,8 +70,13 @@ class oe extends V {
   get _selectedFeatureHeading() {
     return this.viewModel.selectedFeatureItem?.heading;
   }
-  get _selectedFeatureHeadingText() {
-    return this._selectedFeatureHeading || (this.viewModel.selectedFeatureItem?.state === "loading" ? this.messages.loading : this.messages.untitled);
+  get _headingLabel() {
+    const e = this._selectedFeatureHeading ?? this.heading;
+    return e ? M(e) : void 0;
+  }
+  get _backLabel() {
+    const e = this._headingLabel, { messages: t } = this;
+    return e ? u(t.backLabel ?? "", { title: e }) : t.back;
   }
   get _selectedFeatureContent() {
     return this.viewModel.selectedFeatureItem?.content;
@@ -158,29 +163,29 @@ class oe extends V {
       X(() => [this.initialDisplayMode === "list" && !!this.viewModel?.selectedFeature, this.viewModel?.active], () => {
         this.setFocus();
       }),
-      u(() => [this.flowItems?.length, this.featureMenuOpen], () => {
+      h(() => [this.flowItems?.length, this.featureMenuOpen], () => {
         this.setFocus();
       }),
-      u(() => this.viewModel?.selectedFeatureIndex, (e, t) => this._selectedFeatureIndexUpdated(e, t)),
-      u(() => this.viewModel?.view?.scale, () => this._viewScaleChange()),
-      u(() => this.viewModel?.view, (e, t) => t && this._viewChange()),
-      u(() => this._spinnerEl?.screenLocation, () => this._closeOpenActionMenu()),
-      u(() => this.selectedFeatureComponent?.viewModel, (e, t) => t && this._removeFlowItems()),
-      u(() => [this.viewModel?.features.at(0), this.viewModel?.featureCount ?? 0], ([e, t], i) => {
+      h(() => this.viewModel?.selectedFeatureIndex, (e, t) => this._selectedFeatureIndexUpdated(e, t)),
+      h(() => this.viewModel?.view?.scale, () => this._viewScaleChange()),
+      h(() => this.viewModel?.view, (e, t) => t && this._viewChange()),
+      h(() => this._spinnerEl?.screenLocation, () => this._closeOpenActionMenu()),
+      h(() => this.selectedFeatureComponent?.viewModel, (e, t) => t && this._removeFlowItems()),
+      h(() => [this.viewModel?.features.at(0), this.viewModel?.featureCount ?? 0], ([e, t], i) => {
         const [s, a] = i ?? [void 0, 0];
         (e !== s || t < a) && this._featureMenuViewportScrollTop();
       }),
-      u(() => [this.featureMenuOpen, this.initialDisplayMode, this.open], () => {
+      h(() => [this.featureMenuOpen, this.initialDisplayMode, this.open], () => {
         this.viewModel.featureMenuOpen = this.featureMenuOpen, this.open && (this.featureMenuOpen || this.initialDisplayMode === "list") && (this.viewModel.featurePage = 1);
       }, { initial: !0 }),
-      u(() => this.flowItems.toArray(), () => this._handleFlowItemsChange(), { initial: !0 }),
-      u(() => this.viewModel.aggregatedFeaturesEnabled, (e) => {
+      h(() => this.flowItems.toArray(), () => this._handleFlowItemsChange(), { initial: !0 }),
+      h(() => this.viewModel.aggregatedFeaturesEnabled, (e) => {
         e || (this._aggregatedFeatureCount = 0, this._selectedAggregatedFeatureIndex = -1, this._aggregatedFeaturesLoading = !1, this._removeFlowItems());
       }),
-      u(() => this.referenceElement, (e, t) => {
+      h(() => this.referenceElement, (e, t) => {
         this._removeSpinner(t), this._createSpinner();
       }, { initial: !0 }),
-      u(() => [
+      h(() => [
         this.hideSpinner,
         this.viewModel?.view,
         this.viewModel?.location,
@@ -204,7 +209,7 @@ class oe extends V {
     this._setFocusAnimationFrameId != null && (cancelAnimationFrame(this._setFocusAnimationFrameId), this._setFocusAnimationFrameId = null), this._resolveSetFocusAnimationFrame();
   }
   _cancelFetchingFeatures() {
-    this._fetchFeaturesController = L(this._fetchFeaturesController);
+    this._fetchFeaturesController = S(this._fetchFeaturesController);
   }
   _handleClose() {
     this.close(), this.arcgisClose.emit();
@@ -280,19 +285,17 @@ class oe extends V {
     e !== this._featureMenuIntersectionObserverNode && (this._unobserveFeatureMenuObserver(), this._featureMenuIntersectionObserverNode = e ?? null);
   }
   _getActionLabel(e, t) {
-    const { messages: i } = this;
-    if (e.id === "zoom-to-feature") {
-      const s = t ? C(t.heading || (("state" in t && t.state === "loading" ? i.loading : i.untitled) ?? "")) : this._selectedFeatureHeadingText;
-      return h(i.zoomLabel ?? "", {
-        messages: i,
-        title: s
-      });
-    }
-    return null;
+    if (e.id !== "zoom-to-feature")
+      return null;
+    const { messages: i } = this, s = t?.heading, a = t ? s && M(s) : this._headingLabel;
+    return a ? u(i.zoomLabel ?? "", {
+      messages: i,
+      title: a
+    }) : i.zoom ?? "";
   }
   _getActionTitle(e, t) {
-    const { messages: i } = this, s = t ? t.graphic : this.selectedFeature, { id: a } = e, o = s?.attributes, r = e.title ?? "", l = a === "zoom-to-feature" ? h(r, { messages: i }) : a === "remove-selected-feature" ? h(r, { messages: i }) : a === "zoom-to-aggregated-features" ? h(r, { messages: i }) : a === "browse-aggregated-features" ? h(r, { messages: i }) : e.title;
-    return l && o ? h(l, o) : l ?? "";
+    const { messages: i } = this, s = t ? t.graphic : this.selectedFeature, { id: a } = e, o = s?.attributes, r = e.title ?? "", l = a === "zoom-to-feature" ? u(r, { messages: i }) : a === "remove-selected-feature" ? u(r, { messages: i }) : a === "zoom-to-aggregated-features" ? u(r, { messages: i }) : a === "browse-aggregated-features" ? u(r, { messages: i }) : e.title;
+    return l && o ? u(l, o) : l ?? "";
   }
   _onMainKeydown(e) {
     const { key: t } = e;
@@ -361,10 +364,10 @@ class oe extends V {
     return e || !this._selectedFeaturePending ? e ?? "" : this._lastSettledHeading || (this._selectedFeatureLoading ? this.messages.loading ?? "" : "");
   }
   _handleActionsStartSlotChange(e) {
-    this._hasActionsStartSlotContent = S(e);
+    this._hasActionsStartSlotContent = L(e);
   }
   _handleActionsEndSlotChange(e) {
-    this._hasActionsEndSlotContent = S(e);
+    this._hasActionsEndSlotContent = L(e);
   }
   _removeSpinner(e) {
     e?.manager?.component?.extraContent?.remove(this._spinnerEl), this._spinnerEl = void 0;
@@ -397,14 +400,14 @@ class oe extends V {
   }
   _renderFeaturePaginationText(e, t) {
     const { messages: i } = this;
-    return n`<div class="pagination-text">${h(i.pageText ?? "", {
+    return n`<div class="pagination-text">${u(i.pageText ?? "", {
       index: b(t + 1),
       total: b(e)
     })}</div>`;
   }
   _renderFeatureMenuButton() {
     const { messages: e, viewModel: t } = this, { featureCount: i, streamingFeatures: s, selectedFeatureIndex: a } = t;
-    return n`<calcite-action class="pagination-menu-button" icon=list .label=${e.showAllFeatures ?? ""} .loading=${s} @click=${this._handlePaginationMenuButton} .text=${h(e.pageText ?? "", {
+    return n`<calcite-action class="pagination-menu-button" icon=list .label=${e.showAllFeatures ?? ""} .loading=${s} @click=${this._handlePaginationMenuButton} .text=${u(e.pageText ?? "", {
       index: b(a + 1),
       total: b(i)
     })} text-enabled title=${e.showAllFeatures ?? "" ?? g}></calcite-action>`;
@@ -432,15 +435,15 @@ class oe extends V {
     return this.headerActions.map((e) => this._renderHeaderAction(e)).toArray();
   }
   _renderContentFeature(e) {
-    const { headingLevel: t, hideCloseButton: i, _isCollapsed: s, _collapseEnabled: a, featureNavigationTop: o, initialDisplayMode: r, selectedFeature: l, hideHeading: d } = this, { active: c, selectedFeatureItem: f, content: M } = this.viewModel, p = this._getHeading();
+    const { headingLevel: t, hideCloseButton: i, _isCollapsed: s, _collapseEnabled: a, featureNavigationTop: o, initialDisplayMode: r, selectedFeature: l, hideHeading: d } = this, { active: c, selectedFeatureItem: f, content: C } = this.viewModel, p = this._getHeading();
     if (r === "list" && !l)
       return null;
-    const _ = !this._selectedFeaturePending && (f ? !f.content : !M);
+    const F = !this._selectedFeaturePending && (f ? !f.content : !C);
     return n`<calcite-flow-item .focusTrapEnabled=${this.focusTrapEnabled} class=${x(I({
       "content-feature": !0,
       "flow-item-collapsed": s
-    }))} .closable=${!i} .closed=${!c} .collapsed=${s} .collapseDirection=${this.collapseDirection ?? (o ? "down" : "up")} .collapsible=${a} .headingLevel=${t} .selected=${e} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand }} @calciteFlowItemBack=${this._handleFeatureBack} .loading=${!!this._openRelatedFeatureAbortController || this._selectedFeatureLoading} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} @keydown=${this._onMainKeydown} .heading=${!d && p ? C(p) : void 0} ${m(this._rootFlowItemNode)}>${this._renderHeader()}${!d && p ? n`<div slot=heading><div .innerHTML=${w.sanitize(p ?? "") ?? ""}></div></div>` : null}${this._renderHeaderActions()}${this._renderActionBar()}<div class=${x(I("container", "content-container", {
-      "content-hidden": _
+    }))} .closable=${!i} .closed=${!c} .collapsed=${s} .collapseDirection=${this.collapseDirection ?? (o ? "down" : "up")} .collapsible=${a} .headingLevel=${t} .selected=${e} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand }} @calciteFlowItemBack=${this._handleFeatureBack} .loading=${!!this._openRelatedFeatureAbortController || this._selectedFeatureLoading} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} @keydown=${this._onMainKeydown} .heading=${!d && p ? M(p) : void 0} ${m(this._rootFlowItemNode)}>${this._renderHeader()}${!d && p ? n`<div slot=heading><div .innerHTML=${w.sanitize(p ?? "") ?? ""}></div></div>` : null}${this._renderHeaderActions()}${this._renderActionBar()}<div class=${x(I("container", "content-container", {
+      "content-hidden": F
     }))}>${this._renderContent()}</div>${this._renderFooter()}</calcite-flow-item>`;
   }
   _renderDiagnosticsRefineResults() {
@@ -460,39 +463,35 @@ class oe extends V {
     return i?.size ? n`<calcite-notice class="diagnostics-notice" open kind=info scale=s><span slot=title>${e.maxRecordCountHeading}</span><div slot=message>${i.size <= ne ? this._renderDiagnosticsList(i) : this._renderDiagnosticsMultipleLayers()}</div></calcite-notice>` : null;
   }
   _renderFeatureMenuContainer() {
-    const { viewModel: e, hideCloseButton: t, featureMenuTitle: i, messages: s, initialDisplayMode: a, featureMenuOpen: o, _featureFlowItemSelected: r, _collapseEnabled: l, _isCollapsed: d, featureNavigationTop: c, headingLevel: f } = this, { active: M, features: p, streamingFeatures: _ } = e, $ = i ?? s.selectFeature, A = h(s.backLabel ?? "", {
-      title: this._selectedFeatureHeadingText
-    });
+    const { viewModel: e, hideCloseButton: t, featureMenuTitle: i, messages: s, initialDisplayMode: a, featureMenuOpen: o, _featureFlowItemSelected: r, _collapseEnabled: l, _isCollapsed: d, featureNavigationTop: c, headingLevel: f } = this, { active: C, features: p, streamingFeatures: F } = e, $ = i ?? s.selectFeature, A = this._backLabel;
     if (a === "feature" && !o)
       return null;
     const O = !r;
     return n`<calcite-flow-item .focusTrapEnabled=${this.focusTrapEnabled} class=${x(I({
       "flow-item-collapsed": d
-    }))} .closable=${!t} .closed=${!M} .collapsed=${a === "list" && d} .collapseDirection=${this.collapseDirection ?? (c ? "down" : "up")} .collapsible=${a === "list" && l} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand, back: A }} .description=${this.hideFeatureMenuHeading ? void 0 : h(s.total ?? "", {
+    }))} .closable=${!t} .closed=${!C} .collapsed=${a === "list" && d} .collapseDirection=${this.collapseDirection ?? (c ? "down" : "up")} .collapsible=${a === "list" && l} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand, back: A }} .description=${this.hideFeatureMenuHeading ? void 0 : u(s.total ?? "", {
       total: p.length
     })} .heading=${this.hideFeatureMenuHeading ? void 0 : $} .headingLevel=${f} .loading=${e.waitingForResult} .selected=${O} @calciteFlowItemBack=${(N) => {
       N.preventDefault(), this._handleFeatureMenuBack();
-    }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} ${m(this._featureMenuViewportNode)}>${a === "list" ? this._renderHeaderActions() : null}${_ ? n`<calcite-loader class="loader" inline .label=${s.loading ?? ""} slot=header-actions-end></calcite-loader>` : null}${this._renderDiagnostics()}<div class="container">${this._renderFeatureMenu()}</div><div class="feature-menu-observer" aria-hidden=true ${m(this._featureMenuIntersectionObserverCreated)}></div>${a === "feature" ? n`<calcite-button scale=s appearance=transparent @click=${this._handleFeatureMenuBack} slot=footer-start width=full .label=${A} title=${A ?? g}>${s.back}</calcite-button>` : null}</calcite-flow-item>`;
+    }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} ${m(this._featureMenuViewportNode)}>${a === "list" ? this._renderHeaderActions() : null}${F ? n`<calcite-loader class="loader" inline .label=${s.loading ?? ""} slot=header-actions-end></calcite-loader>` : null}${this._renderDiagnostics()}<div class="container">${this._renderFeatureMenu()}</div><div class="feature-menu-observer" aria-hidden=true ${m(this._featureMenuIntersectionObserverCreated)}></div>${a === "feature" ? n`<calcite-button scale=s appearance=transparent @click=${this._handleFeatureMenuBack} slot=footer-start width=full .label=${A} title=${A ?? g}>${s.back}</calcite-button>` : null}</calcite-flow-item>`;
   }
   _renderFlowItem(e, t) {
-    const { hideCloseButton: i, active: s, hideHeading: a, hideSelectFeature: o, messages: r } = this, l = r.returnToInitialFeature ?? "", d = r?.selectFeature, c = "showAllEnabled" in e ? e.showAllEnabled : !1, f = e.flowType === "feature" || e.flowType === "feature-association" || e.flowType === "feature-relationship" && !c, p = e.flowType !== "feature" && f && "isFeatureFromTable" in e && !e.isFeatureFromTable && !o, _ = e.flowType === "feature" && this.viewModel.aggregatedFeaturesEnabled ? n`<div class="footer" slot=footer>${this._renderPagination(() => {
+    const { hideCloseButton: i, active: s, hideHeading: a, hideSelectFeature: o, messages: r } = this, l = r.returnToInitialFeature ?? "", d = r?.selectFeature, c = "showAllEnabled" in e ? e.showAllEnabled : !1, f = e.flowType === "feature" || e.flowType === "feature-association" || e.flowType === "feature-relationship" && !c, p = e.flowType !== "feature" && f && "isFeatureFromTable" in e && !e.isFeatureFromTable && !o, F = e.flowType === "feature" && this.viewModel.aggregatedFeaturesEnabled ? n`<div class="footer" slot=footer>${this._renderPagination(() => {
       this._aggregatedFeaturesComponent.value?.previous();
     }, () => {
       this._aggregatedFeaturesComponent.value?.next();
     })}${this._renderFeaturePaginationText(this._aggregatedFeatureCount, this._selectedAggregatedFeatureIndex)}</div>` : null;
-    return n`<calcite-flow-item .closable=${!i} .closed=${!s} .focusTrapEnabled=${this.focusTrapEnabled} class="flow-item-drill-in" .description=${C(this._getDrillInFlowItemDescription(e) ?? "")} .heading=${a ? void 0 : C(e.heading ?? "")} .selected=${t} @calciteFlowItemBack=${($) => {
+    return n`<calcite-flow-item .closable=${!i} .closed=${!s} .focusTrapEnabled=${this.focusTrapEnabled} class="flow-item-drill-in" .description=${M(this._getDrillInFlowItemDescription(e) ?? "")} .heading=${a ? void 0 : M(e.heading ?? "")} .selected=${t} @calciteFlowItemBack=${($) => {
       $.preventDefault(), this._handleDrillInBackClick();
-    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this._handleClose}>${a ? null : n`<div slot=heading><div .innerHTML=${w.sanitize(e.heading ?? "") ?? ""}></div></div>`}<div slot=description><div .innerHTML=${w.sanitize(this._getDrillInFlowItemDescription(e) ?? "") ?? ""}></div></div><calcite-action class="action-exit" icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${l ?? ""} title=${l ?? "" ?? g}></calcite-action>${p ? n`<calcite-action icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${d ?? ""} title=${d ?? g}></calcite-action>` : null}${f && this._renderActionBar(e) || ""}<div class="container">${e}</div>${_}</calcite-flow-item>`;
+    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this._handleClose}>${a ? null : n`<div slot=heading><div .innerHTML=${w.sanitize(e.heading ?? "") ?? ""}></div></div>`}<div slot=description><div .innerHTML=${w.sanitize(this._getDrillInFlowItemDescription(e) ?? "") ?? ""}></div></div><calcite-action class="action-exit" icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${l ?? ""} title=${l ?? "" ?? g}></calcite-action>${p ? n`<calcite-action icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${d ?? ""} title=${d ?? g}></calcite-action>` : null}${f && this._renderActionBar(e) || ""}<div class="container">${e}</div>${F}</calcite-flow-item>`;
   }
   _renderContentContainer() {
     const e = this.flowItems?.toArray(), t = e.length > 0, i = this.viewModel.aggregatedFeaturesEnabled && this.viewModel.selectedFeature?.isAggregate && !t, s = i && e.length === 0, a = e.length === 0 && this._featureFlowItemSelected && !i, o = e?.map((d, c) => this._renderFlowItem(d, this._featureFlowItemSelected && c === e.length - 1)), r = this._renderBrowseAggregateContainer(!!s), l = this.initialDisplayMode === "list" ? [this._renderFeatureMenuContainer(), this._renderContentFeature(a)] : [this._renderContentFeature(a), this._renderFeatureMenuContainer()];
     return n`<calcite-flow ${m(this._flowContainerNode)}>${l}${r}${o}</calcite-flow>`;
   }
   _renderBrowseAggregateContainer(e) {
-    const { hideCloseButton: t, active: i, messages: s } = this, { selectedFeature: a } = this.viewModel, o = this.viewModel.aggregatedFeaturesEnabled && a?.isAggregate, r = h(s.backLabel ?? "", {
-      title: this._selectedFeatureHeadingText
-    });
-    return o ? n`<calcite-flow-item .selected=${e} .closable=${!t} .closed=${!i} .focusTrapEnabled=${this.focusTrapEnabled} .description=${this._aggregatedFeatureCount ? h(s.total ?? "", {
+    const { hideCloseButton: t, active: i, messages: s } = this, { selectedFeature: a } = this.viewModel, o = this.viewModel.aggregatedFeaturesEnabled && a?.isAggregate, r = this._backLabel;
+    return o ? n`<calcite-flow-item .selected=${e} .closable=${!t} .closed=${!i} .focusTrapEnabled=${this.focusTrapEnabled} .description=${this._aggregatedFeatureCount ? u(s.total ?? "", {
       total: this._aggregatedFeatureCount
     }) : ""} .heading=${s.aggregatedFeatures} @calciteFlowItemBack=${(l) => {
       l.preventDefault(), this.viewModel.aggregatedFeaturesEnabled = !1;

package/dist/components/arcgis-line-of-sight/customElement.d.ts

@@ -24,12 +24,21 @@ import type { Icon as Icon } from "@esri/calcite-components/components/calcite-i
  * and subsequent clicks place the [targets](https://developers.arcgis.com/javascript/latest/references/core/analysis/LineOfSightAnalysisTarget/).
  * Both the observer and target points can be moved by dragging. Additionally, the target points can be removed with a right click.
  *
- * Snapping, tooltips, display units, and input units are inherited from
- * [ViewOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/ViewOptions/).
- *
- * **Known limitation**
+ * **Things to consider**
  *
- * Line Of Sight is only supported in a 3D [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/) component.
+ * * Line Of Sight is only supported in a 3D [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/) component.
+ * * The results of the tool vary depending on the zoom level, as changes in zoom level affect the level of detail (LOD) of the scene geometry.
+ * * Snapping, tooltips, display units, and input units are inherited from
+ * [ViewOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/ViewOptions/).
+ *   * Snapping is enabled by default. Holding the `CTRL` key disables it.
+ *   * Layer types currently supported for snapping are:
+ * [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/),
+ * [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/) (except Mesh geometries),
+ * [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoJSONLayer/),
+ * [WFSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/WFSLayer/),
+ * [CSVLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CSVLayer/),
+ * [3D Object SceneLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/SceneLayer/),
+ * and [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/BuildingSceneLayer/).
  *
  * **See also**
  *
@@ -225,7 +234,7 @@ export abstract class ArcgisLineOfSight extends LitElement {
    * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-line-of-sight component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: SceneView | undefined;
-  /** Clear the current analysis results. After calling this method, the user can set a new observer and targets. */
+  /** Clear the current observer and any targets. After calling this method, the user can set a new observer and targets. */
   clear(): Promise<void>;
   /** After [stop()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-line-of-sight/#stop) was called, this method allows to continue the line of sight analysis and add more targets. */
   continue(): Promise<void>;