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

package/dist/components/arcgis-time-slider/customElement.d.ts

@@ -19,7 +19,7 @@ import type { TickConfig } from "@arcgis/core/widgets/Slider/types.js";
 export abstract class ArcgisTimeSlider extends LitElement {
   /**
    * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) in the component. The
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the component. The
    * ellipsis button will not display if this property is `null` or if the collection is empty.
    * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
    * and an icon.
@@ -28,7 +28,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
    * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) to a specific date or copying the
    * timeExtent to the browser's clipboard.
    *
-   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
    *
    * @since 4.21
    * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
@@ -188,10 +188,10 @@ export abstract class ArcgisTimeSlider extends LitElement {
    *
    * Possible Values       | Description   | Example |
    * ----------------------|-------------- | ------- |
-   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.png"> |
-   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.png"> |
-   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.png"> |
-   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.png"> |
+   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
+   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
+   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
+   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.avif"> |
    *
    * @default "time-window"
    * @see [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent)

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

@@ -15,7 +15,7 @@ import type { Button as Button } from "@esri/calcite-components/components/calci
  * The view rotates based on device heading, and the default heading symbol will display
  * when speed is greater than zero and the browser provides heading information.
  *
- * This component uses the browser's [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) which is only available in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts), such as HTTPS.
+ * This component uses the browser's [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) which is only available in [secure contexts](https://developer.mozilla.org/docs/Web/Security/Defenses/Secure_Contexts), such as HTTPS.
  * `localhost` is considered "potentially secure" and can be used for testing.
  *
  * > [!WARNING]
@@ -186,7 +186,7 @@ export abstract class ArcgisTrack extends LitElement {
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
    * Indicates whether the component will automatically rotate to the device heading based on
-   * the Geolocation APIs [`GeolocationCoordinates.heading`](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates/heading)
+   * the Geolocation APIs [`GeolocationCoordinates.heading`](https://developer.mozilla.org/docs/Web/API/GeolocationCoordinates/heading)
    * property. The map will not rotate if the speed is `0`,
    * or if the device is unable to provide heading information.
    *

package/dist/components/arcgis-unit-radio-button-group/customElement.js

@@ -29,7 +29,7 @@ class p extends m {
       arcgisUnitSelectChange: c
     } = this;
     return e`<calcite-radio-button-group layout=vertical .name=${i} @calciteRadioButtonGroupChange=${(t) => {
-      c.emit(t.target.selectedItem.value);
+      c.emit(t.target.selectedItem?.value);
     }} .scale=${this.scale}>${s.map((t) => e`<calcite-label layout=inline .scale=${this.scale}>${n(t, e`<calcite-radio-button .checked=${t === r} .scale=${this.scale} .value=${t}></calcite-radio-button>`)}${d(t) ? a.systems?.[t] : a.units?.[t]?.pluralCapitalized}</calcite-label>`)}</calcite-radio-button-group>`;
   }
 }

package/dist/components/arcgis-utility-network-trace-analysis/customElement.d.ts

@@ -40,7 +40,7 @@ import type { UtilityNetworkTraceAnalysisState } from "@arcgis/core/networks/Uti
  * > 1. Proxied feature services or feature services that utilize stored credentials.
  * > 2. The `circuit` trace type or the `paths` and `circuits` result types.
  * > 3. Setting grouping properties `firstUnit` and `lastUnit` for trace locations in a [telecom domain network](https://pro.arcgis.com/en/pro-app/latest/help/data/utility-network/telecom-domain-networks.htm).
- * >    If a [grouped object](https://pro.arcgis.com/en/pro-app/latest/help/data/utility-network/grouping.htm) is used as a trace location, its `firstUnit` and `lastUnit` attributes are not used in the trace.
+ * >    If a [grouped object](https://doc.esri.com/en/arcgis-pro/latest/help/data/utility-network/grouping.html) is used as a trace location, its `firstUnit` and `lastUnit` attributes are not used in the trace.
  *
  * ## Working with nonspatial objects
  *

package/dist/components/arcgis-utility-network-trace-inputs/customElement.js

@@ -153,8 +153,7 @@ class M extends N {
         enabled: !0
       }));
     }), this._sketchViewModel.snappingOptions = {
-      enabled: !0,
-      featureEnabled: !0,
+      enabled: !1,
       featureSources: e
     };
   }

package/dist/components/arcgis-utility-network-trace-location/customElement.js

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as _ } from "../../chunks/runtime.js";
+import { c as k } from "../../chunks/runtime.js";
 import { css as x, html as y } from "lit";
 import * as C from "@arcgis/core/geometry/operators/cutOperator.js";
 import * as m from "@arcgis/core/geometry/operators/lengthOperator.js";
@@ -44,14 +44,14 @@ class R extends G {
         [n, c],
         [a, i]
       ]
-    ], l = this._createPolyline(o, t.spatialReference.wkid), d = b.execute(l, r);
-    if (!d)
+    ], l = this._createPolyline(o, t.spatialReference.wkid), p = b.execute(l, r);
+    if (!p)
       return u("error", this, "Unable to project flag geometry to source geometry spatial reference."), 0.5;
-    const p = C.execute(s, d);
-    if (p.length > 0) {
+    const d = C.execute(s, p);
+    if (d.length > 0) {
       const g = m.execute(s, { unit: "feet" });
       let h;
-      return p[0].paths[0][0][0] === s.paths[0][0][0] ? h = m.execute(p[0], { unit: "feet" }) : p.length > 1 ? h = m.execute(p[1], { unit: "feet" }) : h = 0, h / g;
+      return d[0].paths[0][0][0] === s.paths[0][0][0] ? h = m.execute(d[0], { unit: "feet" }) : d.length > 1 ? h = m.execute(d[1], { unit: "feet" }) : h = 0, h / g;
     }
     return u("warn", this, "Unable to cut the source geometry with the flag geometry."), 0.5;
   }
@@ -76,7 +76,7 @@ class R extends G {
     this.arcgisTraceLocationSelectStart.emit({ cancelSelect: () => t.cancel() }).defaultPrevented || await this._startSketch(e, t);
   }
   async _startSketch(e, t) {
-    this._clickHandler?.remove(), this._clickHandler = t.on("create", (r) => this._handleSketchComplete(r, e, t)), "acquireCursor" in e && e.acquireCursor("crosshair"), this.sketchViewModel?.create("point");
+    this._clickHandler?.remove(), this._clickHandler = t.on("create", (r) => this._handleSketchComplete(r, e, t)), "acquireCursor" in e && e.acquireCursor("crosshair"), t.snappingOptions.enabled = !0, t.create("point");
   }
   _handleSketchComplete(e, t, r) {
     if (e.state === "complete" && e.graphic) {
@@ -106,12 +106,12 @@ class R extends G {
     this._resetCursor(), await this._processHitTestResults(i, n, t), this.arcgisTraceLocationSelectEnd.emit();
   }
   _resetCursor() {
-    const { view: e } = this;
+    const { view: e, sketchViewModel: t } = this;
     if (!e) {
       u("error", this, f("view"));
       return;
     }
-    this._clickHandler?.remove(), this._clickHandler = void 0, "acquireCursor" in e && e.acquireCursor("default");
+    t && (t.snappingOptions.enabled = !1), this._clickHandler?.remove(), this._clickHandler = void 0, "acquireCursor" in e && e.acquireCursor("default");
   }
   async _processHitTestResults(e, t, r) {
     if (e.length === 0) {
@@ -141,8 +141,8 @@ class R extends G {
     await this._generateTraceLocation(c, t, r);
   }
   async _ensureNecessaryAttributes(e) {
-    const t = (S(e.layer), e.layer), r = t.geometryType === null, s = t.fieldsIndex?.get("assetgroup") ?? !1, n = t.fieldsIndex?.get("assetgroup")?.name ?? "assetgroup", a = t.fieldsIndex?.get("assettype") ?? !1, c = t.fieldsIndex?.get("assettype")?.name ?? "assettype", i = e.getGlobalId(), o = e.getObjectId(), l = s ? !!e.getAttribute(n) : !0, d = a ? !!e.getAttribute(c) : !0, p = !!e.geometry;
-    if (i && o && l && d && (p || r))
+    const t = (S(e.layer), e.layer), r = t.geometryType === null, s = t.fieldsIndex?.get("assetgroup") ?? !1, n = t.fieldsIndex?.get("assetgroup")?.name ?? "assetgroup", a = t.fieldsIndex?.get("assettype") ?? !1, c = t.fieldsIndex?.get("assettype")?.name ?? "assettype", i = e.getGlobalId(), o = e.getObjectId(), l = s ? !!e.getAttribute(n) : !0, p = a ? !!e.getAttribute(c) : !0, d = !!e.geometry;
+    if (i && o && l && p && (d || r))
       return e;
     const g = t.createQuery();
     return g.objectIds = [o], (await t.queryFeatures(g))?.features[0] || null;
@@ -213,20 +213,20 @@ class R extends G {
         }
       };
     } else if (!a) {
-      const i = P(e.layer) ? e.layer.parent : e.layer, o = i && this._edgeSourceLayerIds.includes(i.layerId), l = s?.getTerminalConfiguration(e), d = l ? l.terminals[0].id : o ? -1 : 1, p = o ? 0.5 : -1;
+      const i = P(e.layer) ? e.layer.parent : e.layer, o = i && this._edgeSourceLayerIds.includes(i.layerId), l = s?.getTerminalConfiguration(e), p = l ? l.terminals[0].id : o ? -1 : 1, d = o ? 0.5 : -1;
       return {
         traceLocation: new T({
           type: r,
           isFilterBarrier: !1,
           globalId: n,
-          terminalId: d,
-          percentAlong: p
+          terminalId: p,
+          percentAlong: d
         }),
         flagProperties: {
           title: c,
           expanded: !1,
           terminalConfiguration: l ?? void 0,
-          selectedTerminals: l ? /* @__PURE__ */ new Set([d]) : void 0
+          selectedTerminals: l ? /* @__PURE__ */ new Set([p]) : void 0
         },
         spatialProperties: {
           mapPoint: t,
@@ -290,7 +290,7 @@ class R extends G {
     return y`<div class="root">${this.renderAddLocationBlock()}</div>`;
   }
 }
-_("arcgis-utility-network-trace-location", R);
+k("arcgis-utility-network-trace-location", R);
 export {
   R as ArcgisUtilityNetworkTraceLocation
 };

package/dist/components/arcgis-utility-network-validate-network-topology/customElement.d.ts

@@ -168,7 +168,7 @@ export abstract class ArcgisUtilityNetworkValidateNetworkTopology extends LitEle
    *
    * The function is awaited before the [@arcgisValidateNetworkTopologyStart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-validate-network-topology/#event-arcgisValidateNetworkTopologyStart)
    * event is emitted and before the validation request is sent.
-   * If the function rejects its Promise, validation does not start and the component displays an error. If the Promise was rejected with an [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error), the component displays the error.
+   * If the function rejects its Promise, validation does not start and the component displays an error. If the Promise was rejected with an [Error](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error), the component displays the error.
    *
    * @internal
    * @example

package/dist/components/arcgis-version-management/customElement.d.ts

@@ -204,7 +204,15 @@ export abstract class ArcgisVersionManagement extends LitElement {
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
-   * The current state of the component.
+   * The current component state.
+   *
+   * * `disabled` -  an error occured during initialization
+   * * `executing` - an operation is being performed
+   * * `failed` - an error occurred during execution
+   * * `loading` - the object is loading
+   * * `ready` - object loaded successfully or operation completed successfully
+   *
+   * When the component is ready, all items in [versioningStates](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-version-management/#versioningStates) are loaded.
    *
    * @since 5.0
    */

package/dist/components/arcgis-version-management/customElement.js

@@ -3,21 +3,22 @@ import { c as S } from "../../chunks/runtime.js";
 import { once as L, watch as P } from "@arcgis/core/core/reactiveUtils.js";
 import _ from "@arcgis/core/versionManagement/VersionManager.js";
 import { LitElement as b, createEvent as u } from "@arcgis/lumina";
-import { css as C, render as N, html as g } from "lit";
+import { css as N, render as C, html as v } from "lit";
 import { createRef as F, ref as M } from "lit/directives/ref.js";
 import { u as k } from "../../chunks/useT9n.js";
 import { m as x } from "../../chunks/useViewModel.js";
-import { rethrowError as $ } from "@arcgis/toolkit/log";
-const A = C`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host{display:flex;flex-direction:column;min-height:var(--arcgis-internal-panel-height-md, 420px);height:100%}calcite-notice{margin:var(--calcite-spacing-md)}`, T = x(_), w = "map-components:version-management";
-class O extends b {
+import { d as $ } from "../../chunks/component-utils.js";
+import { rethrowError as A } from "@arcgis/toolkit/log";
+const T = N`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host{display:flex;flex-direction:column;min-height:var(--arcgis-internal-panel-height-md, 420px);height:100%}calcite-notice{margin:var(--calcite-spacing-md)}`, O = x(_), w = "map-components:version-management";
+class U extends b {
   constructor() {
-    super(...arguments), this.flowElement = F(), this.messages = k({ blocking: !0 }), this.viewModel = T(this), this._isInitialVersionInvalid = /* @__PURE__ */ new Map(), this._initialVersionInfos = [], this._showInvalidFeatureServiceNotice = !1, this.allowEditingDisabled = !1, this.autoDestroyDisabled = !1, this.closable = !1, this.pageSize = 5, this.state = this.viewModel.state, this.versioningStates = this.viewModel.versioningStates, this.view = this.viewModel.view, this.arcgisReady = u(), this.arcgisVersioningStateChanged = u();
+    super(...arguments), this.flowElement = F(), this.messages = k({ blocking: !0 }), this.viewModel = O(this), this._isInitialVersionInvalid = /* @__PURE__ */ new Map(), this._initialVersionInfos = [], this._showInvalidFeatureServiceNotice = !1, this.allowEditingDisabled = !1, this.autoDestroyDisabled = !1, this.closable = !1, this.pageSize = 5, this.state = this.viewModel.state, this.versioningStates = this.viewModel.versioningStates, this.view = this.viewModel.view, this.arcgisReady = u(), this.arcgisVersioningStateChanged = u();
   }
   static {
     this.properties = { versionList: 16, _showInvalidFeatureServiceNotice: 16, allowEditingDisabled: 5, autoDestroyDisabled: 5, closable: 7, initialVersionInfos: 0, icon: 1, label: 3, messageOverrides: 0, mode: 1, pageSize: 9, referenceElement: 1, state: 32, versioningStates: 0, view: 0 };
   }
   static {
-    this.styles = A;
+    this.styles = T;
   }
   get initialVersionInfos() {
     return this._initialVersionInfos;
@@ -37,7 +38,7 @@ class O extends b {
         try {
           this._changeToInitialVersion(e);
         } catch (i) {
-          $(this)(i);
+          A(this)(i);
         }
       });
     }), this.manager.onLifecycle(() => [
@@ -74,7 +75,7 @@ class O extends b {
       versionInfo: i
     };
     this.versionPropertiesContainer = document.createElement("div");
-    const s = N(g`<arcgis-version-management-version-properties .versionPropertiesElementProps=${o} selected show-back-button></arcgis-version-management-version-properties>`, this.versionPropertiesContainer), a = Array.from(s.parentNode.childNodes).find((c) => c.nodeName.toUpperCase() === "ARCGIS-VERSION-MANAGEMENT-VERSION-PROPERTIES");
+    const s = C(v`<arcgis-version-management-version-properties .versionPropertiesElementProps=${o} selected show-back-button></arcgis-version-management-version-properties>`, this.versionPropertiesContainer), a = Array.from(s.parentNode.childNodes).find((c) => c.nodeName.toUpperCase() === "ARCGIS-VERSION-MANAGEMENT-VERSION-PROPERTIES");
     return this.listenOn(a, "arcgisFlowItemBack", () => {
       this._removeVersionPropertiesFlowItem(this.flowElement.value);
     }), this.listenOn(a, "calciteFlowItemBack", (c) => {
@@ -197,37 +198,37 @@ class O extends b {
       i.nodeName.toUpperCase() === "ARCGIS-VERSION-MANAGEMENT-VERSION-PROPERTIES" && e.removeChild(i);
   }
   render() {
-    const { allowEditingDisabled: e, closable: i, flowElement: { value: r }, initialVersionInfos: t, _isInitialVersionInvalid: n, label: o, messages: s, mode: a, pageSize: c, versionList: m, viewModel: v, viewModel: { loadError: f, state: d } } = this, I = Array.from(v.serviceNameLookup, ([l, h]) => ({ url: l, name: h })), V = d !== "disabled" ? I.map((l) => {
+    const { allowEditingDisabled: e, closable: i, flowElement: { value: r }, initialVersionInfos: t, _isInitialVersionInvalid: n, label: o, messages: s, mode: a, pageSize: c, versionList: m, viewModel: d, viewModel: { loadError: f, state: g } } = this, I = Array.from(d.serviceNameLookup, ([l, h]) => ({ url: l, name: h })), V = g !== "disabled" ? I.map((l) => {
       const h = {
         allowEditing: !e,
         closable: i,
-        currentUser: v.userLookup.get(l.url),
-        currentVersionIdentifier: v.versioningStateLookup.get(l.url).currentVersionInfo.versionIdentifier,
+        currentUser: d.userLookup.get(l.url),
+        currentVersionIdentifier: d.versioningStateLookup.get(l.url).currentVersionInfo.versionIdentifier,
         executionError: void 0,
         flowElement: r,
         heading: o,
         initialVersionInfos: t,
         isInitialVersionInvalid: n,
-        isVersionAdministrator: v.versionAdministratorLookup.get(l.url),
-        isVersioningApiAvailable: (v.serverVersionLookup.get(l.url) ?? 0) >= 11.2,
+        isVersionAdministrator: d.versionAdministratorLookup.get(l.url),
+        isVersioningApiAvailable: (d.serverVersionLookup.get(l.url) ?? 0) >= 11.2,
         mode: a,
         pageSize: c,
         serviceName: l.name,
-        state: d,
+        state: g,
         serviceUrl: l.url,
         strings: s,
-        versionInfos: v.versioningStateLookup.get(l.url)?.versionInfos ?? []
+        versionInfos: d.versioningStateLookup.get(l.url)?.versionInfos ?? []
       };
-      return g`<arcgis-version-management-service-item .serviceItemElementProps=${h} @arcgisFlowItemBack=${() => {
+      return v`<arcgis-version-management-service-item .serviceItemElementProps=${h} @arcgisFlowItemBack=${() => {
         r && (this._removeVersionListFlowItem(r), this.versionList = void 0);
       }} @arcgisFlowItemClose=${() => this._handleFlowItemClose()} @arcgisGetVersions=${async (p) => {
         await this._refreshVersionList(p.detail.serviceUrl);
       }} @arcgisManageVersion=${this._handleManageVersionAction} @arcgisNewVersion=${this._handleNewVersionAction} @arcgisCreateVersionList=${(p) => this.versionList = p.detail}></arcgis-version-management-service-item>`;
-    }) : void 0, E = d === "disabled" && f != null ? g`<calcite-notice kind=warning open scale=s slot=footer width=full><div slot=message>${this._getLoadError(f)}</div></calcite-notice>` : void 0, y = this._showInvalidFeatureServiceNotice ? g`<calcite-notice closable kind=warning open scale=s slot=content-top width=full icon @calciteNoticeClose=${() => this._showInvalidFeatureServiceNotice = !1}><div slot=title>${s.headers.invalidInitialFeatureService}</div><div slot=message>${s.loadErrors.invalidInitialFeatureService}</div></calcite-notice>` : void 0;
-    return g`<div class="root"><calcite-flow custom-item-selectors="arcgis-version-management-version-list, arcgis-version-management-version-properties" ${M(this.flowElement)}><calcite-flow-item .closable=${this.closable} .heading=${o ?? void 0} @calciteFlowItemClose=${() => this._handleFlowItemClose()} .selected=${!m}>${y}<calcite-panel .loading=${d === "loading" || d === "executing"}>${V}${E}</calcite-panel></calcite-flow-item></calcite-flow></div>`;
+    }) : void 0, E = g === "disabled" && f != null ? v`<calcite-notice kind=warning open scale=s slot=footer width=full><div slot=message>${this._getLoadError(f)}</div></calcite-notice>` : void 0, y = this._showInvalidFeatureServiceNotice ? v`<calcite-notice closable kind=warning open scale=s slot=content-top width=full icon @calciteNoticeClose=${() => this._showInvalidFeatureServiceNotice = !1}><div slot=title>${s.headers.invalidInitialFeatureService}</div><div slot=message>${s.loadErrors.invalidInitialFeatureService}</div></calcite-notice>` : void 0;
+    return v`<div class="root"><calcite-flow custom-item-selectors="arcgis-version-management-version-list, arcgis-version-management-version-properties" ${M(this.flowElement)}><calcite-flow-item .closable=${this.closable} .heading=${$(o) ? s.label : o} @calciteFlowItemClose=${() => this._handleFlowItemClose()} .selected=${!m}>${y}${g === "loading" || g === "executing" ? v`<calcite-loader .label=${`${s.label} - loading`}></calcite-loader>` : v`<calcite-panel>${V}${E}</calcite-panel>`}</calcite-flow-item></calcite-flow></div>`;
   }
 }
-S("arcgis-version-management", O);
+S("arcgis-version-management", U);
 export {
-  O as ArcgisVersionManagement
+  U as ArcgisVersionManagement
 };

package/dist/components/arcgis-version-management/index.js

@@ -3,5 +3,6 @@ import "../arcgis-version-management-service-item/index.js";
 import "@esri/calcite-components/components/calcite-notice";
 import "@esri/calcite-components/components/calcite-flow";
 import "@esri/calcite-components/components/calcite-flow-item";
+import "@esri/calcite-components/components/calcite-loader";
 import "@esri/calcite-components/components/calcite-panel";
 export * from "./customElement.js";

package/dist/components/arcgis-version-management-version-properties/customElement.js

@@ -57,8 +57,11 @@ class x extends C {
         break;
       }
       case "calciteTextAreaInput": {
-        const o = t.target.name, n = t.target.value;
-        s === "create" && (a = { ...a, [o]: n }), s === "edit" && (r = { ...r, [o]: n });
+        const o = t.target.name;
+        if (o != null) {
+          const n = t.target.value;
+          s === "create" && (a = { ...a, [o]: n }), s === "edit" && (r = { ...r, [o]: n });
+        }
         break;
       }
     }
@@ -84,8 +87,8 @@ class x extends C {
     this._switchToVersion = t.target.checked;
   }
   render() {
-    const { selected: t, showBackButton: s, versionPropertiesElementProps: { closable: h, currentUser: d, state: m, strings: e, versionInfo: c }, _mode: i, _ownerName: r, _versionName: a } = this, o = l`<calcite-button appearance=outline slot=footer width=full @click=${this._handleCancel}>${e.actions.cancelSave}</calcite-button><calcite-button appearance=solid slot=footer width=full @click=${this._handleSave}>${e.actions.saveVersion}</calcite-button>`, n = l`<calcite-label>${e.input.versionAccess}<calcite-chip-group label=access @calciteChipGroupSelect=${this._handleChange} selection-mode=single-persist><calcite-chip .selected=${i === "edit" && c.access === "public" || i === "create"} label=public>${e.accessLevels.public}</calcite-chip><calcite-chip .selected=${i === "edit" && c.access === "protected"} label=protected>${e.accessLevels.protected}</calcite-chip><calcite-chip .selected=${i === "edit" && c.access === "private"} label=private>${e.accessLevels.private}</calcite-chip></calcite-chip-group></calcite-label>`, _ = l`<calcite-label>${e.input.versionDescription}<calcite-text-area limit-text max-length=64 name=description resize=none rows=2 scale=s .value=${i === "edit" ? c.description : ""} @calciteTextAreaInput=${this._handleChange}></calcite-text-area></calcite-label>`, f = l`<calcite-label>${e.input.versionName}<calcite-input-text max-length=62 name=versionName .value=${i === "edit" ? a : ""} @calciteInputTextInput=${this._handleChange} ${v(this._versionNameInputElement)}></calcite-input-text></calcite-label>`, b = l`<calcite-label>${e.input.versionOwner}<calcite-input-text name=ownerName .value=${i === "edit" ? r : d} @calciteInputTextInput=${this._handleChange}></calcite-input-text></calcite-label>`, g = i === "create" ? l`<calcite-label layout=inline><calcite-checkbox checked name=switchToVersion @calciteCheckboxChange=${this._handleSwitchToVersionChange} ${v(this._switchToVersionCheckboxElement)}></calcite-checkbox>${e.actions.switchToVersion}</calcite-label>` : void 0, w = this._validationError ? l`<calcite-notice closable kind=warning open scale=s width=full @calciteNoticeClose=${() => this._validationError = void 0}><div slot=message>${this._validationError}</div></calcite-notice>` : void 0;
-    return l`<calcite-flow-item .closable=${h} .description=${c ? c.versionIdentifier.name : ""} .heading=${c ? e.actions.editVersion : e.actions.newVersion} .selected=${t} .showBackButton=${s} @calciteFlowItemClose=${this._handleClose} ${v(this._flowItemElement)}><calcite-panel .loading=${m === "executing"}><calcite-block expanded .label=${e.headers.versionProperties}>${f}${_}${n}${b}${g}${w}</calcite-block>${o}</calcite-panel></calcite-flow-item>`;
+    const { selected: t, showBackButton: s, versionPropertiesElementProps: { closable: h, currentUser: d, state: m, strings: e, versionInfo: c }, _mode: i, _ownerName: r, _versionName: a } = this, o = l`<calcite-button appearance=outline slot=footer width=full @click=${this._handleCancel}>${e.actions.cancelSave}</calcite-button><calcite-button appearance=solid slot=footer width=full @click=${this._handleSave}>${e.actions.saveVersion}</calcite-button>`, n = l`<calcite-label>${e.input.versionAccess}<calcite-chip-group label=access @calciteChipGroupSelect=${this._handleChange} selection-mode=single-persist><calcite-chip .selected=${i === "edit" && c.access === "public" || i === "create"} label=public>${e.accessLevels.public}</calcite-chip><calcite-chip .selected=${i === "edit" && c.access === "protected"} label=protected>${e.accessLevels.protected}</calcite-chip><calcite-chip .selected=${i === "edit" && c.access === "private"} label=private>${e.accessLevels.private}</calcite-chip></calcite-chip-group></calcite-label>`, f = l`<calcite-label>${e.input.versionDescription}<calcite-text-area limit-text max-length=64 name=description resize=none rows=2 scale=s .value=${i === "edit" ? c.description : ""} @calciteTextAreaInput=${this._handleChange}></calcite-text-area></calcite-label>`, _ = l`<calcite-label>${e.input.versionName}<calcite-input-text max-length=62 name=versionName .value=${i === "edit" ? a : ""} @calciteInputTextInput=${this._handleChange} ${v(this._versionNameInputElement)}></calcite-input-text></calcite-label>`, b = l`<calcite-label>${e.input.versionOwner}<calcite-input-text name=ownerName .value=${i === "edit" ? r : d} @calciteInputTextInput=${this._handleChange}></calcite-input-text></calcite-label>`, g = i === "create" ? l`<calcite-label layout=inline><calcite-checkbox checked name=switchToVersion @calciteCheckboxChange=${this._handleSwitchToVersionChange} ${v(this._switchToVersionCheckboxElement)}></calcite-checkbox>${e.actions.switchToVersion}</calcite-label>` : void 0, w = this._validationError ? l`<calcite-notice closable kind=warning open scale=s width=full @calciteNoticeClose=${() => this._validationError = void 0}><div slot=message>${this._validationError}</div></calcite-notice>` : void 0;
+    return l`<calcite-flow-item .closable=${h} .description=${c ? c.versionIdentifier.name : ""} .heading=${c ? e.actions.editVersion : e.actions.newVersion} .selected=${t} .showBackButton=${s} @calciteFlowItemClose=${this._handleClose} ${v(this._flowItemElement)}><calcite-panel .loading=${m === "executing"}><calcite-block expanded .label=${e.headers.versionProperties}>${_}${f}${n}${b}${g}${w}</calcite-block>${o}</calcite-panel></calcite-flow-item>`;
   }
 }
 $("arcgis-version-management-version-properties", x);

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

@@ -51,7 +51,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  */
 export abstract class ArcgisVideo extends LitElement {
   /**
-   * The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements).
+   * The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaLabelledByElements).
    *
    * @since 4.34
    */
@@ -64,13 +64,26 @@ export abstract class ArcgisVideo extends LitElement {
    * @since 5.0
    */
   accessor attributionMode: "dark" | "light" | null | undefined;
-  /** @default false */
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-video/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
   accessor autoDestroyDisabled: boolean;
   /** The [VideoLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/) to display in the view. */
   accessor layer: VideoLayer | null | undefined;
   /** A reference to the associated [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) or [WebMap](https://developers.arcgis.com/javascript/latest/references/core/WebMap/). */
   accessor map: Map | WebMap | null | undefined;
-  /** @default false */
+  /**
+   * Indicates whether map graphics from the reference map element are overlaid on the video player's content.
+   *
+   * @default false
+   * @since 5.1
+   */
   accessor operationalDataVisible: boolean;
   /**
    * When `true`, this property indicates whether the view successfully satisfied all dependencies,

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

@@ -5,20 +5,20 @@ import { useDirection as n } from "@arcgis/lumina/controllers";
 import { watch as e } from "@arcgis/core/core/reactiveUtils.js";
 import l from "@arcgis/core/views/VideoView.js";
 import { LitElement as c, createEvent as m, safeClassMap as d } from "@arcgis/lumina";
-import { makeAccessorController as f } from "@arcgis/lumina/controllers/accessor";
+import { makeAccessorController as p } from "@arcgis/lumina/controllers/accessor";
 import { createRef as s, ref as a } from "lit/directives/ref.js";
 import { C as r } from "../../chunks/resources.js";
-import { c as p, s as y, S as w } from "../../chunks/slots.js";
+import { c as f, s as y, S as w } from "../../chunks/slots.js";
 import { s as v } from "../../chunks/esri-main.js";
-const u = h`:host{width:100%;height:100%}`, R = f(l, {
+const u = h`:host{width:100%;height:100%}`, R = p(l, {
   omitProps: ["container", "navigation", "scale", "ui"]
 });
 class g extends c {
   constructor() {
-    super(), this._containerRef = s(), this._direction = n(), this._mapRef = s(), this._slotGroupRefs = p(), this.autoDestroyDisabled = !1, this.operationalDataVisible = !1, this.view = R(this), this.attributionMode = this.view.attributionMode, this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.arcgisViewReadyChange = m();
+    super(), this._containerRef = s(), this._direction = n(), this._mapRef = s(), this._slotGroupRefs = f(), this.autoDestroyDisabled = !1, this.view = R(this), this.attributionMode = this.view.attributionMode, this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.operationalDataVisible = this.view.operationalDataVisible, this.arcgisViewReadyChange = m();
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, operationalDataVisible: 5, view: 32, aria: 0, attributionMode: 1, ready: 36, layer: 0, map: 0 };
+    this.properties = { autoDestroyDisabled: 5, view: 32, aria: 0, attributionMode: 1, ready: 36, layer: 0, map: 0, operationalDataVisible: 5 };
   }
   static {
     this.styles = [v, y, u];

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

@@ -227,6 +227,13 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       video: string;
       videoPlayer: string;
   }>;
+  /**
+   * Indicates whether map graphics from the reference map element are overlaid on the video player's content.
+   *
+   * @default false
+   * @since 5.1
+   */
+  accessor operationalDataVisible: boolean;
   /**
    * 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.
    *

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,9 +59,9 @@ 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>`;

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-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
 };