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

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

@@ -1,15 +1,15 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as O } from "../../chunks/runtime.js";
-import { css as E, html as g } from "lit";
-import { GenericController as $, proxyExports as T, useDirection as B } from "@arcgis/lumina/controllers";
-import { LitElement as G, createEvent as v, nothing as I } from "@arcgis/lumina";
-import { u as R } from "../../chunks/useT9n.js";
-import { m as N } from "../../chunks/useViewModel.js";
-import { property as d, subclass as D } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { css as D, html as u } from "lit";
+import { GenericController as $, proxyExports as E, useDirection as T } from "@arcgis/lumina/controllers";
+import { LitElement as G, createEvent as v, nothing as x } from "@arcgis/lumina";
+import { u as B } from "../../chunks/useT9n.js";
+import { m as R } from "../../chunks/useViewModel.js";
+import { property as d, subclass as N } from "@arcgis/core/core/accessorSupport/decorators.js";
 import H from "@arcgis/core/core/Accessor.js";
 import y from "@arcgis/core/core/Collection.js";
 import { ignoreAbortErrors as k } from "@arcgis/core/core/promiseUtils.js";
-import { watch as u, on as V, whenOnce as w } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as g, on as V, whenOnce as w } from "@arcgis/core/core/reactiveUtils.js";
 import M from "@arcgis/core/Graphic.js";
 import j from "@arcgis/core/layers/Layer.js";
 import W from "@arcgis/core/graphic/CSVGraphicOrigin.js";
@@ -22,20 +22,20 @@ import { fetchPopupFeaturesFromGraphics as A } from "@arcgis/core/applications/S
 import { s as _ } from "../../chunks/resources.js";
 import { g as X } from "../../chunks/async-utils.js";
 import { d as C, p as P } from "../../chunks/constants2.js";
-const Y = E`:host{width:100%;height:100%;padding:var(--calcite-space-none);margin:var(--calcite-space-none);display:flex;--internal-attribution-height: 16px;--arcgis-internal-presentation-padding-start: unset;--arcgis-internal-presentation-padding-end: unset;--arcgis-internal-presentation-cover-padding-top: unset;--arcgis-internal-presentation-cover-padding-bottom: unset;--arcgis-internal-presentation-cover-padding-start: unset;--arcgis-internal-presentation-cover-padding-end: unset;--arcgis-presentation-navigation-z-index: unset}p{padding:0;margin:0}.root{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%}.presentation-content{position:absolute;display:flex;width:100%;height:100%;justify-content:flex-end;padding-top:var(--calcite-space-lg);padding-inline-start:calc(var(--calcite-space-lg) + var(--arcgis-internal-presentation-padding-start));padding-inline-end:calc(var(--calcite-space-lg) + var(--arcgis-internal-presentation-padding-end))}.navigation-container{display:flex;flex-direction:column;margin-inline-start:var(--calcite-space-lg);margin-block:auto calc(var(--calcite-space-lg) + var(--arcgis-internal-attribution-space-top));width:fit-content;height:100%;z-index:var(--arcgis-presentation-navigation-z-index)}.navigation{width:fit-content;display:flex;align-items:center;background-color:var(--calcite-color-surface-2);box-shadow:var(--arcgis-internal-box-shadow);pointer-events:auto}.navigation-slide-list-container{position:relative;height:100%;min-height:0;margin-block-start:var(--calcite-space-lg)}.slide-list-action-container{border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.slide-counter-text{display:flex;align-items:center;justify-content:center;gap:var(--calcite-space-base);font-size:var(--calcite-font-size-md)}.slide-counter-text-element{box-sizing:border-box;max-width:28px;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;min-width:var(--calcite-spacing-md);text-align:center}.legend-container{pointer-events:all;box-shadow:var(--calcite-shadow-sm);max-width:300px;height:fit-content;max-height:calc(100vh - 136px);overflow:hidden auto}.legend{background-color:var(--calcite-color-surface-2)}`;
-var Z = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, l = (i, e, t, s) => {
-  for (var n = s > 1 ? void 0 : s ? ee(e, t) : e, r = i.length - 1, a; r >= 0; r--)
-    (a = i[r]) && (n = (s ? a(e, t, n) : a(n)) || n);
+const Y = D`:host{width:100%;height:100%;padding:var(--calcite-space-none);margin:var(--calcite-space-none);display:flex;--internal-attribution-height: 16px;--arcgis-internal-presentation-padding-start: unset;--arcgis-internal-presentation-padding-end: unset;--arcgis-internal-presentation-cover-padding-top: unset;--arcgis-internal-presentation-cover-padding-bottom: unset;--arcgis-internal-presentation-cover-padding-start: unset;--arcgis-internal-presentation-cover-padding-end: unset;--arcgis-presentation-navigation-z-index: unset}p{padding:0;margin:0}.root{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%}.presentation-content{position:absolute;display:flex;width:100%;height:100%;justify-content:flex-end;padding-top:var(--calcite-space-lg);padding-inline-start:calc(var(--calcite-space-lg) + var(--arcgis-internal-presentation-padding-start));padding-inline-end:calc(var(--calcite-space-lg) + var(--arcgis-internal-presentation-padding-end))}.navigation-container{display:flex;flex-direction:column;margin-inline-start:var(--calcite-space-lg);margin-block:auto calc(var(--calcite-space-lg) + var(--arcgis-internal-attribution-space-top));width:fit-content;height:100%;z-index:var(--arcgis-presentation-navigation-z-index)}.navigation{width:fit-content;display:flex;align-items:center;background-color:var(--calcite-color-surface-2);box-shadow:var(--arcgis-internal-box-shadow);pointer-events:auto}.navigation-slide-list-container{position:relative;height:100%;min-height:0;margin-block-start:var(--calcite-space-lg)}.slide-list-action-container{border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.slide-counter-text{display:flex;align-items:center;justify-content:center;gap:var(--calcite-space-base);font-size:var(--calcite-font-size-md)}.slide-counter-text-element{box-sizing:border-box;max-width:28px;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;min-width:var(--calcite-spacing-md);text-align:center}.legend-container{pointer-events:all;box-shadow:var(--calcite-shadow-sm);max-width:300px;height:fit-content;max-height:calc(100vh - 136px);overflow:hidden auto}.legend{background-color:var(--calcite-color-surface-2)}`;
+var Z = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, o = (i, e, t, s) => {
+  for (var n = s > 1 ? void 0 : s ? ee(e, t) : e, a = i.length - 1, r; a >= 0; a--)
+    (r = i[a]) && (n = (s ? r(e, t, n) : r(n)) || n);
   return s && n && Z(e, t, n), n;
 };
-let o = class extends H {
+let l = class extends H {
   //endregion
   //#region Lifecycle
   constructor(i) {
-    super(i), this.transitionActive = !1, this.showLegend = !1, this.keyboardNavigationEnabled = !1, this._subscribeToSlideEvents = (e) => {
+    super(i), this.transitionActive = !1, this.showLegend = !1, this._slideLegendDisabled = !1, this.keyboardNavigationEnabled = !1, this._subscribeToSlideEvents = (e) => {
       this._unsubscribeToSlideEvents(e), e.forEach((t) => {
-        const s = t.on("apply-slide-start", () => this._onApplySlideStart(t)), n = t.on("apply-slide-complete", () => this._onApplySlideComplete(t)), r = t.on("apply-slide-cancel", () => this._onApplySlideCancel(t));
-        this.addHandles(s, t.id), this.addHandles(n, t.id), this.addHandles(r, t.id);
+        const s = t.on("apply-slide-start", () => this._onApplySlideStart(t)), n = t.on("apply-slide-complete", () => this._onApplySlideComplete(t)), a = t.on("apply-slide-cancel", () => this._onApplySlideCancel(t));
+        this.addHandles(s, t.id), this.addHandles(n, t.id), this.addHandles(a, t.id);
       });
     }, this._unsubscribeToSlideEvents = (e) => {
       e.forEach((t) => {
@@ -45,7 +45,7 @@ let o = class extends H {
   }
   initialize() {
     this.addHandles(
-      u(
+      g(
         () => this.view?.map,
         (i, e) => {
           if (this.hasHandles("sceneLoaded") && this.removeHandles("sceneLoaded"), e) {
@@ -53,7 +53,7 @@ let o = class extends H {
             t && t.length > 0 && this._unsubscribeToSlideEvents(t);
           }
           i && this.addHandles(
-            u(
+            g(
               () => i.loaded,
               (t) => {
                 t && (this.removeHandles("sceneLoaded"), this._startWatchSlides(), this._slideId && this._applySlideById(this._slideId));
@@ -97,6 +97,12 @@ let o = class extends H {
   get slideIndex() {
     return this.getSlideIndexBySlideId(this.slideId);
   }
+  get slideLegendDisabled() {
+    return this._slideLegendDisabled;
+  }
+  set slideLegendDisabled(i) {
+    this._slideLegendDisabled = i, i && (this.showLegend = !1);
+  }
   getSlideIndexBySlideId(i) {
     let e = -1;
     return i && (e = this.visibleSlides.findIndex((t) => t.id === i)), e;
@@ -110,8 +116,8 @@ let o = class extends H {
     const t = ["ArrowLeft", "ArrowRight", "PageUp", "PageDown"];
     if (document.activeElement?.nodeName.toLowerCase() === "arcgis-scene" || !t.includes(i.code))
       return;
-    const n = e === "rtl" ? "ArrowRight" : "ArrowLeft", a = i.code === n || i.code === "PageUp" ? -1 : 1;
-    this.navigateInPresentation(a);
+    const n = e === "rtl" ? "ArrowRight" : "ArrowLeft", r = i.code === n || i.code === "PageUp" ? -1 : 1;
+    this.navigateInPresentation(r);
   }
   async setSliceAnalysisInteractive(i) {
     if (!this.view?.analyses?.length)
@@ -167,64 +173,73 @@ let o = class extends H {
     this._slideId = i.id, this.transitionActive = !0, this.showLegend = !1, this.onApplySlideStart?.(i);
   }
   _onApplySlideComplete(i) {
-    this.transitionActive = !1, this.showLegend = !!i.elements.legendInfo?.visible, this.onApplySlideComplete?.(i);
+    this.transitionActive = !1, this._updateLegendDisplay(i), this.onApplySlideComplete?.(i);
   }
   _onApplySlideCancel(i) {
-    this.transitionActive = !1, this.showLegend = !!i.elements.legendInfo?.visible, this.onApplySlideCancel?.(i);
+    this.transitionActive = !1, this._updateLegendDisplay(i), this.onApplySlideCancel?.(i);
+  }
+  _updateLegendDisplay(i) {
+    this.showLegend = !this._slideLegendDisabled && !!i.elements.legendInfo?.visible;
   }
   //#endregion
 };
-l([
+o([
+  d()
+], l.prototype, "_slideId", 2);
+o([
   d()
-], o.prototype, "_slideId", 2);
-l([
+], l.prototype, "view", 2);
+o([
   d()
-], o.prototype, "view", 2);
-l([
+], l.prototype, "slideId", 1);
+o([
   d()
-], o.prototype, "slideId", 1);
-l([
+], l.prototype, "transitionActive", 2);
+o([
   d()
-], o.prototype, "transitionActive", 2);
-l([
+], l.prototype, "showLegend", 2);
+o([
   d()
-], o.prototype, "showLegend", 2);
-l([
+], l.prototype, "_slideLegendDisabled", 2);
+o([
   d()
-], o.prototype, "keyboardNavigationEnabled", 2);
-l([
+], l.prototype, "keyboardNavigationEnabled", 2);
+o([
   d()
-], o.prototype, "visibleSlides", 1);
-l([
+], l.prototype, "visibleSlides", 1);
+o([
   d()
-], o.prototype, "slides", 1);
-l([
+], l.prototype, "slides", 1);
+o([
   d()
-], o.prototype, "lastSlideSelected", 1);
-l([
+], l.prototype, "lastSlideSelected", 1);
+o([
   d()
-], o.prototype, "firstSlideSelected", 1);
-l([
+], l.prototype, "firstSlideSelected", 1);
+o([
   d()
-], o.prototype, "slideSelected", 1);
-l([
+], l.prototype, "slideSelected", 1);
+o([
   d()
-], o.prototype, "hasOnlyOneSlide", 1);
-l([
+], l.prototype, "hasOnlyOneSlide", 1);
+o([
   d()
-], o.prototype, "onApplySlideStart", 2);
-l([
+], l.prototype, "slideLegendDisabled", 1);
+o([
   d()
-], o.prototype, "onApplySlideComplete", 2);
-l([
+], l.prototype, "onApplySlideStart", 2);
+o([
   d()
-], o.prototype, "onApplySlideCancel", 2);
-l([
+], l.prototype, "onApplySlideComplete", 2);
+o([
   d()
-], o.prototype, "getSlideIndexBySlideId", 1);
-o = l([
-  D("components.presentation.PresentationViewModel")
-], o);
+], l.prototype, "onApplySlideCancel", 2);
+o([
+  d()
+], l.prototype, "getSlideIndexBySlideId", 1);
+l = o([
+  N("components.presentation.PresentationViewModel")
+], l);
 class te extends $ {
   constructor(e) {
     super(e);
@@ -265,21 +280,21 @@ class te extends $ {
     const n = t.features?.getItemAt(t.selectedFeatureIndex)?.layerReference;
     if (n?.layerId == null)
       return { success: !1, features: s };
-    const { layer: r, sublayer: a } = this._getLayersFromView(e, n.layerId, n?.sublayerId);
-    if (!r)
+    const { layer: a, sublayer: r } = this._getLayersFromView(e, n.layerId, n?.sublayerId);
+    if (!a)
       return { success: !1, features: s };
-    const c = a ?? r;
+    const c = r ?? a;
     if (!c || !this._layerTypeSupportsCapturePopup(c))
       return { success: !1, features: s };
-    if (s = await this._fetchFeaturesFromQueryable(e, t, r, a, c), s && this._featureHasBeenFilledWithAttributes(s)) {
-      const h = s[0];
-      return this._setFallbackPopupTemplate(h, a, r), this._setFallbackGeometry(h, t?.location), { success: !0, features: s, popupInfo: t };
+    if (s = await this._fetchFeaturesFromQueryable(e, t, a, r, c), s && this._featureHasBeenFilledWithAttributes(s)) {
+      const p = s[0];
+      return this._setFallbackPopupTemplate(p, r, a), this._setFallbackGeometry(p, t?.location), { success: !0, features: s, popupInfo: t };
     }
     return { success: !1, features: s };
   }
   _getLayersFromView(e, t, s) {
-    const n = e.map?.findLayerById(t) ?? void 0, r = this._getBuildingSceneLayerSublayer(n, s);
-    return { layer: n, sublayer: r };
+    const n = e.map?.findLayerById(t) ?? void 0, a = this._getBuildingSceneLayerSublayer(n, s);
+    return { layer: n, sublayer: a };
   }
   _getBuildingSceneLayerSublayer(e, t) {
     let s;
@@ -290,22 +305,22 @@ class te extends $ {
   _featureHasBeenFilledWithAttributes(e) {
     return e && e.length > 0 && e[0].attributes && Object.entries(e[0].attributes)?.length > 1;
   }
-  async _fetchFeaturesFromQueryable(e, t, s, n, r) {
-    const a = t.features?.getItemAt(t.selectedFeatureIndex);
-    if (a?.id == null)
+  async _fetchFeaturesFromQueryable(e, t, s, n, a) {
+    const r = t.features?.getItemAt(t.selectedFeatureIndex);
+    if (r?.id == null)
       return await Promise.resolve([]);
     const c = await e.whenLayerView(s);
     await w(() => !c.updating);
-    const p = this._tryGetBuildingComponentSublayerView(s, n, c) ?? c;
-    await w(() => !p.updating);
-    const f = this._createFeatureGraphic(s, n, r, a.id);
-    let x = await A(p, [f]);
-    return this._featureHasBeenFilledWithAttributes(x) || (await w(() => !e.updating), x = await A(p, [f])), x;
+    const h = this._tryGetBuildingComponentSublayerView(s, n, c) ?? c;
+    await w(() => !h.updating);
+    const f = this._createFeatureGraphic(s, n, a, r.id);
+    let L = await A(h, [f]);
+    return this._featureHasBeenFilledWithAttributes(L) || (await w(() => !e.updating), L = await A(h, [f])), L;
   }
   _tryGetBuildingComponentSublayerView(e, t, s) {
     let n;
     return this._isLayer(e) && this._isBuildingSceneLayer(e) && t != null && (n = s.sublayerViews.find(
-      (r) => r.sublayer.id === t.id
+      (a) => a.sublayer.id === t.id
     )), n;
   }
   _setFallbackPopupTemplate(e, t, s) {
@@ -323,8 +338,8 @@ class te extends $ {
     e.geometry == null && t && (e.geometry = t.clone());
   }
   _createFeatureGraphic(e, t, s, n) {
-    const r = this._getGlobalIdFieldNameFromLayer(s), a = n.type === "global-id" && r ? r : s.objectIdField, c = this._getGraphicOrigin(e, t), h = new M({ attributes: {}, layer: e, origin: c });
-    return h.attributes[a] = n.value, h;
+    const a = this._getGlobalIdFieldNameFromLayer(s), r = n.type === "global-id" && a ? a : s.objectIdField, c = this._getGraphicOrigin(e, t), p = new M({ attributes: {}, layer: e, origin: c });
+    return p.attributes[r] = n.value, p;
   }
   _getGraphicOrigin(e, t) {
     switch (e.type) {
@@ -380,34 +395,34 @@ const ie = (i) => new te(i), S = Object.freeze({ width: 0, height: 0 }), b = /*
     subscribers: /* @__PURE__ */ new Set()
   }, b.set(i, e)), e;
 }, se = (i) => {
-  const e = i?.topCenter.value, t = i?.topLeft.value, s = i?.topRight.value, n = i?.bottomCenter.value, r = i?.bottomLeft.value, a = i?.bottomRight.value;
-  return e && t && s && n && r && a ? {
+  const e = i?.topCenter.value, t = i?.topLeft.value, s = i?.topRight.value, n = i?.bottomCenter.value, a = i?.bottomLeft.value, r = i?.bottomRight.value;
+  return e && t && s && n && a && r ? {
     topCenter: e,
     topLeft: t,
     topRight: s,
     bottomCenter: n,
-    bottomLeft: r,
-    bottomRight: a
+    bottomLeft: a,
+    bottomRight: r
   } : null;
-}, ne = (i, e) => _.every((t) => i.get(t) === e[t]), re = (i) => {
+}, ne = (i, e) => _.every((t) => i.get(t) === e[t]), ae = (i) => {
   const e = F(i.observedSizes);
   i.subscribers.forEach((t) => t(e));
-}, ae = (i, e) => {
+}, re = (i, e) => {
   const t = b.get(i);
   if (!t)
     return;
   let s = !1;
   e.forEach((n) => {
-    const r = _.find((f) => t.observedGroups.get(f) === n.target);
-    if (!r)
+    const a = _.find((f) => t.observedGroups.get(f) === n.target);
+    if (!a)
       return;
-    const { width: a, height: c } = n.contentRect, h = { width: a, height: c }, p = t.observedSizes[r];
-    p.width === h.width && p.height === h.height || (t.observedSizes[r] = h, s = !0);
-  }), s && re(t);
-}, L = (i, e) => {
+    const { width: r, height: c } = n.contentRect, p = { width: r, height: c }, h = t.observedSizes[a];
+    h.width === p.width && h.height === p.height || (t.observedSizes[a] = p, s = !0);
+  }), s && ae(t);
+}, I = (i, e) => {
   const t = z(i);
   t.resizeObserver || (t.resizeObserver = new ResizeObserver((n) => {
-    ae(i, n);
+    re(i, n);
   }));
   const s = se(e);
   if (!s) {
@@ -415,17 +430,17 @@ const ie = (i) => new te(i), S = Object.freeze({ width: 0, height: 0 }), b = /*
     return;
   }
   ne(t.observedGroups, s) || (t.resizeObserver.disconnect(), t.observedGroups.clear(), _.forEach((n) => {
-    const r = s[n];
-    t.observedGroups.set(n, r), t.resizeObserver?.observe(r);
+    const a = s[n];
+    t.observedGroups.set(n, a), t.resizeObserver?.observe(a);
   }));
-}, oe = (i, e) => {
+}, le = (i, e) => {
   const t = z(i);
   return t.subscribers.add(e), e(F(t.observedSizes)), () => {
     const s = b.get(i);
     s && (s.subscribers.delete(e), s.subscribers.size === 0 && (s.resizeObserver?.disconnect(), s.observedGroups.clear(), b.delete(i)));
   };
 };
-class le extends $ {
+class oe extends $ {
   // References to the slot group elements owned by the host component.
   #e;
   #t;
@@ -443,7 +458,7 @@ class le extends $ {
   }
   hostLifecycle() {
     return [
-      u(
+      g(
         () => this.#s(),
         (t) => {
           if (this.#t !== t) {
@@ -451,17 +466,17 @@ class le extends $ {
               this.exports = m();
               return;
             }
-            this.#i = oe(t, (s) => {
+            this.#i = le(t, (s) => {
               this.#n(s) || (this.exports = s);
-            }), L(t, this.#e);
+            }), I(t, this.#e);
           }
         },
         { sync: !0, initial: !0 }
       ),
-      u(
+      g(
         () => this.#s()?.slotGroupRefs,
         (t) => {
-          this.#e = t, this.#t && t && L(this.#t, t);
+          this.#e = t, this.#t && t && I(this.#t, t);
         },
         { sync: !0, initial: !0 }
       )
@@ -472,25 +487,25 @@ class le extends $ {
     return e && typeof e != "string" ? e : void 0;
   }
   hostUpdated() {
-    !this.#t || !this.#e || L(this.#t, this.#e);
+    !this.#t || !this.#e || I(this.#t, this.#e);
   }
   // Compares the newly measured sizes against the currently exported values.
   #n(e) {
     const t = this.exports ?? m();
     return _.every((s) => {
-      const n = t[s], r = e[s];
-      return n.width === r.width && n.height === r.height;
+      const n = t[s], a = e[s];
+      return n.width === a.width && n.height === a.height;
     });
   }
 }
-const de = T(le), ce = N(o);
-class he extends G {
+const de = E(oe), ce = R(l);
+class pe extends G {
   constructor() {
-    super(...arguments), this._messages = R(), this._direction = B(), this.#e = ce(this), this.#i = (e) => {
+    super(...arguments), this._messages = B(), this._direction = T(), this.#e = ce(this), this.#i = (e) => {
       this.#e.captureArrowKeysForNavigation(e, this._direction);
-    }, this.#s = ie(this), this.#r = null, this.#o = (e) => {
+    }, this.#s = ie(this), this.#a = null, this.#l = (e) => {
       this.#s.closePopup(), this.arcgisSlideApplyStart.emit({ slide: e });
-    }, this.#l = (e) => {
+    }, this.#o = (e) => {
       this.#s.openPopup(e), this.sliceAnalysisInteractive && this.#e.setSliceAnalysisInteractive(!0), this.arcgisSlideApplyComplete.emit({ slide: e });
     }, this.#d = (e) => {
       this.sliceAnalysisInteractive && this.#e.setSliceAnalysisInteractive(!0), this.arcgisSlideApplyCancel.emit({ slide: e });
@@ -501,17 +516,17 @@ class he extends G {
       this.#n?.abort();
       const s = new AbortController();
       this.#n = s;
-      const n = Date.now(), r = this.#r !== null && n - this.#r < C;
-      if (this.#r = n, this.#e.applySlide(t, r, s), r) {
+      const n = Date.now(), a = this.#a !== null && n - this.#a < C;
+      if (this.#a = n, this.#e.applySlide(t, a, s), a) {
         this._showSlideList = !1;
         return;
       }
       setTimeout(() => {
         s.signal.aborted || (this._showSlideList = !1, this.#e.applySlide(t, !1, s));
       }, X(C));
-    }, this.#a = () => {
+    }, this.#r = () => {
       this._showSlideList = !1;
-    }, this._showSlideList = !1, this.autoDestroyDisabled = !1, this.view = this.#e.view, this.visualScale = "m", this.keyboardNavigationEnabled = !1, this.slidePopupDisabled = !1, this.slideCaptionsDisabled = !1, this.slideLegendDisabled = !1, this.sliceAnalysisInteractive = !1, this.navigationHidden = !1, this.arcgisPopupFeatureNotFound = v(), this.arcgisPopupFeaturesRetrieved = v(), this.arcgisReady = v(), this.arcgisSlideApplyCancel = v(), this.arcgisSlideApplyComplete = v(), this.arcgisSlideApplyStart = v();
+    }, this._showSlideList = !1, this.autoDestroyDisabled = !1, this.view = this.#e.view, this.visualScale = "m", this.keyboardNavigationEnabled = !1, this.slidePopupDisabled = !1, this.slideCaptionsDisabled = !1, this.slideLegendDisabled = this.#e.slideLegendDisabled, this.sliceAnalysisInteractive = !1, this.navigationHidden = !1, this.arcgisPopupFeatureNotFound = v(), this.arcgisPopupFeaturesRetrieved = v(), this.arcgisReady = v(), this.arcgisSlideApplyCancel = v(), this.arcgisSlideApplyComplete = v(), this.arcgisSlideApplyStart = v();
   }
   static {
     this.properties = { _slotSizesController: 16, _showSlideList: 16, slideId: 1, autoDestroyDisabled: 5, view: 0, visualScale: 1, keyboardNavigationEnabled: 5, slidePopupDisabled: 5, slideCaptionsDisabled: 5, slideLegendDisabled: 5, sliceAnalysisInteractive: 5, navigationHidden: 5 };
@@ -524,14 +539,14 @@ class he extends G {
   #i;
   #s;
   #n;
-  #r;
-  #o;
+  #a;
   #l;
+  #o;
   #d;
   #c;
-  #a;
-  #p;
+  #r;
   #h;
+  #p;
   get slideId() {
     return this.#e.slideId;
   }
@@ -542,24 +557,18 @@ class he extends G {
     await this.manager.destroy();
   }
   loaded() {
-    this.#e.onApplySlideStart = this.#o, this.#e.onApplySlideComplete = this.#l, this.#e.onApplySlideCancel = this.#d, this.#S();
+    this.#e.onApplySlideStart = this.#l, this.#e.onApplySlideComplete = this.#o, this.#e.onApplySlideCancel = this.#d, this.#S();
     const e = this;
     this.manager.onLifecycle(() => [
-      u(() => this.slidePopupDisabled, (t) => {
-        if (this.slideId && !t) {
-          const s = this.#e.getSlideBySlideId(this.slideId);
-          s && this.#s?.openPopup(s);
-        } else t && this.#s?.closePopup(!0);
-      }),
-      u(() => this.sliceAnalysisInteractive, (t) => {
+      g(() => this.sliceAnalysisInteractive, (t) => {
         this.#e.setSliceAnalysisInteractive(t);
       }, { initial: !0 }),
-      u(() => e.referenceElement, (t) => {
-        this.#u(t) && (this._slotSizesController = de(this), this.#h = this.#g());
+      g(() => e.referenceElement, (t) => {
+        this.#u(t) && (this._slotSizesController = de(this), this.#p = this.#g());
       }, { once: !0, initial: !0 }),
       {
         remove: () => {
-          document.removeEventListener("keydown", this.#i), this.#p?.removeEventListener("arcgisSlideListClose", this.#a), this.#t?.remove(), this.#h?.remove(), this.#n?.abort();
+          document.removeEventListener("keydown", this.#i), this.#h?.removeEventListener("arcgisSlideListClose", this.#r), this.#t?.remove(), this.#p?.remove(), this.#n?.abort();
         }
       }
     ]);
@@ -568,46 +577,46 @@ class he extends G {
     return e === void 0 || typeof e == "string" ? !1 : "tagName" in e && e.tagName === "ARCGIS-SCENE";
   }
   #g() {
-    return u(() => this._slotSizesController, (e) => this.#v(e?.topLeft, e?.topRight, e?.bottomLeft, e?.bottomRight), { initial: !0 });
+    return g(() => this._slotSizesController, (e) => this.#v(e?.topLeft, e?.topRight, e?.bottomLeft, e?.bottomRight), { initial: !0 });
   }
   #v(e, t, s, n) {
-    const r = this._direction === "ltr" ? e?.width ?? 0 : t?.width ?? 0, a = this._direction === "ltr" ? t?.width ?? 0 : e?.width ?? 0, c = Math.max(e?.height ?? 0, t?.height ?? 0), h = Math.max(s?.height ?? 0, n?.height ?? 0);
-    r > 0 ? this.el.style.setProperty("--arcgis-internal-presentation-padding-start", `calc(var(--calcite-space-lg) + ${r.toString()}px)`) : this.el.style.setProperty("--arcgis-internal-presentation-padding-start", "0px"), a > 0 ? this.el.style.setProperty("--arcgis-internal-presentation-padding-end", `calc(var(--calcite-space-lg) + ${a.toString()}px)`) : this.el.style.setProperty("--arcgis-internal-presentation-padding-end", "0px");
-    const p = r <= Math.max(c, h) && a <= Math.max(c, h);
-    this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-top", p ? "0" : `${c}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-bottom", p ? "0" : `${h}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-start", p ? `${r}px` : "0"), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-end", p ? `${a}px` : "0");
+    const a = this._direction === "ltr" ? e?.width ?? 0 : t?.width ?? 0, r = this._direction === "ltr" ? t?.width ?? 0 : e?.width ?? 0, c = Math.max(e?.height ?? 0, t?.height ?? 0), p = Math.max(s?.height ?? 0, n?.height ?? 0);
+    a > 0 ? this.el.style.setProperty("--arcgis-internal-presentation-padding-start", `calc(var(--calcite-space-lg) + ${a.toString()}px)`) : this.el.style.setProperty("--arcgis-internal-presentation-padding-start", "0px"), r > 0 ? this.el.style.setProperty("--arcgis-internal-presentation-padding-end", `calc(var(--calcite-space-lg) + ${r.toString()}px)`) : this.el.style.setProperty("--arcgis-internal-presentation-padding-end", "0px");
+    const h = a <= Math.max(c, p) && r <= Math.max(c, p);
+    this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-top", h ? "0" : `${c}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-bottom", h ? "0" : `${p}px`), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-start", h ? `${a}px` : "0"), this.el.style.setProperty("--arcgis-internal-presentation-cover-padding-end", h ? `${r}px` : "0");
   }
   #S() {
-    this.#t = u(() => this.keyboardNavigationEnabled, (e) => {
+    this.#t = g(() => this.keyboardNavigationEnabled, (e) => {
       document.removeEventListener("keydown", this.#i), e && document.addEventListener("keydown", this.#i);
     }, { initial: !0 });
   }
   render() {
     if (this.#e?.visibleSlides?.length === 0)
-      return g`<div></div>`;
-    const e = this.#e.visibleSlides.find((r) => r.id === this.slideId), t = this.#m(), s = this.#f(e), n = this.#y();
-    return g`<div class="root"><div class="presentation-content">${s}${n}</div>${t}</div>`;
+      return u`<div></div>`;
+    const e = this.#e.visibleSlides.find((a) => a.id === this.slideId), t = this.#m(), s = this.#f(e), n = this.#y();
+    return u`<div class="root"><div class="presentation-content">${s}${n}</div>${t}</div>`;
   }
   #m() {
     if (this.navigationHidden)
       return null;
     const e = this.#e.lastSlideSelected && !this.#e.hasOnlyOneSlide, t = this.#w();
-    return g`<div class="navigation-container"><div class="navigation-slide-list-container">${t}</div><div class="navigation"><div class="slide-list-action-container" id=${P}><calcite-action-bar expand-disabled layout=horizontal .scale=${this.visualScale === "l" ? "m" : "s"}><calcite-action .text=${this._messages.slideList ?? ""} selection-appearance=highlight icon=list .scale=${this.visualScale === "l" ? "m" : "s"} .label=${this._messages.slideList} .active=${this._showSlideList} @click=${() => this._showSlideList = !this._showSlideList}></calcite-action></calcite-action-bar><calcite-tooltip .referenceElement=${P} placement=bottom><span>${this._messages.slideList}</span></calcite-tooltip></div><calcite-button appearance=transparent icon-start=chevron-left icon-flip-rtl=start kind=neutral .scale=${this.visualScale} .disabled=${this.#e.firstSlideSelected || !this.#e.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? I} @click=${() => this.#e.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this.#b()}</div><calcite-button appearance=transparent icon-start=${e ? "reset" : "chevron-right"} icon-flip-rtl=start kind=neutral .scale=${this.visualScale} .label=${e ? this._messages.restart : this._messages.next} title=${(e ? this._messages.restart : this._messages.next) ?? I} @click=${() => this.#e.navigateInPresentation(1)}></calcite-button></div></div>`;
+    return u`<div class="navigation-container"><div class="navigation-slide-list-container">${t}</div><div class="navigation"><div class="slide-list-action-container" id=${P}><calcite-action-bar expand-disabled layout=horizontal .scale=${this.visualScale === "l" ? "m" : "s"}><calcite-action .text=${this._messages.slideList ?? ""} selection-appearance=highlight icon=list .scale=${this.visualScale === "l" ? "m" : "s"} .label=${this._messages.slideList} .active=${this._showSlideList} @click=${() => this._showSlideList = !this._showSlideList}></calcite-action></calcite-action-bar><calcite-tooltip .referenceElement=${P} placement=bottom><span>${this._messages.slideList}</span></calcite-tooltip></div><calcite-button appearance=transparent icon-start=chevron-left icon-flip-rtl=start kind=neutral .scale=${this.visualScale} .disabled=${this.#e.firstSlideSelected || !this.#e.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? x} @click=${() => this.#e.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this.#b()}</div><calcite-button appearance=transparent icon-start=${e ? "reset" : "chevron-right"} icon-flip-rtl=start kind=neutral .scale=${this.visualScale} .label=${e ? this._messages.restart : this._messages.next} title=${(e ? this._messages.restart : this._messages.next) ?? x} @click=${() => this.#e.navigateInPresentation(1)}></calcite-button></div></div>`;
   }
   #b() {
     const e = this.#e.slideIndex + 1, t = this._messages?.slideNavAriaText?.replace("${index}", e.toString()).replace("${numberOfSlides}", this.#e.visibleSlides.length.toString());
-    return this.#e.slideSelected ? g`<p role=banner aria-label=${t ?? I} aria-live=polite><div class="slide-counter-text-element" data-testId=arcgis-map-presentation-slideIndex>${e}</div><div>/</div><p class="slide-counter-text-element" data-testId=arcgis-map-presentation-numberOfSlides>${this.#e.visibleSlides.length}</p></p>` : g`<p role=banner data-testId=arcgis-map-presentation-numberOfSlides>${this.#e.visibleSlides?.length} ${this._messages?.slides}</p>`;
+    return this.#e.slideSelected ? u`<p role=banner aria-label=${t ?? x} aria-live=polite><div class="slide-counter-text-element" data-testId=arcgis-map-presentation-slideIndex>${e}</div><div>/</div><p class="slide-counter-text-element" data-testId=arcgis-map-presentation-numberOfSlides>${this.#e.visibleSlides.length}</p></p>` : u`<p role=banner data-testId=arcgis-map-presentation-numberOfSlides>${this.#e.visibleSlides?.length} ${this._messages?.slides}</p>`;
   }
   #f(e) {
-    return this.slideCaptionsDisabled ? null : g`<arcgis-presentation-captions .slide=${e} .transitionActive=${this.#e.transitionActive}></arcgis-presentation-captions>`;
+    return this.slideCaptionsDisabled ? null : u`<arcgis-presentation-captions .slide=${e} .transitionActive=${this.#e.transitionActive}></arcgis-presentation-captions>`;
   }
   #y() {
-    return this.slideLegendDisabled || !this.#e.showLegend ? null : g`<calcite-panel data-testid=presentation-legend class="legend-container" .heading=${this._messages.legend} closable @calcitePanelClose=${() => this.#e.showLegend = !1}><arcgis-legend class="legend" .view=${this.view} @arcgisReady=${(e) => e.stopPropagation()}></arcgis-legend></calcite-panel>`;
+    return this.#e.showLegend ? u`<calcite-panel data-testid=presentation-legend class="legend-container" .heading=${this._messages.legend} closable @calcitePanelClose=${() => this.#e.showLegend = !1}><arcgis-legend class="legend" .view=${this.view} @arcgisReady=${(e) => e.stopPropagation()}></arcgis-legend></calcite-panel>` : null;
   }
   #w() {
-    return this._showSlideList ? g`<arcgis-presentation-slide-list .slides=${this.#e.visibleSlides} .slideId=${this.#e.slideId} .label=${this._messages.slideList} .visualScale=${this.visualScale} @arcgisSlideListItemSelected=${this.#c} @arcgisSlideListOutsideClick=${this.#a}></arcgis-presentation-slide-list>` : null;
+    return this._showSlideList ? u`<arcgis-presentation-slide-list .slides=${this.#e.visibleSlides} .slideId=${this.#e.slideId} .label=${this._messages.slideList} .visualScale=${this.visualScale} @arcgisSlideListItemSelected=${this.#c} @arcgisSlideListOutsideClick=${this.#r}></arcgis-presentation-slide-list>` : null;
   }
 }
-O("arcgis-presentation", he);
+O("arcgis-presentation", pe);
 export {
-  he as ArcgisPresentation
+  pe as ArcgisPresentation
 };

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

@@ -35,7 +35,7 @@ import type { LoadErrorSource } from "../types.js";
 import type { ArcgisPopup } from "../arcgis-popup/customElement.js";
 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 { DoubleTapDragEvent, FocusRegionSelectEvent, 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, ScreenRect, ScreenPolygon } from "@arcgis/core/core/types.js";
 import type { FetchPopupFeaturesOptions, ViewPopupOpenOptions } from "@arcgis/core/views/PopupView.js";
@@ -434,6 +434,19 @@ export abstract class ArcgisScene extends LitElement {
    * @since 4.33
    */
   accessor focusAreas: FocusAreas;
+  /**
+   * The screen rectangle of the active focus region, or `null` when disabled.
+   *
+   * @since 5.2
+   */
+  get focusRegion(): SceneView["focusRegion"];
+  /**
+   * Indicates whether the focus region is enabled.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor focusRegionEnabled: boolean;
   /** Gamepad input specific configuration settings. */
   get gamepad(): GamepadSettings;
   /**
@@ -1190,6 +1203,12 @@ export abstract class ArcgisScene extends LitElement {
    * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#event-drag)
    */
   readonly arcgisViewDrag: import("@arcgis/lumina").TargetedEvent<this, DragEvent>;
+  /**
+   * Fires when the focus region is selected. Call `event.detail.preventDefault()` to suppress the default popup.
+   *
+   * @since 5.2
+   */
+  readonly arcgisViewFocusRegionSelect: import("@arcgis/lumina").TargetedEvent<this, FocusRegionSelectEvent>;
   /**
    * Fires after holding either a mouse button or a single finger on the view for a short amount of time.
    *
@@ -1316,6 +1335,7 @@ export abstract class ArcgisScene extends LitElement {
     arcgisViewDoubleClick: ArcgisScene["arcgisViewDoubleClick"]["detail"];
     arcgisViewDoubleTapDrag: ArcgisScene["arcgisViewDoubleTapDrag"]["detail"];
     arcgisViewDrag: ArcgisScene["arcgisViewDrag"]["detail"];
+    arcgisViewFocusRegionSelect: ArcgisScene["arcgisViewFocusRegionSelect"]["detail"];
     arcgisViewHold: ArcgisScene["arcgisViewHold"]["detail"];
     arcgisViewImmediateClick: ArcgisScene["arcgisViewImmediateClick"]["detail"];
     arcgisViewImmediateDoubleClick: ArcgisScene["arcgisViewImmediateDoubleClick"]["detail"];