@arcgis/map-components 5.0.0-next.2 → 5.0.0-next.21

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

@@ -1,28 +1,28 @@
-import { c as B } from "../../chunks/runtime.js";
-import { css as L, html as s } from "lit";
-import { createRef as f, ref as m } from "lit/directives/ref.js";
-import { LitElement as y, createEvent as r } from "@arcgis/lumina";
+import { c as y } from "../../chunks/runtime.js";
+import { css as B, html as i, nothing as M } from "lit";
+import { createRef as E, ref as w } from "lit/directives/ref.js";
+import { LitElement as A, createEvent as g } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
-const N = L`:host{display:none;background:#bdf2c4}:host([selected]){display:flex}calcite-block{margin-block:0}calcite-pagination{justify-content:center}`;
-class U extends y {
+v5.0.0-next.21 */
+const T = B`:host{display:none;background:#bdf2c4}:host([selected]){display:flex}calcite-block{margin-block:0}calcite-pagination{justify-content:center}`;
+class U extends A {
   constructor() {
-    super(...arguments), this._filterInputElement = f(), this._flowItemElement = f(), this.currentPage = 1, this.selected = !1, this.showBackButton = !1, this.arcgisFlowItemBack = r(), this.arcgisFlowItemClose = r(), this.arcgisGetVersions = r(), this.arcgisManageVersion = r(), this.arcgisNewVersion = r();
+    super(...arguments), this._filterInputElement = E(), this._flowItemElement = E(), this.currentPage = 1, this.selected = !1, this.showBackButton = !1, this.arcgisFlowItemBack = g(), this.arcgisFlowItemClose = g(), this.arcgisGetVersions = g(), this.arcgisManageVersion = g(), this.arcgisNewVersion = g();
   }
   static {
     this.properties = { _filteredVersionInfos: 16, currentPage: 11, selected: 7, showBackButton: 7, versionListElementProps: 0 };
   }
   static {
-    this.styles = N;
+    this.styles = T;
   }
   load() {
     this._filteredVersionInfos = this.versionListElementProps.versionInfos;
   }
   willUpdate(e) {
     if (e.has("versionListElementProps")) {
-      const t = e.get("versionListElementProps"), i = this.versionListElementProps;
-      t?.versionInfos !== i.versionInfos && (this._filteredVersionInfos = i.versionInfos, this._filterInputElement.value && this._handleFilterChange());
+      const t = e.get("versionListElementProps"), n = this.versionListElementProps;
+      t?.versionInfos !== n.versionInfos && (this._filteredVersionInfos = n.versionInfos, this._filterInputElement.value && this._handleFilterChange());
     }
   }
   updated() {
@@ -35,7 +35,7 @@ class U extends y {
   }
   _handleFilterChange() {
     const { versionListElementProps: { versionInfos: e } } = this, t = this._filterInputElement.value.value.toUpperCase();
-    this._filteredVersionInfos = t === "" ? e : e.filter((i) => i.versionIdentifier.name.toUpperCase().includes(t) || i.versionIdentifier.guid.toUpperCase().includes(t)), this._filteredVersionInfos.length && (this.currentPage = 1);
+    this._filteredVersionInfos = t === "" ? e : e.filter((n) => n.versionIdentifier.name.toUpperCase().includes(t) || n.versionIdentifier.guid.toUpperCase().includes(t)), this._filteredVersionInfos.length && (this.currentPage = 1);
   }
   _handleNoticeClosed() {
     this.versionListElementProps = { ...this.versionListElementProps, executionError: void 0 };
@@ -56,26 +56,41 @@ class U extends y {
         return e;
     }
   }
-  _paginate(e, t, i) {
-    return e.slice((i - 1) * t, i * t);
+  _paginate(e, t, n) {
+    return e.slice((n - 1) * t, n * t);
   }
   render() {
-    const { currentPage: e, selected: t, showBackButton: i, versionListElementProps: { closable: g, currentUser: p, currentVersionIdentifier: l, executionError: c, heading: u, isVersionAdministrator: v, isVersioningApiAvailable: h, pageSize: o, serviceName: I, serviceUrl: a, state: V, strings: { headers: d }, strings: n, versionInfos: $ } } = this, _ = s`<calcite-block .heading=${d.currentVersion} .description=${l.name} overlay-positioning=fixed></calcite-block>`, E = s`<calcite-action id=actionRefreshVersions icon=refresh text @click=${() => this.arcgisGetVersions.emit({ serviceUrl: a })} slot=header-actions-end><calcite-tooltip overlay-positioning=fixed reference-element=actionRefreshVersions><span>${n.actions.refreshVersions}</span></calcite-tooltip></calcite-action>`;
+    const { currentPage: e, selected: t, showBackButton: n, versionListElementProps: { closable: u, currentUser: V, currentVersionIdentifier: c, executionError: l, heading: s, isVersionAdministrator: d, isVersioningApiAvailable: p, pageSize: o, serviceName: m, serviceUrl: h, state: f, strings: { headers: a }, strings: r, versionInfos: v } } = this, $ = i`<calcite-block .heading=${a.currentVersion} .description=${c.name} overlay-positioning=fixed></calcite-block>`, I = i`<calcite-action id=actionRefreshVersions icon=refresh text @click=${() => this.arcgisGetVersions.emit({ serviceUrl: h })} slot=header-actions-end><calcite-tooltip overlay-positioning=fixed reference-element=actionRefreshVersions><span>${r.actions.refreshVersions}</span></calcite-tooltip></calcite-action>`;
     this._paginatedVersionInfos = this._filteredVersionInfos.length > o ? this._paginate(this._filteredVersionInfos, o, e) : this._filteredVersionInfos;
-    const w = this._filteredVersionInfos.length > o ? s`<calcite-pagination @calcitePaginationChange=${this._handlePaginationChange} page-size=1 .startItem=${e} .totalItems=${Math.ceil(this._filteredVersionInfos.length / o)}></calcite-pagination>` : void 0, P = this._paginate(this._paginatedVersionInfos, o, 1).map((F) => s`<arcgis-version-management-version-item .versionItemElementProps=${{
-      currentUser: p,
-      currentVersionIdentifier: l,
-      isCurrentVersionCard: !1,
-      isVersionAdministrator: v,
-      isVersioningApiAvailable: h,
-      serviceUrl: a,
-      strings: n,
-      versionInfo: F
-    }}></arcgis-version-management-version-item>`), b = $.length > o ? s`<calcite-block heading .label=${d.filterVersions} open><calcite-input-text clearable icon=search @calciteInputTextInput=${this._handleFilterChange} .placeholder=${n.actions.searchVersions} ${m(this._filterInputElement)}></calcite-input-text></calcite-block>` : void 0, k = s`<calcite-list .label=${n.labels.versionList}>${P}</calcite-list>`, x = h ? s`<calcite-fab appearance=outline-fill slot=fab text-enabled .text=${n.actions.newVersion} @click=${() => this.arcgisNewVersion.emit({ serviceUrl: a })}></calcite-fab>` : void 0, C = c ? s`<calcite-notice @calciteNoticeClose=${this._handleNoticeClosed} class="notice" closable kind=warning open scale=s slot=footer width=full><div slot=message>${this._getExecutionError(c)}</div></calcite-notice>` : void 0;
-    return s`<calcite-flow-item .closable=${g} .description=${I} .heading=${u} .selected=${t} .showBackButton=${i} @calciteFlowItemBack=${() => this.arcgisFlowItemBack.emit()} @calciteFlowItemClose=${() => this.arcgisFlowItemClose.emit()} ${m(this._flowItemElement)}><calcite-panel .loading=${V === "executing"}>${_}<calcite-panel .heading=${this._filteredVersionInfos.length ? `${n.headers.manageVersions} (${this._filteredVersionInfos.length})` : n.headers.manageVersions}>${E}${b}${k}${x}</calcite-panel>${w}${C}</calcite-panel></calcite-flow-item>`;
+    const _ = this._filteredVersionInfos.length > o ? i`<calcite-pagination @calcitePaginationChange=${this._handlePaginationChange} page-size=1 .startItem=${e} .totalItems=${Math.ceil(this._filteredVersionInfos.length / o)}></calcite-pagination>` : void 0, b = this._paginate(this._paginatedVersionInfos, o, 1).map((L) => {
+      const F = {
+        currentUser: V,
+        currentVersionIdentifier: c,
+        isCurrentVersionCard: !1,
+        isVersionAdministrator: d,
+        isVersioningApiAvailable: p,
+        serviceUrl: h,
+        strings: r,
+        versionInfo: L
+      };
+      return this._renderListItem(F);
+    }), x = v.length > o ? i`<calcite-block heading .label=${a.filterVersions} open><calcite-input-text clearable icon=search @calciteInputTextInput=${this._handleFilterChange} .placeholder=${r.actions.searchVersions} ${w(this._filterInputElement)}></calcite-input-text></calcite-block>` : void 0, k = i`<calcite-list .label=${r.labels.versionList}>${b}</calcite-list>`, C = p ? i`<calcite-fab appearance=outline-fill slot=fab text-enabled .text=${r.actions.newVersion} @click=${() => this.arcgisNewVersion.emit({ serviceUrl: h })}></calcite-fab>` : void 0, P = l ? i`<calcite-notice @calciteNoticeClose=${this._handleNoticeClosed} class="notice" closable kind=warning open scale=s slot=footer width=full><div slot=message>${this._getExecutionError(l)}</div></calcite-notice>` : void 0;
+    return i`<calcite-flow-item .closable=${u} .description=${m} .heading=${s} .selected=${t} .showBackButton=${n} @calciteFlowItemBack=${() => this.arcgisFlowItemBack.emit()} @calciteFlowItemClose=${() => this.arcgisFlowItemClose.emit()} ${w(this._flowItemElement)}><calcite-panel .loading=${f === "executing"}>${$}<calcite-panel .heading=${this._filteredVersionInfos.length ? `${r.headers.manageVersions} (${this._filteredVersionInfos.length})` : r.headers.manageVersions}>${I}${x}${k}${C}</calcite-panel>${_}${P}</calcite-panel></calcite-flow-item>`;
+  }
+  _renderListItem(e) {
+    const { currentUser: t, currentVersionIdentifier: n, isVersionAdministrator: u, isVersioningApiAvailable: V, serviceUrl: c, strings: { actions: l }, versionInfo: s } = e, d = s.versionIdentifier.name, p = d.substring(d.lastIndexOf(".") + 1), o = d.substring(0, d.lastIndexOf(".")), m = s.versionIdentifier.guid, h = `actionSwitchToVersion_${m}`, f = o.toUpperCase() === t.toUpperCase() && V || u, a = n.guid === s.versionIdentifier.guid, r = i`<calcite-action .disabled=${a} icon=code-branch @click=${() => {
+      this.arcgisManageVersion.emit({ actionType: "changeVersion", serviceUrl: c, versionInfo: s });
+    }} scale=s .text=${l.switchToVersion} text-enabled></calcite-action>`, v = i`<calcite-action .disabled=${!f || f && a} icon=trash @click=${() => {
+      this.arcgisManageVersion.emit({ actionType: "deleteVersion", serviceUrl: c, versionInfo: s });
+    }} scale=s .text=${l.deleteVersion} text-enabled></calcite-action>`, $ = i`<calcite-action .disabled=${!f || a} icon=code-branch-edit @click=${() => {
+      this.arcgisManageVersion.emit({ actionType: "editVersion", serviceUrl: c, versionInfo: s });
+    }} scale=s .text=${l.editVersion} text-enabled></calcite-action>`, I = i`<calcite-action-menu overlay-positioning=fixed slot=actions-end label>${r}${$}${v}</calcite-action-menu>`, _ = a ? void 0 : i`<calcite-tooltip overlay-positioning=fixed .referenceElement=${h}><span>${l.switchToVersion}</span></calcite-tooltip>`, b = i`<div slot=actions-start><calcite-action appearance=transparent .disabled=${a} id=${h ?? M} icon=code-branch text @click=${() => {
+      this.arcgisManageVersion.emit({ actionType: "changeVersion", serviceUrl: c, versionInfo: s });
+    }}></calcite-action>${_}</div>`;
+    return i`<calcite-list-item .description=${o} .label=${p} .value=${m}>${b}${I}</calcite-list-item>`;
   }
 }
-B("arcgis-version-management-version-list", U);
+y("arcgis-version-management-version-list", U);
 export {
   U as ArcgisVersionManagementVersionList
 };

package/dist/components/arcgis-version-management-version-list/index.d.ts

@@ -2,11 +2,12 @@ import "@esri/calcite-components/components/calcite-block";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-pagination";
-import "../arcgis-version-management-version-item/index.js";
 import "@esri/calcite-components/components/calcite-input-text";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-fab";
 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-action-menu";
+import "@esri/calcite-components/components/calcite-list-item";
 export * from "./customElement.js";

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

@@ -2,11 +2,12 @@ import "@esri/calcite-components/components/calcite-block";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-pagination";
-import "../arcgis-version-management-version-item/index.js";
 import "@esri/calcite-components/components/calcite-input-text";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-fab";
 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-action-menu";
+import "@esri/calcite-components/components/calcite-list-item";
 export * from "./customElement.js";

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

@@ -4,7 +4,7 @@ import { createRef as u, ref as f } from "lit/directives/ref.js";
 import { LitElement as $, createEvent as d } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 const I = V`:host{display:none;background:#bdf2c4}:host([selected]){display:flex}.properties-buttons{display:flex}`;
 class x extends $ {
   constructor() {

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

@@ -4,7 +4,7 @@ import { Use } from '@arcgis/lumina/controllers';
 import { default as VideoView } from '@arcgis/core/views/VideoView.js';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
-declare const useVideoView: (component: LitElement & Omit<Pick<VideoView, "map" | "navigation" | "scale" | "container" | "ui" | "layer">, ("destroyed" | "initialized" | "declaredClass" | "set" | "watch" | "addHandles" | "removeHandles" | "hasHandles") | "navigation" | "scale" | "container" | "ui"> & {
+declare const useVideoView: (component: LitElement & Omit<Pick<VideoView, "map" | "aria" | "navigation" | "scale" | "ui" | "container" | "layer">, "navigation" | "scale" | "ui" | ("destroyed" | "initialized" | "declaredClass" | "set" | "watch" | "addHandles" | "removeHandles" | "hasHandles") | "container"> & {
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 }) => VideoView;
@@ -52,6 +52,13 @@ export declare class ArcgisVideo extends LitElement {
     autoDestroyDisabled: boolean;
     /** The [VideoView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-VideoView.html) instance created and manged by the component. Accessible once the component is fully loaded. */
     readonly view: VideoView;
+    /**
+     * 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).
+     *
+     * @since 4.34
+     */
+    get aria(): __esri.VideoView["aria"];
+    set aria(value: __esri.VideoView["aria"]);
     /**
      * When `true`, this property indicates whether the view successfully satisfied all dependencies,
      * signaling that the following conditions are met.
@@ -72,7 +79,7 @@ export declare class ArcgisVideo extends LitElement {
      *
      * @default null
      */
-    map: __esri.Map | nullish | __esri.WebMap;
+    map: nullish | __esri.Map | __esri.WebMap;
     /** Destroys the view, and any associated resources, including its map, popup, and UI elements. */
     destroy(): Promise<void>;
     readonly arcgisViewReadyChange: TargetedEvent<this, void>;

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

@@ -1,35 +1,41 @@
 import { c as h } from "../../chunks/runtime.js";
-import { css as n, html as i } from "lit";
+import { css as n, html as e } from "lit";
 import { useDirection as l } from "@arcgis/lumina/controllers";
 import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
 import c from "@arcgis/core/views/VideoView.js";
 import { LitElement as m, createEvent as d, safeClassMap as s } from "@arcgis/lumina";
 import { makeAccessorController as y } from "@arcgis/lumina/controllers/accessor";
-import { createRef as r, ref as a } from "lit/directives/ref.js";
+import { createRef as a, ref as r } from "lit/directives/ref.js";
 import { s as f, C as o, a as p } from "../../chunks/slots.js";
 import { s as w } from "../../chunks/esri-main.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 const v = n`:host{width:100%;height:100%}`, u = y(c, {
   omitProps: ["container", "navigation", "scale", "ui"]
 });
 class g extends m {
   constructor() {
-    super(), this._containerRef = r(), this._direction = l(), this._mapRef = r(), this.autoDestroyDisabled = !1, this.view = u(this), this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.arcgisViewReadyChange = d();
+    super(), this._containerRef = a(), this._direction = l(), this._mapRef = a(), this.autoDestroyDisabled = !1, this.view = u(this), this.ready = this.view.ready, this.layer = this.view.layer, this.map = this.view.map, this.arcgisViewReadyChange = d();
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, view: 32, ready: 4, layer: 0, map: 0 };
+    this.properties = { autoDestroyDisabled: 5, view: 32, aria: 0, ready: 4, layer: 0, map: 0 };
   }
   static {
     this.styles = [w, f, v];
   }
+  get aria() {
+    return this.view?.aria;
+  }
+  set aria(i) {
+    this.view && (this.view.aria = i);
+  }
   async destroy() {
     await this.manager.destroy();
   }
   loaded() {
-    const e = this;
-    e.el.childElem = this._mapRef.value, this.view.container ??= e.el.childElem, this.manager.onLifecycle(() => [
+    const i = this;
+    i.el.childElem = this._mapRef.value, this.view.container ??= i.el.childElem, this.manager.onLifecycle(() => [
       t(() => this.layer, () => {
         this.layer && this.view && (this.view.layer = this.layer, this.layer.loaded || this.layer.load());
       }, { initial: !0 }),
@@ -39,10 +45,10 @@ class g extends m {
     ]);
   }
   renderMain() {
-    return i`<div class=${s(o.base)} ${a(this._mapRef)}></div>`;
+    return e`<div class=${s(o.base)} ${r(this._mapRef)}></div>`;
   }
   render() {
-    return i`<section class=${s(o.containerUI)} ${a(this._containerRef)}>${p(this._direction)}</section>${this.renderMain()}`;
+    return e`<section class=${s(o.containerUI)} ${r(this._containerRef)}>${p(this._direction)}</section>${this.renderMain()}`;
   }
 }
 h("arcgis-video", g);

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

@@ -67,7 +67,7 @@ export declare 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)
      */
     referenceElement?: ArcgisReferenceElement | string;
-    /** @deprecated since 4.34, use `slot` instead. */
+    /** @deprecated since 4.34, use [`slot`](https://developers.arcgis.com/javascript/latest/building-your-ui/#slots) instead. */
     position?: __esri.UIPosition;
     /**
      * Icon which represents the component.
@@ -78,7 +78,7 @@ export declare class ArcgisVideoPlayer extends LitElement {
      */
     icon?: string;
     /** The current state of the component. */
-    readonly state: "ready" | "error" | "playing" | "waiting" | "can-play" | "not-ready" | "paused" | "data-loaded";
+    readonly state: "ready" | "error" | "playing" | "waiting" | "paused" | "can-play" | "not-ready" | "data-loaded";
     /**
      * Determines which telemetry elements to follow when the video layer is playing.
      *

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

@@ -11,8 +11,8 @@ import { m as _ } from "../../chunks/useViewModel.js";
 import { g as y } from "../../chunks/globalCss.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
-const p = l`:host{--arcgis-video-player-controls-spacing: 16px;width:531px;height:100%}.arcgis-video-player{height:100%;container-type:size}arcgis-video{display:flex;flex:1 1 auto}@container (max-height: 0px){arcgis-video{aspect-ratio:16 / 9}}`, w = { base: "arcgis-video-player" }, V = _(c);
+v5.0.0-next.21 */
+const w = l`:host{--arcgis-video-player-controls-spacing: 16px;width:531px;height:100%}.arcgis-video-player{height:100%}arcgis-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9}`, p = { base: "arcgis-video-player" }, V = _(c);
 class M extends u {
   constructor() {
     super(...arguments), this.messages = f({ blocking: !0 }), this.viewModel = V(this), this._videoViewRef = g(), 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.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = n()("state", "layer"), this.arcgisReady = a(), this.arcgisVideoReady = a();
@@ -21,7 +21,7 @@ class M extends u {
     this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, referenceElement: 1, position: 3, icon: 1, state: 3, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, hideHeader: 5, view: 0 };
   }
   static {
-    this.styles = p;
+    this.styles = w;
   }
   get followingMode() {
     return this.viewModel.followingMode;
@@ -51,7 +51,7 @@ class M extends u {
     ]);
   }
   render() {
-    return i`<div class=${m(h(w.base, y.widget))}><calcite-panel .heading=${this.hideHeader ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</calcite-panel></div>`;
+    return i`<div class=${m(h(p.base, y.widget))}><calcite-panel .heading=${this.hideHeader ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</calcite-panel></div>`;
   }
   _renderLoadingScrim() {
     return this._videoViewReady ? null : i`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;

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

@@ -1,13 +1,13 @@
-import { c } from "../../chunks/runtime.js";
-import { css as n, html as s } from "lit";
-import { formatDate as d } from "@arcgis/core/intl.js";
-import { LitElement as p, safeClassMap as a } from "@arcgis/lumina";
-import { watch as g } from "@arcgis/core/core/reactiveUtils.js";
-import { classes as v } from "@arcgis/toolkit/dom";
+import { c as n } from "../../chunks/runtime.js";
+import { css as d, html as t } from "lit";
+import { formatDate as p } from "@arcgis/core/intl.js";
+import { LitElement as g, safeClassMap as i } from "@arcgis/lumina";
+import { watch as v } from "@arcgis/core/core/reactiveUtils.js";
+import { classes as y } from "@arcgis/toolkit/dom";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
-const y = n`.arcgis-video-player__toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:0 calc(var(--arcgis-video-player-controls-spacing) / 2) calc(var(--arcgis-video-player-controls-spacing) / 2);font-size:var(--calcite-font-size--2)}.arcgis-video-player__toolbar-top-padding{padding-top:calc(var(--arcgis-video-player-controls-spacing) / 2)}.arcgis-video-player__timecode{display:flex;align-items:center;color:var(--calcite-color-text-3)}.arcgis-video-player__controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.arcgis-video-player__live-icon{color:var(--calcite-color-status-danger)}.arcgis-video-player__controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`, e = "arcgis-video-player", o = {
+v5.0.0-next.21 */
+const m = d`.arcgis-video-player__toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:0 calc(var(--arcgis-video-player-controls-spacing) / 2) calc(var(--arcgis-video-player-controls-spacing) / 2);font-size:var(--calcite-font-size--2)}.arcgis-video-player__toolbar-top-padding{padding-top:calc(var(--arcgis-video-player-controls-spacing) / 2)}.arcgis-video-player__timecode{display:flex;align-items:center;color:var(--calcite-color-text-3)}.arcgis-video-player__controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.arcgis-video-player__live-icon{color:var(--calcite-color-status-danger)}.arcgis-video-player__controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`, e = "arcgis-video-player", o = {
   playerControlsGroup: `${e}__controls-group`,
   playerTimecode: `${e}__timecode`,
   playerToolbar: `${e}__toolbar`,
@@ -15,29 +15,29 @@ const y = n`.arcgis-video-player__toolbar{display:flex;align-items:center;backgr
   playerLiveIcon: `${e}__live-icon`,
   playerControlsContainer: `${e}__controls-container`
 };
-function t(r) {
-  return d(Math.round(r) * 1e3, { minute: "2-digit", second: "2-digit" });
+function r(s) {
+  return p(Math.round(s) * 1e3, { minute: "2-digit", second: "2-digit" });
 }
-class m extends p {
+class _ extends g {
   static {
     this.properties = { _isLive: 16, viewModel: 0, messages: 0, currentTime: 9, duration: 9, toggleMetadata: 0 };
   }
   static {
-    this.styles = y;
+    this.styles = m;
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      g(() => this.viewModel.layer?.isLive, (i) => {
-        this._isLive = i ?? void 0;
+      v(() => this.viewModel.layer?.isLive, (a) => {
+        this._isLive = a ?? void 0;
       }, { initial: !0 })
     ]);
   }
   render() {
-    const { messages: i } = this, l = this._isLive ? o.playerToolbarTopPadding : null;
-    return s`<div class=${a(v(o.playerToolbar, l))}><div class=${a(o.playerControlsContainer)}><arcgis-video-player-actions-group .messages=${i} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? s`<calcite-icon class=${a(o.playerLiveIcon)} icon=beacon></calcite-icon>` : null}<div class=${a(o.playerTimecode)}>${t(this.currentTime)} / ${t(this.duration)}</div></div><arcgis-video-player-controls-group class=${a(o.playerControlsGroup)} .messages=${i} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group></div>`;
+    const { messages: a } = this, l = this._isLive ? o.playerToolbarTopPadding : null, c = this._isLive ? r(this.currentTime) : `${r(this.currentTime)} / ${r(this.duration)}`;
+    return t`<div class=${i(y(o.playerToolbar, l))}><div class=${i(o.playerControlsContainer)}><arcgis-video-player-actions-group .messages=${a} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? t`<calcite-icon class=${i(o.playerLiveIcon)} icon=beacon></calcite-icon>` : null}<div class=${i(o.playerTimecode)}>${c}</div></div><arcgis-video-player-controls-group class=${i(o.playerControlsGroup)} .messages=${a} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group></div>`;
   }
 }
-c("arcgis-video-player-action-bar", m);
+n("arcgis-video-player-action-bar", _);
 export {
-  m as VideoPlayerActionBar
+  _ as VideoPlayerActionBar
 };

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

@@ -4,7 +4,7 @@ import { watch as s } from "@arcgis/core/core/reactiveUtils.js";
 import { LitElement as m } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 class v extends m {
   constructor() {
     super(...arguments), this._disabled = !1, this._playing = !1;

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

@@ -4,7 +4,7 @@ import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
 import { LitElement as m } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 function g(i) {
   return i.followingMode === "none" ? "circle-disallowed" : i.followingMode === "follow-sensor" ? "zoom-to-object" : i.followingMode === "follow-frame" ? "follow" : "video";
 }

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

@@ -4,7 +4,7 @@ import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
 import { LitElement as m, safeClassMap as a } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 const f = n`.arcgis-metadata-table{display:flex;flex-direction:column;border-top:1px solid var(--calcite-color-border-1)}.arcgis-metadata-table__row{display:flex;flex-direction:row;border-bottom:1px solid var(--calcite-color-border-1);border-right:1px solid var(--calcite-color-border-1)}.arcgis-metadata-table__data{flex:1;border-left:1px solid var(--calcite-color-border-1);padding:5px}.arcgis-metadata-table__empty-state{width:100%;max-inline-size:unset;transition-duration:0ms}`, o = "arcgis-metadata-table", t = {
   table: o,
   row: `${o}__row`,

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

@@ -5,7 +5,7 @@ import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
 import { LitElement as p } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 const m = ["Auto"], v = [
   { label: "0.25x", value: 0.25 },
   { label: "0.5x", value: 0.5 },

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

@@ -3,7 +3,7 @@ import { css as c, html as l } from "lit";
 import { LitElement as t, safeClassMap as s } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 const d = c`.arcgis-video-player__slider-progress-container{position:relative;z-index:1;width:100%}.arcgis-video-player__progress{--arcgis-video-player-progress-width: 2px;appearance:none;display:block;position:absolute;top:calc(50% - var(--arcgis-video-player-progress-width) / 2);left:var(--arcgis-video-player-controls-spacing);border:none;background:var(--calcite-color-border-1);cursor:pointer;width:calc(100% - var(--arcgis-video-player-controls-spacing) * 2);height:var(--arcgis-video-player-progress-width)}.arcgis-video-player__progress::-webkit-progress-bar{background-color:var(--calcite-color-border-3)}.arcgis-video-player__progress::-webkit-progress-value{background-color:var(--calcite-color-border-input)}.arcgis-video-player__progress::-moz-progress-bar{background-color:var(--calcite-color-border-3)}.arcgis-video-player__slider{--calcite-slider-track-color: transparent;background-color:var(--calcite-color-foreground-1);padding:calc(var(--arcgis-video-player-controls-spacing) / 4) calc(var(--arcgis-video-player-controls-spacing) / 2)}`, o = "arcgis-video-player", i = {
   progress: `${o}__progress`,
   slider: `${o}__slider`,

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

@@ -107,7 +107,7 @@ export declare class ArcgisWeather extends LitElement {
      * _**Note**: Individual message keys may change between releases._
      */
     messageOverrides?: typeof this.messages._overrides;
-    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
+    /** @deprecated since 4.34, use [`slot`](https://developers.arcgis.com/javascript/latest/building-your-ui/#slots) instead. */
     position?: __esri.UIPosition;
     /**
      * 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-weather/customElement.js

@@ -17,7 +17,7 @@ import x from "@arcgis/core/views/3d/environment/SnowyWeather.js";
 import $ from "@arcgis/core/views/3d/environment/SunnyWeather.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 const d = "arcgis-weather", g = {
   base: d,
   content: `${d}__content`,

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

@@ -52,7 +52,7 @@ export declare class ArcgisZoom extends LitElement {
      * _**Note**: Individual message keys may change between releases._
      */
     messageOverrides?: typeof this.messages._overrides;
-    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
+    /** @deprecated since 4.34, use [`slot`](https://developers.arcgis.com/javascript/latest/building-your-ui/#slots) instead. */
     position?: __esri.UIPosition;
     /**
      * 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-zoom/customElement.js

@@ -9,7 +9,7 @@ import { u as x } from "../../chunks/useT9n.js";
 import { u as $ } from "../../chunks/useView.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.2 */
+v5.0.0-next.21 */
 const r = {
   base: "arcgis-zoom",
   button: "arcgis-button",
@@ -41,7 +41,7 @@ function f(t) {
   const o = t?.animation?.target;
   return (o && "then" in o ? void 0 : o?.scale) ?? t?.scale ?? 0;
 }
-const E = g`.arcgis-button{--calcite-ui-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-ui-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}calcite-button{width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl)}}:host{display:flex;max-width:fit-content}.arcgis-zoom__zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.arcgis-zoom--horizontal{flex-flow:row-reverse nowrap}.arcgis-zoom--horizontal .arcgis-zoom__zoom-out{border-block-start:none;border-inline-end:solid 1px var(--calcite-color-border-1)}`;
+const E = g`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}calcite-button{width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl)}}:host{display:flex;max-width:fit-content}.arcgis-zoom__zoom-out{border-block-start:solid 1px var(--calcite-color-border-1)}.arcgis-zoom--horizontal{flex-flow:row-reverse nowrap}.arcgis-zoom--horizontal .arcgis-zoom__zoom-out{border-block-start:none;border-inline-end:solid 1px var(--calcite-color-border-1)}`;
 class O extends z {
   constructor() {
     super(...arguments), this.messages = x({}), this.view = $(this), this.autoDestroyDisabled = !1, this.icon = "magnifying-glass-plus", this.layout = "vertical", this.state = "disabled", this.arcgisPropertyChange = v()("state"), this.arcgisReady = p();

package/dist/controllers/uiController.d.ts

@@ -1,21 +1,31 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-import { LitElement, JsxNode } from '@arcgis/lumina';
+import { default as LinkChartView } from '@arcgis/core/views/LinkChartView';
+import { default as MapView } from '@arcgis/core/views/MapView';
+import { default as SceneView } from '@arcgis/core/views/SceneView';
+import { JsxNode, LitElement } from '@arcgis/lumina';
 import { GenericController } from '@arcgis/lumina/controllers';
 import { ArcgisLinkChart } from '../components/arcgis-link-chart/customElement.js';
 import { ArcgisMap } from '../components/arcgis-map/customElement.js';
 import { ArcgisPopup } from '../components/arcgis-popup/customElement.js';
 import { ArcgisScene } from '../components/arcgis-scene/customElement.js';
 type ViewComponent = ArcgisLinkChart | ArcgisMap | ArcgisScene;
+type WebGLSupportedError = {
+    name: "webgl:required";
+};
 export declare class UiController extends GenericController<never, {
     popupDisabled: boolean;
+    view: LinkChartView | MapView | SceneView;
 }> {
     direction: "ltr" | "rtl";
     popupRef?: HTMLArcgisPopupElement;
+    webGLError?: WebGLSupportedError;
     constructor(component: LitElement & ViewComponent);
+    hostLifecycle(): IHandle;
     openPopup(options: __esri.FeaturesViewModelOpenOptions): void;
     closePopup(): void;
     private _handleOpenPopup;
     private _handlePopupSlotChange;
+    private _webGLErrorAlert;
     render(): JsxNode;
 }
 export {};

package/dist/controllers/useArcgisLoadError.d.ts

@@ -0,0 +1,27 @@
+import { default as WebMap } from '@arcgis/core/WebMap.js';
+import { default as WebScene } from '@arcgis/core/WebScene.js';
+import { default as WebLinkChart } from '@arcgis/core/WebLinkChart';
+import { default as Map } from '@arcgis/core/Map.js';
+import { default as Basemap } from '@arcgis/core/Basemap.js';
+import { default as Ground } from '@arcgis/core/Ground.js';
+import { default as Layer } from '@arcgis/core/layers/Layer.js';
+import { EventEmitter } from '@arcgis/lumina';
+/** A potential source of load errors. */
+export type LoadErrorSource = Basemap | Ground | Layer | WebLinkChart | WebMap | WebScene;
+/**
+ * Watches for load errors on components that have a `map` property. Returns an event that will be
+ * emitted each time a load error is thrown. It will also update the component's `loadErrorSources`
+ * property with the latest errors.
+ *
+ * @example
+ *
+ * ```js
+ * class MyMapComponent extends LitElement {
+ *   arcgisLoadError = useArcgisLoadError(this);
+ * }
+ * ```
+ */
+export declare const useArcgisLoadError: (component: {
+    map: Map | nullish;
+    loadErrorSources?: LoadErrorSource[];
+} & import('@arcgis/lumina').LitElement) => EventEmitter;

package/dist/controllers/useArcgisViewReadyError.d.ts

@@ -0,0 +1,17 @@
+import { default as View } from '@arcgis/core/views/View.js';
+import { EventEmitter } from '@arcgis/lumina';
+/**
+ * Watches for view ready state errors on components. Returns an event that will be emitted each
+ * time the view's `readyState` indicates an error.
+ *
+ * @example
+ *
+ * ```js
+ * class MyMapComponent extends LitElement {
+ *   arcgisViewReadyError = useArcgisViewReadyError(this);
+ * }
+ * ```
+ */
+export declare const useArcgisViewReadyError: (component: {
+    view: nullish | View;
+} & import('@arcgis/lumina').LitElement) => EventEmitter;