@arcgis/map-components 5.2.0-next.124 → 5.2.0-next.125

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

@@ -28,21 +28,24 @@ class R extends S {
   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.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 = _();
   }
   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: 0, 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 };
   }
   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();
   }
@@ -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, D = 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" : D ? 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,27 +327,27 @@ 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, {
       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(C("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,

package/dist/components/arcgis-presentation/PresentationViewModel.d.ts

@@ -4,7 +4,7 @@ import type SceneView from "@arcgis/core/views/SceneView.js";
 import type Slide from "@arcgis/core/webscene/Slide.js";
 
 /** @internal */
-export interface PresentationViewModelProperties extends Partial<Pick<PresentationViewModel, "keyboardNavigationEnabled" | "onApplySlideCancel" | "onApplySlideComplete" | "onApplySlideStart" | "showLegend" | "slideId" | "transitionActive" | "view">> {}
+export interface PresentationViewModelProperties extends Partial<Pick<PresentationViewModel, "keyboardNavigationEnabled" | "onApplySlideCancel" | "onApplySlideComplete" | "onApplySlideStart" | "showLegend" | "slideId" | "slideLegendDisabled" | "transitionActive" | "view">> {}
 
 /** @internal */
 export default class PresentationViewModel extends Accessor {
@@ -26,6 +26,7 @@ export default class PresentationViewModel extends Accessor {
   accessor showLegend: boolean;
   accessor slideId: string | undefined;
   get slideIndex(): number;
+  accessor slideLegendDisabled: boolean;
   get slides(): Collection<Slide>;
   get slideSelected(): boolean;
   /** @default false */

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

@@ -85,14 +85,15 @@ export abstract class ArcgisPresentation extends LitElement {
   /** The id of the slide applied to the view */
   accessor slideId: string | undefined;
   /**
-   * Disable display of legend when slide is applied.
+   * Disable display of slide legend when slide is applied.
    * Per default the display of legend is enabled.
+   * Disabling the legend after creation of the component will hide the legend if it is displayed from a slide previously applied.
    *
    * @default false
    */
   accessor slideLegendDisabled: boolean;
   /**
-   * Disable display of popup when slide with popup is applied.
+   * Disable display of slide popup when slide with popup is applied.
    * Per default the display of popup is enabled.
    * The events arcgisPopupFeaturesRetrieved and arcgisPopupFeatureNotFound will be emitted also when popups are disabled.
    *