@arcgis/map-components 5.1.0-next.90 → 5.1.0-next.91

package/dist/components/arcgis-navigation-toggle/customElement.js

@@ -1,19 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
-import { when as c } from "@arcgis/core/core/reactiveUtils.js";
+import { when as s } from "@arcgis/core/core/reactiveUtils.js";
 import { LitElement as g, createEvent as h, nothing as r, safeClassMap as p } from "@arcgis/lumina";
 import { usePropertyChange as u } from "@arcgis/lumina/controllers";
 import { css as v, html as m } from "lit";
 import { u as f } from "../../chunks/useT9n.js";
 import { u as b } from "../../chunks/useView.js";
 import { g as y } from "../../chunks/globalCss.js";
-const M = v`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{display:flex;inline-size:fit-content;block-size:fit-content}.root{--calcite-internal-action-bar-padding: 0;--calcite-internal-action-bar-gap: 0;--calcite-action-corner-radius: 0}`, e = {
+const M = v`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);calcite-button{--calcite-offset-invert-focus: 1}display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{display:flex;inline-size:fit-content;block-size:fit-content}.root{--calcite-internal-action-bar-padding: 0;--calcite-internal-action-bar-gap: 0;--calcite-action-corner-radius: 0}`, i = {
   pan: "move",
   rotate: "rotate"
 };
 class $ extends g {
   constructor() {
-    super(...arguments), this._messages = f(), this._state = "disabled", this.autoDestroyDisabled = !1, this.view = b(this), this.icon = e.pan, this.layout = "vertical", this.navigationMode = "pan", this.visualScale = "m", this.arcgisPropertyChange = u()("layout", "state"), this.arcgisReady = h();
+    super(...arguments), this._messages = f(), this._state = "disabled", this.autoDestroyDisabled = !1, this.view = b(this), this.icon = i.pan, this.layout = "vertical", this.navigationMode = "pan", this.visualScale = "m", this.arcgisPropertyChange = u()("layout", "state"), this.arcgisReady = h();
   }
   static {
     this.properties = { _state: 16, autoDestroyDisabled: 5, view: 0, icon: 1, label: 1, layout: 3, messageOverrides: 0, navigationMode: 3, referenceElement: 1, state: 35, visualScale: 1 };
@@ -32,8 +32,8 @@ class $ extends g {
   }
   load() {
     this.manager.onLifecycle(() => [
-      c(() => this.view?.navigation?.actionMap, () => this._updateNavigationActionMap()),
-      c(() => {
+      s(() => this.view?.navigation?.actionMap, () => this._updateNavigationActionMap()),
+      s(() => {
         const { view: t } = this;
         return t?.ready && t?.type === "3d" ? "ready" : "disabled";
       }, (t) => {
@@ -58,8 +58,8 @@ class $ extends g {
     t.dragPrimary = a ? "pan" : "rotate", t.dragSecondary = a ? "rotate" : "pan";
   }
   render() {
-    const { _messages: t, navigationMode: a, state: l } = this, o = t.pan ?? "", n = t.rotate ?? "", i = l === "disabled", s = a === "pan";
-    return m`<calcite-action-bar class=${p({ root: !0, [y.disabled]: i })} expand-disabled .layout=${this.layout}><calcite-action .active=${s} .disabled=${i} .icon=${e.pan} @click=${this._onPanClick} .scale=${this.visualScale} .text=${o} title=${o ?? r}></calcite-action><calcite-action .active=${!s} .disabled=${i} .icon=${e.rotate} @click=${this._onRotateClick} .scale=${this.visualScale} .text=${n} title=${n ?? r}></calcite-action></calcite-action-bar>`;
+    const { _messages: t, navigationMode: a, state: l } = this, o = t.pan ?? "", n = t.rotate ?? "", e = l === "disabled", c = a === "pan";
+    return m`<calcite-action-bar class=${p({ root: !0, [y.disabled]: e })} expand-disabled .layout=${this.layout}><calcite-action .active=${c} .disabled=${e} .icon=${i.pan} @click=${this._onPanClick} .scale=${this.visualScale} .text=${o} title=${o ?? r}></calcite-action><calcite-action .active=${!c} .disabled=${e} .icon=${i.rotate} @click=${this._onRotateClick} .scale=${this.visualScale} .text=${n} title=${n ?? r}></calcite-action></calcite-action-bar>`;
   }
 }
 d("arcgis-navigation-toggle", $);

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

@@ -1,15 +1,15 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as z } from "../../chunks/runtime.js";
-import { css as O, html as u } from "lit";
-import { GenericController as L, proxyExports as $, useDirection as M } from "@arcgis/lumina/controllers";
-import { LitElement as R, createEvent as I, nothing as v } from "@arcgis/lumina";
+import { c as O } from "../../chunks/runtime.js";
+import { css as z, html as u } from "lit";
+import { GenericController as A, proxyExports as $, useDirection as M } from "@arcgis/lumina/controllers";
+import { LitElement as R, createEvent as I, nothing as S } from "@arcgis/lumina";
 import { u as G } from "../../chunks/useT9n.js";
 import { m as N } from "../../chunks/useViewModel.js";
 import { property as d, subclass as B } from "@arcgis/core/core/accessorSupport/decorators.js";
 import E from "@arcgis/core/core/Accessor.js";
-import y from "@arcgis/core/core/Collection.js";
+import w from "@arcgis/core/core/Collection.js";
 import { ignoreAbortErrors as T } from "@arcgis/core/core/promiseUtils.js";
-import { watch as g, on as D, whenOnce as S } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as v, on as D, whenOnce as m } from "@arcgis/core/core/reactiveUtils.js";
 import H from "@arcgis/core/Graphic.js";
 import V from "@arcgis/core/layers/Layer.js";
 import k from "@arcgis/core/graphic/CSVGraphicOrigin.js";
@@ -18,9 +18,9 @@ import W from "@arcgis/core/graphic/SceneGraphicOrigin.js";
 import K from "@arcgis/core/graphic/WFSGraphicOrigin.js";
 import U from "@arcgis/core/graphic/BuildingGraphicOrigin.js";
 import Q from "@arcgis/core/graphic/FeatureGraphicOrigin.js";
-import { fetchPopupFeaturesFromGraphics as A } from "@arcgis/core/applications/SceneViewer/sceneViewerUtils.js";
+import { fetchPopupFeaturesFromGraphics as C } from "@arcgis/core/applications/SceneViewer/sceneViewerUtils.js";
 import { s as _ } from "../../chunks/resources.js";
-const q = O`:host{width:100%;height:100%;padding:var(--calcite-spacing-none);margin:var(--calcite-spacing-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}p{padding:0;margin:0}.root{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%}.presentation-content{display:flex;width:100%;justify-content:flex-end;padding-top:var(--calcite-spacing-lg);padding-inline-start:calc(var(--calcite-spacing-lg)+ var(--arcgis-internal-presentation-padding-start));padding-inline-end:calc(var(--calcite-spacing-lg) + var(--arcgis-internal-presentation-padding-end))}.navigation{width:fit-content;pointer-events:auto;display:flex;align-items:center;gap:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1);box-shadow:var(--arcgis-internal-box-shadow);margin-block:auto calc(var(--calcite-spacing-lg) + var(--internal-attribution-height));margin-inline-start:var(--calcite-spacing-lg)}.slide-counter-text{display:flex;align-items:center;justify-content:center;gap:var(--calcite-spacing-base);min-width:64px}.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}.legend{pointer-events:all;box-shadow:var(--calcite-shadow-sm);max-width:300px;height:auto;max-height:calc(100vh - 136px);overflow:hidden auto}`;
+const q = z`:host{width:100%;height:100%;padding:var(--calcite-spacing-none);margin:var(--calcite-spacing-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}p{padding:0;margin:0}.root{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%}.presentation-content{display:flex;width:100%;justify-content:flex-end;padding-top:var(--calcite-spacing-lg);padding-inline-start:calc(var(--calcite-spacing-lg) + var(--arcgis-internal-presentation-padding-start));padding-inline-end:calc(var(--calcite-spacing-lg) + var(--arcgis-internal-presentation-padding-end))}.navigation{width:fit-content;pointer-events:auto;display:flex;align-items:center;gap:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1);box-shadow:var(--arcgis-internal-box-shadow);margin-block:auto calc(var(--calcite-spacing-lg) + var(--internal-attribution-height));margin-inline-start:var(--calcite-spacing-lg)}.slide-counter-text{display:flex;align-items:center;justify-content:center;gap:var(--calcite-spacing-base);min-width:64px}.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}.legend{pointer-events:all;box-shadow:var(--calcite-shadow-sm);max-width:300px;height:auto;max-height:calc(100vh - 136px);overflow:hidden auto}`;
 var J = Object.defineProperty, X = Object.getOwnPropertyDescriptor, l = (i, e, t, s) => {
   for (var n = s > 1 ? void 0 : s ? X(e, t) : e, r = i.length - 1, o; r >= 0; r--)
     (o = i[r]) && (n = (s ? o(e, t, n) : o(n)) || n);
@@ -43,7 +43,7 @@ let a = class extends E {
   }
   initialize() {
     this.addHandles(
-      g(
+      v(
         () => this.view?.map,
         (i, e) => {
           if (this.hasHandles("sceneLoaded") && this.removeHandles("sceneLoaded"), e) {
@@ -51,7 +51,7 @@ let a = class extends E {
             t && t.length > 0 && this._unsubscribeToSlideEvents(t);
           }
           i && this.addHandles(
-            g(
+            v(
               () => i.loaded,
               (t) => {
                 t && (this.removeHandles("sceneLoaded"), this._startWatchSlides(), this._slideId && this._applySlideById(this._slideId));
@@ -75,10 +75,10 @@ let a = class extends E {
     i === void 0 || !this.view?.map?.loaded ? this._slideId = i : this._applySlideById(i);
   }
   get visibleSlides() {
-    return this.view?.map?.presentation?.slides?.filter((i) => !i.hidden) ?? new y();
+    return this.view?.map?.presentation?.slides?.filter((i) => !i.hidden) ?? new w();
   }
   get slides() {
-    return this.view?.map?.presentation?.slides ?? new y();
+    return this.view?.map?.presentation?.slides ?? new w();
   }
   get lastSlideSelected() {
     return this.getSlideIndexBySlideId(this.slideId) === this.visibleSlides.length - 1;
@@ -133,7 +133,7 @@ let a = class extends E {
         () => this.slides,
         "change",
         (i) => {
-          this._subscribeToSlideEvents(new y(i.added)), this._unsubscribeToSlideEvents(new y(i.removed));
+          this._subscribeToSlideEvents(new w(i.added)), this._unsubscribeToSlideEvents(new w(i.removed));
         },
         {
           onListenerAdd: this._subscribeToSlideEvents,
@@ -204,14 +204,14 @@ l([
 a = l([
   B("components.presentation.PresentationViewModel")
 ], a);
-class Y extends L {
+class Y extends A {
   constructor(e) {
     super(e);
   }
   hostLoaded() {
     this.component.manager.onLifecycle(() => {
       const e = this.component;
-      S(() => e.referenceElement).then((t) => {
+      m(() => e.referenceElement).then((t) => {
         this._isArcgisScene(t) && (this._sceneRef = t);
       });
     });
@@ -274,12 +274,12 @@ class Y extends L {
     if (o?.id == null)
       return await Promise.resolve([]);
     const c = await e.whenLayerView(s);
-    await S(() => !c.updating);
+    await m(() => !c.updating);
     const h = this._tryGetBuildingComponentSublayerView(s, n, c) ?? c;
-    await S(() => !h.updating);
-    const f = this._createFeatureGraphic(s, n, r, o.id);
-    let x = await A(h, [f]);
-    return this._featureHasBeenFilledWithAttributes(x) || (await S(() => !e.updating), x = await A(h, [f])), x;
+    await m(() => !h.updating);
+    const y = this._createFeatureGraphic(s, n, r, o.id);
+    let x = await C(h, [y]);
+    return this._featureHasBeenFilledWithAttributes(x) || (await m(() => !e.updating), x = await C(h, [y])), x;
   }
   _tryGetBuildingComponentSublayerView(e, t, s) {
     let n;
@@ -337,48 +337,54 @@ class Y extends L {
   }
   //#endregion
 }
-const Z = (i) => new Y(i), w = Object.freeze({ width: 0, height: 0 }), b = /* @__PURE__ */ new WeakMap(), m = () => ({
-  topLeft: { ...w },
-  topRight: { ...w },
-  bottomLeft: { ...w },
-  bottomRight: { ...w }
-}), F = (i) => ({
+const Z = (i) => new Y(i), g = Object.freeze({ width: 0, height: 0 }), f = /* @__PURE__ */ new WeakMap(), b = () => ({
+  topCenter: { ...g },
+  topLeft: { ...g },
+  topRight: { ...g },
+  bottomCenter: { ...g },
+  bottomLeft: { ...g },
+  bottomRight: { ...g }
+}), L = (i) => ({
+  topCenter: { ...i.topCenter },
   topLeft: { ...i.topLeft },
   topRight: { ...i.topRight },
+  bottomCenter: { ...i.bottomCenter },
   bottomLeft: { ...i.bottomLeft },
   bottomRight: { ...i.bottomRight }
-}), C = (i) => {
-  let e = b.get(i);
+}), F = (i) => {
+  let e = f.get(i);
   return e || (e = {
     observedGroups: /* @__PURE__ */ new Map(),
-    observedSizes: m(),
+    observedSizes: b(),
     subscribers: /* @__PURE__ */ new Set()
-  }, b.set(i, e)), e;
+  }, f.set(i, e)), e;
 }, ee = (i) => {
-  const e = i?.topLeft.value, t = i?.topRight.value, s = i?.bottomLeft.value, n = i?.bottomRight.value;
-  return e && t && s && n ? {
-    topLeft: e,
-    topRight: t,
-    bottomLeft: s,
-    bottomRight: n
+  const e = i?.topCenter.value, t = i?.topLeft.value, s = i?.topRight.value, n = i?.bottomCenter.value, r = i?.bottomLeft.value, o = i?.bottomRight.value;
+  return e && t && s && n && r && o ? {
+    topCenter: e,
+    topLeft: t,
+    topRight: s,
+    bottomCenter: n,
+    bottomLeft: r,
+    bottomRight: o
   } : null;
 }, te = (i, e) => _.every((t) => i.get(t) === e[t]), ie = (i) => {
-  const e = F(i.observedSizes);
+  const e = L(i.observedSizes);
   i.subscribers.forEach((t) => t(e));
 }, se = (i, e) => {
-  const t = b.get(i);
+  const t = f.get(i);
   if (!t)
     return;
   let s = !1;
   e.forEach((n) => {
-    const r = _.find((f) => t.observedGroups.get(f) === n.target);
+    const r = _.find((y) => t.observedGroups.get(y) === n.target);
     if (!r)
       return;
     const { width: o, height: c } = n.contentRect, p = { width: o, height: c }, h = t.observedSizes[r];
     h.width === p.width && h.height === p.height || (t.observedSizes[r] = p, s = !0);
   }), s && ie(t);
 }, P = (i, e) => {
-  const t = C(i);
+  const t = F(i);
   t.resizeObserver || (t.resizeObserver = new ResizeObserver((n) => {
     se(i, n);
   }));
@@ -392,13 +398,13 @@ const Z = (i) => new Y(i), w = Object.freeze({ width: 0, height: 0 }), b = /* @_
     t.observedGroups.set(n, r), t.resizeObserver?.observe(r);
   }));
 }, ne = (i, e) => {
-  const t = C(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)));
+  const t = F(i);
+  return t.subscribers.add(e), e(L(t.observedSizes)), () => {
+    const s = f.get(i);
+    s && (s.subscribers.delete(e), s.subscribers.size === 0 && (s.resizeObserver?.disconnect(), s.observedGroups.clear(), f.delete(i)));
   };
 };
-class re extends L {
+class re extends A {
   // References to the slot group elements owned by the host component.
   #t;
   #e;
@@ -409,19 +415,19 @@ class re extends L {
    * @param component The host component that owns the slot group elements.
    */
   constructor(e) {
-    super(e), this.exports = m();
+    super(e), this.exports = b();
   }
   hostDisconnected() {
-    this.#i?.(), this.#i = void 0, this.#e = void 0, this.#t = void 0, this.exports = m();
+    this.#i?.(), this.#i = void 0, this.#e = void 0, this.#t = void 0, this.exports = b();
   }
   hostLifecycle() {
     return [
-      g(
+      v(
         () => this.#s(),
         (t) => {
           if (this.#e !== t) {
             if (this.#i?.(), this.#i = void 0, this.#e = t, this.#t = t?.slotGroupRefs, !t) {
-              this.exports = m();
+              this.exports = b();
               return;
             }
             this.#i = ne(t, (s) => {
@@ -431,7 +437,7 @@ class re extends L {
         },
         { sync: !0, initial: !0 }
       ),
-      g(
+      v(
         () => this.#s()?.slotGroupRefs,
         (t) => {
           this.#t = t, this.#e && t && P(this.#e, t);
@@ -449,7 +455,7 @@ class re extends L {
   }
   // Compares the newly measured sizes against the currently exported values.
   #n(e) {
-    const t = this.exports ?? m();
+    const t = this.exports ?? b();
     return _.every((s) => {
       const n = t[s], r = e[s];
       return n.width === r.width && n.height === r.height;
@@ -484,11 +490,11 @@ class le extends R {
   }
   loaded() {
     this.manager.onLifecycle(() => {
-      this.viewModel.onApplySlideStart = this._handleApplySlideStart, this.viewModel.onApplySlideComplete = this._handleApplySlideComplete, this._keyboardHandle = g(() => this.keyboardNavigationEnabled, (t) => {
+      this.viewModel.onApplySlideStart = this._handleApplySlideStart, this.viewModel.onApplySlideComplete = this._handleApplySlideComplete, this._keyboardHandle = v(() => this.keyboardNavigationEnabled, (t) => {
         document.removeEventListener("keydown", this._captureArrowKeysForNavigation), t && document.addEventListener("keydown", this._captureArrowKeysForNavigation);
       }, { initial: !0 });
       const e = this;
-      S(() => e.referenceElement).then((t) => {
+      m(() => e.referenceElement).then((t) => {
         this._isArcgisScene(t) && (this._slotSizesController = oe(this), this._watchSceneViewSlotSizes());
       }), this.manager.onDisconnected(() => {
         document.removeEventListener("keydown", this._captureArrowKeysForNavigation), this._keyboardHandle?.remove();
@@ -499,7 +505,7 @@ class le extends R {
     return e === void 0 || typeof e == "string" ? !1 : "tagName" in e && e.tagName === "ARCGIS-SCENE";
   }
   _watchSceneViewSlotSizes() {
-    return g(() => this._slotSizesController, (e) => this._updatePresentationCaptionsPadding(e?.topLeft, e?.topRight, e?.bottomLeft, e?.bottomRight), { initial: !0 });
+    return v(() => this._slotSizesController, (e) => this._updatePresentationCaptionsPadding(e?.topLeft, e?.topRight, e?.bottomLeft, e?.bottomRight), { initial: !0 });
   }
   _updatePresentationCaptionsPadding(e, t, s, n) {
     const r = this._direction === "ltr" ? e?.width ?? 0 : t?.width ?? 0, o = 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);
@@ -515,11 +521,11 @@ class le extends R {
   }
   _renderNavigation() {
     const e = this.viewModel.lastSlideSelected && !this.viewModel.hasOnlyOneSlide, t = this._direction === "rtl", s = t ? "chevron-right" : "chevron-left", n = t ? "chevron-left" : "chevron-right";
-    return u`<div class="navigation"><calcite-button appearance=transparent icon-start=${s ?? v} kind=neutral .scale=${this.scale} .disabled=${this.viewModel.firstSlideSelected || !this.viewModel.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? v} @click=${() => this.viewModel.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this._renderSlideCounter()}</div><calcite-button appearance=transparent icon-start=${(e ? "reset" : n) ?? v} kind=neutral .scale=${this.scale} .label=${e ? this._messages.restart : this._messages.next} title=${(e ? this._messages.restart : this._messages.next) ?? v} @click=${() => this.viewModel.navigateInPresentation(1)}></calcite-button></div>`;
+    return u`<div class="navigation"><calcite-button appearance=transparent icon-start=${s ?? S} kind=neutral .scale=${this.scale} .disabled=${this.viewModel.firstSlideSelected || !this.viewModel.slideSelected} .label=${this._messages.previous} title=${this._messages.previous ?? S} @click=${() => this.viewModel.navigateInPresentation(-1)}></calcite-button><div class="slide-counter-text">${this._renderSlideCounter()}</div><calcite-button appearance=transparent icon-start=${(e ? "reset" : n) ?? S} kind=neutral .scale=${this.scale} .label=${e ? this._messages.restart : this._messages.next} title=${(e ? this._messages.restart : this._messages.next) ?? S} @click=${() => this.viewModel.navigateInPresentation(1)}></calcite-button></div>`;
   }
   _renderSlideCounter() {
     const e = this.viewModel.slideIndex + 1, t = this._messages?.slideNavAriaText?.replace("${index}", e.toString()).replace("${numberOfSlides}", this.viewModel.visibleSlides.length.toString());
-    return this.viewModel.slideSelected ? u`<p role=banner aria-label=${t ?? v} aria-live=polite><div class="slide-counter-text-element" data-testId=arcgis-map-presentation-slideIndex>${e}</div><div class="slide-counter-text-element">/</div><p class="slide-counter-text-element" data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides.length}</p></p>` : u`<p role=banner data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides?.length} ${this._messages?.slides}</p>`;
+    return this.viewModel.slideSelected ? u`<p role=banner aria-label=${t ?? S} aria-live=polite><div class="slide-counter-text-element" data-testId=arcgis-map-presentation-slideIndex>${e}</div><div class="slide-counter-text-element">/</div><p class="slide-counter-text-element" data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides.length}</p></p>` : u`<p role=banner data-testId=arcgis-map-presentation-numberOfSlides>${this.viewModel.visibleSlides?.length} ${this._messages?.slides}</p>`;
   }
   _renderCaptions(e) {
     return this.slideCaptionsDisabled ? null : u`<arcgis-presentation-captions .slide=${e} .transitionActive=${this.viewModel.transitionActive}></arcgis-presentation-captions>`;
@@ -528,7 +534,7 @@ class le extends R {
     return this.slideLegendDisabled || !this.viewModel.showLegend ? null : u`<calcite-panel data-testid=presentation-legend class="legend" .heading=${this._messages.legend} closable @calcitePanelClose=${() => this.viewModel.showLegend = !1}><arcgis-legend .view=${this.view} @arcgisReady=${(e) => e.stopPropagation()}></arcgis-legend></calcite-panel>`;
   }
 }
-z("arcgis-presentation", le);
+O("arcgis-presentation", le);
 export {
   le as ArcgisPresentation
 };

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

@@ -1,12 +1,12 @@
 /// <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 Graphic from "@arcgis/core/Graphic.js";
-import type { TrackViewModelTrackErrorEvent, TrackViewModelTrackEvent, TrackViewModelState } from "@arcgis/core/widgets/Track/TrackViewModel.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, IconName } from "../types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
-import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
 import type { GoToOverride } from "@arcgis/core/widgets/support/types.js";
-import type { PositionFilterFunction } from "@arcgis/core/widgets/Track/types.js";
+import type { PositionFilterFunction, TrackViewModelState } from "./types.js";
 import type { Button as Button } from "@esri/calcite-components/components/calcite-button";
 
 /**
@@ -44,6 +44,13 @@ export abstract class ArcgisTrack extends LitElement {
    * @default false
    */
   accessor autoDestroyDisabled: boolean;
+  /**
+   * Indicates the current position of the geolocation result returned by the browser's Geolocation API.
+   * This property is updated when a new position is returned by the API, and is used to update the graphic and navigate to that location.
+   *
+   * @since 5.1
+   */
+  accessor currentPosition: GeolocationPosition | undefined;
   /**
    * Error that caused the last [track-error](https://developers.arcgis.com/javascript/latest/references/core/widgets/Track/TrackViewModel/#event:track-error) event to fire.
    *
@@ -52,7 +59,7 @@ export abstract class ArcgisTrack extends LitElement {
    * if(track.viewModel.state === 'error')
    *   console.error(track.viewModel.error);
    */
-  accessor error: Error | GeolocationPositionError | null | undefined;
+  accessor error: Error | GeolocationPositionError | undefined;
   /**
    * An object used for setting optional position parameters. Refer to the
    * [Geolocation API Specification](https://www.w3.org/TR/geolocation/#position_options_interface)
@@ -69,7 +76,7 @@ export abstract class ArcgisTrack extends LitElement {
    *   }
    * });
    */
-  accessor geolocationOptions: PositionOptions | null | undefined;
+  accessor geolocationOptions: PositionOptions | undefined;
   /**
    * Indicates whether to navigate the view to the position and scale of the geolocated result.
    *
@@ -90,7 +97,7 @@ export abstract class ArcgisTrack extends LitElement {
    * };
    * ```
    */
-  accessor goToOverride: GoToOverride | null | undefined;
+  accessor goToOverride: GoToOverride | undefined;
   /**
    * The graphic used to show the user's location on the map.
    *
@@ -170,7 +177,7 @@ export abstract class ArcgisTrack extends LitElement {
    *   return geometryEngine.within(myLocation, geofenceExtent);
    * };
    */
-  accessor positionFilterFunction: PositionFilterFunction | null | undefined;
+  accessor positionFilterFunction: PositionFilterFunction | undefined;
   /**
    * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
    *
@@ -198,7 +205,7 @@ export abstract class ArcgisTrack extends LitElement {
    *
    * @since 4.7
    */
-  accessor scale: number | null | undefined;
+  accessor scale: number | undefined;
   /**
    * The current state of the component.
    *
@@ -215,7 +222,7 @@ export abstract class ArcgisTrack extends LitElement {
    * The view associated with the component. 
    *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-track component will be associated with a map or scene component rather than using the `view` property.
    */
-  accessor view: MapViewOrSceneView | null | undefined;
+  accessor view: MapView | SceneView | undefined;
   /**
    * Specifies the size of the component.
    *
@@ -229,8 +236,8 @@ export abstract class ArcgisTrack extends LitElement {
   start(): Promise<void>;
   /** Stop tracking the user's location. */
   stop(): Promise<void>;
-  readonly arcgisComplete: import("@arcgis/lumina").TargetedEvent<this, TrackViewModelTrackEvent>;
-  readonly arcgisError: import("@arcgis/lumina").TargetedEvent<this, TrackViewModelTrackErrorEvent>;
+  readonly arcgisComplete: import("@arcgis/lumina").TargetedEvent<this, { position: GeolocationPosition; }>;
+  readonly arcgisError: import("@arcgis/lumina").TargetedEvent<this, { error: GeolocationPositionError; }>;
   /** 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: "state"; }>;
   /** Emitted when the component associated with a map or scene view is ready to be interacted with. */

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

@@ -1,24 +1,134 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as d } from "../../chunks/runtime.js";
-import { css as g, html as e } from "lit";
-import { usePropertyChange as v } from "@arcgis/lumina/controllers";
-import { reEmitEvent as a } from "@arcgis/lumina/controllers/accessor";
-import { classes as u } from "@arcgis/toolkit/dom";
-import p from "@arcgis/core/widgets/Track/TrackViewModel.js";
-import { LitElement as m, createEvent as f, safeClassMap as w, nothing as M } from "@arcgis/lumina";
-import { u as b } from "../../chunks/useT9n.js";
-import { m as k } from "../../chunks/useViewModel.js";
-import { g as E } from "../../chunks/globalCss.js";
-const T = g`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{width:fit-content;height:fit-content}`, y = k(p);
-class $ extends m {
+import { c as m } from "../../chunks/runtime.js";
+import { css as f, html as d } from "lit";
+import { watch as p } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as _, createEvent as g, safeClassMap as w, nothing as k } from "@arcgis/lumina";
+import { usePropertyChange as b } from "@arcgis/lumina/controllers";
+import { classes as T } from "@arcgis/toolkit/dom";
+import { u as y } from "../../chunks/useT9n.js";
+import { m as M } from "../../chunks/useViewModel.js";
+import { g as P } from "../../chunks/globalCss.js";
+import { property as a, subclass as E } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { i as I, b as O } from "../../chunks/async-utils.js";
+import { debounce as C } from "lodash-es";
+import { G as S } from "../../chunks/GeolocationPositioning.js";
+const D = f`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);calcite-button{--calcite-offset-invert-focus: 1}display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{width:fit-content;height:fit-content}`;
+var F = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (e, t, s, c) => {
+  for (var i = c > 1 ? void 0 : c ? $(t, s) : t, h = e.length - 1, l; h >= 0; h--)
+    (l = e[h]) && (i = (c ? l(t, s, i) : l(i)) || i);
+  return c && i && F(t, s, i), i;
+};
+const x = 15e3;
+let o = class extends S {
+  constructor(e) {
+    super(e);
+  }
+  destroy() {
+    this._stopTracking();
+  }
+  get state() {
+    return this._geolocationUsable ? this.view && !this.view.ready ? "disabled" : this._settingPosition || this._trackStartingTimeoutId !== void 0 ? "waiting" : this.tracking ? "tracking" : this.error != null ? "error" : "ready" : "feature-unsupported";
+  }
+  get tracking() {
+    return this._watchId !== void 0;
+  }
+  start() {
+    this.state === "disabled" || this.state === "feature-unsupported" || this._startTracking();
+  }
+  stop() {
+    this.state === "disabled" || this.state === "feature-unsupported" || this._stopTracking();
+  }
+  _stopWatchingPosition() {
+    this._watchId !== void 0 && (navigator.geolocation.clearWatch(this._watchId), this._watchId = void 0);
+  }
+  _stopTracking() {
+    this._abortTrack(), this._clearWaitingTimer(), this._stopWatchingPosition(), this._clearGraphic();
+  }
+  _startTracking() {
+    this._stopTracking();
+    const e = C(async (t) => {
+      this._abortTrack();
+      const s = new AbortController();
+      this._trackController = s;
+      const { timestamp: c, coords: i } = t, h = i.toJSON(), l = {
+        timestamp: c,
+        coords: h
+      };
+      this.error = void 0;
+      try {
+        const n = this.positionFilterFunction;
+        if (typeof n == "function" && !n({ position: l }) || (await this.updatePosition(t, s), this._trackController !== s))
+          return;
+        this._clearWaitingTimer(), this._addGraphic(), this.currentPosition = t, this._trackController = void 0;
+      } catch (n) {
+        if (I(n))
+          return;
+        throw this._trackController = void 0, this.error = n, this._clearWaitingTimer(), n;
+      }
+    }, 0);
+    this._watchId = navigator.geolocation.watchPosition(
+      (t) => {
+        this._settingPosition = e(t)?.catch(O);
+      },
+      this._handleWatchPositionError.bind(this),
+      this.geolocationOptions ?? void 0
+    ), this._trackStartingTimeoutId = setTimeout(() => {
+      this._trackStartingTimeoutId = void 0;
+    }, x);
+  }
+  _handleWatchPositionError(e) {
+    e.code === e.PERMISSION_DENIED && this._stopTracking(), this.error = e;
+  }
+  _abortTrack() {
+    this._trackController?.abort(), this._trackController = void 0;
+  }
+  _clearWaitingTimer() {
+    clearTimeout(this._trackStartingTimeoutId), this._trackStartingTimeoutId = void 0, this._settingPosition = void 0;
+  }
+};
+r([
+  a()
+], o.prototype, "_watchId", 2);
+r([
+  a()
+], o.prototype, "_trackStartingTimeoutId", 2);
+r([
+  a()
+], o.prototype, "_settingPosition", 2);
+r([
+  a()
+], o.prototype, "currentPosition", 2);
+r([
+  a()
+], o.prototype, "error", 2);
+r([
+  a()
+], o.prototype, "positionFilterFunction", 2);
+r([
+  a({ readOnly: !0 })
+], o.prototype, "state", 1);
+r([
+  a({ readOnly: !0 })
+], o.prototype, "tracking", 1);
+r([
+  a()
+], o.prototype, "start", 1);
+r([
+  a()
+], o.prototype, "stop", 1);
+o = r([
+  E("map-components.track.TrackViewModel")
+], o);
+const W = M(o);
+class G extends _ {
   constructor() {
-    super(...arguments), this.messages = b(), this.viewModel = y(this), this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.error = this.viewModel.error, this.geolocationOptions = this.viewModel.geolocationOptions, this.goToOverride = this.viewModel.goToOverride, this.goToLocationDisabled = this.viewModel.goToLocationEnabled, this.graphic = this.viewModel.graphic, this.icon = "compass-north-circle", this.positionFilterFunction = this.viewModel.positionFilterFunction, this.rotationDisabled = this.viewModel.rotationEnabled, this.scale = this.viewModel.scale, this.state = this.viewModel.state, this.tracking = this.viewModel.tracking, this.visualScale = "m", this.arcgisComplete = a(() => this.viewModel, "track"), this.arcgisError = a(() => this.viewModel, "track-error"), this.arcgisPropertyChange = v()("state"), this.arcgisReady = f();
+    super(...arguments), this.messages = y(), this.viewModel = W(this), this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.currentPosition = this.viewModel.currentPosition, this.error = this.viewModel.error, this.geolocationOptions = this.viewModel.geolocationOptions, this.goToOverride = this.viewModel.goToOverride, this.goToLocationDisabled = this.viewModel.goToLocationEnabled, this.graphic = this.viewModel.graphic, this.icon = "compass-north-circle", this.positionFilterFunction = this.viewModel.positionFilterFunction, this.rotationDisabled = this.viewModel.rotationEnabled, this.scale = this.viewModel.scale, this.state = this.viewModel.state, this.tracking = this.viewModel.tracking, this.visualScale = "m", this.arcgisComplete = g(), this.arcgisError = g(), this.arcgisPropertyChange = b()("state"), this.arcgisReady = g();
   }
   static {
-    this.properties = { view: 0, autoDestroyDisabled: 5, error: 0, geolocationOptions: 0, goToOverride: 0, goToLocationDisabled: 7, graphic: 0, icon: 1, label: 1, messageOverrides: 0, positionFilterFunction: 0, referenceElement: 1, rotationDisabled: 5, scale: 9, state: 0, tracking: 36, visualScale: 1 };
+    this.properties = { view: 0, autoDestroyDisabled: 5, currentPosition: 0, error: 0, geolocationOptions: 0, goToOverride: 0, goToLocationDisabled: 7, graphic: 0, icon: 1, label: 1, messageOverrides: 0, positionFilterFunction: 0, referenceElement: 1, rotationDisabled: 5, scale: 9, state: 0, tracking: 36, visualScale: 1 };
   }
   static {
-    this.styles = T;
+    this.styles = D;
   }
   async destroy() {
     await this.manager.destroy();
@@ -29,6 +139,16 @@ class $ extends m {
   async stop() {
     this.viewModel.stop();
   }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      p(() => this.viewModel.error, (t) => {
+        this.arcgisError.emit({ error: t });
+      }),
+      p(() => this.viewModel.currentPosition, (t) => {
+        this.arcgisComplete.emit({ position: t });
+      })
+    ]);
+  }
   _localizeError(t) {
     if (t instanceof GeolocationPositionError)
       return t.code === GeolocationPositionError.PERMISSION_DENIED ? this.messages?.permissionError : t.code === GeolocationPositionError.TIMEOUT ? this.messages?.timeoutError : this.messages?.positionUnavailable;
@@ -48,11 +168,11 @@ class $ extends m {
     }
   }
   render() {
-    const { viewModel: t, messages: o, icon: c } = this, i = t?.state, l = i === "tracking", r = this._localizeError(this.viewModel?.error), s = (l ? o?.stopTracking : o?.startTracking) ?? "", n = i === "feature-unsupported", h = (i === "tracking" ? "pause" : void 0) ?? c ?? void 0;
-    return e`<div class=${w(u("root", E.arcgisButton))}>${!n && e`<calcite-button .disabled=${i === "disabled"} .iconStart=${h} kind=neutral .label=${s} .loading=${i === "waiting"} @click=${this._toggleTracking} .scale=${this.visualScale} title=${s ?? M}></calcite-button>` || ""}${r ? e`<calcite-tooltip open overlay-positioning=fixed .referenceElement=${this.el}>${r}</calcite-tooltip>` : null}</div>`;
+    const { viewModel: t, messages: s, icon: c } = this, i = t?.state, h = i === "tracking", l = this._localizeError(this.viewModel?.error), n = (h ? s?.stopTracking : s?.startTracking) ?? "", u = i === "feature-unsupported", v = (i === "tracking" ? "pause" : void 0) ?? c ?? void 0;
+    return d`<div class=${w(T("root", P.arcgisButton))}>${!u && d`<calcite-button .disabled=${i === "disabled"} .iconStart=${v} kind=neutral .label=${n} .loading=${i === "waiting"} @click=${this._toggleTracking} .scale=${this.visualScale} title=${n ?? k}></calcite-button>` || ""}${l ? d`<calcite-tooltip open overlay-positioning=fixed .referenceElement=${this.el}>${l}</calcite-tooltip>` : null}</div>`;
   }
 }
-d("arcgis-track", $);
+m("arcgis-track", G);
 export {
-  $ as ArcgisTrack
+  G as ArcgisTrack
 };

package/dist/components/arcgis-track/types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @param args - An object containing the position to be filtered.
+ * @since 5.0
+ */
+export type PositionFilterFunction = (args: { position: FilterPosition; }) => boolean;
+
+export type TrackViewModelState = "disabled" | "error" | "feature-unsupported" | "ready" | "tracking" | "waiting";
+
+export interface FilterPosition {
+  timestamp: number;
+  coords: {
+      latitude: number;
+      longitude: number;
+  };
+}