@arcgis/map-components 5.1.0-next.98 → 5.1.0

package/dist/components/arcgis-value-picker-slider/customElement.d.ts

@@ -0,0 +1,174 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Layout } from "../arcgis-value-picker/types.js";
+
+/** @internal */
+export abstract class ArcgisValuePickerSlider extends LitElement {
+  /**
+   * 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-value-picker-slider/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Determines whether the user can interact with the next button.
+   * This property is automatically set to `false` when the index of [currentValue](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#currentValue) matches the last index of
+   * [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). Regardless of the [layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#layout) property's value, the slider thumb will
+   * move in the direction that the next button is pointing. This means that when the slider is visually flipped
+   * (`layout` is `"horizontal"` and `mirrored` is `true`, or `layout` is `"vertical"` and `mirrored` is `false`), this property becomes `false`
+   * when `currentValue` is equal to the first index of `steps` rather than the last.
+   *
+   * @default false
+   * @example
+   * ```js
+   * const valuePicker = document.querySelector("arcgis-value-picker");
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   *
+   * valuePickerSlider.steps = [1, 2, 3];
+   * valuePickerSlider.currentValue = 3;
+   *
+   * if (valuePickerSlider.canNext) {
+   *   valuePicker.next();
+   * } else {
+   *   console.log("Cannot step forward."); // this line will execute
+   * }
+   * ```
+   */
+  accessor canNext: boolean;
+  /**
+   * Determines whether the user can interact with the play/pause button.
+   *
+   * @default false
+   */
+  accessor canPlay: boolean;
+  /**
+   * Determines whether the user can interact with the previous button.
+   * This property is automatically set to `false` when the index of [currentValue](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#currentValue) matches the first index of
+   * [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). Regardless of the [layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#layout) property's value, the slider thumb will
+   * move in the direction that the previous button is pointing. This means that when the slider is visually flipped
+   * (`layout` is `"horizontal"` and `mirrored` is `true`, or `layout` is `"vertical"` and `mirrored` is `false`), this property becomes `false`
+   * when `currentValue` is equal to the last index of `steps` rather than the first.
+   *
+   * @default false
+   * @example
+   * ```js
+   * const valuePicker = document.querySelector("arcgis-value-picker");
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   *
+   * // `steps` will be rendered on a vertical track where "3" is the topmost value.
+   * // The previous button (pointing upwards) will fail to increment the index of `steps` by 1.
+   *
+   * valuePickerSlider.steps = [1, 2, 3];
+   * valuePickerSlider.currentValue = 1;
+   * valuePickerSlider.mirrored = false;
+   * valuePicker.layout = "vertical";
+   *
+   * if (valuePickerSlider.canPrevious) {
+   *   valuePicker.previous(); // this line will execute
+   * } else {
+   *   console.log("Cannot step upward.");
+   * }
+   * ```
+   */
+  accessor canPrevious: boolean;
+  /**
+   * The value of the currently selected index in the slider's [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). If this property is not assigned by the
+   * user, it will default to the last index of `steps`.
+   */
+  accessor currentValue: number | undefined;
+  /**
+   * When set to `true`, the user may not interact with the slider.
+   * Note that if the ValuePicker's [arcgis-value-picker.disabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#disabled) property is mutated, this property will update to match it.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * A function used to format labels. Overrides the default label formatter.
+   *
+   * @example
+   * ```js
+   * // Display a label at every step formatted as a percentage.
+   *
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   * valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+   * valuePickerSlider.labels = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+   * valuePickerSlider.labelFormatter = (value) => `${value}%`;
+   * ```
+   */
+  accessor labelFormatter: (value: number, defaultFormatter: (value: number) => string) => string | null | undefined;
+  /**
+   * Determines where along the slider track labels should be placed. Labels will be formatted by the [labelFormatter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#labelFormatter) property.
+   *
+   * @example
+   * ```js
+   * // Display a label at every other step
+   *
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   * valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+   * valuePickerSlider.labels = [0, 20, 40, 60, 80, 100];
+   * ```
+   */
+  accessor labels: number[] | undefined;
+  /**
+   * Determines whether the slider should be oriented horizontally or vertically. Note that if [arcgis-value-picker.layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#layout) on the Value Picker component
+   * is mutated, this property will update to match it. The UI will behave as if the indices of [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps) will ascend left to right, or bottom
+   * to top on a horizontal or vertical layout, respectively. If you wish for the slider to be visually mirrored, set the [mirrored](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#mirrored)
+   * property to true. This will also make the 'next' button responsible for stepping backwards to the previous index of `steps`, and
+   * 'previous' responsible for advancing to the next index of `steps`.
+   *
+   * @default "horizontal"
+   * @example
+   * ```js
+   * // Display a vertical slider with `steps` ascending bottom to top. In this instance, the 'next'
+   * // button (pointing downwards) will bring `currentValue` closer to 0 to match the slider's appearance.
+   *
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   * valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+   * valuePickerSlider.currentValue = 100;
+   * valuePickerSlider.layout = "vertical";
+   *
+   * // Display a horizontal slider with `steps` ascending right to left. Since `mirrored` is true,
+   * // the slider will show `currentValue` decreasing from 100 to 0 as the 'next' button (pointing to the right) is pressed.
+   *
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   * valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+   * valuePickerSlider.currentValue = 100;
+   * valuePickerSlider.layout = "horizontal";
+   * valuePickerSlider.mirrored = true;
+   * ```
+   * @see [arcgis-value-picker.layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#layout)
+   */
+  accessor layout: Layout | undefined;
+  /** Positions along the slider track rendered as long tick marks under the track. */
+  accessor majorTicks: number[] | undefined;
+  /** The greatest possible value on the slider track. If this property is not set, it will be inferred from the last index of [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). */
+  accessor max: number | undefined;
+  /** The smallest possible value on the slider track. If this property is not set, it will be inferred from the first index of [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). */
+  accessor min: number | undefined;
+  /** Positions along the slider track rendered as short tick marks under the track. */
+  accessor minorTicks: number[] | undefined;
+  /**
+   * When `true`, the slider will display its [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps) from right to left, or top to bottom,
+   * depending on the value of [layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#layout). This inverts the direction of the slider.
+   *
+   * @default false
+   */
+  accessor mirrored: boolean;
+  /**
+   * Positions along the slider track between [min](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#min) and [max](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#max) that
+   * the slider thumb will snap to when interacted with.
+   */
+  accessor steps: number[] | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisValuePickerSlider["arcgisPropertyChange"]["detail"];
+  };
+}

package/dist/components/arcgis-value-picker-slider/customElement.js

@@ -0,0 +1,60 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as r } from "../../chunks/runtime.js";
+import { LitElement as c } from "@arcgis/lumina";
+import { css as l, html as s } from "lit";
+import { usePropertyChange as n } from "@arcgis/lumina/controllers";
+const h = l`:host{display:flex;flex:auto;padding-inline:var(--calcite-space-sm)}arcgis-slider{flex:auto}arcgis-ticks{--arcgis-ticks-font-size: var(--calcite-font-size--3);--arcgis-ticks-gap: var(--calcite-space-base)}.content-end-stack{display:flex;flex-direction:column;flex:1}.ticks-stack{height:var(--calcite-space-sm);position:relative}.ticks-stack arcgis-ticks{inset:var(--calcite-space-none);position:absolute}.label-ticks{--arcgis-ticks-tick-length: var(--calcite-space-2xs);--arcgis-ticks-tick-color: transparent}.minor-ticks{--arcgis-ticks-tick-length: var(--calcite-space-2xs)}.major-ticks{--arcgis-ticks-tick-length: var(--calcite-space-sm)}:host([layout="vertical"]){padding-inline:var(--calcite-space-none);width:var(--calcite-size-xl);arcgis-ticks{--arcgis-ticks-gap: var(--calcite-space-sm)}.content-end-stack{position:relative}.ticks-stack{height:100%}.label-ticks{inset:var(--calcite-space-none);position:absolute}}`;
+class o extends c {
+  constructor() {
+    super(...arguments), this.autoDestroyDisabled = !1, this.canNext = !1, this.canPlay = !1, this.canPrevious = !1, this.disabled = !1, this.layout = "horizontal", this.mirrored = !1, this.arcgisPropertyChange = n()("canNext", "canPlay", "canPrevious", "currentValue");
+  }
+  static {
+    this.properties = { autoDestroyDisabled: 5, canNext: 5, canPlay: 5, canPrevious: 5, currentValue: 9, disabled: 5, labelFormatter: 0, labels: 0, layout: 3, max: 9, min: 9, mirrored: 5, steps: 0, majorTicks: 0, minorTicks: 0 };
+  }
+  static {
+    this.styles = h;
+  }
+  get _ascending() {
+    return this.layout === "horizontal" && !this.mirrored || this.layout === "vertical" && this.mirrored;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  reset() {
+    this.currentValue = this._ascending ? this.steps?.at(0) : this.steps?.at(-1);
+  }
+  step(t) {
+    if (!this.steps || this.currentValue === void 0)
+      return;
+    const e = t === "next" === this._ascending ? 1 : -1, a = this.steps.indexOf(this.currentValue) + e;
+    a >= this.steps.length || a < 0 || (this.currentValue = this.steps[a], this._checkState());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.el.hidden = !0;
+  }
+  willUpdate(t) {
+    t.has("steps") && this.steps?.length && (this.min ??= this.steps[0], this.max ??= this.steps.at(-1)), (t.has("currentValue") || t.has("max")) && this.max !== void 0 && (this.currentValue ??= this.max), this.el.hidden = this.min === void 0 || this.max === void 0 || this.currentValue === void 0, this._checkState();
+  }
+  _checkState() {
+    if (!this.steps?.length) {
+      this.canPlay = !1, this.canNext = !1, this.canPrevious = !1;
+      return;
+    }
+    this.canPlay = !0;
+    const t = this.steps.findIndex((e) => e === this.currentValue), i = this.steps.length - 1;
+    this.canNext = this._ascending ? t < i : t > 0, this.canPrevious = this._ascending ? t > 0 : t < i;
+  }
+  _handleSliderChange(t) {
+    this.currentValue = t.currentTarget.values[0], this._checkState();
+  }
+  _handleSliderInput(t) {
+    this.currentValue = t.currentTarget.values[0], this._checkState();
+  }
+  render() {
+    return this.currentValue === void 0 ? null : s`<arcgis-slider .disabled=${this.disabled} .layout=${this.layout} .min=${this.min} .max=${this.max} .steps=${this.steps} .mirrored=${this.mirrored} .values=${[this.currentValue]} @arcgisInput=${(t) => this._handleSliderInput(t)} @arcgisChange=${(t) => this._handleSliderChange(t)}>${(this.majorTicks?.length || this.minorTicks?.length || this.labels?.length) && s`<div slot=content-end class="content-end-stack">${(this.majorTicks?.length || this.minorTicks?.length) && s`<div class="ticks-stack">${this.majorTicks?.length && s`<arcgis-ticks .layout=${this.layout} class="major-ticks" .min=${this.min} .max=${this.max} .mirrored=${this.mirrored} .values=${this.majorTicks} mode=value></arcgis-ticks>` || ""}${this.minorTicks?.length && s`<arcgis-ticks .layout=${this.layout} class="minor-ticks" .min=${this.min} .max=${this.max} .mirrored=${this.mirrored} .values=${this.minorTicks} mode=value></arcgis-ticks>` || ""}</div>` || ""}${this.labels?.length && s`<arcgis-ticks .layout=${this.layout} class="label-ticks" .min=${this.min} .max=${this.max} .mirrored=${this.mirrored} .values=${this.labels} mode=value show-labels label-placement=end .labelFormatter=${this.labelFormatter}></arcgis-ticks>` || ""}</div>` || ""}</arcgis-slider>`;
+  }
+}
+r("arcgis-value-picker-slider", o);
+export {
+  o as ArcgisValuePickerSlider
+};

package/dist/components/arcgis-value-picker-slider/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-value-picker-slider/index.js

@@ -0,0 +1,3 @@
+import "@arcgis/common-components/components/arcgis-slider";
+import "@arcgis/common-components/components/arcgis-ticks";
+export * from "./customElement.js";

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

@@ -30,16 +30,16 @@ class x extends C {
     this.arcgisFlowItemBack.emit();
   }
   _handleChange(t) {
-    const { _mode: s, _ownerName: h, _versionName: d, versionPropertiesElementProps: { currentUser: m, isVersionAdministrator: e, serviceUrl: c, versionInfo: i } } = this;
-    let { _alterVersionParameters: r, _createVersionParameters: a } = this;
+    const { _mode: s, _ownerName: h, _versionName: d, versionPropertiesElementProps: { currentUser: m, isVersionAdministrator: e, serviceUrl: r, versionInfo: i } } = this;
+    let { _alterVersionParameters: o, _createVersionParameters: a } = this;
     switch (s === "create" && (a || (a = {
       access: "public",
       description: "",
-      featureServerUrl: c,
+      featureServerUrl: r,
       ownerName: m,
       versionName: ""
-    })), s === "edit" && (r || (r = {
-      featureServerUrl: c,
+    })), s === "edit" && (o || (o = {
+      featureServerUrl: r,
       versionIdentifier: i.versionIdentifier,
       ownerName: h,
       versionName: d,
@@ -47,22 +47,22 @@ class x extends C {
       description: i.description
     })), t.type) {
       case "calciteChipGroupSelect": {
-        const o = t.target.label, n = t.target.selectedItems[0].label;
-        s === "create" && (a = { ...a, [o]: n }), s === "edit" && (r = { ...r, [o]: n });
+        const c = t.target.label, n = t.target.selectedItems[0].label;
+        s === "create" && (a = { ...a, [c]: n }), s === "edit" && (o = { ...o, [c]: n });
         break;
       }
       case "calciteInputTextInput": {
-        const o = t.target.name, n = t.target.value;
-        s === "create" && (a = { ...a, [o]: n }), s === "edit" && (r = { ...r, [o]: n });
+        const c = t.target.name, n = t.target.value;
+        s === "create" && (a = { ...a, [c]: n }), s === "edit" && (o = { ...o, [c]: n });
         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 c = t.target.name, n = t.target.value;
+        s === "create" && c && (a = { ...a, [c]: n }), s === "edit" && c && (o = { ...o, [c]: n });
         break;
       }
     }
-    s === "create" && (a.access !== "public" && m.toUpperCase() !== a.ownerName?.toUpperCase() && !e ? (this._switchToVersionCheckboxElement.value.checked = !1, this._switchToVersionCheckboxElement.value.disabled = !0, this._switchToVersion = !1) : this._switchToVersionCheckboxElement.value.disabled = !1, this._createVersionParameters = a), s === "edit" && (this._alterVersionParameters = r);
+    s === "create" && (a.access !== "public" && m.toUpperCase() !== a.ownerName?.toUpperCase() && !e ? (this._switchToVersionCheckboxElement.value.checked = !1, this._switchToVersionCheckboxElement.value.disabled = !0, this._switchToVersion = !1) : this._switchToVersionCheckboxElement.value.disabled = !1, this._createVersionParameters = a), s === "edit" && (this._alterVersionParameters = o);
   }
   _handleClose() {
     this.arcgisFlowItemClose.emit();
@@ -84,8 +84,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: r }, _mode: i, _ownerName: o, _versionName: a } = this, c = 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" && r.access === "public" || i === "create"} label=public>${e.accessLevels.public}</calcite-chip><calcite-chip .selected=${i === "edit" && r.access === "protected"} label=protected>${e.accessLevels.protected}</calcite-chip><calcite-chip .selected=${i === "edit" && r.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" ? r.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" ? o : 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=${r ? r.versionIdentifier.name : ""} .heading=${r ? 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>${c}</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,12 +64,27 @@ 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;
+  /**
+   * 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,
    * signaling that the following conditions are met.

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 { createRef as s, ref as r } from "lit/directives/ref.js";
-import { C as a } from "../../chunks/resources.js";
-import { c as p, s as y, S as w } from "../../chunks/slots.js";
+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 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.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, 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];
@@ -44,10 +44,10 @@ class g extends c {
     ]);
   }
   renderMain() {
-    return t`<div class=${`root ${a.base}`} ${r(this._mapRef)}></div>`;
+    return t`<div class=${`root ${r.base}`} ${a(this._mapRef)}></div>`;
   }
   render() {
-    return t`${this.renderMain()}<section class=${d(a.containerUI)} ${r(this._containerRef)}>${w({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
+    return t`${this.renderMain()}<section class=${d(r.containerUI)} ${a(this._containerRef)}>${w({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
   }
 }
 o("arcgis-video", g);

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

@@ -129,11 +129,15 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       frameOutline?: string | undefined;
       graphics?: string | undefined;
       layers?: string | undefined;
+      loop?: string | undefined;
+      loopPlayback?: string | undefined;
+      mapOverlay?: string | undefined;
       metadata?: string | undefined;
       metadataDescription?: string | undefined;
       metadataNotLoaded?: string | undefined;
       missionInfo?: string | undefined;
       none?: string | undefined;
+      operationalData?: string | undefined;
       pause?: string | undefined;
       platformInfo?: string | undefined;
       play?: string | undefined;
@@ -141,6 +145,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       quality?: string | undefined;
       reverse?: string | undefined;
       sensor?: string | undefined;
+      sensorPath?: string | undefined;
       sensorTrail?: string | undefined;
       settings?: string | undefined;
       sightLine?: string | undefined;
@@ -162,11 +167,15 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       frameOutline: string;
       graphics: string;
       layers: string;
+      loop: string;
+      loopPlayback: string;
+      mapOverlay: string;
       metadata: string;
       metadataDescription: string;
       metadataNotLoaded: string;
       missionInfo: string;
       none: string;
+      operationalData: string;
       pause: string;
       platformInfo: string;
       play: string;
@@ -174,6 +183,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       quality: string;
       reverse: string;
       sensor: string;
+      sensorPath: string;
       sensorTrail: string;
       settings: string;
       sightLine: string;
@@ -193,11 +203,15 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       frameOutline: string;
       graphics: string;
       layers: string;
+      loop: string;
+      loopPlayback: string;
+      mapOverlay: string;
       metadata: string;
       metadataDescription: string;
       metadataNotLoaded: string;
       missionInfo: string;
       none: string;
+      operationalData: string;
       pause: string;
       platformInfo: string;
       play: string;
@@ -205,6 +219,7 @@ export abstract class ArcgisVideoPlayer extends LitElement {
       quality: string;
       reverse: string;
       sensor: string;
+      sensorPath: string;
       sensorTrail: string;
       settings: string;
       sightLine: string;
@@ -212,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.
    *