@arcgis/map-components 5.1.0-next.115 → 5.1.0-next.117

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

@@ -3,8 +3,8 @@ import { c as A } from "../../chunks/runtime.js";
 import { css as E, html as w } from "lit";
 import P from "@arcgis/core/popup/Features.js";
 import { u as F } from "../../chunks/useT9n.js";
-import { useDirection as $, usePropertyChange as N } from "@arcgis/lumina/controllers";
-import { m as O } from "../../chunks/useViewModel.js";
+import { useDirection as O, usePropertyChange as N } from "@arcgis/lumina/controllers";
+import { m as $ } from "../../chunks/useViewModel.js";
 import { LitElement as L, createEvent as _, safeStyleMap as S, safeClassMap as y } from "@arcgis/lumina";
 import { stripHTML as T } from "@arcgis/core/applications/Components/stringUtils.js";
 import { classes as x } from "@arcgis/toolkit/dom";
@@ -17,7 +17,7 @@ const B = E`:host{display:contents;--arcgis-internal-popup-pointer-size: 12px;--
 function f(b) {
   return b && Number.parseInt(b.replaceAll(/[^-\d.]/gu, ""), 10) || 0;
 }
-const I = O(P), C = {
+const I = $(P), C = {
   buttonEnabled: !0,
   position: "auto",
   breakpoint: {
@@ -26,7 +26,7 @@ const I = O(P), C = {
 };
 class j extends L {
   constructor() {
-    super(...arguments), this._direction = $(), this._featuresComponent = g(), this._dockAction = new V({ id: "popup-dock-action" }), this._mainContainerNode = g(), this._pointerNode = g(), this.messages = F(), this.viewModel = I(this), this._containerNode = g(), this._popupResizeObserver = new ResizeObserver(() => this._positionContainer()), this._positionContainer = () => {
+    super(...arguments), this._direction = O(), this._featuresComponent = g(), this._dockAction = new V({ id: "popup-dock-action" }), this._mainContainerNode = g(), this._pointerNode = g(), this.messages = F(), this.viewModel = I(this), this._containerNode = g(), this._popupResizeObserver = new ResizeObserver(() => this._positionContainer()), this._positionContainer = () => {
       this.positionStyle = this._calculatePositionStyle();
     }, this.screenLocation = H(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.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.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 = N()("active", "collapsed", "currentAlignment", "dockEnabled", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = _(), this.arcgisClose = _(), this.arcgisTriggerAction = _();
   }
@@ -55,8 +55,8 @@ class j extends L {
   set dockOptions(t) {
     const e = { ...C }, o = this.viewModel?.view?.breakpoints, i = {};
     o && (i.width = o.xsmall, i.height = o.xsmall);
-    const r = { ...e, ...t }, n = { ...e.breakpoint, ...i }, { breakpoint: a } = r;
-    typeof a == "object" ? r.breakpoint = { ...n, ...a } : a && (r.breakpoint = n), this._dockOptions = r;
+    const s = { ...e, ...t }, n = { ...e.breakpoint, ...i }, { breakpoint: a } = s;
+    typeof a == "object" ? s.breakpoint = { ...n, ...a } : a && (s.breakpoint = n), this._dockOptions = s;
   }
   get selectedDrillInFeature() {
     return this._featuresComponent.value?.selectedDrillInFeature ?? null;
@@ -88,6 +88,9 @@ class j extends L {
   async triggerAction(t) {
     return await this._featuresComponent.value?.triggerAction(t);
   }
+  connectedCallback() {
+    super.connectedCallback(), this._syncPopupResizeObserver();
+  }
   loaded() {
     this.manager.onLifecycle(() => [
       p(() => [this.viewModel?.view?.widthBreakpoint, this.dockEnabled, this._direction], () => this._handleDockIcon(), { initial: !0 }),
@@ -108,7 +111,7 @@ class j extends L {
         this.viewModel?.view?.size
       ], () => this._positionContainer(), { initial: !0 }),
       p(() => this._mainContainerNode.value, (t) => {
-        this._popupResizeObserver.disconnect(), t && this._popupResizeObserver.observe(t);
+        this._syncPopupResizeObserver(t);
       }, { initial: !0 }),
       p(() => this.viewModel?.view?.size, (t, e) => this._updateDockEnabledForViewSize(t, e)),
       p(() => this.viewModel?.view?.ready, () => this._setDockEnabledForViewSize(this.dockOptions), { initial: !0 }),
@@ -119,9 +122,15 @@ class j extends L {
       p(() => [this.active, this._containerNode.value, this.dockEnabled, this.topLayerDisabled], () => this._togglePopover(), { initial: !0 })
     ]);
   }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._popupResizeObserver.disconnect();
+  }
   _togglePopover() {
     this._containerNode.value?.togglePopover(this.active && !this.dockEnabled && !this.topLayerDisabled);
   }
+  _syncPopupResizeObserver(t = this._mainContainerNode.value) {
+    this._popupResizeObserver.disconnect(), t && this._popupResizeObserver.observe(t);
+  }
   _handleClose(t) {
     t.stopPropagation(), this.arcgisClose.emit();
   }
@@ -135,8 +144,8 @@ class j extends L {
     t.stopPropagation(), t.detail.action === this._dockAction && (this.dockEnabled = !this.dockEnabled), this.arcgisTriggerAction.emit({ action: t.detail.action });
   }
   _isOutsideView(t) {
-    const { popupHeight: e, popupWidth: o, screenLocation: i, side: r, view: n } = t;
-    return Number.isNaN(o) || Number.isNaN(e) || !n || !i ? !1 : r === "right" && i.x + o / 2 > n.width || r === "left" && i.x - o / 2 < 0 || r === "top" && i.y - e < 0 || r === "bottom" && i.y + e > n.height;
+    const { popupHeight: e, popupWidth: o, screenLocation: i, side: s, view: n } = t;
+    return Number.isNaN(o) || Number.isNaN(e) || !n || !i ? !1 : s === "right" && i.x + o / 2 > n.width || s === "left" && i.x - o / 2 < 0 || s === "top" && i.y - e < 0 || s === "bottom" && i.y + e > n.height;
   }
   _getPointerSize() {
     const { _pointerNode: t } = this, e = t.value ? window.getComputedStyle(t.value) : null, o = f(e?.height), i = f(e?.width);
@@ -145,35 +154,35 @@ class j extends L {
   _calculateAutoAlignment(t) {
     if (t !== "auto")
       return t;
-    const { _mainContainerNode: e, _popupRect: o, viewModel: i } = this, { view: r } = i, { screenLocation: n } = this;
-    if (n == null || !r || !o || !e.value)
+    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 a = window.getComputedStyle(e.value), l = f(a.maxHeight), s = f(a.height), c = this._getPointerSize(), { height: d, width: k } = o, h = k + c, u = Math.max(d, l, s) + c, M = this._isOutsideView({
+    const a = window.getComputedStyle(e.value), l = f(a.maxHeight), r = f(a.height), c = this._getPointerSize(), { height: d, width: k } = o, h = k + c, u = Math.max(d, l, r) + c, z = this._isOutsideView({
       popupHeight: u,
       popupWidth: h,
       screenLocation: n,
       side: "right",
-      view: r
-    }), D = this._isOutsideView({
+      view: s
+    }), M = this._isOutsideView({
       popupHeight: u,
       popupWidth: h,
       screenLocation: n,
       side: "left",
-      view: r
+      view: s
     }), v = this._isOutsideView({
       popupHeight: u,
       popupWidth: h,
       screenLocation: n,
       side: "top",
-      view: r
-    }), z = this._isOutsideView({
+      view: s
+    }), D = this._isOutsideView({
       popupHeight: u,
       popupWidth: h,
       screenLocation: n,
       side: "bottom",
-      view: r
+      view: s
     });
-    return D ? v ? "bottom-right" : "top-right" : M ? v ? "bottom-left" : "top-left" : v ? z ? "top-center" : "bottom-center" : "top-center";
+    return M ? v ? "bottom-right" : "top-right" : z ? v ? "bottom-left" : "top-left" : v ? D ? "top-center" : "bottom-center" : "top-center";
   }
   _callCurrentAlignment(t) {
     return typeof t == "function" ? t.call(this) : t;
@@ -230,33 +239,33 @@ class j extends L {
   _calculateAlignmentPosition(t, e, o, i) {
     if (t < 0 || e < 0 || !o || !i || t > o.width || e > o.height)
       return;
-    const { topLayerDisabled: r } = this, n = r ? t : t + o.x, a = r ? e : e + o.y, { _direction: l, currentAlignment: s } = this, c = this._getPointerSize(), d = c / 2;
-    if (s === "top-left" || s === "top-start" && l === "ltr" || s === "top-end" && l === "rtl")
+    const { topLayerDisabled: s } = this, n = s ? t : t + o.x, a = s ? e : e + o.y, { _direction: l, currentAlignment: r } = this, c = this._getPointerSize(), d = c / 2;
+    if (r === "top-left" || r === "top-start" && l === "ltr" || r === "top-end" && l === "rtl")
       return {
         top: a - (i.height + d),
         left: n - i.width - d
       };
-    if (s === "top-center")
+    if (r === "top-center")
       return {
         top: a - (i.height + c),
         left: n - i.width / 2
       };
-    if (s === "top-right" || s === "top-end" && l === "ltr" || s === "top-start" && l === "rtl")
+    if (r === "top-right" || r === "top-end" && l === "ltr" || r === "top-start" && l === "rtl")
       return {
         top: a - (i.height + d),
         left: n + d
       };
-    if (s === "bottom-left" || s === "bottom-start" && l === "ltr" || s === "bottom-end" && l === "rtl")
+    if (r === "bottom-left" || r === "bottom-start" && l === "ltr" || r === "bottom-end" && l === "rtl")
       return {
         top: a + d,
         left: n - i.width - d
       };
-    if (s === "bottom-center")
+    if (r === "bottom-center")
       return {
         top: a + c,
         left: n - i.width / 2
       };
-    if (s === "bottom-right" || s === "bottom-end" && l === "ltr" || s === "bottom-start" && l === "rtl")
+    if (r === "bottom-right" || r === "bottom-end" && l === "ltr" || r === "bottom-start" && l === "rtl")
       return {
         top: a + d,
         left: n + d
@@ -278,8 +287,8 @@ class j extends L {
       return `inset: ${this._getPositionStyleValue(i.top)} ${this._getPositionStyleValue(i.right)} ${this._getPositionStyleValue(i.bottom)} ${this._getPositionStyleValue(i.left)};`;
   }
   _dockingThresholdCrossed(t, e, o) {
-    const [i, r] = t, [n, a] = e, { width: l = 0, height: s = 0 } = o ?? {};
-    return i <= l && n > l || i > l && n <= l || r <= s && a > s || r > s && a <= s;
+    const [i, s] = t, [n, a] = e, { width: l = 0, height: r = 0 } = o ?? {};
+    return i <= l && n > l || i > l && n <= l || s <= r && a > r || s > r && a <= r;
   }
   _updateDockEnabledForViewSize(t, e) {
     if (!t || !e || !this.viewModel?.view?.ready)
@@ -291,17 +300,17 @@ class j extends L {
     const e = t.breakpoint, o = this.viewModel?.view?.ui;
     if (!o)
       return !1;
-    const { width: i, height: r } = o;
-    if (Number.isNaN(i) || Number.isNaN(r) || typeof e != "object")
+    const { width: i, height: s } = o;
+    if (Number.isNaN(i) || Number.isNaN(s) || typeof e != "object")
       return !1;
-    const n = typeof e.width == "number" && i <= (e.width ?? 0), a = typeof e.height == "number" && r <= (e.height ?? 0);
+    const n = typeof e.width == "number" && i <= (e.width ?? 0), a = typeof e.height == "number" && s <= (e.height ?? 0);
     return n || a;
   }
   _setDockEnabledForViewSize(t) {
     this.viewModel?.view?.ready && typeof t.breakpoint == "object" && (this.dockEnabled = this._shouldDockAtCurrentViewSize(t));
   }
   render() {
-    const { _direction: t, dockEnabled: e, currentAlignment: o, currentDockPosition: i, positionStyle: r } = this, { active: n, view: a } = this.viewModel, l = n && e, s = n && !e, c = a?.widthBreakpoint, d = a?.heightBreakpoint, k = {
+    const { _direction: t, dockEnabled: e, currentAlignment: o, currentDockPosition: i, positionStyle: s } = this, { active: n, view: a } = this.viewModel, l = n && e, r = n && !e, c = a?.widthBreakpoint, d = a?.heightBreakpoint, k = {
       "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",
@@ -309,7 +318,7 @@ class j extends L {
       "aligned-top-right": o === "top-right" || o === "top-end" && t === "ltr" || o === "top-start" && t === "rtl",
       "aligned-bottom-right": o === "bottom-right" || o === "bottom-end" && t === "ltr" || o === "bottom-start" && t === "rtl",
       "is-docked": l,
-      shadow: s,
+      shadow: r,
       "is-rtl": this._direction === "rtl",
       "is-docked-top-start": i === "top-start",
       "is-docked-top-end": i === "top-end",
@@ -332,8 +341,8 @@ class j extends L {
       "is-sm-height-breakpoint": d === "small",
       "is-xs-height-breakpoint": d === "xsmall"
     };
-    return w`<div style=${S(r)} class=${y(x("root", k, {
-      hidden: !n || !r && !e
+    return w`<div style=${S(s)} class=${y(x("root", k, {
+      hidden: !n || !s && !e
     }))} .ariaHidden=${!n} .ariaLabel=${T(this.heading ?? "")} role=dialog popover=manual ${m(this._containerNode)}>${this._renderMainContainer()}${this._renderPointer()}</div>`;
   }
   _renderPointer() {

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

@@ -36,7 +36,7 @@ import type { AnalysisView3DFor } from "@arcgis/core/views/3d/analysis/types.js"
 import type { LayerView3DFor } from "@arcgis/core/views/3d/types.js";
 import type { DoubleTapDragEvent, VerticalTwoFingerDragEvent, PointerUpEvent, PointerMoveEvent, PointerLeaveEvent, PointerEnterEvent, PointerDownEvent, ViewMouseWheelEvent, LayerViewDestroyEvent, LayerViewCreateErrorEvent, LayerViewCreateEvent, KeyUpEvent, KeyDownEvent, ImmediateDoubleClickEvent, ImmediateClickEvent, HoldEvent, DragEvent, DoubleClickEvent, ClickEvent } from "@arcgis/core/views/input/types.js";
 import type { AnalysisViewDestroyEvent, AnalysisViewCreateErrorEvent, AnalysisViewCreateEvent, HitTestOptions3D, Screenshot, UserSettings, SceneViewHitTestResult, GoToOptions3D, GoToTarget3D } from "@arcgis/core/views/types.js";
-import type { ScreenPoint } from "@arcgis/core/core/types.js";
+import type { ScreenPoint, ScreenRect } from "@arcgis/core/core/types.js";
 import type { ViewPopupOpenOptions } from "@arcgis/core/views/PopupView.js";
 import type { ReadonlyCollection } from "@arcgis/core/core/Collection.js";
 import type { ViewPadding } from "@arcgis/core/views/ui/types.js";
@@ -924,10 +924,10 @@ export abstract class ArcgisScene extends LitElement {
    *
    * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#hitTest)
    *
-   * @param screenPoint
+   * @param hitTarget
    * @param options
    */
-  hitTest(screenPoint: MouseEvent | ScreenPoint, options?: HitTestOptions3D): Promise<SceneViewHitTestResult>;
+  hitTest(hitTarget: MouseEvent | ScreenPoint | ScreenRect, options?: HitTestOptions3D): Promise<SceneViewHitTestResult>;
   /**
    * Opens the popup based on input options.
    *

package/dist/components/arcgis-value-picker/customElement.d.ts

@@ -19,6 +19,8 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  *
  * #### Configuring Value Picker without slotted components
  *
+ * ![value-picker-nodata](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-nodata.avif)
+ *
  * ```html
  * <arcgis-map itemId="462c629e8e604c15baf45627c4f337d6">
  *   <arcgis-value-picker slot="top-right"></arcgis-value-picker>
@@ -67,6 +69,8 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * Consider using the [arcgis-value-picker-label](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-label/) component to step through a small, fixed list of predefined values. This component provides a strict
  * interface that steps back and forth, so it's a good option for temporal data, or data that shows progression dependent on the element's position in the list.
  *
+ * ![value-picker-label](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-label.avif)
+ *
  * ```js
  * const mapElement = document.querySelector("arcgis-map");
  * const valuePickerLabel = document.querySelector("arcgis-value-picker-label");
@@ -103,6 +107,8 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * that can be represented along a fixed numeric range. This is a good option for sets of elements spaced along an interval, or mutating
  * a continuous parameter such as layer opacity.
  *
+ * ![value-picker-slider](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-slider.avif)
+ *
  * ```js
  * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
  *
@@ -131,6 +137,8 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * Consider using the [arcgis-value-picker-combobox](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-combobox/) component to step through a longer list of items that cannot be clicked through
  * one by one. The combobox component allows the user to open the list as a dropdown and make a selection, or narrow the size of the list by searching for an element or keyword.
  *
+ * ![value-picker-combobox](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-combobox.avif)
+ *
  * ```js
  * const valuePickerCombobox = document.querySelector("arcgis-value-picker-combobox");
  *
@@ -163,6 +171,8 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * Consider using the [arcgis-value-picker-collection](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-collection/) component when a visual representation for the dataset is not necessary.
  * This is also a good option for datasets already in the form of a [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/).
  *
+ * ![value-picker-collection](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-collection.avif)
+ *
  * ```js
  * const Collection = (await import("@arcgis/core/core/Collection.js")).default;
  *

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

@@ -70,6 +70,8 @@ export abstract class ArcgisVideo extends LitElement {
   accessor layer: VideoLayer | null | undefined;
   /** A reference to the associated [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) or [WebMap](https://developers.arcgis.com/javascript/latest/references/core/WebMap/). */
   accessor map: Map | WebMap | null | undefined;
+  /** @default false */
+  accessor operationalDataVisible: boolean;
   /**
    * When `true`, this property indicates whether the view successfully satisfied all dependencies,
    * signaling that the following conditions are met.

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

@@ -6,8 +6,8 @@ import { watch as e } from "@arcgis/core/core/reactiveUtils.js";
 import l from "@arcgis/core/views/VideoView.js";
 import { LitElement as c, createEvent as m, safeClassMap as d } from "@arcgis/lumina";
 import { makeAccessorController as f } from "@arcgis/lumina/controllers/accessor";
-import { createRef as s, ref as r } from "lit/directives/ref.js";
-import { C as a } from "../../chunks/resources.js";
+import { createRef as s, ref as a } from "lit/directives/ref.js";
+import { C as r } from "../../chunks/resources.js";
 import { c as p, s as y, S as w } from "../../chunks/slots.js";
 import { s as v } from "../../chunks/esri-main.js";
 const u = h`:host{width:100%;height:100%}`, R = f(l, {
@@ -15,10 +15,10 @@ const u = h`:host{width:100%;height:100%}`, R = f(l, {
 });
 class g extends c {
   constructor() {
-    super(), this._containerRef = s(), this._direction = n(), this._mapRef = s(), this._slotGroupRefs = p(), this.autoDestroyDisabled = !1, this.view = R(this), this.attributionMode = this.view.attributionMode, this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.arcgisViewReadyChange = m();
+    super(), this._containerRef = s(), this._direction = n(), this._mapRef = s(), this._slotGroupRefs = p(), this.autoDestroyDisabled = !1, this.operationalDataVisible = !1, this.view = R(this), this.attributionMode = this.view.attributionMode, this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.arcgisViewReadyChange = m();
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, view: 32, aria: 0, attributionMode: 1, ready: 36, layer: 0, map: 0 };
+    this.properties = { autoDestroyDisabled: 5, operationalDataVisible: 5, view: 32, aria: 0, attributionMode: 1, ready: 36, layer: 0, map: 0 };
   }
   static {
     this.styles = [v, y, u];
@@ -44,10 +44,10 @@ class g extends c {
     ]);
   }
   renderMain() {
-    return t`<div class=${`root ${a.base}`} ${r(this._mapRef)}></div>`;
+    return t`<div class=${`root ${r.base}`} ${a(this._mapRef)}></div>`;
   }
   render() {
-    return t`${this.renderMain()}<section class=${d(a.containerUI)} ${r(this._containerRef)}>${w({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
+    return t`${this.renderMain()}<section class=${d(r.containerUI)} ${a(this._containerRef)}>${w({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
   }
 }
 o("arcgis-video", g);

package/dist/components/arcgis-view-popover/customElement.d.ts

@@ -0,0 +1,94 @@
+/// <reference path="../../index.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SceneView from "@arcgis/core/views/SceneView.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ActionBar as ActionBar } from "@esri/calcite-components/components/calcite-action-bar";
+import type { Button as Button } from "@esri/calcite-components/components/calcite-button";
+
+/**
+ * The View Popover component provides view-aware placement and sizing for popovers anchored to actions inside
+ * a map or scene view. This component is critical to enabling a great user experience with popovers
+ * when the exact placement and content of the popover is highly variable.
+ *
+ * This component was originally added to support arcgis-sketch, which can be placed in all corners
+ * of the view, in multiple orientations, and with highly configurable settings contents.
+ *
+ * Because layer lists and grid controls are included in the settings popover, it is very common for
+ * the popover to overflow the view. It is equally common for the settings popover to be quite compact.
+ *
+ * Provide the popover content through the default slot and assign a [view](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#view),
+ * [anchorElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#anchorElement), and [actionBarElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#actionBarElement)
+ * to enable automatic positioning within the view.
+ *
+ * @since 5.1
+ * @internal
+ */
+export abstract class ArcgisViewPopover extends LitElement {
+  /** The calcite action bar that owns the anchor action; must be set for correct layout. */
+  accessor actionBarElement: ActionBar | undefined;
+  get actionBarLayout(): ActionBarLayout;
+  /** The action element that anchors the popover. */
+  accessor anchorElement: HTMLElement | undefined;
+  /**
+   * Indicates whether the popover includes a close action in the header.
+   *
+   * @default true
+   */
+  accessor closable: boolean;
+  /** The popover heading. */
+  accessor heading: string | undefined;
+  /** Accessible label for the popover. */
+  accessor label: string | undefined;
+  /**
+   * Maximum content width, in pixels, applied to the slotted popover content.
+   *
+   * @default 400
+   */
+  accessor maxContentWidth: number;
+  /**
+   * Minimum content width, in pixels, applied to the slotted popover content.
+   *
+   * @default 300
+   */
+  accessor minContentWidth: number;
+  /**
+   * Indicates whether the popover is open.
+   *
+   * Listen for [@arcgisPropertyChange](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#event-arcgisPropertyChange) to react to user-driven close actions.
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Controls whether the popover appears attached to the action itself or to the containing action bar.
+   *
+   * @default "bar"
+   */
+  accessor tailAttachmentAppearance: TailAttachmentAppearance;
+  /** The view that constrains popover placement and sizing. */
+  accessor view: MapView | SceneView | undefined;
+  /**
+   * Minimum inset, in pixels, between the popover and the edges of the view.
+   * The bottom edge will be relative to the attribution bar, if it is visible.
+   *
+   * @default 16
+   */
+  accessor viewEdgeMargin: number;
+  /**
+   * Visual scale for the popover; this applies only to the header and close button.
+   *
+   * @default "m"
+   */
+  accessor visualScale: Button["scale"];
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "open"; }>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisViewPopover["arcgisPropertyChange"]["detail"];
+  };
+}
+
+/** @internal */
+export type ActionBarLayout = "horizontal" | "vertical";
+
+/** @internal */
+export type TailAttachmentAppearance = "action" | "bar";

package/dist/components/arcgis-view-popover/customElement.js

@@ -0,0 +1,128 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as u } from "../../chunks/runtime.js";
+import { LitElement as _, safeStyleMap as w } from "@arcgis/lumina";
+import { css as M, html as b } from "lit";
+import { usePropertyChange as E } from "@arcgis/lumina/controllers";
+const R = M`:host{display:block;pointer-events:initial}calcite-popover{pointer-events:initial}.content{min-inline-size:min(calc(100cqw - var(--arcgis-view-popover-width-reserve, 32px)),var(--arcgis-view-popover-min-inline-size, 300px));max-inline-size:min(calc(100cqw - var(--arcgis-view-popover-width-reserve, 32px)),var(--arcgis-view-popover-max-inline-size, 400px));max-height:var( --arcgis-view-popover-content-max-height, calc(100cqh - var(--arcgis-view-popover-height-reserve, 77px)) );-webkit-user-select:none;user-select:none;overflow-y:auto}`, l = 6, z = 2, S = 32, x = 77, y = 0;
+function O(t) {
+  const e = B(t), i = t.actionBarLayout === "vertical" ? 0 : e;
+  return {
+    effectiveTailOffset: e,
+    horizontalMargin: A(t),
+    verticalMargin: k(t) + i + t.headerRect.height,
+    offsetSkidding: P(t),
+    placement: C(t)
+  };
+}
+function B({ actionBarLayout: t, actionRect: e, barRect: i, tailAttachmentAppearance: a }) {
+  const r = a === "bar" ? t === "vertical" ? Math.max(0, e.left - i.left) : Math.max(0, e.top - i.top) : 0;
+  return l + r;
+}
+function A({ actionBarLayout: t, barRect: { left: e, right: i }, actionRect: { left: a }, tailAttachmentAppearance: r, viewEdgeMargin: n }) {
+  const o = n * 2;
+  if (t === "vertical") {
+    const h = i - e, v = r === "action" ? -(a - e - l) : l;
+    return o + h + v;
+  }
+  return o;
+}
+function P(t) {
+  return t.actionBarLayout === "vertical" || f(t) === "left" ? t.viewEdgeMargin : -t.viewEdgeMargin;
+}
+function C(t) {
+  const { actionBarLayout: e, actionRect: i, viewRect: a } = t, r = f(t);
+  if (e === "vertical")
+    return r === "left" ? "right-end" : "left-end";
+  const n = i.bottom - a.top < a.height / 2 ? "bottom" : "top";
+  return r === "left" ? `${n}-end` : `${n}-start`;
+}
+function f({ barRect: { left: t, right: e }, viewRect: { left: i, right: a } }) {
+  return t - i < a - e ? "left" : "right";
+}
+function $({ actionRect: t, viewRect: e }) {
+  return t.top - e.top > e.height / 2 ? "bottom" : "top";
+}
+function k(t) {
+  const { actionBarLayout: e, actionRect: i, attributionHeight: a, viewEdgeMargin: r, viewRect: n } = t, o = $(t), h = i.bottom - n.top, v = i.top - n.top, g = o === "top" ? h : r, d = r, p = a + r, m = o === "top" ? p : n.height - v;
+  return (e === "vertical" ? d + p : g + m) + z;
+}
+function s() {
+  return new DOMRect(0, 0, 0, 0);
+}
+function c(t) {
+  return t?.getBoundingClientRect() ?? s();
+}
+class T extends _ {
+  constructor() {
+    super(...arguments), this._handlePopoverBeforeOpen = (e) => {
+      if (e.target !== e.currentTarget)
+        return;
+      const i = e.currentTarget;
+      this._headerElement = i.shadowRoot?.querySelector(".header") ?? void 0, this._observeMeasurementElements(), this._remeasureAndSolve();
+    }, this._handlePopoverClose = (e) => {
+      e.target === e.currentTarget && (e.preventDefault(), this.open = !1, this._stopMeasuring());
+    }, this._viewRect = s(), this._barRect = s(), this._actionRect = s(), this._headerRect = s(), this._resizeObserver = new ResizeObserver(() => this._remeasureAndSolve()), this._placement = "bottom-end", this._effectiveTailOffset = l, this._offsetSkidding = y, this._horizontalMargin = S, this._verticalMargin = x, this.closable = !0, this.open = !1, this.maxContentWidth = 400, this.minContentWidth = 300, this.viewEdgeMargin = 16, this.visualScale = "m", this.tailAttachmentAppearance = "bar", this.arcgisPropertyChange = E()("open");
+  }
+  static {
+    this.properties = { _placement: 16, _effectiveTailOffset: 16, _offsetSkidding: 16, _horizontalMargin: 16, _verticalMargin: 16, view: 0, actionBarLayout: 32, actionBarElement: 0, anchorElement: 0, closable: 5, heading: 1, label: 1, open: 5, maxContentWidth: 9, minContentWidth: 9, viewEdgeMargin: 9, visualScale: 1, tailAttachmentAppearance: 1 };
+  }
+  static {
+    this.styles = R;
+  }
+  get _viewElement() {
+    return this.view?.container ?? void 0;
+  }
+  get actionBarLayout() {
+    return this.actionBarElement?.layout === "vertical" ? "vertical" : "horizontal";
+  }
+  willUpdate(e) {
+    e.has("open") && !this.open ? this._stopMeasuring() : this.open && this._hasParameterInputChange(e) ? this._remeasureAndSolve() : this.open && this._hasObservedElementChange(e) && this._observeMeasurementElements();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._stopMeasuring();
+  }
+  _hasObservedElementChange(e) {
+    return e.has("actionBarElement") || e.has("anchorElement") || e.has("view");
+  }
+  _hasParameterInputChange(e) {
+    return e.has("open") && this.open || e.has("tailAttachmentAppearance") || e.has("viewEdgeMargin") || e.has("visualScale");
+  }
+  _observeMeasurementElements() {
+    this._resizeObserver.disconnect();
+    for (const e of [this.anchorElement, this.actionBarElement, this._viewElement, this._headerElement])
+      e && this._resizeObserver.observe(e);
+    this._remeasureAndSolve();
+  }
+  _stopMeasuring() {
+    this._resizeObserver.disconnect(), this._headerElement = void 0;
+  }
+  _remeasureAndSolve() {
+    this._actionRect = c(this.anchorElement), this._barRect = c(this.actionBarElement), this._headerRect = c(this._headerElement), this._viewRect = c(this._viewElement), this._solveLayoutAndUpdate();
+  }
+  _solveLayoutAndUpdate() {
+    const { effectiveTailOffset: e, horizontalMargin: i, verticalMargin: a, offsetSkidding: r, placement: n } = O({
+      actionBarLayout: this.actionBarLayout,
+      actionRect: this._actionRect,
+      attributionHeight: this.view?.attributionHeight ?? 0,
+      barRect: this._barRect,
+      headerRect: this._headerRect,
+      visualScale: this.visualScale,
+      tailAttachmentAppearance: this.tailAttachmentAppearance,
+      viewEdgeMargin: this.viewEdgeMargin,
+      viewRect: this._viewRect
+    });
+    this._effectiveTailOffset = e, this._horizontalMargin = i, this._verticalMargin = a, this._offsetSkidding = r, this._placement = n;
+  }
+  render() {
+    return this.anchorElement ? b`<calcite-popover .closable=${this.closable} .heading=${this.heading} .label=${this.label ?? ""} .open=${this.open} .offsetDistance=${this._effectiveTailOffset} .offsetSkidding=${this._offsetSkidding} overlay-positioning=fixed flip-disabled .placement=${this._placement} .referenceElement=${this.anchorElement} @calcitePopoverBeforeOpen=${this._handlePopoverBeforeOpen} .scale=${this.visualScale} style=${w({
+      "--arcgis-view-popover-max-inline-size": `${this.maxContentWidth}px`,
+      "--arcgis-view-popover-min-inline-size": `${this.minContentWidth}px`,
+      "--arcgis-view-popover-height-reserve": `${this._verticalMargin}px`,
+      "--arcgis-view-popover-width-reserve": `${this._horizontalMargin}px`
+    })} trigger-disabled @calcitePopoverClose=${this._handlePopoverClose}><div class="content"><slot></slot></div></calcite-popover>` : null;
+  }
+}
+u("arcgis-view-popover", T);
+export {
+  T as ArcgisViewPopover
+};

package/dist/components/arcgis-view-popover/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-view-popover/index.js

@@ -0,0 +1,2 @@
+import "@esri/calcite-components/components/calcite-popover";
+export * from "./customElement.js";