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

package/dist/components/arcgis-table-list-next/customElement.js

@@ -0,0 +1,181 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as C } from "../../chunks/runtime.js";
+import { repeat as $ } from "lit/directives/repeat.js";
+import { keyed as _ } from "lit/directives/keyed.js";
+import M from "@arcgis/core/core/Collection.js";
+import { watch as I, on as v } from "@arcgis/core/core/reactiveUtils.js";
+import L from "@arcgis/core/layers/list/TableItemCollection.js";
+import { LitElement as E, createEvent as c, safeClassMap as b, nothing as F } from "@arcgis/lumina";
+import { usePropertyChange as T } from "@arcgis/lumina/controllers";
+import { reEmitEvent as D } from "@arcgis/lumina/controllers/accessor";
+import { classes as P } from "@arcgis/toolkit/dom";
+import { generateGuid as N } from "@arcgis/toolkit/string";
+import { createRef as U, ref as x } from "lit/directives/ref.js";
+import { html as o } from "lit";
+import { u as A } from "../../chunks/useT9n.js";
+import { g as u } from "../../chunks/globalCss.js";
+import { m as B, b as R, r as k, e as S } from "../../chunks/layer-list-utils.js";
+import { ArcgisLayerListItem as G } from "../arcgis-layer-list-next/layer-list-item/customElement.js";
+import { s as O, a as q } from "../../chunks/layer-list-next.js";
+import { c as H } from "../../chunks/css.js";
+import { m as V } from "../../chunks/useViewModel.js";
+const w = H, y = "nested", j = V(L);
+class z extends E {
+  constructor() {
+    super(...arguments), this._lastDragDetail = null, this._rootGroupUid = `table-${N()}`, this._rootListRef = U(), this._selectedDragItemLayerUid = null, this.messages = A(), this.viewModel = j(this), this._canMove = ({ dragEl: e, fromEl: t, toEl: i }, s) => {
+      const l = s === "pull" ? this.listItemCanGiveFunction : this.listItemCanReceiveFunction, a = this._getItem(e);
+      if (!a || !("sortable" in a) || !a.sortable)
+        return !1;
+      const h = this._getItem(t), d = this._getLayerType(t), n = this._getItem(i), m = this._getLayerType(i), f = !!d && !!m && d === m, g = { selected: a, from: h, to: n }, p = t?.group, r = i?.group;
+      return p && r && typeof l == "function" ? l(g) : f;
+    }, this._onPanelOpen = () => {
+      this.requestUpdate();
+    }, this._onSelectedDragItemLayerUidChange = (e) => {
+      this._selectedDragItemLayerUid = e;
+    }, this._onTriggerAction = (e, t) => {
+      this.triggerAction(e, t);
+    }, this.autoDestroyDisabled = !1, this.closed = !1, this.collapsed = !1, this.dragEnabled = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.hideNoFilterResultsNotice = !1, this.hideNoItemsNotice = !1, this.hideStatusIndicators = !1, this.icon = "table", this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.listModeDisabled = this.viewModel.listModeDisabled, this.map = this.viewModel.map, this.minDragEnabledItems = B, this.minFilterItems = R, this.selectedItems = new M(), this.selectionMode = "none", this.showCloseButton = !1, this.showCollapseButton = !1, this.showErrors = !1, this.showFilter = !1, this.showHeading = !1, this.showTemporaryTableIndicators = !1, this.tables = this.viewModel.tables, this.arcgisClose = c(), this.arcgisFilterChange = c(), this.arcgisPropertyChange = T()("state"), this.arcgisReady = c(), this.arcgisSelectedItemsChange = c(), this.arcgisTableItemsChanged = c(), this.arcgisTriggerAction = D(() => this.viewModel, "trigger-action");
+  }
+  static {
+    this.properties = { _visibleItems: 16, _openedPanelItems: 16, _dragEnabled: 16, _filterEnabled: 16, autoDestroyDisabled: 5, closed: 5, collapsed: 7, dragEnabled: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, hideNoFilterResultsNotice: 5, hideNoItemsNotice: 5, hideStatusIndicators: 5, icon: 1, label: 1, listItemCanGiveFunction: 0, listItemCanReceiveFunction: 0, listItemCreatedFunction: 0, listModeDisabled: 5, map: 0, messageOverrides: 0, minDragEnabledItems: 9, minFilterItems: 9, referenceElement: 1, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, showFilter: 5, showHeading: 5, showTemporaryTableIndicators: 5, state: 32, tableItems: 32, tables: 0, view: 0 };
+  }
+  static {
+    this.styles = [O, q];
+  }
+  get _visibleItems() {
+    return this.tableItems?.filter((e) => !e.hidden && (this.showErrors || !e.error));
+  }
+  get _openedPanelItems() {
+    return this._visibleItems.filter(({ hidden: e, panel: t }) => !e && t?.open && !t.disabled && t.flowEnabled);
+  }
+  get _dragEnabled() {
+    return this.viewModel.totalItems >= this.minDragEnabledItems && this.dragEnabled;
+  }
+  get _filterEnabled() {
+    return this.viewModel.totalItems >= this.minFilterItems && this.showFilter;
+  }
+  get state() {
+    return this.viewModel.state;
+  }
+  get tableItems() {
+    return this.viewModel.tableItems;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  willUpdate(e) {
+    e.has("map") && (this.viewModel.map = this.map), e.has("tables") && (this.viewModel.tables = this.tables), e.has("listItemCreatedFunction") && (this.viewModel.listItemCreatedFunction = this.listItemCreatedFunction);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      I(() => this.view?.map, (e) => {
+        this.map || (this.viewModel.map = e);
+      }, { initial: !0 }),
+      v(() => this.viewModel.tableItems, "change", () => {
+        k(this.selectedItems), this.arcgisTableItemsChanged.emit(), this.requestUpdate();
+      }, { initial: !0 }),
+      v(() => this.selectedItems, "change", () => this.arcgisSelectedItemsChange.emit()),
+      I(() => [this.viewModel.state, this.viewModel.totalItems], () => this.requestUpdate(), { initial: !0 }),
+      I(() => [this.filterPredicate, this._rootListRef.value], () => this._setFilterPredicate())
+    ]);
+  }
+  triggerAction(e, t) {
+    return this.viewModel.triggerAction(e, t);
+  }
+  _getItem(e) {
+    if (e?.tagName.toLowerCase() === "calcite-list-item")
+      return e.value;
+    const t = e?.getAttribute("data-item");
+    return t ? this._findItemByUid(t) : null;
+  }
+  _findItemByUid(e) {
+    const t = this.tableItems?.toArray() ?? [];
+    for (; t.length; ) {
+      const i = t.shift();
+      if (i) {
+        if (i.uid === e)
+          return i;
+        t.push(...i.children?.toArray() ?? []);
+      }
+    }
+    return null;
+  }
+  _getLayerType(e) {
+    return e?.getAttribute("data-layer-type") ?? null;
+  }
+  _setFilterPredicate() {
+    const e = this._rootListRef.value;
+    e && (e.filterPredicate = this.filterPredicate ? (t) => {
+      const i = this._getItem(t);
+      return i ? this.filterPredicate(i) : !1;
+    } : void 0);
+  }
+  _handlePanelFlowItemBack(e) {
+    e.open = !1;
+  }
+  _sortTablesToIds(e, t) {
+    e?.sort((i, s) => {
+      const l = i.uid != null ? t.indexOf(i.uid) : -1, a = s.uid != null ? t.indexOf(s.uid) : -1;
+      return l > a ? -1 : l < a ? 1 : 0;
+    });
+  }
+  _handleCalciteListDragEnd(e) {
+    const { fromEl: t, dragEl: i, oldIndex: s } = e;
+    s == null || !t || !i || t.insertBefore(i, t.children[s]);
+  }
+  _onCalciteListOrderChange(e) {
+    const { _lastDragDetail: t } = this, { toEl: i, fromEl: s, dragEl: l, newIndex: a } = e, h = t?.newIndex === a && t?.dragEl === l && t?.toEl === i && t?.fromEl === s;
+    if (!s || !i || h)
+      return;
+    this._lastDragDetail = e, this._selectedDragItemLayerUid = l.value;
+    const d = Array.from(s.children).filter((n) => n?.matches("calcite-list-item")).map((n) => n.value.layer?.uid ?? "");
+    this._sortTablesToIds(this.viewModel.tables, d);
+  }
+  _handleCalciteListChange(e) {
+    const { selectionMode: t, selectedItems: i } = this;
+    if (t === "none")
+      return;
+    const s = e.target.selectedItems.map((l) => this._getItem(l)).filter(Boolean);
+    i.removeAll(), i.addMany(s);
+  }
+  _handleFlowItemClose() {
+    this.closed = !0, this.arcgisClose.emit(), this.autoDestroyDisabled || this.destroy();
+  }
+  render() {
+    const { state: e } = this, t = {
+      [u.hidden]: e === "loading",
+      [u.disabled]: e === "disabled"
+    };
+    return o`<div class=${b(P(u.widget, u.panel, t))}>${this._renderItems()}</div>`;
+  }
+  _renderNoItemsMessage() {
+    return o`<div slot=message>${this.messages.noItemsToDisplay}</div>`;
+  }
+  _renderNoItems() {
+    return this.hideNoItemsNotice ? null : o`<div class=${b(w.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>`;
+  }
+  _renderPanelFlowItems() {
+    return $(this._openedPanelItems.toArray(), (e) => e.uid, (e, t) => {
+      const { panel: i, title: s } = e, l = () => this._handlePanelFlowItemBack(i);
+      return o`<calcite-flow-item .description=${s} .heading=${i.title} .headingLevel=${this.headingLevel} .selected=${t === this._openedPanelItems.length - 1} @calciteFlowItemBack=${(a) => {
+        a.preventDefault(), l();
+      }}><arcgis-layer-list-item-panel .item=${e} .view=${this.view}></arcgis-layer-list-item-panel><calcite-button appearance=transparent @click=${l} slot=footer-actions width=full>${this.messages.back}</calcite-button></calcite-flow-item>`;
+    });
+  }
+  _renderItems() {
+    const { collapsed: e, _visibleItems: t, _filterEnabled: i, _rootGroupUid: s, showCloseButton: l, showCollapseButton: a, showHeading: h, _dragEnabled: d, selectionMode: n, filterText: m, filterPlaceholder: f, messages: g } = this, p = [
+      o`<calcite-flow-item .closable=${l} .closed=${this.closed} .collapsed=${e} .collapsible=${a} .heading=${h ? this.label ?? g.componentLabel : void 0} .headingLevel=${this.headingLevel} .selected=${!this._openedPanelItems.length} @calciteFlowItemClose=${() => this._handleFlowItemClose()}>${t?.length ? o`<calcite-list .canPull=${(r) => this._canMove(r, "pull")} .canPut=${(r) => this._canMove(r, "put")} data-layer-type=${s ?? F} .displayMode=${y} .dragEnabled=${d} .filterEnabled=${i} .filterPlaceholder=${f} .filterProps=${S} .filterText=${i ? m : ""} .group=${s} .label=${this.label ?? g.componentLabel} selection-appearance=border .selectionMode=${n} @calciteListChange=${this._handleCalciteListChange} @calciteListDragEnd=${(r) => this._handleCalciteListDragEnd(r.detail)} @calciteListFilter=${(r) => {
+        this.filterText = r.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
+      }} @calciteListOrderChange=${(r) => this._onCalciteListOrderChange(r.detail)} ${x(this._rootListRef)}>${t.toArray().map((r) => this._renderItem(r))}${i && !this.hideNoFilterResultsNotice ? o`<div class=${b(w.filterNoResults)} slot=filter-no-results><calcite-notice kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>` : null}</calcite-list>` : this._renderNoItems()}</calcite-flow-item>`,
+      this._renderPanelFlowItems()
+    ];
+    return this.closed ? null : _("root-flow", o`<calcite-flow>${p}</calcite-flow>`);
+  }
+  _renderItem(e) {
+    return _(e.uid, G({ canMove: this._canMove, css: w, displayMode: y, dragEnabled: this.dragEnabled, hideStatusIndicators: this.hideStatusIndicators, item: e, itemType: "table", listModeDisabled: this.viewModel.listModeDisabled, messages: this.messages, rootGroupUid: this._rootGroupUid, selectedDragItemLayerUid: this._selectedDragItemLayerUid, selectedItems: this.selectedItems, selectionMode: this.selectionMode, showErrors: this.showErrors, showFilter: this.showFilter, showTemporaryTableIndicators: this.showTemporaryTableIndicators, handleAction: (t, i) => this._onTriggerAction(t, i), handlePanelOpen: this._onPanelOpen, handleSelectedDragItemLayerUidChange: this._onSelectedDragItemLayerUidChange, view: this.view }));
+  }
+}
+C("arcgis-table-list-next", z);
+export {
+  z as ArcgisTableListNext
+};

package/dist/components/arcgis-table-list-next/index.d.ts

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

package/dist/components/arcgis-table-list-next/index.js

@@ -0,0 +1,7 @@
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-flow-item";
+import "../arcgis-layer-list-item-panel/index.js";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-flow";
+export * from "./customElement.js";

package/dist/components/arcgis-table-list-next/types.d.ts

@@ -0,0 +1,37 @@
+import type Collection from "@arcgis/core/core/Collection.js";
+import type TableItemCollection from "@arcgis/core/layers/list/TableItemCollection.js";
+import type TableItem from "@arcgis/core/layers/list/TableItem.js";
+import type { ArcgisTableListNext } from "./customElement.js";
+import type { SortableList as SortableList } from "@esri/calcite-components/components/calcite-sortable-list";
+
+/** @internal */
+export type CanSortEvent = {
+  selected: null | undefined | TableItem;
+  from: null | undefined | TableItem;
+  to: null | undefined | TableItem;
+};
+
+/**
+ * @param event
+ * @internal
+ */
+export type CanSortFunction = (event: CanSortEvent) => boolean;
+
+/** @internal */
+export type DragDetail = Parameters<NonNullable<SortableList["canPull"]>>[0];
+
+/**
+ * A function that determines whether a table item matches a filter.
+ *
+ * @param item
+ */
+export type FilterPredicate = (item: TableItem) => boolean;
+
+/** @internal */
+export type SortableTables = Collection<{ uid?: string | null; }> | null | undefined;
+
+/** The properties used to configure the Table List (next). */
+export type TableListOptions = Partial<Pick<ArcgisTableListNext, "collapsed" | "dragEnabled" | "filterPlaceholder" | "filterText" | "headingLevel" | "hideStatusIndicators" | "icon" | "label" | "minFilterItems" | "selectionMode" | "showErrors" | "showFilter" | "showTemporaryTableIndicators">>
+  & {
+  listItemCreatedFunction?: TableItemCollection["listItemCreatedFunction"];
+};

package/dist/components/arcgis-template-image/customElement.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="../../index.d.ts" />
+import type TemplateListItem from "@arcgis/core/editing/templates/TemplateListItem.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+
+/**
+ * The Template Image component generates a feature swatch representing a
+ * Feature Template.
+ *
+ * @since 5.1
+ * @internal
+ */
+export abstract class ArcgisTemplateImage extends LitElement {
+  accessor template: TemplateListItem | undefined;
+}

package/dist/components/arcgis-template-image/customElement.js

@@ -0,0 +1,121 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as h } from "../../chunks/runtime.js";
+import p from "@arcgis/core/Graphic.js";
+import { css as g, html as s } from "lit";
+import { createRef as d, ref as f } from "lit/directives/ref.js";
+import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import { LitElement as _, safeStyleMap as y } from "@arcgis/lumina";
+import * as l from "@arcgis/toolkit/log";
+import { isSharedTemplateMetadata as c, isStandardFeatureTemplate as v } from "@arcgis/core/applications/Components/templateUtils.js";
+import { renderPreviewHTML as w } from "@arcgis/core/symbols/support/symbolUtils.js";
+import { isTable as I } from "@arcgis/core/applications/Components/layerUtils.js";
+const D = g`.esri-thumbnail-preview{width:22px;height:22px;background-position:50% 50%;background-repeat:no-repeat}.template-image-container{width:32px;height:32px;display:flex;align-items:center;justify-content:center}`;
+async function x(e, t, i) {
+  if (c(e) && e.thumbnail) {
+    const u = `data:image/png;base64,${e.thumbnail.imageData}`;
+    return s`<div class="esri-thumbnail-preview" style=${y({ backgroundImage: `url(${u})` })}></div>`;
+  }
+  if (I(t))
+    return s`<calcite-icon icon=table scale=s></calcite-icon>`;
+  const r = await T(t, e);
+  if (r == null)
+    return null;
+  const n = { maxSize: 24, ariaLabel: i?.ariaLabel };
+  v(e) && "renderer" in t && t.renderer?.type === "dictionary" && (n.fieldMap = t.renderer.fieldMap ?? void 0, n.feature = {
+    attributes: e.prototype.attributes ?? {}
+  });
+  const o = await w(r, n);
+  return o ? s`${b(o.outerHTML)}` : null;
+}
+async function T(e, t) {
+  if (c(t))
+    return await m(e);
+  if ("renderer" in e && e.renderer) {
+    const { renderer: i } = e, r = new p({ attributes: t.prototype.attributes });
+    if ("getSymbolAsync" in i) {
+      const a = await i.getSymbolAsync(r);
+      if (a)
+        return a;
+    }
+  }
+  return await m(e);
+}
+async function C(e) {
+  const t = e === "point" || e === "multipoint" ? await import("@arcgis/core/symbols/SimpleMarkerSymbol.js") : e === "polyline" ? await import("@arcgis/core/symbols/SimpleLineSymbol.js") : e === "polygon" || e === "mesh" || e === "multipatch" ? await import("@arcgis/core/symbols/SimpleFillSymbol.js") : null;
+  return t ? new t.default() : null;
+}
+async function m(e) {
+  return "geometryType" in e && e.geometryType ? await C(e.geometryType) : null;
+}
+class L extends _ {
+  constructor() {
+    super(...arguments), this._lastRun = 0, this._attempted = !1, this._isCurrentlyInView = !1, this._intersectionObserver = null, this._imageContainerDiv = d(), this._generatedImageData = null;
+  }
+  static {
+    this.properties = { _generatedImageData: 16, template: 0 };
+  }
+  static {
+    this.styles = D;
+  }
+  get rootLayer() {
+    return this.template?.layer?.type === "subtype-sublayer" ? this.template.layer.parent : this.template?.layer;
+  }
+  willUpdate(t) {
+    t.has("template") && (this.hasUpdated || this.template !== null) && this._resetData();
+  }
+  updated() {
+    !this._attempted && this._isCurrentlyInView && (this._attempted = !0, this._handleImage().catch((t) => {
+      l.log("warn", this, "Failed processing image");
+    }));
+  }
+  loaded() {
+    this.manager.onLifecycle(() => (this._addIntersectionObserver(), () => {
+      this._removeIntersectionObserver();
+    }));
+  }
+  _resetData() {
+    this._generatedImageData = null, this._attempted = !1;
+  }
+  async _generateImage() {
+    return this.template ? await x(this.template.template, this.template.layer) : "";
+  }
+  async _handleImage() {
+    const t = ++this._lastRun;
+    if (!this._generatedImageData || this._generatedImageData === "")
+      try {
+        const i = await this._generateImage();
+        if (this._lastRun !== t || this._generatedImageData === i)
+          return;
+        this._generatedImageData = i;
+      } finally {
+        this._attempted = !0;
+      }
+  }
+  _addIntersectionObserver() {
+    const t = {
+      // If the image gets within 50px in the Y axis, start the download.
+      rootMargin: "50px 0px",
+      threshold: 0.01
+    };
+    this._imageContainerDiv.value && requestAnimationFrame(() => {
+      this.isConnected && (this._intersectionObserver = new IntersectionObserver((i) => {
+        let r = !1;
+        i.forEach((a) => {
+          a.intersectionRatio > 0 && !r ? (r = !0, this._isCurrentlyInView = !0, this._handleImage().catch((n) => {
+            l.log("warn", this, "Failed processing image");
+          })) : this._isCurrentlyInView = !1;
+        });
+      }, t), this._intersectionObserver?.observe(this._imageContainerDiv.value));
+    });
+  }
+  _removeIntersectionObserver() {
+    this._intersectionObserver?.disconnect(), this._intersectionObserver = null;
+  }
+  render() {
+    return s`<div class="template-image-container" ${f(this._imageContainerDiv)}>${this._generatedImageData ?? ""}</div>`;
+  }
+}
+h("arcgis-template-image", L);
+export {
+  L as ArcgisTemplateImage
+};

package/dist/components/arcgis-template-image/index.d.ts

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

package/dist/components/arcgis-template-image/index.js

@@ -0,0 +1,2 @@
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-time-bar/TimeBarViewModel.d.ts

@@ -0,0 +1,71 @@
+import type Accessor from "@arcgis/core/core/Accessor.js";
+import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SceneView from "@arcgis/core/views/SceneView.js";
+import type TimeInterval from "@arcgis/core/time/TimeInterval.js";
+import type WebMap from "@arcgis/core/WebMap.js";
+import type WebScene from "@arcgis/core/WebScene.js";
+import type { DateTimeFormatOptions } from "@arcgis/core/intl/date.js";
+import type { Format, Mode, State, Stops, TickFormat } from "./types.js";
+import type { TimeZone } from "@arcgis/core/time/types.js";
+
+export class TimeBarViewModel extends Accessor {
+  /** @default false */
+  accessor disabled: boolean;
+  get effectiveStops(): Date[] | undefined;
+  get effectiveStopsEpoch(): number[] | undefined;
+  /**
+   * Indicates whether the `fullTimeExtent` starts before the common era (BCE).
+   * This property is used to determine if era information should be included in the time slider's date labels.
+   */
+  get era(): DateTimeFormatOptions["era"];
+  /** @default "date" */
+  accessor format: Format;
+  accessor fullTimeExtent: TimeExtent | undefined;
+  /** Convenience property to determine if the component is interactive. */
+  get interactive(): boolean;
+  /** Determines if the current timeExtent is outside the bounds of the fullTimeExtent or otherwise invalid. */
+  get isOutOfRange(): boolean;
+  /** @default false */
+  accessor loadPersistedSettingsDisabled: boolean;
+  accessor locale: string | undefined;
+  /** @default false */
+  accessor loop: boolean;
+  accessor majorTickFormat: DateTimeFormatOptions | undefined;
+  get majorTickFormatter(): (value: number) => string;
+  /** @default "time-window" */
+  accessor mode: Mode;
+  accessor playRate: number;
+  /** @default false */
+  accessor savePersistedSettingsDisabled: boolean;
+  get state(): State;
+  accessor stops: Stops | undefined;
+  get tickFormats(): TickFormat[];
+  accessor timeExtent: TimeExtent | undefined;
+  get timeZone(): TimeZone;
+  set timeZone(value: TimeZone | null | undefined);
+  accessor view: MapView | SceneView | undefined;
+  /** View's time zone, if available. */
+  get viewTimeZone(): TimeZone | undefined;
+  destroy(): void;
+  /** @param date */
+  formatDate(date: Date): string;
+  /** @param date */
+  formatDateTime(date: Date): string;
+  /**
+   * @param value
+   * @param formatOptions
+   */
+  formatNumber(value: number, formatOptions: Intl.NumberFormatOptions): string;
+  /** @param date */
+  formatTime(date: Date): string;
+  /** @param interval */
+  getTickValues(interval: TimeInterval): number[];
+  initialize(): Promise<void>;
+  next(): void;
+  play(): void;
+  previous(): void;
+  stop(): void;
+  /** @param document */
+  updateWebDocument(document: WebMap | WebScene): void;
+}