@arcgis/core 5.0.0-next.51 → 5.0.0-next.53

package/widgets/TimeSlider/TimeSliderViewModel.d.ts

@@ -1,4 +1,630 @@
-import "../../interfaces";
+import type WebScene from "../../WebScene.js";
+import type WebMap from "../../WebMap.js";
+import type Collection from "../../core/Collection.js";
+import type TimeExtent from "../../time/TimeExtent.js";
+import type { EventedAccessor, EventedMixinProperties } from "../../core/Evented.js";
+import type { MapViewOrSceneView } from "../../views/MapViewOrSceneView.js";
+import type { Action, Stops, TimeSliderMode, TimeSliderState } from "../TimeSlider/interfaces.js";
+import type { ReadonlyArrayOrCollection } from "../../core/Collection.js";
+import type { TimeExtentProperties } from "../../time/TimeExtent.js";
 
-import TimeSliderViewModel = __esri.TimeSliderViewModel;
-export default TimeSliderViewModel;
+export interface TimeSliderViewModelProperties extends EventedMixinProperties, Partial<Pick<TimeSliderViewModel, "loop" | "mode" | "playRate" | "stops" | "view">> {
+  /**
+   * Defines actions that will appear in a menu when the user clicks the ellipsis button
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/ellipsis.png) in the widget. The
+   * ellipsis button will not display if this property is `null` or if the collection is empty.
+   * Each [Action](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-interfaces.html#Action) is defined with a unique id, a title,
+   * and an icon.
+   *
+   * The [@trigger-action](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#event-trigger-action) event fires each time an action in the menu is clicked. This event
+   * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#timeExtent) to a specific date or copying the
+   * timeExtent to the browser's clipboard.
+   *
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   *
+   * @since 4.21
+   * @example
+   * // Create a TimeSlider with two actions to snap the thumb to two specific time extents.
+   * const timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     fullTimeExtent: {
+   *       start: new Date(2011, 0, 1),
+   *       end: new Date(2012, 0, 1)
+   *     },
+   *     mode: "instant",
+   *     actions: [
+   *       {
+   *         id: "quake",
+   *         icon: "exclamation-mark-triangle",
+   *         title: "Jump to Earthquake"
+   *       },
+   *       {
+   *         id: "quake-plus-one-month",
+   *         icon: "organization",
+   *         title: "One month later"
+   *       }
+   *     ]
+   *   }
+   * });
+   * timeSlider1.on("trigger-action", (event) => {
+   *   const quake = new Date(Date.UTC(2011, 3, 11, 8, 16, 12));
+   *   const oneMonthLater = new Date(quake.getTime()).setMonth(quake.getMonth() + 1);
+   *   switch(event.action.id) {
+   *     case "quake":
+   *       timeSlider1.timeExtent = {
+   *         start: quake,
+   *         end: quake
+   *       };
+   *       break;
+   *     case "quake-plus-one-month":
+   *       timeSlider1.timeExtent = {
+   *         start: oneMonthLater,
+   *         end: oneMonthLater
+   *       };
+   *       break;
+   *   }
+   * });
+   */
+  actions?: ReadonlyArrayOrCollection<Action>;
+  /**
+   * The temporal extent of the entire slider.
+   * It defines the entire time period within which you can visualize
+   * your time aware data using the time slider widget.
+   *
+   * @example
+   * // Create a new TimeSlider
+   * let timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     view: view
+   *   }
+   * });
+   *
+   * // wait for the time-aware layer to load
+   * layer.when(() => {
+   *   // set up time slider properties based on layer timeInfo
+   *   timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent;
+   *   timeSlider.stops = {
+   *     interval: layer.timeInfo.interval
+   *     timeExtent: timeSlider.fullTimeExtent
+   *   };
+   * });
+   */
+  fullTimeExtent?: TimeExtentProperties | null;
+  /**
+   * The current time extent of the time slider. This property can be watched for
+   * updates and used to update the time extent property in queries and/or the layer filters and effects.
+   * The following table shows the `timeExtent` values returned for each [mode](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#mode).
+   *
+   * | Mode    | The timeExtent value |
+   * | ------- | -------------------- |
+   * | `time-window` | `{start: startDate, end: endDate}` |
+   * | `instant` | `{start: sameDate, end: sameDate}` |
+   * | `cumulative-from-start` | `{start: null, end: endDate}` |
+   * | `cumulative-from-end` | `{start: startDate, end: null}` |
+   *
+   * @example
+   * // Display the time extent to the console whenever it changes.
+   * const timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   mode: "time-window",
+   *   fullTimeExtent: {
+   *     start: new Date(2019, 2, 3),
+   *     end: new Date(2019, 2, 5)
+   *   },
+   *   timeExtent: {
+   *     start: new Date(2019, 2, 1),
+   *     end: new Date(2019, 2, 28)
+   *   }
+   * });
+   *
+   * reactiveUtils.watch(
+   *   () => timeSlider.timeExtent,
+   *   (timeExtent) => {
+   *     console.log("Time extent now starts at", timeExtent.start, "and finishes at:", timeExtent.end);
+   *   }
+   * );
+   */
+  timeExtent?: TimeExtentProperties | null;
+}
+
+export interface TimeSliderViewModelEvents {
+  /**
+   * Fires when a user clicks on an {@link widgets/TimeSlider/TimeSlider#action} in the [TimeSlider#actions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#actions) menu.
+   *
+   * @since 4.21
+   * @see [TimeSlider#actions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#actions)
+   * @example
+   * // Add an action to reset the time extent to the full time extent.
+   * timeSlider.actions.add({
+   *   id: "full-extent",
+   *   icon: "content-full",
+   *   title: "Full Extent"
+   * });
+   * timeSlider.on("trigger-action", (event) => {
+   *   if (event.action.id === "full-extent") {
+   *     timeSlider.timeExtent = timeSlider.fullTimeExtent;
+   *   }
+   * });
+   */
+  "trigger-action": TimeSliderViewModelTriggerActionEvent;
+}
+
+export interface TimeSliderViewModelTriggerActionEvent {
+  /** The action that was clicked. */
+  action: Action;
+}
+
+/**
+ * Provides the logic for the [TimeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html) widget and [component](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-time-slider/).
+ *
+ * @since 4.12
+ * @see [TimeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html) widget
+ * @see [Time Slider component](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-time-slider/)
+ * @see [Sample - TimeSlider widget](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider/)
+ * @see [Sample - TimeSlider component](https://developers.arcgis.com/javascript/latest/sample-code/timeslider/)
+ * @see [Sample - SceneLayer with time filter](https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayer-time/)
+ * @see [Sample - Filter features with TimeSlider widget](https://developers.arcgis.com/javascript/latest/sample-code/timeslider-filter/)
+ * @see [Sample - Filter features with TimeSlider component](https://developers.arcgis.com/javascript/latest/sample-code/timeslider-component-filter/)
+ * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
+ * @see [Sample - Visualizing wind data with VectorFieldRenderer](https://developers.arcgis.com/javascript/latest/sample-code/layers-imagery-vfrenderer/)
+ * @see [Temporal data (ArcGIS Pro)](https://pro.arcgis.com/en/pro-app/latest/help/mapping/time/temporal-data.htm)
+ * @see [Set time properties on data (ArcGIS Pro)](https://pro.arcgis.com/en/pro-app/latest/help/mapping/time/set-the-time-properties-on-data.htm)
+ * @see [Configure time settings on a layer](https://doc.arcgis.com/en/arcgis-online/create-maps/configure-time-mv.htm)
+ * @see [Set GeoJSONLayer timeInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html#timeInfo)
+ * @see [Set CSVLayer timeInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-CSVLayer.html#timeInfo)
+ * @example
+ * // Add a TimeSlider widget to the top left corner of the view.
+ * const timeSlider = new TimeSlider({
+ *   container: "timeSliderDiv",
+ *   viewModel: {
+ *     view: view,
+ *     mode: "instant",
+ *     fullTimeExtent: {
+ *       start: new Date(2000, 0, 1),
+ *       end: new Date(2010, 0, 1)
+ *     },
+ *     timeExtent: {
+ *       start: new Date(2000, 0, 1),
+ *       end: new Date(2000, 0, 1)
+ *     }
+ *   }
+ * });
+ * view.ui.add(timeSlider, "top-left");
+ */
+export default class TimeSliderViewModel extends EventedAccessor {
+  /**
+   * @deprecated
+   * Do not directly reference this property.
+   * Use EventNames and EventTypes helpers from \@arcgis/core/Evented
+   */
+  "@eventTypes": TimeSliderViewModelEvents;
+  constructor(properties?: TimeSliderViewModelProperties);
+  /**
+   * Defines actions that will appear in a menu when the user clicks the ellipsis button
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/ellipsis.png) in the widget. The
+   * ellipsis button will not display if this property is `null` or if the collection is empty.
+   * Each [Action](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-interfaces.html#Action) is defined with a unique id, a title,
+   * and an icon.
+   *
+   * The [@trigger-action](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#event-trigger-action) event fires each time an action in the menu is clicked. This event
+   * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#timeExtent) to a specific date or copying the
+   * timeExtent to the browser's clipboard.
+   *
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   *
+   * @since 4.21
+   * @example
+   * // Create a TimeSlider with two actions to snap the thumb to two specific time extents.
+   * const timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     fullTimeExtent: {
+   *       start: new Date(2011, 0, 1),
+   *       end: new Date(2012, 0, 1)
+   *     },
+   *     mode: "instant",
+   *     actions: [
+   *       {
+   *         id: "quake",
+   *         icon: "exclamation-mark-triangle",
+   *         title: "Jump to Earthquake"
+   *       },
+   *       {
+   *         id: "quake-plus-one-month",
+   *         icon: "organization",
+   *         title: "One month later"
+   *       }
+   *     ]
+   *   }
+   * });
+   * timeSlider1.on("trigger-action", (event) => {
+   *   const quake = new Date(Date.UTC(2011, 3, 11, 8, 16, 12));
+   *   const oneMonthLater = new Date(quake.getTime()).setMonth(quake.getMonth() + 1);
+   *   switch(event.action.id) {
+   *     case "quake":
+   *       timeSlider1.timeExtent = {
+   *         start: quake,
+   *         end: quake
+   *       };
+   *       break;
+   *     case "quake-plus-one-month":
+   *       timeSlider1.timeExtent = {
+   *         start: oneMonthLater,
+   *         end: oneMonthLater
+   *       };
+   *       break;
+   *   }
+   * });
+   */
+  get actions(): Collection<Action>;
+  set actions(value: ReadonlyArrayOrCollection<Action>);
+  /**
+   * Defined specific locations on the timeline that the handles will snap to when manipulated.
+   *
+   * @example
+   * // Add yearly stops starting from the beginning of 2001.
+   * let timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     fullTimeExtent: {
+   *       start: new Date(2000, 5, 1),
+   *       end: new Date(2010, 0, 1)
+   *     },
+   *     stops: {
+   *       interval: {
+   *         value: 1,
+   *         unit: "years"
+   *       }
+   *     },
+   *    timeExtent: {
+   *      start: new Date(2001, 0, 1),
+   *      end: new Date(2010, 0, 1)
+   *    }
+   *   }
+   * });
+   * timeSlider.viewModel.effectiveStops.forEach((stop) => {
+   *   console.log(stop);
+   * });
+   */
+  get effectiveStops(): Date[] | null | undefined;
+  /**
+   * The temporal extent of the entire slider.
+   * It defines the entire time period within which you can visualize
+   * your time aware data using the time slider widget.
+   *
+   * @example
+   * // Create a new TimeSlider
+   * let timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     view: view
+   *   }
+   * });
+   *
+   * // wait for the time-aware layer to load
+   * layer.when(() => {
+   *   // set up time slider properties based on layer timeInfo
+   *   timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent;
+   *   timeSlider.stops = {
+   *     interval: layer.timeInfo.interval
+   *     timeExtent: timeSlider.fullTimeExtent
+   *   };
+   * });
+   */
+  get fullTimeExtent(): TimeExtent | null | undefined;
+  set fullTimeExtent(value: TimeExtentProperties | null | undefined);
+  /**
+   * If animating, the time indicator(s) will restart if they reach the edge.
+   *
+   * @default false
+   * @example
+   * // Start a time slider animation that advances every second and restarts when it reaches the end.
+   * let timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     loop: true,
+   *     playRate: 1000
+   *   }
+   * });
+   * timeSlider.viewModel.play();
+   */
+  accessor loop: boolean;
+  /**
+   * The time slider mode. This property is used for defining if the temporal data will be displayed
+   * cumulatively up to a point in time, a single instant in time, or within a time range. See
+   * the following table for possible values.
+   *
+   * Possible Values       | Description   | Example |
+   * ----------------------|-------------- | ------- |
+   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/mode-instance.png"> |
+   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/mode-time-window.png"> |
+   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/mode-from-start.png"> |
+   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/mode-from-end.png"> |
+   *
+   * @default "time-window"
+   * @example
+   * // Create a single thumbed time slider that includes all historic content.
+   * let timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     view: view,
+   *     mode: "cumulative-from-start",
+   *     fullTimeExtent: {
+   *       start: new Date(2000, 0, 1),
+   *       end: new Date(2010, 0, 1)
+   *     },
+   *     timeExtent: {
+   *       start: null,
+   *       end: new Date(2001, 0, 1)
+   *     }
+   *   }
+   * });
+   */
+  accessor mode: TimeSliderMode;
+  /**
+   * The time (in milliseconds) between animation steps.
+   *
+   * > [!WARNING]
+   * >
+   * > When a [View](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html) is associated with a TimeSlider and the TimeSlider is playing, the playback will pause before advancing if the View is still updating.
+   * > For example, if the `playRate` is set to 1,000 (one second) and the `View` takes 1.5 seconds to render then the TimeSlider thumb(s) will advance every
+   * > 1.5 seconds rather than every second.
+   *
+   * @default 1000
+   * @example
+   * // Start a time slider animation that advances
+   * // ten times a second and stops when it reaches the end.
+   * timeSlider.set({
+   *   loop: false,
+   *   playRate: 100
+   * });
+   * timeSlider.play();
+   */
+  accessor playRate: number;
+  /**
+   * The view model's state.
+   *
+   * Value | Description
+   * ------------|-------------
+   * disabled | Widget is not ready yet.
+   * ready    | Ready for time navigation.
+   * playing  | Time is playing in the navigator.
+   *
+   * @default "disabled"
+   * @example
+   * // Display the current state of the view model.
+   * switch (timeSlider.viewModel.state) {
+   *   case "disabled":
+   *     console.log("The view is not ready or some property are not set.");
+   *     break;
+   *   case "ready":
+   *     console.log("The time slider is ready for use.");
+   *     break;
+   *   case "playing":
+   *     console.log("The time slider is currently animating.");
+   *     break;
+   * }
+   */
+  get state(): TimeSliderState;
+  /**
+   * Defines specific locations on the time slider where thumbs will snap to when manipulated.
+   * If unspecified, ten evenly spaced stops will be added.
+   *
+   * For continuous sliding set `stops` to null.
+   * ```js
+   * timeSlider.viewModel.stops = null;
+   * ```
+   *
+   * To define regularly spaced stops, parse an object with `interval` and `timeExtent` properties
+   * with types [TimeInterval](https://developers.arcgis.com/javascript/latest/api-reference/esri-time-TimeInterval.html) and [TimeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-time-TimeExtent.html) respectively.
+   * The [timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#timeExtent) property is optional and used to confine stops to a certain date range.
+   * This property is useful to commence stops on a specific day or the week or month.
+   * If a stop definition by interval results in excess of 10,000 stops then the view model
+   * will default to ten evenly spaced stops.
+   *
+   * ```js
+   * // Add yearly intervals starting from the beginning of the TimeSlider.
+   * timeSlider.viewModel.stops = {
+   *   interval: {
+   *     value: 1,
+   *     unit: "years"
+   *   }
+   * };
+   * ```
+   * Rather than regular time intervals the TimeSlider can be divided into evenly spaced
+   * stops. As with the previous method, divisions can be confined to a specific date range
+   * using the optional timeExtent property.
+   * ```js
+   * // Add stops at 15 evenly spaced intervals.
+   * timeSlider.viewModel.stops = {
+   *   count: 15
+   * };
+   * ```
+   * For irregular spaced stops simply assign an array of dates as demonstrated below.
+   * ```js
+   * // Add nine irregular stops.
+   * timeSlider.viewModel.stops = {
+   *   dates: [
+   *     new Date(2000, 0, 1), new Date(2001, 3, 8), new Date(2002, 0, 10),
+   *     new Date(2003, 12, 8), new Date(2004, 2, 19), new Date(2005, 7, 5),
+   *     new Date(2006, 9, 11), new Date(2007, 11, 21), new Date(2008, 1, 10)
+   *   ]
+   * };
+   * ```
+   * Lastly, to constrain or offset division by count or interval use the optional timeExtent property.
+   * ```js
+   * // Add yearly stops from Christmas 2019 to Christmas 2029 only
+   * timeSlider.viewModel.stops = {
+   *   interval: {
+   *     value: 1,
+   *     unit: "years"
+   *   },
+   *   timeExtent: {
+   *     start: new Date(2019, 11, 25),
+   *     end: new Date(2029, 11, 25)
+   *   }
+   * };
+   *
+   * // Likewise, add stops that represent quarters of 2019 only.
+   * timeSlider.viewModel.stops = {
+   *   count: 4,
+   *   timeExtent: {
+   *     start: new Date(2019, 0, 1),
+   *     end: new Date(2020, 0, 1)
+   *   }
+   * };
+   * ```
+   *
+   * @default { count : 10 }
+   */
+  accessor stops: Stops | null | undefined;
+  /**
+   * The current time extent of the time slider. This property can be watched for
+   * updates and used to update the time extent property in queries and/or the layer filters and effects.
+   * The following table shows the `timeExtent` values returned for each [mode](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#mode).
+   *
+   * | Mode    | The timeExtent value |
+   * | ------- | -------------------- |
+   * | `time-window` | `{start: startDate, end: endDate}` |
+   * | `instant` | `{start: sameDate, end: sameDate}` |
+   * | `cumulative-from-start` | `{start: null, end: endDate}` |
+   * | `cumulative-from-end` | `{start: startDate, end: null}` |
+   *
+   * @example
+   * // Display the time extent to the console whenever it changes.
+   * const timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   mode: "time-window",
+   *   fullTimeExtent: {
+   *     start: new Date(2019, 2, 3),
+   *     end: new Date(2019, 2, 5)
+   *   },
+   *   timeExtent: {
+   *     start: new Date(2019, 2, 1),
+   *     end: new Date(2019, 2, 28)
+   *   }
+   * });
+   *
+   * reactiveUtils.watch(
+   *   () => timeSlider.timeExtent,
+   *   (timeExtent) => {
+   *     console.log("Time extent now starts at", timeExtent.start, "and finishes at:", timeExtent.end);
+   *   }
+   * );
+   */
+  get timeExtent(): TimeExtent | null | undefined;
+  set timeExtent(value: TimeExtentProperties | null | undefined);
+  /**
+   * A reference to the [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) or [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html).
+   * If this property is set, the TimeSlider widget will update the view's [MapView#timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#timeExtent)
+   * property whenever the time slider is manipulated or updated programmatically. This property will affect
+   * any time-aware layer in the view.
+   *
+   * @example
+   * // Create and then add a TimeSlider widget and then listen to changes in the View's time extent.
+   * const timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     view: view,
+   *     mode: "instant",
+   *     fullTimeExtent: {
+   *       start: new Date(2000, 0, 1),
+   *       end: new Date(2010, 0, 1)
+   *     },
+   *     timeExtent: {
+   *       start: null,
+   *       end: new Date(2000, 0, 1)
+   *     }
+   *   }
+   * });
+   * view.ui.add(timeSlider, "top-left");
+   *
+   * reactiveUtils.watch(
+   *   () => view.timeExtent,
+   *   (timeExtent) => {
+   *     console.log("New view time is: " + timeExtent.start);
+   *   }
+   * );
+   */
+  accessor view: MapViewOrSceneView | null | undefined;
+  /**
+   * Incrementally moves the time extent forward one stop
+   *
+   * @example
+   * // Advance the slider's time extent.
+   * const timeSlider = new TimeSlider({
+   *   container: "timeSliderDiv",
+   *   viewModel: {
+   *     mode: "instant",
+   *     fullTimeExtent: {
+   *       start: new Date(2000, 0, 1),
+   *       end: new Date(2010, 0, 1)
+   *     },
+   *     timeExtent: {
+   *       start: new Date(2000, 0, 1),
+   *       end: new Date(2000, 0, 1)
+   *     }
+   *   }
+   * });
+   * timeSlider.viewModel.next();
+   */
+  next(): void;
+  /**
+   * Initiates the time slider's temporal playback.
+   *
+   * @example
+   * // Start a TimeSlider animation if not already playing.
+   * if (timeSlider.viewModel.state === "ready") {
+   *   timeSlider.viewModel.play();
+   * }
+   */
+  play(): void;
+  /**
+   * Incrementally moves the time extent back one stop.
+   *
+   * @example timeSlider.viewModel.previous();
+   */
+  previous(): void;
+  /**
+   * Stops the time slider's temporal playback.
+   *
+   * @example
+   * // Stop the current TimeSlider animation.
+   * if (timeSlider.viewModel.state === "playing") {
+   *   timeSlider.viewModel.stop();
+   * }
+   */
+  stop(): void;
+  /**
+   * Updates the {@link WebMap#TimeSlider time slider} widget definition in the provided [WebMap](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html) or [WebScene](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebScene.html).
+   *
+   * @param document - The webmap or webscene to be updated.
+   * @since 4.18
+   * @example
+   * // Load a webmap containing a timeslider widget into a MapView. Once loaded, advance the current time
+   * // extent by one stop and then update the original webmap.
+   *
+   * const webmap = new WebMap({
+   *   portalItem: {
+   *     id: "acea555a4b6f412dae98994bcfdbc002"
+   *   }
+   * });
+   *
+   * const view = new MapView({
+   *   container: "viewDiv",
+   *   map: webmap
+   * });
+   * await view.when();
+   *
+   * const timeSlider = new TimeSlider({
+   *   view
+   * });
+   * // Advance to thumb to next time extent
+   * timeSlider.next();
+   * timeSlider.updateWebDocument(webmap);
+   * webmap.save();
+   */
+  updateWebDocument(document: WebMap | WebScene): void;
+}