@arcgis/map-components 5.2.0-next.1 → 5.2.0-next.100

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

@@ -5,19 +5,19 @@ 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 _ } from "@arcgis/toolkit/dom";
-import { createRef as w, ref as p } from "lit/directives/ref.js";
-import { u as y } from "../../chunks/useT9n.js";
-import { m as $ } from "../../chunks/useViewModel.js";
-import { g as V } from "../../chunks/globalCss.js";
+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 = $(f);
+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 {
   constructor() {
-    super(...arguments), this.messages = y({ blocking: !0 }), this.viewModel = b(this), this._videoViewRef = w(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !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.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = v()("state", "layer"), this.arcgisReady = l(), this.arcgisVideoReady = l();
+    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();
   }
   static {
-    this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, referenceElement: 1, icon: 1, state: 32, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, inline: 7, showFullscreenToggle: 5, hideHeader: 5, view: 0 };
+    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;
@@ -43,11 +43,14 @@ class T extends g {
       t(() => this.layer?.isLive, (i) => {
         this._isLive = i ?? void 0;
       }, { initial: !0 }),
+      t(() => this.layer?.playbackRate, (i) => {
+        typeof i == "number" && this.viewModel.changePlaybackSpeed(i);
+      }, { initial: !0 }),
       t(() => this.viewModel.view?.map, () => this.requestUpdate())
     ]);
   }
   render() {
-    return e`<div class=${m(_(this.inline ? "inline" : "root", V.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 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>`;
   }
   _renderLoadingScrim() {
     return this._videoViewReady ? null : e`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
@@ -56,12 +59,12 @@ class T extends g {
     return this._isBuffering ? e`<calcite-progress type=indeterminate></calcite-progress>` : null;
   }
   _renderVideoSection() {
-    return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} @arcgisViewReadyChange=${() => {
+    return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} .operationalDataVisible=${this.operationalDataVisible} @arcgisViewReadyChange=${() => {
       this._videoViewReady = !0, this.arcgisVideoReady.emit();
-    }} ${p(this._videoViewRef)}></arcgis-video>`;
+    }} ${y(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 : e`<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>`;

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

@@ -1,12 +1,12 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as p } from "../../chunks/runtime.js";
+import { c as b } from "../../chunks/runtime.js";
 import { html as i } from "lit";
-import { watch as b } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as w } from "@arcgis/lumina";
-function u(o) {
-  return o.followingMode === "none" ? "circle-disallowed" : o.followingMode === "follow-sensor" ? "zoom-to-object" : o.followingMode === "follow-frame" ? "follow" : "video";
+import { watch as w } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as h } from "@arcgis/lumina";
+function u(a) {
+  return a.followingMode === "none" ? "circle-disallowed" : a.followingMode === "follow-sensor" ? "zoom-to-object" : a.followingMode === "follow-frame" ? "follow" : "video";
 }
-class h extends w {
+class v extends h {
   constructor() {
     super(...arguments), this._disabled = !1;
   }
@@ -15,25 +15,27 @@ class h extends w {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      b(() => this.viewModel.state, (e) => {
+      w(() => this.viewModel.state, (e) => {
         this._disabled = e === "not-ready" || e === "waiting";
       }, { initial: !0 })
     ]);
   }
   render() {
-    const { viewModel: e, messages: l, _disabled: a } = this, t = e.currentTime > 0, c = !!e.layer?.telemetry?.sensorLocation, n = !!e.layer?.telemetry?.sensorTrail, r = !!e.layer?.telemetry?.lineOfSight, d = !!e.layer?.telemetry?.frameCenter, s = !!e.layer?.telemetry?.frameOutline, m = !!e.layer?.groundControlPoints, g = i`<div><calcite-popover auto-close .label=${l.layers} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=layers-action scale=s><calcite-panel .heading=${l.layers}><calcite-list .label=${l.layers} selection-mode=multiple><calcite-list-item .disabled=${t && !c} .label=${l.sensor} @click=${() => {
+    const { viewModel: e, messages: l, _disabled: o } = this, t = e.currentTime > 0, c = !!e.layer?.telemetry?.sensorLocation, n = !!e.layer?.telemetry?.sensorPath, r = !!e.layer?.telemetry?.sensorTrail, d = !!e.layer?.telemetry?.lineOfSight, m = !!e.layer?.telemetry?.frameCenter, s = !!e.layer?.telemetry?.frameOutline, g = !!e.layer?.groundControlPoints, $ = i`<div><calcite-popover auto-close .label=${l.layers} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=layers-action scale=s><calcite-panel .heading=${l.layers}><calcite-list .label=${l.layers} selection-mode=multiple><calcite-list-item .disabled=${t && !c} .label=${l.sensor} @click=${() => {
       e.toggleSensorDisplay();
-    }} .selected=${!!e.layer?.telemetryDisplay?.sensorLocation}></calcite-list-item><calcite-list-item .disabled=${t && !r} .label=${l.sightLine} @click=${() => {
+    }} .selected=${!!e.layer?.telemetryDisplay?.sensorLocation}></calcite-list-item><calcite-list-item .disabled=${t && !d} .label=${l.sightLine} @click=${() => {
       e.toggleSensorSightLineDisplay();
-    }} .selected=${!!e.layer?.telemetryDisplay?.lineOfSight}></calcite-list-item><calcite-list-item .disabled=${t && !n} .label=${l.sensorTrail} @click=${() => {
+    }} .selected=${!!e.layer?.telemetryDisplay?.lineOfSight}></calcite-list-item><calcite-list-item .disabled=${t && !n} .label=${l.sensorPath} @click=${() => {
+      e.toggleSensorPathDisplay();
+    }} .selected=${!!e.layer?.telemetryDisplay?.sensorPath}></calcite-list-item><calcite-list-item .disabled=${t && !r} .label=${l.sensorTrail} @click=${() => {
       e.toggleSensorTrailDisplay();
-    }} .selected=${!!e.layer?.telemetryDisplay?.sensorTrail}></calcite-list-item><calcite-list-item .disabled=${t && !d} .label=${l.frameCenter} @click=${() => {
+    }} .selected=${!!e.layer?.telemetryDisplay?.sensorTrail}></calcite-list-item><calcite-list-item .disabled=${t && !m} .label=${l.frameCenter} @click=${() => {
       e.toggleFrameCenterDisplay();
     }} .selected=${!!e.layer?.telemetryDisplay?.frameCenter}></calcite-list-item><calcite-list-item .disabled=${t && !s} .label=${l.frameOutline} @click=${() => {
       e.toggleFrameOutlineDisplay();
-    }} .selected=${!!e.layer?.telemetryDisplay?.frameOutline}></calcite-list-item><calcite-list-item .disabled=${t && !m} .label=${l.frame} @click=${() => {
+    }} .selected=${!!e.layer?.telemetryDisplay?.frameOutline}></calcite-list-item><calcite-list-item .disabled=${t && !g} .label=${l.frame} @click=${() => {
       e.toggleFrameDisplay();
-    }} .selected=${!!e.layer?.telemetryDisplay?.frame}></calcite-list-item></calcite-list></calcite-panel></calcite-popover><calcite-action alignment=center .disabled=${a} icon=layers id=layers-action scale=s slot=trigger .text=${l.layers}></calcite-action></div>`, f = i`<div><calcite-popover auto-close .label=${l.follow} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=follow-action scale=s><calcite-panel .heading=${l.follow}><calcite-list .label=${l.follow} selection-mode=single><calcite-list-item .label=${l.none} @click=${() => {
+    }} .selected=${!!e.layer?.telemetryDisplay?.frame}></calcite-list-item></calcite-list></calcite-panel></calcite-popover><calcite-action alignment=center .disabled=${o} icon=layers id=layers-action scale=s slot=trigger .text=${l.layers}></calcite-action></div>`, y = i`<div><calcite-popover auto-close .label=${l.follow} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=follow-action scale=s><calcite-panel .heading=${l.follow}><calcite-list .label=${l.follow} selection-mode=single><calcite-list-item .label=${l.none} @click=${() => {
       e.followingMode = "none";
     }} .selected=${e.followingMode === "none"}><calcite-icon icon=circle-disallowed scale=s slot=content-start></calcite-icon></calcite-list-item><calcite-list-item .disabled=${t && !c} .label=${l.sensor} @click=${() => {
       e.followingMode = "follow-sensor";
@@ -41,11 +43,11 @@ class h extends w {
       e.followingMode = "follow-frame";
     }} .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=${a} .icon=${u(e)} id=follow-action scale=s slot=trigger .text=${l.follow}></calcite-action></div>`, $ = i`<arcgis-video-player-settings .messages=${l} .viewModel=${e}></arcgis-video-player-settings>`, y = i`<calcite-action alignment=center .disabled=${a} icon=feature-details @click=${() => this.toggleMetadata()} scale=s .text=${l.metadata}></calcite-action>`;
-    return i`<calcite-action-bar expand-disabled layout=horizontal scale=s>${[g, f, $, y]}</calcite-action-bar>`;
+    }} .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-toggle-disabled layout=horizontal scale=s>${[$, y, f, p]}</calcite-action-bar>`;
   }
 }
-p("arcgis-video-player-controls-group", h);
+b("arcgis-video-player-controls-group", v);
 export {
-  h as VideoPlayerControlsGroup
+  v as VideoPlayerControlsGroup
 };

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

@@ -1,42 +1,44 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as $ } from "../../chunks/runtime.js";
+import { c as v } from "../../chunks/runtime.js";
 import { html as c } from "lit";
 import d from "@arcgis/core/Color.js";
 import { watch as g } from "@arcgis/core/core/reactiveUtils.js";
 import { LitElement as _ } from "@arcgis/lumina";
-import { useDirection as v } from "@arcgis/lumina/controllers";
-const u = ["Auto"], f = [0.25, 0.5, 1, 1.5, 2], r = new d([255, 127, 0]);
-function a(o, i) {
-  return `${i.format(o)}x`;
+import { useDirection as b } from "@arcgis/lumina/controllers";
+const u = ["Auto"], w = [0.25, 0.5, 1, 1.5, 2], r = new d([255, 127, 0]);
+function o(s, t) {
+  return `${t.format(s)}x`;
 }
-class b extends _ {
+class k extends _ {
   constructor() {
-    super(...arguments), this._color = null, this._speed = 1, this._quality = "Auto", this._direction = v(), this._disabled = !1;
+    super(...arguments), this._color = null, this._speed = 1, this._quality = "Auto", this._direction = b(), this._disabled = !1;
   }
   static {
     this.properties = { _disabled: 16, _active: 16, viewModel: 0, messages: 0 };
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      g(() => this.viewModel.state, (i) => {
-        this._disabled = i === "not-ready" || i === "waiting";
+      g(() => this.viewModel.state, (t) => {
+        this._disabled = t === "not-ready" || t === "waiting";
       }, { initial: !0 })
     ]);
   }
   render() {
-    const { viewModel: i, messages: e } = this, l = this._direction === "rtl" ? "chevron-left" : "chevron-right", s = new Intl.NumberFormat(this.messages._lang, {
+    const { viewModel: t, messages: e } = this, l = this._direction === "rtl" ? "chevron-left" : "chevron-right", a = new Intl.NumberFormat(this.messages._lang, {
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
-    }), h = c`<calcite-flow-item .heading=${e.playbackSpeed} .selected=${this._active === "speed"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.playbackSpeed} selection-mode=single-persist>${f.map((t) => c`<calcite-list-item .disabled=${i?.layer?.isLive && t !== 1} .label=${a(t, s)} @click=${() => {
-      this._speed = t, i.changePlaybackSpeed(t);
-    }} .selected=${t === this._speed}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, m = c`<calcite-flow-item .heading=${e.quality} .selected=${this._active === "quality"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.quality} selection-mode=single-persist>${u.map((t) => c`<calcite-list-item .label=${t} @click=${() => this._quality = t} .selected=${t === this._quality}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, p = c`<calcite-flow-item .heading=${e.graphics} .selected=${this._active === "color"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-block .heading=${e.color} expanded><calcite-color-picker channels-disabled format=hex saved-disabled scale=s .value=${this._color?.toHex() ?? r.toHex()} @calciteColorPickerChange=${({ currentTarget: t }) => {
-      const n = t.value?.toString() ?? null;
-      this._color = n ? new d(n) : null, this._color && i.changeGraphicsColor(this._color);
+    }), h = c`<calcite-flow-item .heading=${e.playbackSpeed} .selected=${this._active === "speed"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.playbackSpeed} selection-mode=single-persist>${w.map((i) => c`<calcite-list-item .disabled=${t?.layer?.isLive && i !== 1} .label=${o(i, a)} @click=${() => {
+      this._speed = i, t.changePlaybackSpeed(i);
+    }} .selected=${i === this._speed}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, m = c`<calcite-flow-item .heading=${e.quality} .selected=${this._active === "quality"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.quality} selection-mode=single-persist>${u.map((i) => c`<calcite-list-item .label=${i} @click=${() => this._quality = i} .selected=${i === this._quality}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, p = c`<calcite-flow-item .heading=${e.loopPlayback} .selected=${this._active === "loop"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-block .label=${e.loop} expanded><calcite-switch .disabled=${t?.layer?.isLive} .label=${e.loopPlayback} .checked=${t?.layer?.loop} .labelTextStart=${e.loop} @calciteSwitchChange=${() => {
+      t.toggleLoopPlayback();
+    }}></calcite-switch></calcite-block></calcite-flow-item>`, $ = c`<calcite-flow-item .heading=${e.graphics} .selected=${this._active === "color"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-block .heading=${e.color} expanded><calcite-color-picker channels-disabled format=hex saved-disabled scale=s .value=${this._color?.toHex() ?? r.toHex()} @calciteColorPickerChange=${({ currentTarget: i }) => {
+      const n = i.value?.toString() ?? null;
+      this._color = n ? new d(n) : null, this._color && t.changeGraphicsColor(this._color);
     }}></calcite-color-picker></calcite-block></calcite-flow-item>`;
-    return c`<div><calcite-popover auto-close .label=${e.settings} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=settings-action scale=s @calcitePopoverClose=${() => this._active = void 0}><calcite-flow><calcite-flow-item .heading=${e.settings} .selected=${!this._active}><calcite-list .label=${e.settings}><calcite-list-item .label=${e.speed} @click=${() => this._active = "speed"}><div slot=content-end><calcite-chip .label=${a(this._speed, s)} scale=s>${a(this._speed, s)}</calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.quality} @click=${() => this._active = "quality"}><div slot=content-end><calcite-chip .label=${this._quality} scale=s>${this._quality}</calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.graphics} @click=${() => this._active = "color"}><calcite-color-picker-swatch .color=${this._color?.toString() ?? r.toString()} scale=s slot=content-end></calcite-color-picker-swatch><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item></calcite-list></calcite-flow-item>${this._active === "speed" ? h : null}${this._active === "quality" ? m : null}${this._active === "color" ? p : null}</calcite-flow></calcite-popover><calcite-action alignment=center .disabled=${this._disabled} icon=sliders id=settings-action scale=s slot=trigger .text=${e.settings}></calcite-action></div>`;
+    return c`<div><calcite-popover auto-close .label=${e.settings} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=settings-action scale=s @calcitePopoverClose=${() => this._active = void 0}><calcite-flow><calcite-flow-item .heading=${e.settings} .selected=${!this._active}><calcite-list .label=${e.settings}><calcite-list-item .label=${e.loop} @click=${() => this._active = "loop"}><div slot=content-end><calcite-chip .label=${e.loopPlayback} .icon=${this.viewModel.layer?.loop ? "recurrence" : "break-recurrence"}></calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.speed} @click=${() => this._active = "speed"}><div slot=content-end><calcite-chip .label=${o(this._speed, a)} scale=s>${o(this._speed, a)}</calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.quality} @click=${() => this._active = "quality"}><div slot=content-end><calcite-chip .label=${this._quality} scale=s>${this._quality}</calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.graphics} @click=${() => this._active = "color"}><calcite-color-picker-swatch .color=${this._color?.toString() ?? r.toString()} scale=s slot=content-end></calcite-color-picker-swatch><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item></calcite-list></calcite-flow-item>${this._active === "speed" ? h : null}${this._active === "quality" ? m : null}${this._active === "color" ? $ : null}${this._active === "loop" ? p : null}</calcite-flow></calcite-popover><calcite-action alignment=center .disabled=${this._disabled} icon=sliders id=settings-action scale=s slot=trigger .text=${e.settings}></calcite-action></div>`;
   }
 }
-$("arcgis-video-player-settings", b);
+v("arcgis-video-player-settings", k);
 export {
-  b as VideoPlayerSettings
+  k as VideoPlayerSettings
 };

package/dist/components/arcgis-video-player-settings/index.js

@@ -2,6 +2,7 @@ import "@esri/calcite-components/components/calcite-flow-item";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-block";
+import "@esri/calcite-components/components/calcite-switch";
 import "@esri/calcite-components/components/calcite-color-picker";
 import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-flow";

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;
   /**
@@ -289,6 +308,43 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
   accessor icon: Icon["icon"] | undefined;
   /** 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 +448,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;
   /**

package/dist/components/arcgis-volume-measurement/customElement.js

@@ -259,17 +259,12 @@ class le extends R {
     super(...arguments), this.viewModel = oe(this), this.messages = G({ blocking: !0 }), this.#e = X(), this._settingsPopoverIsOpen = !1, this.view = this.viewModel.view, this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.icon = "measure-area", this.state = this.viewModel.state, this.volumeDisplayUnit = this.viewModel.volumeDisplayUnit, this.volumeDisplayUnitOptions = this.viewModel.volumeDisplayUnitOptions, this.elevationDisplayUnit = this.viewModel.elevationDisplayUnit, this.elevationDisplayUnitOptions = this.viewModel.elevationDisplayUnitOptions, this.elevationInputUnit = this.viewModel.elevationInputUnit, this.elevationInputUnitOptions = this.viewModel.elevationInputUnitOptions, this.areaDisplayUnit = this.viewModel.areaDisplayUnit, this.areaDisplayUnitOptions = this.viewModel.areaDisplayUnitOptions, this.perimeterDisplayUnit = this.viewModel.perimeterDisplayUnit, this.perimeterDisplayUnitOptions = this.viewModel.perimeterDisplayUnitOptions, this.hideHeader = !1, this.hideSettingsButton = !1, this.hideElevationDisplayUnitSelect = !1, this.hideElevationInputUnitSelect = !1, this.hideVolumeDisplayUnitSelect = !1, this.hideModeSelect = !1, this.hideStartButton = !1, this.hideVisualization = this.viewModel.hideVisualization, this.headingLevel = 2, this.hideAreaDisplayUnitSelect = !1, this.hidePerimeterDisplayUnitSelect = !1, this.arcgisPropertyChange = Z()("analysis", "state"), this.arcgisReady = F();
   }
   static {
-    this.properties = { _settingsPopoverIsOpen: 16, view: 0, analysis: 0, autoDestroyDisabled: 5, icon: 3, label: 1, referenceElement: 1, mode: 1, state: 32, volumeDisplayUnit: 1, volumeDisplayUnitOptions: 0, elevationDisplayUnit: 1, elevationDisplayUnitOptions: 0, elevationInputUnit: 1, elevationInputUnitOptions: 0, areaDisplayUnit: 1, areaDisplayUnitOptions: 0, perimeterDisplayUnit: 1, perimeterDisplayUnitOptions: 0, hideHeader: 5, hideSettingsButton: 5, hideElevationDisplayUnitSelect: 5, hideElevationInputUnitSelect: 5, hideVolumeDisplayUnitSelect: 5, hideModeSelect: 5, hideStartButton: 5, hideVisualization: 5, headingLevel: 9, hideAreaDisplayUnitSelect: 5, hidePerimeterDisplayUnitSelect: 5 };
+    this.properties = { _settingsPopoverIsOpen: 16, view: 0, analysis: 0, autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, referenceElement: 1, mode: 1, state: 32, volumeDisplayUnit: 1, volumeDisplayUnitOptions: 0, elevationDisplayUnit: 1, elevationDisplayUnitOptions: 0, elevationInputUnit: 1, elevationInputUnitOptions: 0, areaDisplayUnit: 1, areaDisplayUnitOptions: 0, perimeterDisplayUnit: 1, perimeterDisplayUnitOptions: 0, hideHeader: 5, hideSettingsButton: 5, hideElevationDisplayUnitSelect: 5, hideElevationInputUnitSelect: 5, hideVolumeDisplayUnitSelect: 5, hideModeSelect: 5, hideStartButton: 5, hideVisualization: 5, headingLevel: 9, hideAreaDisplayUnitSelect: 5, hidePerimeterDisplayUnitSelect: 5 };
   }
   static {
     this.styles = se;
   }
   #e;
-  #i(e) {
-    e && queueMicrotask(() => {
-      this.isConnected && (e.referenceElement = this.#e.value);
-    });
-  }
   get mode() {
     return this.viewModel.analysis.measureType;
   }
@@ -285,6 +280,11 @@ class le extends R {
   async start() {
     N(this.viewModel.start());
   }
+  #i(e) {
+    e && queueMicrotask(() => {
+      this.isConnected && (e.referenceElement = this.#e.value);
+    });
+  }
   _onSettingsPopoverClose() {
     this._settingsPopoverIsOpen = !1;
   }

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

@@ -59,6 +59,15 @@ export abstract class ArcgisWeather extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-weather auto-destroy-disabled></arcgis-weather>
+   * ```
+   *
+   * ```js
+   * weatherElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -67,7 +76,7 @@ export abstract class ArcgisWeather extends LitElement {
    * this heading for proper semantics. This is important for meeting accessibility standards.
    *
    * @default 4
-   * @see [Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+   * @see [Heading Elements](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements)
    */
   accessor headingLevel: HeadingLevel;
   /**
@@ -236,8 +245,8 @@ export abstract class ArcgisWeather extends LitElement {
   /** The current state of the component. */
   get state(): WeatherState;
   /**
-   * 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-weather 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-weather component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: SceneView | undefined;
   /** Permanently destroy the component. */