@arcgis/map-components 5.2.0-next.99 → 6.0.0-next.1

package/dist/components/arcgis-paste/customElement.js

@@ -17,7 +17,7 @@ import { createApplySetModifyItem as W, createApplySet as q, createFeatureStateP
 import { whenOnce as ae, watch as N } from "@arcgis/core/core/reactiveUtils.js";
 import { getRendererFields as Y, getFeatureEditFields as _e } from "@arcgis/core/layers/support/fieldUtils.js";
 import xe from "@arcgis/core/widgets/BatchAttributeForm/BatchAttributeFormViewModel.js";
-import { c as Pe, f as ee } from "../../chunks/layer-utils.js";
+import { d as Pe, h as ee } from "../../chunks/layer-utils.js";
 import { g as se } from "../../chunks/async-utils.js";
 import { substitute as b } from "@arcgis/core/intl.js";
 import { usePropertyChange as $e } from "@arcgis/lumina/controllers";
@@ -43,7 +43,7 @@ function Se(e, t, i, a, s, r) {
   const g = r.objectIdField ?? "";
   return e.forEach((m) => {
     if (m.name !== g && !h.includes(m.name) && !p.includes(m.name) && !s.includes(m.name) && m.type !== "global-id" && (u === "" || u !== m.name)) {
-      const f = ke(m, t);
+      const f = Oe(m, t);
       f.match && f.targetField && (l[f.targetField?.name] = i[m.name]);
     }
   }), l;
@@ -54,7 +54,7 @@ function Te(e) {
 function Ge(e) {
   return e?.type === "subtype-sublayer" && (e = e.parent), e ? _e(e) : [];
 }
-function Oe(e, t) {
+function ke(e, t) {
   if (e.type === t.type)
     return t.type === "string" ? e.length <= t.length : !0;
   switch (e.type) {
@@ -68,10 +68,10 @@ function Oe(e, t) {
       return !1;
   }
 }
-function ke(e, t) {
+function Oe(e, t) {
   const i = { match: !1, sourceField: null, targetField: null };
   for (const a of t)
-    if (Oe(e, a)) {
+    if (ke(e, a)) {
       const s = e.name.replace(/\s/gu, "").toLowerCase();
       if (a.name.replace(/\s/gu, "").toLowerCase() === s)
         return i.match = !0, i.sourceField = e, i.targetField = a, i;
@@ -390,7 +390,12 @@ let v = class extends U {
   }
   async createMergedClipboardGeom() {
     const e = this.viewModel.clipboardFeatures.map((i) => i.graphic?.geometry).filter((i) => i != null).toArray();
-    return e.length === 0 ? null : e.length === 1 ? e[0].clone() : (await import("@arcgis/core/geometry/operators/unionOperator.js")).executeMany(e) ?? null;
+    if (e.length === 0)
+      return null;
+    if (e.length === 1)
+      return e[0].clone();
+    const { unionExecuteMany: t } = await import("@arcgis/core/geometry/operators/unionOperator.js");
+    return t(e) ?? null;
   }
   removeGraphicIdentifierFields(e, t) {
     t.objectIdField && delete e.attributes[t.objectIdField], t.globalIdField && delete e.attributes[t.globalIdField];
@@ -497,7 +502,7 @@ let F = class extends v {
     const e = q();
     if (e.featureState = K(this.viewModel.view), !this.viewModel.selectedFeature)
       return { success: !1, failReason: "noSelectedError" };
-    const [t, i] = await Promise.all([
+    const [{ unionExecute: t }, { equalsExecute: i }] = await Promise.all([
       import("@arcgis/core/geometry/operators/unionOperator.js"),
       import("@arcgis/core/geometry/operators/equalsOperator.js")
     ]);
@@ -510,8 +515,8 @@ let F = class extends v {
         a = l?.graphic?.geometry ?? null, a && (a = a.clone(), s = !0);
         continue;
       }
-      const p = t.execute(a, h);
-      i.execute(a, p) || (a = p, s = !0);
+      const p = t(a, h);
+      i(a, p) || (a = p, s = !0);
     }
     if (!s)
       return { success: !1, failReason: "noChangeError" };
@@ -555,7 +560,7 @@ G([
 F = G([
   C("components.paste.commands.PasteAppendCommand")
 ], F);
-var Ne = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, O = (e, t, i, a) => {
+var Ne = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, k = (e, t, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Ue(t, i) : t, r = e.length - 1, l; r >= 0; r--)
     (l = e[r]) && (s = (a ? l(t, i, s) : l(s)) || s);
   return a && s && Ne(t, i, s), s;
@@ -587,7 +592,7 @@ let _ = class extends v {
     const e = q();
     if (e.featureState = K(this.viewModel.view), !this.viewModel.selectedFeature)
       return { success: !1, failReason: "noSelectedError", applySet: e };
-    const [t, i] = await Promise.all([
+    const [{ differenceExecute: t }, { equalsExecute: i }] = await Promise.all([
       import("@arcgis/core/geometry/operators/differenceOperator.js"),
       import("@arcgis/core/geometry/operators/equalsOperator.js")
     ]);
@@ -599,10 +604,10 @@ let _ = class extends v {
       const h = l?.graphic?.geometry;
       if (!h)
         continue;
-      const p = t.execute(a, h);
+      const p = t(a, h);
       if (!p)
         return { success: !1, failReason: "deletesGeometryError", applySet: e };
-      i.execute(a, p) || (a = p, s = !0);
+      i(a, p) || (a = p, s = !0);
     }
     if (!s)
       return { success: !1, failReason: "noChangeError", applySet: e };
@@ -673,25 +678,25 @@ let _ = class extends v {
     return e.pasteSubtractTitle;
   }
 };
-O([
+k([
   o()
 ], _.prototype, "id", 1);
-O([
+k([
   o()
 ], _.prototype, "icon", 1);
-O([
+k([
   o()
 ], _.prototype, "immediate", 1);
-O([
+k([
   o()
 ], _.prototype, "mustShowOnCommandPage", 1);
-O([
+k([
   o()
 ], _.prototype, "commandEnabled", 1);
-_ = O([
+_ = k([
   C("components.paste.commands.PasteSubtractCommand")
 ], _);
-var qe = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, k = (e, t, i, a) => {
+var qe = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, O = (e, t, i, a) => {
   for (var s = a > 1 ? void 0 : a ? Ke(t, i) : t, r = e.length - 1, l; r >= 0; r--)
     (l = e[r]) && (s = (a ? l(t, i, s) : l(s)) || s);
   return a && s && qe(t, i, s), s;
@@ -731,22 +736,22 @@ let x = class extends v {
     return e.pasteAsTitle;
   }
 };
-k([
+O([
   o()
 ], x.prototype, "id", 1);
-k([
+O([
   o()
 ], x.prototype, "icon", 1);
-k([
+O([
   o()
 ], x.prototype, "immediate", 1);
-k([
+O([
   o()
 ], x.prototype, "mustShowOnCommandPage", 1);
-k([
+O([
   o()
 ], x.prototype, "commandEnabled", 1);
-x = k([
+x = O([
   C("components.paste.commands.PasteAsCommand")
 ], x);
 var Xe = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, H = (e, t, i, a) => {
@@ -1839,7 +1844,7 @@ class ot extends ue {
         });
       } catch {
       }
-    }}>${(this.viewModel.bauFeatures?.length ?? 0) > 1 ? b(this._messages.pasteMany ?? "", { num: this.viewModel.bauFeatures.length }) : this._messages.paste}</calcite-button></div></div>`}${i ? d`<calcite-action-bar overflow-actions-disabled slot=action-bar layout=horizontal scale=s expand-disabled class="carousel-bar"><calcite-button .disabled=${this.viewModel.updating} @click=${(p) => {
+    }}>${(this.viewModel.bauFeatures?.length ?? 0) > 1 ? b(this._messages.pasteMany ?? "", { num: this.viewModel.bauFeatures.length }) : this._messages.paste}</calcite-button></div></div>`}${i ? d`<calcite-action-bar overflow-mode=none slot=action-bar layout=horizontal scale=s expand-toggle-disabled class="carousel-bar"><calcite-button .disabled=${this.viewModel.updating} @click=${(p) => {
       this._showFloatingChoice = !this._showFloatingChoice, p.stopPropagation();
     }} scale=s appearance=transparent icon-start=legend icon-end=chevron-down kind=neutral><span class="bau-pick">${l}${h ? d`<calcite-icon scale=s icon=exclamation-mark-triangle class="danger-icon-warning"></calcite-icon>` : ""}</span></calcite-button><calcite-action slot=actions-end icon=chevron-left icon-flip-rtl scale=s .text=${this._messages.back ?? ""} .disabled=${!s || a || !i} @click=${() => {
       this.viewModel.previousActiveFeature();

package/dist/components/arcgis-popup/customElement.d.ts

@@ -3,14 +3,14 @@ import type Graphic from "@arcgis/core/Graphic.js";
 import type Collection from "@arcgis/core/core/Collection.js";
 import type Point from "@arcgis/core/geometry/Point.js";
 import type { ArcgisReferenceElement, HeadingLevel } from "../types.js";
-import type { Alignment, DockOptions, PopupPositionResult, FetchFeaturesOptions } from "./types.js";
+import type { Alignment, DockOptions, OpenFeatureStreamOptions, PopupPositionResult } from "./types.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ActionEvent } from "@arcgis/core/widgets/Popup/types.js";
-import type { ScreenPoint } from "@arcgis/core/core/types.js";
 import type { ArcgisFeaturesNext } from "../arcgis-features-next/customElement.js";
 import type { ArcgisFeatureNext } from "../arcgis-feature-next/customElement.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 import type { PopupAction, InitialDisplayOptions, State } from "@arcgis/core/popup/types.js";
+import type { FetchPopupFeaturesDiagnostics } from "@arcgis/core/views/PopupView.js";
 import type { GoToOverride } from "@arcgis/core/widgets/support/types.js";
 import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
 
@@ -125,6 +125,8 @@ import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.j
  * Custom PopupTemplates may also be assigned directly to a popup by setting [graphics](https://developers.arcgis.com/javascript/latest/references/core/Graphic/) on the
  * [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features) property.
  *
+ * @slot [actions-start] - _Since 5.2._ Slot for adding Calcite [actions](https://developers.arcgis.com/calcite-design-system/components/action/) or [action groups](https://developers.arcgis.com/calcite-design-system/components/action-group/) to the start of the action bar. Multiple actions or action groups can be placed in this slot. Slotted actions remain at the start of the action bar and are not automatically grouped if they exceed the available width. To group actions, place them in a Calcite action group. Actions in this slot remain separate from other actions, including default actions (such as "Zoom to" and "Browse features"), [PopupTemplate actions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#actions), and [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#actions).
+ * @slot [actions-end] - _Since 5.2._ Slot for adding Calcite [actions](https://developers.arcgis.com/calcite-design-system/components/action/) or [action groups](https://developers.arcgis.com/calcite-design-system/components/action-group/) to the end of the action bar. Multiple actions or action groups can be placed in this slot. Slotted actions remain at the end of the action bar and are not automatically grouped if they exceed the available width. To group actions, place them in a Calcite action group. Actions in this slot remain separate from other actions, including default actions (such as "Zoom to" and "Browse features"), [PopupTemplate actions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#actions), and [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#actions).
  * @since 4.34
  * @beta
  * @see [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/)
@@ -141,7 +143,7 @@ export abstract class ArcgisPopup extends LitElement {
    */
   accessor actions: Collection<PopupAction>;
   /**
-   * Indicates if the component is active when it is visible and is not [waiting](https://developers.arcgis.com/javascript/latest/references/core/popup/FeatureContentCollection/#waitingForResult).
+   * Indicates if the component is active when it is visible and is not [waiting](https://developers.arcgis.com/javascript/latest/references/core/popup/FeaturesModel/#waitingForResult).
    *
    * @default false
    */
@@ -213,6 +215,12 @@ export abstract class ArcgisPopup extends LitElement {
    * @default false
    */
   accessor defaultPopupTemplateEnabled: boolean;
+  /**
+   * Diagnostics collected while fetching features from a view.
+   *
+   * @since 5.2
+   */
+  get diagnostics(): FetchPopupFeaturesDiagnostics | null | undefined;
   /**
    * Indicates whether the placement of the popup is docked to the side of the view.
    *
@@ -457,8 +465,7 @@ export abstract class ArcgisPopup extends LitElement {
   accessor includeDefaultActionsDisabled: boolean;
   /**
    * Indicates whether to initially display a list of features, or the content for one feature.
-   *
-   * @default "feature"
+   * By default, a list is displayed when the associated view has `focusRegionEnabled` enabled; otherwise, the content for one feature is displayed.
    */
   accessor initialDisplayMode: InitialDisplayOptions;
   /** The component's default label. */
@@ -539,15 +546,6 @@ export abstract class ArcgisPopup extends LitElement {
    * ```
    */
   accessor open: boolean;
-  /**
-   * An array of pending Promises that have not yet been fulfilled. If there are
-   * no pending promises, the value is `null`. When the pending promises are
-   * resolved they are removed from this array and the features they return
-   * are pushed into the [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features) array.
-   *
-   * @deprecated since 5.1.
-   */
-  accessor promises: Array<Promise<Array<Graphic>>>;
   /**
    * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
    *
@@ -602,28 +600,35 @@ export abstract class ArcgisPopup extends LitElement {
    */
   accessor view: MapViewOrSceneView | null | undefined;
   /**
-   * Removes all [promises](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#promises), [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features), [content](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#content),
-   * [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading) and [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) from the Popup.
+   * Removes all [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features), [content](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#content),
+   * [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading), and [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) from the Popup.
    */
   clear(): Promise<void>;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
-  /**
-   * Use this method to return feature(s) at a given screen location. These features are fetched from all of the [LayerViews](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) in the [view](https://developers.arcgis.com/javascript/latest/references/core/views/View/). In order to use this, a layer must already have an associated [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) and have its [popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#popupEnabled). This method allows a developer to control how the input location is handled. For example, you may want to fetch features on a `click` event or on a `pointer-move` event. This method automatically sets the [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) based on the input event's screen coordinates.
-   *
-   * @deprecated since 5.1. Use the `fetchPopupFeatures` method on the [Map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#fetchPopupFeatures), [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#fetchPopupFeatures), or [Link Chart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#fetchPopupFeatures) component to fetch features based on a screen location.
-   * @param screenPoint
-   * @param options
-   * @deprecated
-   * @see [open](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#open)
-   */
-  fetchFeatures(screenPoint?: ScreenPoint, options?: FetchFeaturesOptions): Promise<void>;
   /**
    * Selects the feature at the next index in relation to the selected feature.
    *
    * @see [selectedFeatureIndex](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeatureIndex)
    */
   next(): Promise<void>;
+  /**
+   * Opens the popup with a location and a feature stream. Promise batches are converted to a feature stream internally. While waiting, the popup remains at its current location and becomes active when the first feature is available.
+   * If both `featureStream` and `promises` are provided, `featureStream` is used.
+   * If the location is `null` or `undefined`, the first feature's geometry determines the popup location. If no features become available, the popup closes without changing its location.
+   *
+   * @param options - The feature source and location used to open the popup.
+   * @internal
+   * @example
+   * ```js
+   * const featureStream = viewElement.fetchPopupFeatures(event.detail.screenPoint);
+   * await popupComponent.openFeatureStream({
+   *   featureStream,
+   *   location: event.detail.mapPoint
+   * });
+   * ```
+   */
+  openFeatureStream(options: OpenFeatureStreamOptions): Promise<void>;
   /**
    * Selects the feature at the previous index in relation to the selected feature.
    *
@@ -634,8 +639,8 @@ export abstract class ArcgisPopup extends LitElement {
   setFocus(): Promise<void>;
   /** Emitted when the component's close button is clicked. */
   readonly arcgisClose: import("@arcgis/lumina").TargetedEvent<this, void>;
-  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "active" | "collapsed" | "currentAlignment" | "dockEnabled" | "effectiveHeading" | "featureCount" | "featureMenuOpen" | "features" | "promises" | "selectedDrillInFeature" | "selectedFeature" | "selectedFeatureComponent" | "selectedFeatureIndex" | "state" | "open"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "active" | "collapsed" | "currentAlignment" | "dockEnabled" | "effectiveHeading" | "featureCount" | "featureMenuOpen" | "features" | "selectedDrillInFeature" | "selectedFeature" | "selectedFeatureComponent" | "selectedFeatureIndex" | "state" | "open"; }>;
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
    * Fires after the user clicks on an action in the Popup component.

package/dist/components/arcgis-popup/customElement.js

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as E } from "../../chunks/runtime.js";
 import { css as A, html as w } from "lit";
-import P from "@arcgis/core/popup/FeatureContentCollection.js";
+import P from "@arcgis/core/popup/FeaturesModel.js";
 import { u as O } from "../../chunks/useT9n.js";
 import { useDirection as F, usePropertyChange as $ } from "@arcgis/lumina/controllers";
-import { m as N } from "../../chunks/useViewModel.js";
-import { LitElement as S, createEvent as _, safeStyleMap as L, safeClassMap as y } from "@arcgis/lumina";
+import { m as S } from "../../chunks/useViewModel.js";
+import { LitElement as N, createEvent as _, safeStyleMap as L, safeClassMap as y } from "@arcgis/lumina";
 import { stripHTML as T } from "@arcgis/core/applications/Components/stringUtils.js";
-import { classes as C } from "@arcgis/toolkit/dom";
+import { classes as x } from "@arcgis/toolkit/dom";
 import { createRef as g, ref as m } from "lit/directives/ref.js";
 import { watch as p } from "@arcgis/core/core/reactiveUtils.js";
 import H from "@arcgis/core/support/actions/ActionButton.js";
@@ -17,32 +17,35 @@ const V = A`:host{display:contents;--arcgis-internal-popup-pointer-size: 12px;--
 function f(b) {
   return b && Number.parseInt(b.replaceAll(/[^-\d.]/gu, ""), 10) || 0;
 }
-const I = N(P), x = {
+const I = S(P), D = {
   buttonEnabled: !0,
   position: "auto",
   breakpoint: {
     width: 544
   }
 };
-class R extends S {
+class R extends N {
   constructor() {
     super(...arguments), this._direction = F(), this._featuresComponent = g(), this._dockAction = new H({ id: "popup-dock-action" }), this._mainContainerNode = g(), this._pointerNode = g(), this.messages = O(), this.viewModel = I(this), this._containerNode = g(), this._popupResizeObserver = new ResizeObserver(() => this._positionContainer()), this._positionContainer = () => {
       this.positionStyle = this._calculatePositionStyle();
-    }, this.screenLocation = B(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.alignment = "auto", this.autoCloseEnabled = !1, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.dockEnabled = !1, this.effectiveHeading = this.viewModel.effectiveHeading, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.features = this.viewModel.features, this.featureStream = this.viewModel.featureStream, this.focusTrapDisabled = !1, this.goToOverride = this.viewModel.goToOverride, this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideCollapseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideEmptyRelationshipContent = !1, this.hideHeading = !1, this.hideSpinner = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.open = this.viewModel.open, this.promises = this.viewModel.promises, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.state = this.viewModel.state, this.topLayerDisabled = !1, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = $()("active", "collapsed", "currentAlignment", "dockEnabled", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = _(), this.arcgisClose = _(), this.arcgisTriggerAction = _();
+    }, this.screenLocation = B(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.alignment = "auto", this.autoCloseEnabled = !1, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.diagnostics = this.viewModel.diagnostics, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.dockEnabled = !1, this.effectiveHeading = this.viewModel.effectiveHeading, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.features = this.viewModel.features, this.featureStream = this.viewModel.featureStream, this.focusTrapDisabled = !1, this.goToOverride = this.viewModel.goToOverride, this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideCollapseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideEmptyRelationshipContent = !1, this.hideHeading = !1, this.hideSpinner = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.open = this.viewModel.open, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.state = this.viewModel.state, this.topLayerDisabled = !1, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = $()("active", "collapsed", "currentAlignment", "dockEnabled", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = _(), this.arcgisClose = _(), this.arcgisTriggerAction = _();
   }
   static {
-    this.properties = { screenLocation: 16, positionStyle: 16, _featureNavigationTop: 16, actions: 0, active: 0, alignment: 1, autoCloseEnabled: 5, autoDestroyDisabled: 5, collapsed: 5, content: 1, currentAlignment: 32, currentDockPosition: 32, defaultPopupTemplateEnabled: 5, dockEnabled: 5, dockOptions: 0, effectiveHeading: 32, featureCount: 0, featureMenuOpen: 5, featureMenuTitle: 1, features: 0, featureStream: 0, focusTrapDisabled: 5, goToOverride: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideCollapseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideEmptyRelationshipContent: 5, hideHeading: 5, hideSpinner: 5, highlightDisabled: 5, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, messageOverrides: 0, open: 5, promises: 0, referenceElement: 1, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, state: 32, topLayerDisabled: 5, updateLocationEnabled: 5, view: 0 };
+    this.properties = { screenLocation: 16, positionStyle: 16, _featureNavigationTop: 16, _effectiveDockEnabled: 16, actions: 0, active: 0, alignment: 1, autoCloseEnabled: 5, autoDestroyDisabled: 5, collapsed: 5, content: 1, diagnostics: 32, currentAlignment: 32, currentDockPosition: 32, defaultPopupTemplateEnabled: 5, dockEnabled: 5, dockOptions: 0, effectiveHeading: 32, featureCount: 0, featureMenuOpen: 5, featureMenuTitle: 1, features: 0, featureStream: 0, focusTrapDisabled: 5, goToOverride: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideCollapseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideEmptyRelationshipContent: 5, hideHeading: 5, hideSpinner: 5, highlightDisabled: 5, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, messageOverrides: 0, open: 5, referenceElement: 1, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, state: 32, topLayerDisabled: 5, updateLocationEnabled: 5, view: 0 };
   }
   static {
     this.styles = V;
   }
   get trackLocation() {
-    return this.active && !this.dockEnabled;
+    return this.active && !this._effectiveDockEnabled;
   }
   get _featureNavigationTop() {
     const { currentAlignment: t, currentDockPosition: e } = this;
     return t === "bottom-left" || t === "bottom-center" || t === "bottom-right" || t === "bottom-start" || t === "bottom-end" || e === "top-left" || e === "top-center" || e === "top-right" || e === "top-start" || e === "top-end";
   }
+  get _effectiveDockEnabled() {
+    return this.viewModel?.view?.focusRegionEnabled ? !0 : this.dockEnabled;
+  }
   get currentAlignment() {
     return this._getCurrentAlignment();
   }
@@ -50,10 +53,10 @@ class R extends S {
     return this._getCurrentDockPosition();
   }
   get dockOptions() {
-    return this._dockOptions || x;
+    return this._dockOptions || D;
   }
   set dockOptions(t) {
-    const e = { ...x }, o = this.viewModel?.view?.breakpoints, i = {};
+    const e = { ...D }, o = this.viewModel?.view?.breakpoints, i = {};
     o && (i.width = o.xsmall, i.height = o.xsmall);
     const s = { ...e, ...t }, n = { ...e.breakpoint, ...i }, { breakpoint: r } = s;
     typeof r == "object" ? s.breakpoint = { ...n, ...r } : r && (s.breakpoint = n), this._dockOptions = s;
@@ -70,8 +73,8 @@ class R extends S {
   async destroy() {
     await this.manager.destroy(), this._dockAction.destroy(), this._popupResizeObserver.disconnect();
   }
-  async fetchFeatures(t, e) {
-    await this._featuresComponent.value?.fetchFeatures(t, e);
+  async openFeatureStream(t) {
+    this.viewModel.openFeatureStream(t);
   }
   async next() {
     this.viewModel.next();
@@ -87,17 +90,17 @@ class R extends S {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      p(() => [this.viewModel?.view?.widthBreakpoint, this.dockEnabled, this._direction], () => this._handleDockIcon(), { initial: !0 }),
-      p(() => [this.dockEnabled, this.messages?.undock, this.messages?.dock], () => this._handleDockEnabled(), { initial: !0 }),
-      p(() => [this.dockOptions, this._featuresComponent.value], () => {
+      p(() => [this.viewModel?.view?.widthBreakpoint, this._effectiveDockEnabled, this._direction], () => this._handleDockIcon(), { initial: !0 }),
+      p(() => [this._effectiveDockEnabled, this.messages?.undock, this.messages?.dock], () => this._handleDockEnabled(), { initial: !0 }),
+      p(() => [this.dockOptions, this._featuresComponent.value, this.viewModel?.view?.focusRegionEnabled], () => {
         const { _dockAction: t, dockOptions: e } = this, o = this._featuresComponent.value?.headerActions;
-        o?.remove(t), e.buttonEnabled && o?.add(t);
+        o?.remove(t), e.buttonEnabled && !this.viewModel?.view?.focusRegionEnabled && o?.add(t);
       }, { initial: !0 }),
       p(() => [
         this._pointerNode.value,
         this.alignment,
         this.currentAlignment,
-        this.dockEnabled,
+        this._effectiveDockEnabled,
         this.dockOptions,
         this.screenLocation,
         this.viewModel?.active,
@@ -113,14 +116,14 @@ class R extends S {
         this.viewModel.map = t;
       }, { initial: !0 }),
       p(() => this.screenLocation, (t, e) => this._autoClose(t, e)),
-      p(() => [this.active, this._containerNode.value, this.dockEnabled, this.topLayerDisabled], () => this._togglePopover(), { initial: !0 })
+      p(() => [this.active, this._containerNode.value, this._effectiveDockEnabled, this.topLayerDisabled], () => this._togglePopover(), { initial: !0 })
     ]);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._popupResizeObserver.disconnect();
   }
   _togglePopover() {
-    this._containerNode.value?.togglePopover(this.active && !this.dockEnabled && !this.topLayerDisabled);
+    this._containerNode.value?.togglePopover(this.active && !this._effectiveDockEnabled && !this.topLayerDisabled);
   }
   _syncPopupResizeObserver(t = this._mainContainerNode.value) {
     this._popupResizeObserver.disconnect(), t && this._popupResizeObserver.observe(t);
@@ -151,13 +154,13 @@ class R extends S {
     const { _mainContainerNode: e, _popupRect: o, viewModel: i } = this, { view: s } = i, { screenLocation: n } = this;
     if (n == null || !s || !o || !e.value)
       return "top-center";
-    const r = window.getComputedStyle(e.value), l = f(r.maxHeight), a = f(r.height), c = this._getPointerSize(), { height: d, width: v } = o, h = v + c, u = Math.max(d, l, a) + c, z = this._isOutsideView({
+    const r = window.getComputedStyle(e.value), l = f(r.maxHeight), a = f(r.height), d = this._getPointerSize(), { height: c, width: v } = o, h = v + d, u = Math.max(c, l, a) + d, C = this._isOutsideView({
       popupHeight: u,
       popupWidth: h,
       screenLocation: n,
       side: "right",
       view: s
-    }), D = this._isOutsideView({
+    }), M = this._isOutsideView({
       popupHeight: u,
       popupWidth: h,
       screenLocation: n,
@@ -169,20 +172,20 @@ class R extends S {
       screenLocation: n,
       side: "top",
       view: s
-    }), M = this._isOutsideView({
+    }), z = this._isOutsideView({
       popupHeight: u,
       popupWidth: h,
       screenLocation: n,
       side: "bottom",
       view: s
     });
-    return D ? k ? "bottom-right" : "top-right" : z ? k ? "bottom-left" : "top-left" : k ? M ? "top-center" : "bottom-center" : "top-center";
+    return M ? k ? "bottom-right" : "top-right" : C ? k ? "bottom-left" : "top-left" : k ? z ? "top-center" : "bottom-center" : "top-center";
   }
   _callCurrentAlignment(t) {
     return typeof t == "function" ? t.call(this) : t;
   }
   _getCurrentAlignment() {
-    return this.dockEnabled || !this.active || !this._mainContainerNode.value ? null : this._calculateAutoAlignment(this._callCurrentAlignment(this.alignment));
+    return this._effectiveDockEnabled || !this.active || !this._mainContainerNode.value ? null : this._calculateAutoAlignment(this._callCurrentAlignment(this.alignment));
   }
   _callDockPosition(t) {
     return typeof t == "function" ? t.call(this) : t;
@@ -191,7 +194,7 @@ class R extends S {
     return this._calculateAutoDockPosition(this._callDockPosition(this.dockOptions?.position));
   }
   _getCurrentDockPosition() {
-    return this.dockEnabled && this.active ? this._getDockPosition() : null;
+    return this._effectiveDockEnabled && this.active ? this._getDockPosition() : null;
   }
   _calculateAutoDockPosition(t) {
     if (t !== "auto")
@@ -204,7 +207,7 @@ class R extends S {
   }
   _getDockIcon() {
     const t = this._getDockPosition(), { _direction: e } = this;
-    if (this.dockEnabled)
+    if (this._effectiveDockEnabled)
       return "minimize";
     switch (t) {
       case "top-left":
@@ -228,48 +231,48 @@ class R extends S {
     this._dockAction.icon = this._getDockIcon();
   }
   _handleDockEnabled() {
-    this._dockAction.title = this.dockEnabled ? this.messages?.undock : this.messages?.dock;
+    this._dockAction.title = this._effectiveDockEnabled ? this.messages?.undock : this.messages?.dock;
   }
   _calculateAlignmentPosition(t, e, o, i) {
     if (t < 0 || e < 0 || !o || !i || t > o.width || e > o.height)
       return;
-    const { topLayerDisabled: s } = this, n = s ? t : t + o.x, r = s ? e : e + o.y, { _direction: l, currentAlignment: a } = this, c = this._getPointerSize(), d = c / 2;
+    const { topLayerDisabled: s } = this, n = s ? t : t + o.x, r = s ? e : e + o.y, { _direction: l, currentAlignment: a } = this, d = this._getPointerSize(), c = d / 2;
     if (a === "top-left" || a === "top-start" && l === "ltr" || a === "top-end" && l === "rtl")
       return {
-        top: r - (i.height + d),
-        left: n - i.width - d
+        top: r - (i.height + c),
+        left: n - i.width - c
       };
     if (a === "top-center")
       return {
-        top: r - (i.height + c),
+        top: r - (i.height + d),
         left: n - i.width / 2
       };
     if (a === "top-right" || a === "top-end" && l === "ltr" || a === "top-start" && l === "rtl")
       return {
-        top: r - (i.height + d),
-        left: n + d
+        top: r - (i.height + c),
+        left: n + c
       };
     if (a === "bottom-left" || a === "bottom-start" && l === "ltr" || a === "bottom-end" && l === "rtl")
       return {
-        top: r + d,
-        left: n - i.width - d
+        top: r + c,
+        left: n - i.width - c
       };
     if (a === "bottom-center")
       return {
-        top: r + c,
+        top: r + d,
         left: n - i.width / 2
       };
     if (a === "bottom-right" || a === "bottom-end" && l === "ltr" || a === "bottom-start" && l === "rtl")
       return {
-        top: r + d,
-        left: n + d
+        top: r + c,
+        left: n + c
       };
   }
   _getPositionStyleValue(t) {
     return t != null ? `${t}px` : "auto";
   }
   _calculatePositionStyle() {
-    if (this.dockEnabled)
+    if (this._effectiveDockEnabled)
       return;
     const { screenLocation: t } = this;
     if (t == null)
@@ -304,7 +307,7 @@ class R extends S {
     this.viewModel?.view?.ready && typeof t.breakpoint == "object" && (this.dockEnabled = this._shouldDockAtCurrentViewSize(t));
   }
   render() {
-    const { _direction: t, dockEnabled: e, currentAlignment: o, currentDockPosition: i, positionStyle: s } = this, { active: n, view: r } = this.viewModel, l = n && e, a = n && !e, c = r?.widthBreakpoint, d = r?.heightBreakpoint, v = {
+    const { _direction: t, _effectiveDockEnabled: e, currentAlignment: o, currentDockPosition: i, positionStyle: s } = this, { active: n, view: r } = this.viewModel, l = n && e, a = n && !e, d = r?.widthBreakpoint, c = r?.heightBreakpoint, v = {
       "aligned-top-center": o === "top-center",
       "aligned-bottom-center": o === "bottom-center",
       "aligned-top-left": o === "top-left" || o === "top-start" && t === "ltr" || o === "top-end" && t === "rtl",
@@ -324,33 +327,33 @@ class R extends S {
       "is-docked-bottom-right": i === "bottom-right",
       "is-docked-bottom-start": i === "bottom-start",
       "is-docked-bottom-end": i === "bottom-end",
-      "is-xl-width-breakpoint": c === "xlarge",
-      "is-lg-width-breakpoint": c === "large",
-      "is-md-width-breakpoint": c === "medium",
-      "is-sm-width-breakpoint": c === "small",
-      "is-xs-width-breakpoint": c === "xsmall",
-      "is-xl-height-breakpoint": d === "xlarge",
-      "is-lg-height-breakpoint": d === "large",
-      "is-md-height-breakpoint": d === "medium",
-      "is-sm-height-breakpoint": d === "small",
-      "is-xs-height-breakpoint": d === "xsmall"
+      "is-xl-width-breakpoint": d === "xlarge",
+      "is-lg-width-breakpoint": d === "large",
+      "is-md-width-breakpoint": d === "medium",
+      "is-sm-width-breakpoint": d === "small",
+      "is-xs-width-breakpoint": d === "xsmall",
+      "is-xl-height-breakpoint": c === "xlarge",
+      "is-lg-height-breakpoint": c === "large",
+      "is-md-height-breakpoint": c === "medium",
+      "is-sm-height-breakpoint": c === "small",
+      "is-xs-height-breakpoint": c === "xsmall"
     };
-    return w`<div style=${L(s)} class=${y(C("root", v, {
+    return w`<div style=${L(s)} class=${y(x("root", v, {
       hidden: !n || !s && !e
     }))} .ariaHidden=${!n} .ariaLabel=${T(this.heading ?? "")} popover=manual ${m(this._containerNode)}>${this._renderMainContainer()}${this._renderPointer()}</div>`;
   }
   _renderPointer() {
-    return !this.dockEnabled || !this.active ? w`<div class="pointer" role=presentation><div class=${y(C("pointer-direction", "shadow"))} ${m(this._pointerNode)}></div></div>` : null;
+    return !this._effectiveDockEnabled || !this.active ? w`<div class="pointer" role=presentation><div class=${y(x("pointer-direction", "shadow"))} ${m(this._pointerNode)}></div></div>` : null;
   }
   _renderMainContainer() {
     const t = {
-      shadow: this.dockEnabled
+      shadow: this._effectiveDockEnabled
     }, e = {
       ...this.messageOverrides,
       collapse: this.messageOverrides?.collapse ?? this.messages.collapse,
       expand: this.messageOverrides?.expand ?? this.messages.expand
     };
-    return w`<div class=${y(C("main-container", t))} ${m(this._mainContainerNode)}><arcgis-features-next .collapsed=${this.collapsed} .autoDestroyDisabled=${this.autoDestroyDisabled} .featureNavigationTop=${this._featureNavigationTop} .focusTrapEnabled=${!this.focusTrapDisabled} .headingLevel=${this.headingLevel} .hideActionBar=${this.hideActionBar} .hideCloseButton=${this.hideCloseButton} .hideFeatureListLayerTitle=${this.hideFeatureListLayerTitle} .hideFeatureMenuHeading=${this.hideFeatureMenuHeading} .hideFeatureNavigation=${this.hideFeatureNavigation} .hideEmptyRelationshipContent=${this.hideEmptyRelationshipContent} .hideHeading=${this.hideHeading} .hideSpinner=${this.hideSpinner} @arcgisPropertyChange=${this._handleArcgisPropertyChange} @arcgisTriggerAction=${this._handleArcgisTriggerAction} @arcgisClose=${this._handleClose} .messageOverrides=${e} .referenceElement=${this.referenceElement} .responsiveActionsEnabled=${!0} .showCollapseButton=${!this.hideCollapseButton} .viewModel=${this.viewModel} ${m(this._featuresComponent)}><slot name=actions-start slot=actions-start></slot><slot name=actions-end slot=actions-end></slot></arcgis-features-next></div>`;
+    return w`<div class=${y(x("main-container", t))} ${m(this._mainContainerNode)}><arcgis-features-next .collapsed=${this.collapsed} .autoDestroyDisabled=${this.autoDestroyDisabled} .featureNavigationTop=${this._featureNavigationTop} .focusTrapEnabled=${!this.focusTrapDisabled} .headingLevel=${this.headingLevel} .hideActionBar=${this.hideActionBar} .hideCloseButton=${this.hideCloseButton} .hideFeatureListLayerTitle=${this.hideFeatureListLayerTitle} .hideFeatureMenuHeading=${this.hideFeatureMenuHeading} .hideFeatureNavigation=${this.hideFeatureNavigation} .hideEmptyRelationshipContent=${this.hideEmptyRelationshipContent} .hideHeading=${this.hideHeading} .hideSpinner=${this.hideSpinner} @arcgisPropertyChange=${this._handleArcgisPropertyChange} @arcgisTriggerAction=${this._handleArcgisTriggerAction} @arcgisClose=${this._handleClose} .messageOverrides=${e} .referenceElement=${this.referenceElement} .responsiveActionsEnabled=${!0} .showCollapseButton=${!this.hideCollapseButton} .viewModel=${this.viewModel} ${m(this._featuresComponent)}><slot name=actions-start slot=actions-start></slot><slot name=actions-end slot=actions-end></slot></arcgis-features-next></div>`;
   }
 }
 E("arcgis-popup", R);