@arcgis/map-components 5.1.0-next.11 → 5.1.0-next.111

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

@@ -1,22 +1,22 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as g } from "../../chunks/runtime.js";
+import { c as $ } from "../../chunks/runtime.js";
 import { css as V, html as l } from "lit";
-import { createRef as u, ref as f } from "lit/directives/ref.js";
-import { LitElement as $, createEvent as d } from "@arcgis/lumina";
-const x = V`:host{display:none;background:#bdf2c4}:host([selected]){display:flex}.properties-buttons{display:flex}`;
-class I extends $ {
+import { LitElement as C, createEvent as p } from "@arcgis/lumina";
+import { createRef as u, ref as v } from "lit/directives/ref.js";
+const I = V`:host{min-height:var(--arcgis-internal-panel-height-md, 420px);height:100%}`;
+class x extends C {
   constructor() {
-    super(...arguments), this._flowItemElement = u(), this._switchToVersion = !0, this._switchToVersionCheckboxElement = u(), this._versionNameInputElement = u(), this.selected = !1, this.showBackButton = !1, this.arcgisAlterVersion = d(), this.arcgisCreateVersion = d(), this.arcgisFlowItemBack = d(), this.arcgisFlowItemClose = d();
+    super(...arguments), this._flowItemElement = u(), this._switchToVersion = !0, this._switchToVersionCheckboxElement = u(), this._versionNameInputElement = u(), this.selected = !1, this.showBackButton = !1, this.arcgisAlterVersion = p(), this.arcgisCreateVersion = p(), this.arcgisFlowItemBack = p(), this.arcgisFlowItemClose = p();
   }
   static {
-    this.properties = { selected: 7, showBackButton: 7, versionPropertiesElementProps: 0 };
+    this.properties = { _validationError: 16, selected: 7, showBackButton: 7, versionPropertiesElementProps: 0 };
   }
   static {
-    this.styles = x;
+    this.styles = I;
   }
   load() {
-    const { versionPropertiesElementProps: { versionInfo: e } } = this;
-    e ? (this._mode = "edit", this._fullVersionName = e.versionIdentifier.name, this._ownerName = this._fullVersionName.substring(0, this._fullVersionName.lastIndexOf(".")), this._versionName = this._fullVersionName.substring(this._fullVersionName.lastIndexOf(".") + 1)) : this._mode = "create";
+    const { versionPropertiesElementProps: { versionInfo: t } } = this;
+    t ? (this._mode = "edit", this._fullVersionName = t.versionIdentifier.name, this._ownerName = this._fullVersionName.substring(0, this._fullVersionName.lastIndexOf(".")), this._versionName = this._fullVersionName.substring(this._fullVersionName.lastIndexOf(".") + 1)) : this._mode = "create";
   }
   updated() {
     this._mode === "create" && this._versionNameInputElement.value?.setFocus();
@@ -29,62 +29,66 @@ class I extends $ {
   _handleCancel() {
     this.arcgisFlowItemBack.emit();
   }
-  _handleChange(e) {
-    const { _mode: i, _ownerName: h, _versionName: m, versionPropertiesElementProps: { currentUser: p, isVersionAdministrator: t, serviceUrl: r, versionInfo: a } } = this;
-    let { _alterVersionParameters: c, _createVersionParameters: s } = this;
-    switch (i === "create" && (s || (s = {
+  _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;
+    switch (s === "create" && (a || (a = {
       access: "public",
       description: "",
-      featureServerUrl: r,
-      ownerName: p,
+      featureServerUrl: c,
+      ownerName: m,
       versionName: ""
-    })), i === "edit" && (c || (c = {
-      featureServerUrl: r,
-      versionIdentifier: a.versionIdentifier,
+    })), s === "edit" && (r || (r = {
+      featureServerUrl: c,
+      versionIdentifier: i.versionIdentifier,
       ownerName: h,
-      versionName: m,
-      access: a.access,
-      description: a.description
-    })), e.type) {
+      versionName: d,
+      access: i.access,
+      description: i.description
+    })), t.type) {
       case "calciteChipGroupSelect": {
-        const n = e.target.label, o = e.target.selectedItems[0].label;
-        i === "create" && (s = { ...s, [n]: o }), i === "edit" && (c = { ...c, [n]: o });
+        const o = t.target.label, n = t.target.selectedItems[0].label;
+        s === "create" && (a = { ...a, [o]: n }), s === "edit" && (r = { ...r, [o]: n });
         break;
       }
       case "calciteInputTextInput": {
-        const n = e.target.name, o = e.target.value;
-        i === "create" && (s = { ...s, [n]: o }), i === "edit" && (c = { ...c, [n]: o });
+        const o = t.target.name, n = t.target.value;
+        s === "create" && (a = { ...a, [o]: n }), s === "edit" && (r = { ...r, [o]: n });
         break;
       }
       case "calciteTextAreaInput": {
-        const n = e.target.name, o = e.target.value;
-        i === "create" && (s = { ...s, [n]: o }), i === "edit" && (c = { ...c, [n]: o });
+        const o = t.target.name, n = t.target.value;
+        s === "create" && (a = { ...a, [o]: n }), s === "edit" && (r = { ...r, [o]: n });
         break;
       }
     }
-    i === "create" && (s.access !== "public" && p.toUpperCase() !== s.ownerName?.toUpperCase() && !t ? (this._switchToVersionCheckboxElement.value.checked = !1, this._switchToVersionCheckboxElement.value.disabled = !0, this._switchToVersion = !1) : this._switchToVersionCheckboxElement.value.disabled = !1, this._createVersionParameters = s), i === "edit" && (this._alterVersionParameters = c);
+    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);
   }
   _handleClose() {
     this.arcgisFlowItemClose.emit();
   }
   _handleSave() {
-    const { _alterVersionParameters: e, _createVersionParameters: i, _mode: h, _switchToVersion: m } = this;
+    const { _alterVersionParameters: t, _createVersionParameters: s, _mode: h, _switchToVersion: d, versionPropertiesElementProps: { strings: m } } = this, e = [".", ";", "'", '"'];
+    if (e.some((i) => s?.versionName?.includes(i)) || e.some((i) => t?.versionName?.includes(i))) {
+      this._validationError = m.validationErrors.invalidCharacters;
+      return;
+    }
     h === "create" && this.arcgisCreateVersion.emit({
-      createVersionParameters: i,
-      switchToVersion: m
+      createVersionParameters: s,
+      switchToVersion: d
     }), h === "edit" && this.arcgisAlterVersion.emit({
-      alterVersionParameters: e
+      alterVersionParameters: t
     });
   }
-  _handleSwitchToVersionChange(e) {
-    this._switchToVersion = e.target.checked;
+  _handleSwitchToVersionChange(t) {
+    this._switchToVersion = t.target.checked;
   }
   render() {
-    const { selected: e, showBackButton: i, versionPropertiesElementProps: { closable: h, currentUser: m, state: p, strings: t, versionInfo: r }, _mode: a, _ownerName: c, _versionName: s } = this, n = l`<div class="properties-buttons"><calcite-button appearance=outline width=half @click=${this._handleCancel}>${t.actions.cancelSave}</calcite-button><calcite-button width=half @click=${this._handleSave}>${t.actions.saveVersion}</calcite-button></div>`, o = l`<calcite-label>${t.input.versionAccess}<calcite-chip-group label=access @calciteChipGroupSelect=${this._handleChange} selection-mode=single-persist><calcite-chip .selected=${a === "edit" && r.access === "public" || a === "create"} label=public>${t.accessLevels.public}</calcite-chip><calcite-chip .selected=${a === "edit" && r.access === "protected"} label=protected>${t.accessLevels.protected}</calcite-chip><calcite-chip .selected=${a === "edit" && r.access === "private"} label=private>${t.accessLevels.private}</calcite-chip></calcite-chip-group></calcite-label>`, v = l`<calcite-label>${t.input.versionDescription}<calcite-text-area name=description @calciteTextAreaInput=${this._handleChange} resize=vertical .value=${a === "edit" ? r.description : ""}></calcite-text-area></calcite-label>`, b = l`<calcite-label>${t.input.versionName}<calcite-input-text name=versionName @calciteInputTextInput=${this._handleChange} max-length=62 .value=${a === "edit" ? s : ""} ${f(this._versionNameInputElement)}></calcite-input-text></calcite-label>`, _ = l`<calcite-label>${t.input.versionOwner}<calcite-input-text name=ownerName @calciteInputTextInput=${this._handleChange} .value=${a === "edit" ? c : m}></calcite-input-text></calcite-label>`, w = a === "create" ? l`<calcite-label layout=inline><calcite-checkbox checked name=switchToVersion @calciteCheckboxChange=${this._handleSwitchToVersionChange} ${f(this._switchToVersionCheckboxElement)}></calcite-checkbox>${t.actions.switchToVersion}</calcite-label>` : void 0;
-    return l`<calcite-flow-item .closable=${h} .description=${r ? r.versionIdentifier.name : ""} .heading=${r ? t.actions.editVersion : t.actions.newVersion} .selected=${e} .showBackButton=${i} @calciteFlowItemClose=${this._handleClose} ${f(this._flowItemElement)}><calcite-panel .loading=${p === "executing"}><calcite-block expanded .label=${t.headers.versionProperties}>${b}${v}${o}${_}${w}${n}</calcite-block></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>`, _ = 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>`;
   }
 }
-g("arcgis-version-management-version-properties", I);
+$("arcgis-version-management-version-properties", x);
 export {
-  I as ArcgisVersionManagementVersionProperties
+  x as ArcgisVersionManagementVersionProperties
 };

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

@@ -5,6 +5,7 @@ import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-text-area";
 import "@esri/calcite-components/components/calcite-input-text";
 import "@esri/calcite-components/components/calcite-checkbox";
+import "@esri/calcite-components/components/calcite-notice";
 import "@esri/calcite-components/components/calcite-flow-item";
 import "@esri/calcite-components/components/calcite-panel";
 import "@esri/calcite-components/components/calcite-block";

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

@@ -19,6 +19,8 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  * @cssproperty [--arcgis-layout-overlay-space-left] - _Since 4.34_ Specifies the left padding for the layout.
  * @cssproperty [--arcgis-layout-overlay-space-right] - _Since 4.34_ Specifies the right padding for the layout.
  * @cssproperty [--arcgis-view-color-focus] - _Since 5.0_ Specifies the focus outline color for the view.
+ * @cssproperty [--arcgis-table-row-background-color] - _Since 5.1_ Specifies the background color for table rows.
+ * @cssproperty [--arcgis-table-row-alt-background-color] - _Since 5.1_ Specifies the background color for alternate table rows.
  * @slot  - Default slot for adding components to the video. User is responsible for positioning the content via CSS.
  * @slot [top-left] - Slot for components positioned in the top-left corner.
  * @slot [top-right] - Slot for components positioned in the top-right corner.

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

@@ -1,26 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as o } from "../../chunks/runtime.js";
-import { css as h, html as e } from "lit";
+import { css as h, html as t } from "lit";
 import { useDirection as n } from "@arcgis/lumina/controllers";
-import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
+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 y } from "@arcgis/lumina/controllers/accessor";
+import { makeAccessorController as f } from "@arcgis/lumina/controllers/accessor";
 import { createRef as s, ref as r } from "lit/directives/ref.js";
-import { s as f, C as a, S as p } from "../../chunks/slots.js";
-import { s as w } from "../../chunks/esri-main.js";
-const v = h`:host{width:100%;height:100%}`, u = y(l, {
+import { C as a } from "../../chunks/resources.js";
+import { c as p, 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, {
   omitProps: ["container", "navigation", "scale", "ui"]
 });
 class g extends c {
   constructor() {
-    super(), this._containerRef = s(), this._direction = n(), this._mapRef = s(), this.autoDestroyDisabled = !1, this.view = u(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 = 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();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, view: 32, aria: 0, attributionMode: 1, ready: 36, layer: 0, map: 0 };
   }
   static {
-    this.styles = [w, f, v];
+    this.styles = [v, y, u];
   }
   get aria() {
     return this.view?.aria;
@@ -34,19 +35,19 @@ class g extends c {
   loaded() {
     const i = this;
     i.el.childElem = this._mapRef.value, this.view.container ??= i.el.childElem, this.manager.onLifecycle(() => [
-      t(() => this.layer, () => {
+      e(() => this.layer, () => {
         this.layer && this.view && (this.view.layer = this.layer, this.layer.loaded || this.layer.load());
       }, { initial: !0 }),
-      t(() => this.view.ready, () => {
+      e(() => this.view.ready, () => {
         this.view.ready && this.arcgisViewReadyChange.emit();
       }, { initial: this.view.ready })
     ]);
   }
   renderMain() {
-    return e`<div class=${`root ${a.base}`} ${r(this._mapRef)}></div>`;
+    return t`<div class=${`root ${a.base}`} ${r(this._mapRef)}></div>`;
   }
   render() {
-    return e`${this.renderMain()}<section class=${d(a.containerUI)} ${r(this._containerRef)}>${p({ direction: this._direction })}</section>`;
+    return t`${this.renderMain()}<section class=${d(a.containerUI)} ${r(this._containerRef)}>${w({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
   }
 }
 o("arcgis-video", g);

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

@@ -26,7 +26,7 @@ import type { VideoState } from "@arcgis/core/layers/video/types.js";
  * * Not supported in 3D [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
  * * Not supported on macOS and iOS devices.
  *
- * [![](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/video-player-video-preview.png)](https://mediaspace.esri.com/media/1_ctc3psfr)
+ * [![](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/video-player-video-preview.avif)](https://mediaspace.esri.com/media/1_ctc3psfr)
  *
  * @example
  * ```html
@@ -90,7 +90,13 @@ export abstract class ArcgisVideoPlayer extends LitElement {
    * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
    */
   accessor icon: string | undefined;
-  /** @default false */
+  /**
+   * Indicates whether to render the video player in inline mode.
+   * In inline mode, the component uses a compact control layout without a [VideoView](https://developers.arcgis.com/javascript/latest/references/core/views/VideoView/).
+   *
+   * @default false
+   * @since 5.0
+   */
   accessor inline: boolean;
   /** The component's default label. */
   accessor label: string | undefined;
@@ -212,7 +218,12 @@ export abstract class ArcgisVideoPlayer extends LitElement {
    * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
-  /** @default false */
+  /**
+   * Indicates whether to display an action in the header that toggles between inline and the default fullscreen layout.
+   *
+   * @default false
+   * @since 5.0
+   */
   accessor showFullscreenToggle: boolean;
   /** The current state of the component. */
   get state(): "error" | VideoState;

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

@@ -1,25 +1,26 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as o } from "../../chunks/runtime.js";
-import { css as n, html as e } from "lit";
-import { usePropertyChange as d } from "@arcgis/lumina/controllers";
-import { classes as h } from "@arcgis/toolkit/dom";
-import c from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
+import { c as h } from "../../chunks/runtime.js";
+import { css as u, html as e } from "lit";
 import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as u, createEvent as a, safeClassMap as g } from "@arcgis/lumina";
-import { createRef as m, ref as f } from "lit/directives/ref.js";
-import { u as v } from "../../chunks/useT9n.js";
-import { m as _ } from "../../chunks/useViewModel.js";
-import { g as w } from "../../chunks/globalCss.js";
-const p = n`: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}`, y = _(c);
-class $ extends u {
+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 { 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);
+class T extends g {
   constructor() {
-    super(...arguments), this.messages = v({ blocking: !0 }), this.viewModel = y(this), this._videoViewRef = m(), 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 = d()("state", "layer"), this.arcgisReady = a(), this.arcgisVideoReady = a();
+    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();
   }
   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 };
   }
   static {
-    this.styles = p;
+    this.styles = M;
   }
   get followingMode() {
     return this.viewModel.followingMode;
@@ -32,9 +33,9 @@ class $ extends u {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.duration, this.viewModel.ended], () => {
-        const { buffered: i, currentTime: r, duration: s, ended: l } = this.viewModel;
-        this._duration = s, this._currentTime = r, this._bufferedValue = i / (s || 1), this._currentValue = r / (s || 1), this._isBuffering = !l && this._bufferedValue < this._currentValue;
+      t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.buffered, this.viewModel.ended], () => {
+        const { buffered: i, currentTime: o, duration: n, ended: d } = this.viewModel, s = r(n), a = r(o), c = r(i);
+        this._duration = s, this._currentTime = a, this._bufferedValue = c / (s || 1), this._currentValue = a / (s || 1), this._isBuffering = !d && this._bufferedValue < this._currentValue;
       }),
       t(() => this.layer?.title, (i) => {
         this._layerTitle = i ?? void 0;
@@ -46,7 +47,7 @@ class $ extends u {
     ]);
   }
   render() {
-    return e`<div class=${g(h(this.inline ? "inline" : "root", w.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(_(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>`;
   }
   _renderLoadingScrim() {
     return this._videoViewReady ? null : e`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
@@ -57,7 +58,7 @@ class $ extends u {
   _renderVideoSection() {
     return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} @arcgisViewReadyChange=${() => {
       this._videoViewReady = !0, this.arcgisVideoReady.emit();
-    }} ${f(this._videoViewRef)}></arcgis-video>`;
+    }} ${p(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>`;
@@ -69,7 +70,7 @@ class $ extends u {
     return this._metadataVisible ? e`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
   }
 }
-o("arcgis-video-player", $);
+h("arcgis-video-player", T);
 export {
-  $ as ArcgisVideoPlayer
+  T as ArcgisVideoPlayer
 };

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

@@ -1,24 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as a } from "../../chunks/runtime.js";
-import { css as r, html as e } from "lit";
-import { formatDate as l } from "@arcgis/core/intl.js";
-import { LitElement as c, safeClassMap as n } from "@arcgis/lumina";
-import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
-import { classes as m } from "@arcgis/toolkit/dom";
-const v = r`.toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--2)}.timecode{color:var(--calcite-color-text-3);line-height:1.25rem}.controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.live-icon{color:var(--calcite-color-status-danger)}.controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`;
-function t(s) {
-  return l(Math.round(s) * 1e3, { minute: "2-digit", second: "2-digit" });
-}
-class g extends c {
+import { c as o } from "../../chunks/runtime.js";
+import { css as a, html as e } from "lit";
+import { watch as l } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as r, safeClassMap as c } from "@arcgis/lumina";
+import { classes as n } from "@arcgis/toolkit/dom";
+import { f as t } from "../../chunks/video-utils.js";
+const d = a`.toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--2)}.timecode{color:var(--calcite-color-text-3);line-height:1.25rem}.controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.live-icon{color:var(--calcite-color-status-danger)}.controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`;
+class v extends r {
   static {
     this.properties = { _isLive: 16, viewModel: 0, messages: 0, currentTime: 9, duration: 9, toggleMetadata: 0, inline: 5 };
   }
   static {
-    this.styles = v;
+    this.styles = d;
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      d(() => this.viewModel.layer?.isLive, (i) => {
+      l(() => this.viewModel.layer?.isLive, (i) => {
         this._isLive = i ?? void 0;
       }, { initial: !0 })
     ]);
@@ -26,11 +23,11 @@ class g extends c {
   render() {
     const { messages: i } = this;
     this._isLive === void 0 && (this._isLive = this.viewModel.layer?.isLive);
-    const o = this._isLive ? t(this.currentTime) : `${t(this.currentTime)} / ${t(this.duration)}`;
-    return e`<div class=${n(m("toolbar"))}><div class="controls-container"><arcgis-video-player-actions-group .inline=${this.inline} .messages=${i} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? e`<calcite-icon class="live-icon" icon=beacon></calcite-icon>` : null}${!this.inline || this._isLive ? e`<div class="timecode">${o}</div>` : null}</div>${this.inline ? null : e`<arcgis-video-player-controls-group class="controls-group" .messages=${i} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group>`}</div>`;
+    const s = this._isLive ? t(this.currentTime) : `${t(this.currentTime)} / ${t(this.duration)}`;
+    return e`<div class=${c(n("toolbar"))}><div class="controls-container"><arcgis-video-player-actions-group .inline=${this.inline} .messages=${i} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? e`<calcite-icon class="live-icon" icon=beacon></calcite-icon>` : null}${!this.inline || this._isLive ? e`<div class="timecode">${s}</div>` : null}</div>${this.inline ? null : e`<arcgis-video-player-controls-group class="controls-group" .messages=${i} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group>`}</div>`;
   }
 }
-a("arcgis-video-player-action-bar", g);
+o("arcgis-video-player-action-bar", v);
 export {
-  g as VideoPlayerActionBar
+  v as VideoPlayerActionBar
 };

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
+import type VolumeMeasurementAnalysis from "@arcgis/core/analysis/VolumeMeasurementAnalysis.js";
 import type SceneView from "@arcgis/core/views/SceneView.js";
-import type VolumeMeasurementAnalysis2 from "@arcgis/core/analysis/VolumeMeasurementAnalysis.js";
-import type { VolumeMeasureType } from "@arcgis/core/analysis/VolumeMeasurement/types";
+import type { VolumeMeasureType } from "@arcgis/core/analysis/VolumeMeasurement/types.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, HeadingLevel } from "../types.js";
 import type { VolumeMeasurementState } from "./types.js";
@@ -10,14 +10,13 @@ import type { Icon as Icon } from "@esri/calcite-components/components/calcite-i
 import type { SystemOrVolumeUnit, SystemOrLengthUnit, LengthUnit, SystemOrAreaUnit } from "@arcgis/core/core/units.js";
 
 /**
- * > The Volume Measurement component is currently in _preview_.
- * > To learn about features in preview, see the [Frequently Asked Questions](https://developers.arcgis.com/javascript/latest/faq/#what-does-the-preview-tag-mean)
+ * The Volume Measurement component is currently [in preview](https://support.esri.com/en-us/knowledge-base/faq-what-is-preview-000036425).
  *
  * The Volume Measurement component can be added to a
  * [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/) to
  * calculate and visualize the volume of ground surfaces within a defined polygonal area.
  *
- * ![measurement-volume](https://developers.arcgis.com/javascript/latest/assets/img/components/volume-measurement/volume_measurement_poster.png)
+ * ![measurement-volume](https://developers.arcgis.com/javascript/latest/assets/references/components/volume-measurement/volume_measurement_poster.avif)
  *
  * The Volume Measurement component offers multiple volume measurement modes:
  *
@@ -143,10 +142,10 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
    *
    * @since 5.0
    */
-  accessor analysis: VolumeMeasurementAnalysis2;
+  accessor analysis: VolumeMeasurementAnalysis;
   /**
    * Unit system (imperial, metric) or specific unit used for displaying the area. Possible values are listed in
-   * [areaDisplayUnitOptions](#areaDisplayUnitOptions).
+   * [areaDisplayUnitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#areaDisplayUnitOptions).
    *
    * @since 5.0
    */
@@ -154,7 +153,7 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
   /**
    * List of available units and unit systems (imperial, metric) that are shown in the component's area display unit dropdown.
    * By default, the following units are included: `metric`, `imperial`, `square-inches`, `square-feet`, `square-yards`, `square-miles`, `square-nautical-miles`, `square-us-feet`, `square-millimeters`, `square-centimeters`, `square-decimeters`, `square-meters`, `square-kilometers`, `acres`, `ares`, `hectares`.
-   * Possible [areaDisplayUnit](#areaDisplayUnit) values can only be a subset of this list.
+   * Possible [areaDisplayUnit](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#areaDisplayUnit) values can only be a subset of this list.
    *
    * @since 5.0
    */
@@ -171,7 +170,7 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
   accessor autoDestroyDisabled: boolean;
   /**
    * Unit system (imperial, metric) or specific unit used for displaying the cut and fill target elevation. Possible values are listed in
-   * [elevationDisplayUnitOptions](#elevationDisplayUnitOptions).
+   * [elevationDisplayUnitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#elevationDisplayUnitOptions).
    *
    * @since 5.0
    */
@@ -179,14 +178,14 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
   /**
    * List of available units and unit systems (imperial, metric) that are shown in the component's dropdown.
    * By default, the following units are included: `metric`, `imperial`, `meters`, `millimeters`, `centimeters`, `decimeters`, `kilometers`, `inches`, `feet`, `yards`, `miles`, `nautical-miles`, `us-feet`.
-   * Possible [elevationDisplayUnit](#elevationDisplayUnit) values can only be a subset of this list.
+   * Possible [elevationDisplayUnit](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#elevationDisplayUnit) values can only be a subset of this list.
    *
    * @since 5.0
    */
   accessor elevationDisplayUnitOptions: Array<SystemOrLengthUnit>;
   /**
    * Unit used for inputting the cut and fill target elevation.
-   * Possible values are listed in [elevationInputUnitOptions](#elevationInputUnitOptions).
+   * Possible values are listed in [elevationInputUnitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#elevationInputUnitOptions).
    *
    * This controls which unit is used when entering an elevation value via the tool's UI (for example, using the
    * shift manipulator tooltip input in "Cut & Fill Volume" mode).
@@ -199,7 +198,7 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
    *
    * By default, the following units are included: `inches`, `feet`, `yards`, `miles`, `nautical-miles`, `us-feet`,
    * `millimeters`, `centimeters`, `decimeters`, `meters`, `kilometers`.
-   * The current [elevationInputUnit](#elevationInputUnit) value can only be a subset of this list.
+   * The current [elevationInputUnit](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#elevationInputUnit) value can only be a subset of this list.
    *
    * @since 5.0
    */
@@ -360,7 +359,7 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
   accessor mode: VolumeMeasureType;
   /**
    * Unit system (imperial, metric) or specific unit used for displaying the perimeter values. Possible values are
-   * listed in [perimeterDisplayUnitOptions](#perimeterDisplayUnitOptions).
+   * listed in [perimeterDisplayUnitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#perimeterDisplayUnitOptions).
    *
    * @since 5.0
    */
@@ -368,7 +367,7 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
   /**
    * List of available units and unit systems (imperial, metric) that are shown in the component's perimeter display unit dropdown.
    * By default, the following units are included: `metric`, `imperial`, `meters`, `millimeters`, `centimeters`, `decimeters`, `kilometers`, `inches`, `feet`, `yards`, `miles`, `nautical-miles`, `us-feet`.
-   * Possible [perimeterDisplayUnit](#perimeterDisplayUnit) values can only be a subset of this list.
+   * Possible [perimeterDisplayUnit](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#perimeterDisplayUnit) values can only be a subset of this list.
    *
    * @since 5.0
    */
@@ -397,7 +396,7 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
   accessor view: SceneView | undefined;
   /**
    * Unit system (imperial, metric) or specific unit used for displaying the volume values. Possible values are listed in
-   * [volumeDisplayUnitOptions](#volumeDisplayUnitOptions).
+   * [volumeDisplayUnitOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#volumeDisplayUnitOptions).
    *
    * @since 5.0
    */
@@ -405,7 +404,7 @@ export abstract class ArcgisVolumeMeasurement extends LitElement {
   /**
    * List of available units and unit systems (imperial, metric) that are shown in the component's dropdown.
    * By default, the following units are included: `imperial`, `metric`, `liters`, `megaliters`, `gigaliters`, `cubic-millimeters`, `cubic-centimeters`, `cubic-decimeters`, `cubic-meters`, `cubic-kilometers`, `cubic-inches`, `cubic-us-feet`, `cubic-feet`, `cubic-yards`, `cubic-miles`.
-   * Possible [volumeDisplayUnit](#volumeDisplayUnit) values can only be a subset of this list.
+   * Possible [volumeDisplayUnit](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-volume-measurement/#volumeDisplayUnit) values can only be a subset of this list.
    *
    * @since 5.0
    */