@arcgis/map-components 5.2.0-next.12 → 5.2.0-next.120

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-import type VideoPlayerViewModel from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
+import type VideoPlayerViewModel from "./VideoPlayerViewModel.js";
 import type VideoLayer from "@arcgis/core/layers/VideoLayer.js";
 import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
@@ -19,14 +19,12 @@ import type { VideoState } from "@arcgis/core/layers/video/types.js";
  *  - Adjustable speed and quality
  *  - Access to frame metadata
  *
- * The [VideoPlayerViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/VideoPlayer/VideoPlayerViewModel/) class provides the logic for the Video Player.
- *
  * **Known limitations**
  *
  * * Not supported in 3D [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
  * * Not supported on macOS and iOS devices.
  *
- * [![](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/video-player-video-preview.avif)](https://mediaspace.esri.com/media/1_ctc3psfr)
+ * [![](https://developers.arcgis.com/javascript/latest/assets/references/components/video-player/video-player-video-preview.avif)](https://mediaspace.esri.com/media/1_ctc3psfr)
  *
  * @example
  * ```html
@@ -68,6 +66,15 @@ export abstract class ArcgisVideoPlayer extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-video-player auto-destroy-disabled></arcgis-video-player>
+   * ```
+   *
+   * ```js
+   * videoPlayerElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -110,7 +117,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
    * videoPlayer.layer = videoLayer;
    * ```
    */
-  accessor layer: VideoLayer | null | undefined;
+  accessor layer: VideoLayer | undefined;
   /**
    * Replace localized message strings with your own strings.
    *
@@ -141,6 +148,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       pause?: string | undefined;
       platformInfo?: string | undefined;
       play?: string | undefined;
+      playbackProgress?: string | undefined;
       playbackSpeed?: string | undefined;
       quality?: string | undefined;
       reverse?: string | undefined;
@@ -179,6 +187,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       pause: string;
       platformInfo: string;
       play: string;
+      playbackProgress: string;
       playbackSpeed: string;
       quality: string;
       reverse: string;
@@ -215,6 +224,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       pause: string;
       platformInfo: string;
       play: string;
+      playbackProgress: string;
       playbackSpeed: string;
       quality: string;
       reverse: string;
@@ -250,19 +260,19 @@ export abstract class ArcgisVideoPlayer extends LitElement {
   /** The current state of the component. */
   get state(): "error" | VideoState;
   /**
-   * 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-video-player component will be associated with a map or scene component rather than using the `view` property.
+   * 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-video-player component will be associated with a map or scene component rather than using the `view` property.
    *
    * @example
    * // Set the video player view model's view to a map view.
    * videoPlayerViewModel.view = mapView;
    */
-  accessor view: MapView | null | undefined;
+  accessor view: MapView | undefined;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
   /** 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" | "layer"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly arcgisVideoReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {

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

@@ -1,26 +1,234 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as h } from "../../chunks/runtime.js";
-import { css as u, html as e } from "lit";
-import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
-import f from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
-import { LitElement as g, createEvent as l, safeClassMap as m } from "@arcgis/lumina";
-import { usePropertyChange as v } from "@arcgis/lumina/controllers";
-import { classes as p } from "@arcgis/toolkit/dom";
-import { createRef as _, ref as y } from "lit/directives/ref.js";
-import { u as w } from "../../chunks/useT9n.js";
-import { m as V } from "../../chunks/useViewModel.js";
-import { g as $ } from "../../chunks/globalCss.js";
-import { n as r } from "../../chunks/video-utils.js";
-const M = u`:host{--arcgis-internal-video-player-controls-spacing: 16px;width:531px;height:100%}:host([inline]){width:auto;height:auto}.root,.content{height:100%}.inline{display:flex;gap:var(--calcite-spacing-xs);background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-xxs)}.footer{flex:1}arcgis-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`, b = V(f);
-class T extends g {
+import { c as g } from "../../chunks/runtime.js";
+import { css as v, html as s } from "lit";
+import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as w, createEvent as u, safeClassMap as _ } from "@arcgis/lumina";
+import { usePropertyChange as T } from "@arcgis/lumina/controllers";
+import { classes as M } from "@arcgis/toolkit/dom";
+import { createRef as b, ref as D } from "lit/directives/ref.js";
+import { u as V } from "../../chunks/useT9n.js";
+import { m as $ } from "../../chunks/useViewModel.js";
+import { g as P } from "../../chunks/globalCss.js";
+import { n as f } from "../../chunks/video-utils.js";
+import C from "@arcgis/core/core/Accessor.js";
+import { property as l, subclass as S } from "@arcgis/core/core/accessorSupport/decorators.js";
+var L = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, i, n, h) => {
+  for (var r = h > 1 ? void 0 : h ? k(i, n) : i, y = e.length - 1, c; y >= 0; y--)
+    (c = e[y]) && (r = (h ? c(i, n, r) : c(r)) || r);
+  return h && r && L(i, n, r), r;
+};
+const o = {
+  FrameCenterElevation: 10025,
+  FrameCenterLatitude: 10023,
+  FrameCenterLongitude: 10024,
+  MissionId: 10003,
+  PlatformCallSign: 10059,
+  PlatformDesignation: 10010,
+  PlatformGroundRange: 10057,
+  PlatformTailNumber: 10004,
+  PlatformTrueAirspeed: 10008,
+  PrecisionTimeStamp: 10002
+};
+function m(e, i) {
+  const n = {};
+  for (const h of i) {
+    const r = e.get(h);
+    r && (n[r.name] = String(r.value));
+  }
+  return n;
+}
+let t = class extends C {
+  //#region Lifecycle
+  constructor(e) {
+    super(e), this.followingMode = "follow-both", this.seekLength = 10;
+  }
+  initialize() {
+    this.addHandles([
+      d(
+        () => this.layer,
+        (e, i) => {
+          i && i.pause(), e && e.load().then(() => this._followTelemetry()).catch(() => {
+          });
+        },
+        { initial: !0 }
+      ),
+      d(
+        () => [this.followingMode],
+        () => this._followTelemetry(),
+        { initial: !0 }
+      )
+    ]);
+  }
+  get buffered() {
+    return this.layer?.buffered || 0;
+  }
+  get currentTime() {
+    return this.layer?.currentTime || 0;
+  }
+  get duration() {
+    return this.layer?.duration || 0;
+  }
+  get ended() {
+    return this.layer?.ended ?? !0;
+  }
+  get metadata() {
+    const e = this.layer?.metadata;
+    return e ? {
+      missionInfo: m(e, [o.MissionId, o.PrecisionTimeStamp]),
+      platformInfo: m(e, [
+        o.PlatformTailNumber,
+        o.PlatformTrueAirspeed,
+        o.PlatformCallSign,
+        o.PlatformDesignation,
+        o.PlatformGroundRange
+      ]),
+      frameInfo: m(e, [
+        o.FrameCenterElevation,
+        o.FrameCenterLatitude,
+        o.FrameCenterLongitude
+      ])
+    } : null;
+  }
+  get playing() {
+    return this.layer?.playing ?? !1;
+  }
+  previewsInfo() {
+    return this.layer?.previewsInfo || null;
+  }
+  get state() {
+    return this.layer?.loadError ? "error" : this.layer?.state ?? "not-ready";
+  }
+  //#endregion
+  //#region Public Methods
+  changeGraphicsColor(e) {
+    e && this.layer.updateTelemetryColor(e);
+  }
+  changePlaybackSpeed(e) {
+    this.layer && (this.layer.playbackRate = e);
+  }
+  pause() {
+    this.layer?.pause();
+  }
+  play() {
+    this.layer?.play();
+  }
+  seekBackward() {
+    if (this.layer) {
+      const e = this.layer.currentTime - this.seekLength;
+      e <= 0 ? this.layer.reset() : this.layer.setCurrentTime(e);
+    }
+  }
+  seekForward() {
+    if (this.layer) {
+      const e = this.layer.currentTime + this.seekLength;
+      e >= this.layer.duration ? this.layer.reset() : this.layer.setCurrentTime(e);
+    }
+  }
+  seekTo(e) {
+    this.layer?.setCurrentTime(e);
+  }
+  seekToBeginning() {
+    this.layer?.setCurrentTime(0);
+  }
+  seekToEnding() {
+    this.layer?.setCurrentTime(this.layer.duration);
+  }
+  toggleFrameCenterDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.frameCenter = !this.layer.telemetryDisplay.frameCenter);
+  }
+  toggleFrameDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.frame = !this.layer.telemetryDisplay.frame);
+  }
+  toggleFrameOutlineDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.frameOutline = !this.layer.telemetryDisplay.frameOutline);
+  }
+  toggleLoopPlayback() {
+    this.layer && (this.layer.loop = !this.layer.loop);
+  }
+  toggleSensorDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.sensorLocation = !this.layer.telemetryDisplay.sensorLocation);
+  }
+  toggleSensorPathDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.sensorPath = !this.layer.telemetryDisplay.sensorPath);
+  }
+  toggleSensorSightLineDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.lineOfSight = !this.layer.telemetryDisplay.lineOfSight);
+  }
+  toggleSensorTrailDisplay() {
+    this.layer?.telemetryDisplay && (this.layer.telemetryDisplay.sensorTrail = !this.layer.telemetryDisplay.sensorTrail);
+  }
+  //#endregion
+  //#region Private Methods
+  _followTelemetry() {
+    this.removeHandles("follow"), this.view && this.layer && this.addHandles(
+      d(
+        () => this.layer?.telemetry,
+        () => {
+          const e = [], i = this.followingMode === "follow-frame" || this.followingMode === "follow-both";
+          if ((this.followingMode === "follow-sensor" || this.followingMode === "follow-both") && this.layer?.telemetry.sensorLocation && e.push(this.layer.telemetry.sensorLocation), i && this.layer?.telemetry.frameCenter && e.push(this.layer.telemetry.frameCenter), !e.length) {
+            this.layer?.initialExtent && this.followingMode !== "none" && this.view?.goTo(this.layer.initialExtent).catch(() => {
+            });
+            return;
+          }
+          this.view?.goTo(e).catch(() => {
+          });
+        },
+        { initial: !0 }
+      ),
+      "follow"
+    );
+  }
+  //#endregion
+};
+a([
+  l({ readOnly: !0 })
+], t.prototype, "buffered", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "currentTime", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "duration", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "ended", 1);
+a([
+  l()
+], t.prototype, "followingMode", 2);
+a([
+  l()
+], t.prototype, "layer", 2);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "metadata", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "playing", 1);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "previewsInfo", 1);
+a([
+  l()
+], t.prototype, "seekLength", 2);
+a([
+  l({ readOnly: !0 })
+], t.prototype, "state", 1);
+a([
+  l()
+], t.prototype, "view", 2);
+t = a([
+  S("map-components.video-player.VideoPlayerViewModel")
+], t);
+const x = t, O = v`:host{--arcgis-internal-video-player-controls-spacing: 16px;width:531px;height:100%}:host([inline]){width:auto;height:auto}.root,.content{height:100%}.inline{display:flex;gap:var(--calcite-spacing-xs);background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-xxs)}.footer{flex:1}arcgis-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`, F = $(x);
+class R extends w {
   constructor() {
-    super(...arguments), this.messages = w({ blocking: !0 }), this.viewModel = b(this), this._videoViewRef = _(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this._loopPlayback = !1, this.icon = "video-web", this.state = this.viewModel.state, this.layer = this.viewModel.layer, this.autoDestroyDisabled = !1, this.inline = !1, this.showFullscreenToggle = !1, this.operationalDataVisible = !1, this.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = v()("state", "layer"), this.arcgisReady = l(), this.arcgisVideoReady = l();
+    super(...arguments), this.messages = V({ blocking: !0 }), this.viewModel = F(this), this._videoViewRef = b(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this._loopPlayback = !1, this.icon = "video-web", this.state = this.viewModel.state, this.layer = this.viewModel.layer, this.autoDestroyDisabled = !1, this.inline = !1, this.showFullscreenToggle = !1, this.operationalDataVisible = !1, this.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = T()("state", "layer"), this.arcgisReady = u(), this.arcgisVideoReady = u();
   }
   static {
     this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, _loopPlayback: 16, referenceElement: 1, icon: 1, state: 32, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, inline: 7, showFullscreenToggle: 5, operationalDataVisible: 5, hideHeader: 5, view: 0 };
   }
   static {
-    this.styles = M;
+    this.styles = O;
   }
   get followingMode() {
     return this.viewModel.followingMode;
@@ -33,47 +241,47 @@ class T extends g {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.buffered, this.viewModel.ended], () => {
-        const { buffered: i, currentTime: o, duration: n, ended: d } = this.viewModel, s = r(n), a = r(o), c = r(i);
-        this._duration = s, this._currentTime = a, this._bufferedValue = c / (s || 1), this._currentValue = a / (s || 1), this._isBuffering = !d && this._bufferedValue < this._currentValue;
+      d(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.buffered, this.viewModel.ended], () => {
+        const { buffered: i, currentTime: n, duration: h, ended: r } = this.viewModel, y = f(h), c = f(n), p = f(i);
+        this._duration = y, this._currentTime = c, this._bufferedValue = p / (y || 1), this._currentValue = c / (y || 1), this._isBuffering = !r && this._bufferedValue < this._currentValue;
       }),
-      t(() => this.layer?.title, (i) => {
+      d(() => this.layer?.title, (i) => {
         this._layerTitle = i ?? void 0;
       }, { initial: !0 }),
-      t(() => this.layer?.isLive, (i) => {
+      d(() => this.layer?.isLive, (i) => {
         this._isLive = i ?? void 0;
       }, { initial: !0 }),
-      t(() => this.layer?.playbackRate, (i) => {
+      d(() => this.layer?.playbackRate, (i) => {
         typeof i == "number" && this.viewModel.changePlaybackSpeed(i);
       }, { initial: !0 }),
-      t(() => this.viewModel.view?.map, () => this.requestUpdate())
+      d(() => this.viewModel.view?.map, () => this.requestUpdate())
     ]);
   }
   render() {
-    return e`<div class=${m(p(this.inline ? "inline" : "root", $.widget))}><calcite-panel .heading=${this.hideHeader || this.inline ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this.inline || this.hideHeader || !this.showFullscreenToggle ? null : e`<calcite-action slot=header-actions-end icon=full-screen-exit text=minimize @click=${() => this.inline = !this.inline}></calcite-action>`}${this.inline ? e`<div class="inline">${this._renderActionBar()}${this._renderSlider()}${this.showFullscreenToggle ? e`<calcite-action icon=full-screen text=maximize @click=${() => this.inline = !this.inline}></calcite-action>` : null}</div>` : e`<div class="content">${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}</div>`}${this.inline ? null : e`<div slot=footer class="footer">${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</div>`}</calcite-panel></div>`;
+    return s`<div class=${_(M(this.inline ? "inline" : "root", P.widget))}><calcite-panel .heading=${this.hideHeader || this.inline ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this.inline || this.hideHeader || !this.showFullscreenToggle ? null : s`<calcite-action slot=header-actions-end icon=full-screen-exit text=minimize @click=${() => this.inline = !this.inline}></calcite-action>`}${this.inline ? s`<div class="inline">${this._renderActionBar()}${this._renderSlider()}${this.showFullscreenToggle ? s`<calcite-action icon=full-screen text=maximize @click=${() => this.inline = !this.inline}></calcite-action>` : null}</div>` : s`<div class="content">${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}</div>`}${this.inline ? null : s`<div slot=footer class="footer">${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</div>`}</calcite-panel></div>`;
   }
   _renderLoadingScrim() {
-    return this._videoViewReady ? null : e`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
+    return this._videoViewReady ? null : s`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
   }
   _renderBuffering() {
-    return this._isBuffering ? e`<calcite-progress type=indeterminate></calcite-progress>` : null;
+    return this._isBuffering ? s`<calcite-progress type=indeterminate></calcite-progress>` : null;
   }
   _renderVideoSection() {
-    return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} .operationalDataVisible=${this.operationalDataVisible} @arcgisViewReadyChange=${() => {
+    return s`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} .operationalDataVisible=${this.operationalDataVisible} @arcgisViewReadyChange=${() => {
       this._videoViewReady = !0, this.arcgisVideoReady.emit();
-    }} ${y(this._videoViewRef)}></arcgis-video>`;
+    }} ${D(this._videoViewRef)}></arcgis-video>`;
   }
   _renderSlider() {
-    return this._isLive ? null : e`<arcgis-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
+    return this._isLive ? null : s`<arcgis-video-player-slider .buffered=${this._bufferedValue} .messages=${this.messages} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
   }
   _renderActionBar() {
-    return e`<arcgis-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${() => this._metadataVisible = !this._metadataVisible} .viewModel=${this.viewModel} .inline=${this.inline}></arcgis-video-player-action-bar>`;
+    return s`<arcgis-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${() => this._metadataVisible = !this._metadataVisible} .viewModel=${this.viewModel} .inline=${this.inline}></arcgis-video-player-action-bar>`;
   }
   _renderMetadataSection() {
-    return this._metadataVisible ? e`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
+    return this._metadataVisible ? s`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
   }
 }
-h("arcgis-video-player", T);
+g("arcgis-video-player", R);
 export {
-  T as ArcgisVideoPlayer
+  R as ArcgisVideoPlayer
 };

package/dist/components/arcgis-video-player-actions-group/customElement.js

@@ -14,17 +14,17 @@ class f extends u {
   loaded() {
     this.manager.onLifecycle(() => [
       d(() => [this.viewModel.state, this.viewModel.playing], () => {
-        const { state: i, playing: e } = this.viewModel;
-        this._disabled = i === "not-ready" || i === "waiting", this._playing = e;
+        const { state: e, playing: i } = this.viewModel;
+        this._disabled = e === "not-ready" || e === "waiting", this._playing = i;
       }, { initial: !0 }),
-      d(() => this.viewModel.layer?.isLive, (i) => {
-        this._isLive = i ?? void 0;
+      d(() => this.viewModel.layer?.isLive, (e) => {
+        this._isLive = e ?? void 0;
       }, { initial: !0 })
     ]);
   }
   render() {
-    const { viewModel: i, messages: e, _disabled: n, _playing: a } = this, s = this._isLive, g = this._direction === "rtl", c = t`<calcite-action .active=${a} alignment=center .disabled=${n} .icon=${a ? "pause-f" : "play-f"} @click=${a ? () => i.pause() : () => i.play()} scale=s .text=${a ? e.pause : e.play}></calcite-action>`, p = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=reverse-f @click=${() => i.seekBackward()} scale=s .text=${e.reverse}></calcite-action>`, m = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=forward-f @click=${() => i.seekForward()} scale=s .text=${e.forward}></calcite-action>`, o = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=beginning-f @click=${() => i.seekToBeginning()} scale=s .text=${e.beginning}></calcite-action>`, l = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=end-f @click=${() => i.seekToEnding()} scale=s .text=${e.end}></calcite-action>`, r = this.inline ? [o, c, l] : [o, p, c, m, l];
-    return g && r.reverse(), t`<calcite-action-bar expand-disabled layout=horizontal scale=s>${r}</calcite-action-bar>`;
+    const { viewModel: e, messages: i, _disabled: n, _playing: a } = this, s = this._isLive, g = this._direction === "rtl", c = t`<calcite-action .active=${a} alignment=center .disabled=${n} .icon=${a ? "pause-f" : "play-f"} @click=${a ? () => e.pause() : () => e.play()} scale=s .text=${a ? i.pause : i.play}></calcite-action>`, p = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=reverse-f @click=${() => e.seekBackward()} scale=s .text=${i.reverse}></calcite-action>`, m = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=forward-f @click=${() => e.seekForward()} scale=s .text=${i.forward}></calcite-action>`, o = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=beginning-f @click=${() => e.seekToBeginning()} scale=s .text=${i.beginning}></calcite-action>`, l = s ? void 0 : t`<calcite-action alignment=center .disabled=${n} icon=end-f @click=${() => e.seekToEnding()} scale=s .text=${i.end}></calcite-action>`, r = this.inline ? [o, c, l] : [o, p, c, m, l];
+    return g && r.reverse(), t`<calcite-action-bar expand-toggle-disabled layout=horizontal scale=s>${r}</calcite-action-bar>`;
   }
 }
 v("arcgis-video-player-actions-group", f);

package/dist/components/arcgis-video-player-controls-group/customElement.js

@@ -44,7 +44,7 @@ class v extends h {
     }} .selected=${e.followingMode === "follow-frame"}><calcite-icon icon=follow scale=s slot=content-start></calcite-icon></calcite-list-item><calcite-list-item .disabled=${t && !s && !c} .label=${l.video} @click=${() => {
       e.followingMode = "follow-both";
     }} .selected=${e.followingMode === "follow-both"}><calcite-icon icon=video scale=s slot=content-start></calcite-icon></calcite-list-item></calcite-list></calcite-panel></calcite-popover><calcite-action alignment=center .disabled=${o} .icon=${u(e)} id=follow-action scale=s slot=trigger .text=${l.follow}></calcite-action></div>`, f = i`<arcgis-video-player-settings .messages=${l} .viewModel=${e}></arcgis-video-player-settings>`, p = i`<calcite-action alignment=center .disabled=${o} icon=feature-details @click=${() => this.toggleMetadata()} scale=s .text=${l.metadata}></calcite-action>`;
-    return i`<calcite-action-bar expand-disabled layout=horizontal scale=s>${[$, y, f, p]}</calcite-action-bar>`;
+    return i`<calcite-action-bar expand-toggle-disabled layout=horizontal scale=s>${[$, y, f, p]}</calcite-action-bar>`;
   }
 }
 b("arcgis-video-player-controls-group", v);

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

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
-import { css as s, html as o } from "lit";
-import { LitElement as t } from "@arcgis/lumina";
-const l = s`:host{min-width:100px;flex:1 1 auto;display:flex;align-items:center;justify-content:center}.slider-progress-container{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.progress{--arcgis-internal-video-player-progress-width: 2px;appearance:none;position:absolute;top:calc(50% - var(--arcgis-internal-video-player-progress-width) / 2);left:var(--calcite-spacing-xs);border:none;background:var(--calcite-color-border-1);cursor:pointer;width:calc(100% - var(--calcite-spacing-xs) * 2);height:var(--arcgis-internal-video-player-progress-width)}.progress::-webkit-progress-bar{background-color:var(--calcite-color-border-3)}.progress::-webkit-progress-value{background-color:var(--calcite-color-border-input)}.progress::-moz-progress-bar{background-color:var(--calcite-color-border-3)}.slider{--calcite-slider-track-color: transparent;width:100%}`;
-class a extends t {
+import { css as o, html as t } from "lit";
+import { LitElement as a } from "@arcgis/lumina";
+const l = o`:host{min-width:100px;flex:1 1 auto;display:flex;align-items:center;justify-content:center}.slider-progress-container{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.progress{--arcgis-internal-video-player-progress-width: 2px;appearance:none;position:absolute;top:calc(50% - var(--arcgis-internal-video-player-progress-width) / 2);left:var(--calcite-spacing-xs);border:none;background:var(--calcite-color-border-1);cursor:pointer;width:calc(100% - var(--calcite-spacing-xs) * 2);height:var(--arcgis-internal-video-player-progress-width)}.progress::-webkit-progress-bar{background-color:var(--calcite-color-border-3)}.progress::-webkit-progress-value{background-color:var(--calcite-color-border-input)}.progress::-moz-progress-bar{background-color:var(--calcite-color-border-3)}.slider{--calcite-slider-track-color: transparent;width:100%}`;
+class c extends a {
   static {
-    this.properties = { viewModel: 0, buffered: 9, value: 9 };
+    this.properties = { viewModel: 0, buffered: 9, messages: 0, value: 9 };
   }
   static {
     this.styles = l;
@@ -17,11 +17,11 @@ class a extends t {
     }
   }
   render() {
-    const { value: e, buffered: r } = this;
-    return o`<div class="slider-progress-container" dir=ltr><progress class="progress" max=1 .value=${`${r}`}></progress><div class="slider"><calcite-slider max=100 min=0 .value=${e} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div></div>`;
+    const { buffered: e, messages: r, value: s } = this;
+    return t`<div class="slider-progress-container" dir=ltr><progress class="progress" max=1 .value=${`${e}`}></progress><div class="slider"><calcite-slider .label=${r.playbackProgress} max=100 min=0 .value=${s} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div></div>`;
   }
 }
-i("arcgis-video-player-slider", a);
+i("arcgis-video-player-slider", c);
 export {
-  a as VideoPlayerSlider
+  c as VideoPlayerSlider
 };

package/dist/components/arcgis-volume-measurement/customElement.d.ts

@@ -166,6 +166,15 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-volume-measurement auto-destroy-disabled></arcgis-volume-measurement>
+   * ```
+   *
+   * ```js
+   * volumeMeasurementElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -204,9 +213,19 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
    */
   accessor elevationInputUnitOptions: Array<LengthUnit>;
   /**
-   * Indicates the heading level to use for the headings in the component.
+   * Indicates the heading level to use for the heading of the component. By default, the heading is rendered as a `<h2>`. Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.
    *
    * @default 2
+   * @see [HTML heading elements](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements)
+   * @example
+   * ```html
+   * <arcgis-volume-measurement heading-level="2"></arcgis-volume-measurement>
+   * ```
+   *
+   * ```js
+   * volumeMeasurementElement.headingLevel = 2;
+   * ```
+   * 
    */
   accessor headingLevel: HeadingLevel;
   /**
@@ -283,12 +302,57 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
    * Icon which represents the component.
    * Typically used when the component is controlled by another component (e.g. by the Expand component).
    *
-   * @default "measure-area"
+   * @default "cut-and-fill-volume-calculation"
    * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
    */
   accessor icon: Icon["icon"] | undefined;
+  /**
+   * Indicates whether interactive creation and editing of the analysis are disabled. When true, users cannot create a new analysis interactively or modify an existing analysis using its editing manipulators. Any interactive operation in progress is canceled. If the analysis is already complete, it and its results remain visible.
+   *
+   * @default false
+   * @default false
+   * @since 5.2
+   */
+  accessor interactionDisabled: boolean;
   /** The component's default label. */
   accessor label: string | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      title?: string | undefined;
+      hint?: string | undefined;
+      measurementMode?: string | undefined;
+      newMeasurement?: string | undefined;
+      cutAndFillMode?: string | undefined;
+      stockpileMode?: string | undefined;
+      cutVolume?: string | undefined;
+      totalVolume?: string | undefined;
+      fillVolume?: string | undefined;
+      netVolume?: string | undefined;
+      perimeter?: string | undefined;
+      area?: string | undefined;
+      snappingDisablePrompt?: string | undefined;
+      snappingDisablePromptAlternate?: string | undefined;
+      showSettings?: string | undefined;
+      hideSettings?: string | undefined;
+      unsupported?: string | undefined;
+      errorInsufficientData?: string | undefined;
+      errorPerimeterTooLarge?: string | undefined;
+      errorUnsupportedCoordinateSystem?: string | undefined;
+      errorUnsupportedLayerTransparency?: string | undefined;
+      errorUnknown?: string | undefined;
+      inputUnits?: string | undefined;
+      displayUnits?: string | undefined;
+      elevationInputUnit?: string | undefined;
+      elevationDisplayUnit?: string | undefined;
+      volumeDisplayUnit?: string | undefined;
+      areaDisplayUnit?: string | undefined;
+      perimeterDisplayUnit?: string | undefined;
+  };
   /** @internal */
   protected messages: {
       componentLabel: string;
@@ -392,8 +456,8 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
    */
   get state(): VolumeMeasurementState;
   /**
-   * 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-volume-measurement component will be associated with a map or scene component rather than using the `view` property.
+   * 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-volume-measurement component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: SceneView | undefined;
   /**
@@ -426,8 +490,8 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
    */
   start(): Promise<void>;
   /** 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: "analysis" | "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "analysis" | "interactionDisabled" | "state"; }>;
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisPropertyChange: ArcgisVolumeMeasurement["arcgisPropertyChange"]["detail"];