@arcgis/map-components 5.1.0-next.102 → 5.1.0-next.103

package/dist/components/arcgis-slider-time/customElement.d.ts

@@ -0,0 +1,868 @@
+/// <reference path="../../index.d.ts" />
+import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type Collection from "@arcgis/core/core/Collection.js";
+import type WebMap from "@arcgis/core/WebMap.js";
+import type WebScene from "@arcgis/core/WebScene.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SceneView from "@arcgis/core/views/SceneView.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisReferenceElement, IconName } from "../types.js";
+import type { Action, DateLabelFormatter, Layout, TickConfig, TimeSliderSettings, TriggerActionEvent, Mode, State, Stops } from "./types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * The `<arcgis-slider-time>` component provides interactive time selection and playback within a defined temporal extent.
+ *
+ * @since 5.1
+ */
+export abstract class ArcgisSliderTime extends LitElement {
+  /**
+   * When defined, the actions will be displayed in an ellipsis button menu within the component.
+   * This property accepts a collection of actions.
+   * Each action is an object that must contain a unique `id`, a `title`, and an `icon`.
+   *
+   * When an action is clicked, the component emits a [@arcgisTriggerAction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#event-arcgisTriggerAction) event.
+   *
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   *
+   * @example
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, Collection, reactiveUtils] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/core/Collection.js",
+   *     "@arcgis/core/core/reactiveUtils.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2010, 0, 1),
+   *   });
+   *   timeSliderElement.actions = new Collection([
+   *     { id: "quake", icon: "exclamation-mark-triangle", title: "Jump to Earthquake" },
+   *     { id: "quake-plus-one-month", icon: "organization", title: "One month later" },
+   *   ]);
+   *
+   *   reactiveUtils.on(
+   *     () => timeSliderElement,
+   *     "arcgisTriggerAction",
+   *     (event) => {
+   *       const id = event.detail.action.id;
+   *       switch (id) {
+   *         case "quake":
+   *           console.log("Jump to Earthquake action triggered");
+   *           break;
+   *         case "quake-plus-one-month":
+   *           console.log("One month later action triggered");
+   *           break;
+   *       }
+   *     },
+   *   );
+   * </script>
+   * ```
+   */
+  accessor actions: Collection<Action> | undefined;
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * When true, the component is visually withdrawn and cannot receive user interaction.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right" disabled></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2010, 0, 1),
+   *   });
+   *
+   *   console.log("`arcgis-slider-time` disabled:", timeSliderElement.disabled); // true
+   * </script>
+   * ```
+   */
+  accessor disabled: boolean;
+  /**
+   * The dates that the `arcgis-slider-time`'s handles will snap to when manipulated.
+   *
+   * @example
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   // The arcgis-slider-time will span the first five days of 2000.
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2000, 0, 6),
+   *   });
+   *
+   *   // Specify stops at five evenly spaced intervals.
+   *   timeSliderElement.stops = {
+   *     count: 5,
+   *   };
+   *
+   *   // Display the effective stops to the console.
+   *   console.log(timeSliderElement.effectiveStops.map(
+   *     (date) => new Intl.DateTimeFormat("en-US", { dateStyle: "short" }).format(date)
+   *   ).join(", "));
+   *   // Output: "1/1/00", "1/2/00", "1/3/00", "1/4/00", "1/6/00"
+   * </script>
+   * ```
+   */
+  get effectiveStops(): Date[] | undefined;
+  /**
+   * The temporal extent of the entire slider. It defines the upper and lower bounds of the `arcgis-slider-time` and the range
+   * within which the thumbs can be manipulated.
+   *
+   * @example
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   // The arcgis-slider-time will span ten years from 2000 to 2010.
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2010, 0, 1),
+   *   });
+   * </script>
+   * ```
+   */
+  accessor fullTimeExtent: TimeExtent | undefined;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "clock"
+   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  accessor icon: IconName | undefined;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /**
+   * An optional callback function that can be used to customize the content of the minimum, maximum, and extent labels.
+   * The function receives the date(s) to be formatted, the type of label to format, the HTML element in which the
+   * formatted string will be placed, and the layout of the component as arguments.
+   *
+   * @example
+   * The following snippet will display the day of the week (e.g. Monday, Tuesday, etc.) rather than the default
+   * date format for the min, max, and extent labels.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right" mode="instant"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, TimeInterval] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/time/TimeInterval.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 3, 6),
+   *     end: new Date(2026, 3, 10),
+   *   });
+   *   timeSliderElement.stops = {
+   *     interval: new TimeInterval({
+   *       unit: "days",
+   *       value: 1,
+   *     }),
+   *   };
+   *
+   *   function getDayOfTheWeek(date: Date): string {
+   *     return date.toLocaleDateString("en-US", { weekday: "long" });
+   *   }
+   *
+   *   timeSliderElement.labelFormatFunction = (value, type, element, layout) => {
+   *   element.innerHTML =
+   *     type === "extent"
+   *       ? getDayOfTheWeek(date[0]) // Format the start date of the arcgis-slider-time's current time extent.
+   *       : getDayOfTheWeek(date);   // Format the min/max of the arcgis-slider-time's full time extent.
+   *   };
+   * </script>
+   * ```
+   */
+  accessor labelFormatFunction: DateLabelFormatter | undefined;
+  /**
+   * Defines the layout of the component. The layout determines the orientation of the component elements and how much space they consume.
+   *
+   * There are main layouts, "compact" and "wide", and an "auto" layout that switches between the two based on the component's width.
+   * The "compact" layout stacks the elements vertically and is better suited for narrow widths, while the "wide"
+   * layout arranges the elements laterally and is better for wider applications.
+   *
+   * @default "auto"
+   * @example
+   * Explicitly set the layout to "wide".
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right" layout="wide"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   */
+  accessor layout: Layout;
+  /**
+   * When `true`, `arcgis-slider-time` will not attempt to load persisted settings from a web map or web scene, even if
+   * it is associated with a view that has a web document with time slider settings.
+   *
+   * @default false
+   * @example
+   * Disable loading persisted settings from the associated view's web document.
+   * ```html
+   * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
+   *   <arcgis-slider-time slot="top-right" loadPersistedSettingsDisabled></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   */
+  accessor loadPersistedSettingsDisabled: boolean;
+  /**
+   * When `true`, `arcgis-slider-time` will restart from the beginning when it reaches the end of the slider when playing.
+   *
+   * @default false
+   * @example
+   * Set the `arcgis-slider-time` to loop continuously while playing.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right" loop></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   */
+  accessor loop: boolean;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      control?: {
+          play?: string | undefined;
+          stop?: string | undefined;
+      } | undefined;
+      emptyTimeExtent?: string | undefined;
+      noTimeExtent?: string | undefined;
+      options?: string | undefined;
+      pagination?: {
+          next?: string | undefined;
+          previous?: string | undefined;
+      } | undefined;
+  };
+  /** @internal */
+  protected readonly messages: {
+      componentLabel: string;
+      control: {
+          play: string;
+          stop: string;
+      };
+      emptyTimeExtent: string;
+      noTimeExtent: string;
+      options: string;
+      pagination: {
+          next: string;
+          previous: string;
+      };
+  } & T9nMeta<{
+      componentLabel: string;
+      control: {
+          play: string;
+          stop: string;
+      };
+      emptyTimeExtent: string;
+      noTimeExtent: string;
+      options: string;
+      pagination: {
+          next: string;
+          previous: string;
+      };
+  }>;
+  /**
+   * The `arcgis-slider-time` mode. The mode determines how the time extent is calculated based on the position of the thumb(s)
+   * and the behavior of the component when the thumbs are manipulated.
+   *
+   * @default "time-window"
+   * @example
+   * Set the mode to "instant" to show temporal data that falls on a single instance in time.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right" mode="instant"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   */
+  accessor mode: Mode;
+  /**
+   * When `arcgis-slider-time` is playing, the play rate determines the interval (in milliseconds) between animation steps.
+   *
+   * > [!WARNING]
+   * >
+   * > When `arcgis-slider-time` is associated with a `arcgis-map` or `argis-scene` component, the actual playback rate may differ.
+   * > Specifically, the current time extent will only advance after the designated play rate interval and after the view has finished updating.
+   * > This means that if the view takes longer to update than the specified play rate, the effective play rate will be slower than expected.
+   *
+   * @default 1000
+   * @example
+   * Set the play rate to 500 milliseconds (half a second).
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right" play-rate="500"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   */
+  accessor playRate: number;
+  /**
+   * 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.
+   *
+   * @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;
+  /**
+   * When `true`, the `arcgis-slider-time`'s settings will not be included in the parent web document when saved.
+   *
+   * @default false
+   * @example
+   * Disable saving persisted settings to the associated view's web document.
+   * ```html
+   * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
+   *   <arcgis-slider-time slot="top-right" savePersistedSettingsDisabled></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   */
+  accessor savePersistedSettingsDisabled: boolean;
+  /**
+   * If `true`, the time component of dates is displayed in the minimum, maximum, and time extent labels.
+   * This property is useful when the time extent of the slider is narrow or when the time component of the date is relevant to the user.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-left" show-time></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   */
+  accessor showTime: boolean;
+  /**
+   * The current state of the component.
+   *
+   * @default "disabled"
+   * @example
+   * The following snippet will log the `arcgis-slider-time`'s state to the console whenever it changes.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-right"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, reactiveUtils] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/core/reactiveUtils.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 3, 6),
+   *     end: new Date(2026, 3, 10),
+   *   });
+   *   reactiveUtils.watch(
+   *     () => timeSliderElement.state,
+   *     (state) => {
+   *       console.log("`arcgis-slider-time` state:", state);
+   *     },
+   *   );
+   * </script>
+   * ```
+   */
+  get state(): State;
+  /**
+   * Defines the stops on the `arcgis-slider-time`. Stops are specific dates that the thumb, or thumbs, will snap to when manipulated.
+   *
+   * @default { count : 10 }
+   * @example
+   * To allow thumbs to snap to evenly spaced intervals, assign an object with a `count` property as shown below.
+   * The default value for stops is ten evenly spaced intervals across the full time extent.
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.stops = {
+   *     count: 10,
+   *   };
+   * </script>
+   * ```
+   * @example
+   * To allow thumbs to be manipulated continuously without snapping to specific dates, set `stops` to `null`:
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.stops = null;
+   * </script>
+   * ```
+   * @example
+   * To allow thumbs to snap to specific dates, assign an array of dates to a `dates` property as shown below.
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.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)
+   *     ],
+   *   };
+   * </script>
+   * ```
+   * @example
+   * To allow thumbs to snap at a regular interval, such as daily, month or yearly, assign a `TimeInterval` object to an `interval` property as shown below.
+   * ```js
+   * <script type="module">
+   *   const [TimeInterval] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeInterval.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.stops = {
+   *     interval: new TimeInterval({
+   *       value: 1,
+   *       unit: "years"
+   *     }),
+   *   };
+   * </script>
+   * ```
+   * @example
+   * Lastly, both the interval and count stop definitions can optionally use a `timeExtent` property to confine the definitions to a specific range.
+   * For example, the following defines a `arcgis-slider-time` with a full time extent of the year 2026. However, daily stops only exist in the month of April.
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, TimeInterval] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/time/TimeInterval.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   // The arcgis-slider-time will span the entire year of 2026.
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 0, 1),
+   *     end: new Date(2027, 0, 1),
+   *   });
+   *
+   *   // However, the slider's thumbs will only snap to days within the month of April.
+   *   timeSliderElement.stops = {
+   *     interval: new TimeInterval({
+   *       value: 1,
+   *       unit: "days"
+   *     }),
+   *     timeExtent: new TimeExtent({
+   *       start: new Date(2026, 3, 1),
+   *       end: new Date(2026, 4, 1),
+   *     }),
+   *   };
+   * </script>
+   * ```
+   */
+  accessor stops: Stops | undefined;
+  /**
+   * Use `tickConfigs` to define custom ticks on the `arcgis-slider-time`.
+   * Custom ticks can be used instead of the default ticks provided by the component.
+   *
+   * @example
+   * The following example adds labelled ticks representing the Northern Hemisphere seasons.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-left" mode="instant"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   // Define custom ticks with a label and date.
+   *   interface Tick {
+   *     label: string;
+   *     date: Date;
+   *   }
+   *   const ticks: Tick[] = [
+   *     { label: "Winter", date: new Date(2026, 0, 1) },
+   *     { label: "Spring", date: new Date(2026, 2, 20) },
+   *     { label: "Summer", date: new Date(2026, 5, 21) },
+   *     { label: "Fall", date: new Date(2026, 8, 22) },
+   *     { label: "Winter", date: new Date(2027, 0, 1) },
+   *   ];
+   *
+   *   // Convenience function to match the tick's date to the corresponding label.
+   *   function getLabelForEpoch(epoch: number): string {
+   *     const tick = ticks.find(({ date }) => date.getTime() === epoch);
+   *     return tick?.label ?? "";
+   *   }
+   *
+   *   // Obtain a reference to the `arcgis-slider-time` element.
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   // Set the `arcgis-slider-time`'s full time extent to span the year 2026.
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 0, 1),
+   *     end: new Date(2027, 0, 1),
+   *   });
+   *
+   *   // Set the `arcgis-slider-time`'s stops to the custom ticks.
+   *   const dates = ticks.map(({ date }) => date);
+   *   timeSliderElement.stops = { dates };
+   *
+   *   // Set the `arcgis-slider-time`'s tick configurations to the custom ticks.
+   *   const values = dates.map((date) => date.getTime());
+   *   timeSliderElement.tickConfigs = [
+   *     {
+   *       // Position ticks absolutely based on the date, rather than at regular intervals.
+   *       mode: "position",
+   *       // Show labels for the ticks.
+   *       labelsVisible: true,
+   *       // Match the tick's date to the corresponding label.
+   *       labelFormatFunction: (epoch) => getLabelForEpoch(epoch),
+   *       // Location of the ticks based on the date.
+   *       values,
+   *     },
+   *   ];
+   * </script>
+   * ```
+   */
+  accessor tickConfigs: TickConfig[] | undefined;
+  /**
+   * The current time extent of the `arcgis-slider-time`.
+   *
+   * When the `arcgis-slider-time` is associated with an `arcgis-map` or `arcgis-scene` component,
+   * the `arcgis-slider-time`'s time extent will synchronize with the view's time extent.
+   * Meaning that any changes to one time extent property will be mirrored in the other.
+   *
+   * It is important to note that the time extent returned by this property will conform to the format in the table
+   * below based on the current `mode` of the `arcgis-slider-time`. Similarly, this format should be followed when assigning
+   * a new time extent to ensure proper behavior of the component and synchronization with an attached map or scene's
+   * time extent.
+   *
+   *
+   * | Mode                    | Description                   | Example                                                       |
+   * |-------------------------|-------------------------------|---------------------------------------------------------------|
+   * | `time-window`           | Non-null start and end dates  | `{ start: new Date(2019, 2, 1), end: new Date(2019, 2, 28) }` |
+   * | `instant`               | Identical start and end dates | `{ start: new Date(2019, 2, 1), end: new Date(2019, 2, 1) }`  |
+   * | `cumulative-from-start` | `null` start date             | `{ start: null, end: new Date(2019, 2, 28) }`                 |
+   * | `cumulative-from-end`   | `null` end date               | `{ start: new Date(2019, 2, 1), end: null }`                  |
+   *
+   * @example
+   * The `arcgis-slider-time` may be used indepentantly of an `arcgis-map` or `arcgis-scene` component.
+   * In the following example, the `arcgis-slider-time` does not reference an `arcgis-map` and is used to update a single layer's filter.
+   * ```html
+   *   <arcgis-map basemap="dark-gray-vector" zoom="13" center="-117.512764, 34.04355"></arcgis-map>
+   *   <arcgis-slider-time mode="time-window" play-rate="50"></arcgis-slider-time>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [GeoJSONLayer, TimeInterval, reactiveUtils] = await $arcgis.import([
+   *     "@arcgis/core/layers/GeoJSONLayer.js",
+   *     "@arcgis/core/time/TimeInterval.js",
+   *     "@arcgis/core/core/reactiveUtils.js",
+   *   ]);
+   *   const layer = new GeoJSONLayer({
+   *     url: "https://bsvensson.github.io/various-tests/geojson/usgs-earthquakes-06182019.geojson",
+   *     timeInfo: {
+   *       startField: "time",
+   *       interval: { unit: "days", value: 1 },
+   *     },
+   *   });
+   *
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   await viewElement.viewOnReady();
+   *   viewElement.add(layer);
+   *
+   *   await viewElement.viewOnReady();
+   *   const layerView = await viewElement.whenLayerView(layer);
+   *
+   *   const timeSlider = document.querySelector("arcgis-slider-time");
+   *   await timeSlider.componentOnReady()
+   *
+   *   timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo("hours");
+   *   timeSlider.stops = {
+   *     interval: new TimeInterval({ value: 1, unit: "hours" }),
+   *   };
+   *
+   *   // Whenever the `arcgis-slider-time`'s time extent changes, update the layer view's feature effect to highlight features
+   *   // that fall within the current time extent and dim features that fall outside of it.
+   *   reactiveUtils.watch(
+   *     () => timeSlider.timeExtent,
+   *     (timeExtent) => {
+   *       layerView.featureEffect = {
+   *         filter: { timeExtent },
+   *         excludedEffect: "grayscale(20%) opacity(12%)",
+   *       };
+   *     }
+   *   );
+   * ```
+   */
+  accessor timeExtent: TimeExtent | undefined;
+  /**
+   * The `arcgis-slider-time` component will display dates and times in the time zone specified by this property.
+   * By default, the time zone is inherited from an associated `arcgis-map` or `arcgis-scene` component's view.
+   * If there is no associated view, the time zone will default to `"system"`, the device's time zone.
+   *
+   * @example
+   * To specify a particular time zone, assign a valid IANA time zone string to the `time-zone` property as shown below.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-left" time-zone="Pacific/Auckland"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * @see [wikipedia - List of tz database time zones](https://wikipedia.org/wiki/List_of_tz_database_time_zones)
+   * @see [arcgis-map.timeZone](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#timeZone)
+   * @see [MapView#timeZone](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#timeZone)
+   */
+  accessor timeZone: string | undefined;
+  /**
+   * The view associated with the component. 
+   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-slider-time component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: MapView | SceneView | undefined;
+  /**
+   * This method will update multiple `arcgis-slider-time` properties and is intended to be used in conjunction with
+   * [getTimeSliderSettingsFromWebDocument](https://developers.arcgis.com/javascript/latest/references/core/support/timeUtils/#getTimeSliderSettingsFromWebDocument).
+   *
+   * `getTimeSliderSettingsFromWebDocument` is a utility function that extracts `arcgis-slider-time` settings (if any) from a
+   * published web map or web scene. This method can be used to apply those settings to the `arcgis-slider-time` component.
+   *
+   * @param settings - The `arcgis-slider-time` settings to apply to the component. This should be in the format returned by `getTimeSliderSettingsFromWebDocument`.
+   * @example
+   * The following example demonstrates how to use `getTimeSliderSettingsFromWebDocument` and `applyTimeSliderSettings`
+   * together to extract `arcgis-slider-time` settings from a web map and apply them to the `arcgis-slider-time` component.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-left"></arcgis-slider-time>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [timeUtils] = await $arcgis.import([
+   *     "@arcgis/core/support/timeUtils.js",
+   *   ]);
+   *
+   *   const webMap = new WebMap({
+   *     portalItem: {
+   *       id: "your-webmap-id",
+   *     }
+   *   });
+   *   await webMap.load();
+   *
+   *   const timeSliderSettings = await timeUtils.getTimeSliderSettingsFromWebDocument(webMap);
+   *
+   *   const timeSlider = document.querySelector("arcgis-slider-time");
+   *   await timeSlider.componentOnReady();
+   *   timeSlider.applyTimeSliderSettings(timeSliderSettings);
+   * </script>
+   * ```
+   */
+  applyTimeSliderSettings(settings: TimeSliderSettings): Promise<void>;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /**
+   * Incrementally moves the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#timeExtent) forward one stop.
+   *
+   * @example
+   * The following example demonstrates how to use the `next` method to move the `arcgis-slider-time`'s time extent forward one
+   * stop when a button is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-left" mode="instant"></arcgis-slider-time>
+   * </arcgis-map>
+   * <button id="next-button">Next</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   document.getElementById("next-button").addEventListener("click", () => {
+   *     timeSliderElement.next();
+   *   });
+   * </script>
+   * ```
+   */
+  next(): Promise<void>;
+  /**
+   * Initiates playback of the `arcgis-slider-time`, causing the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#timeExtent) to
+   * incrementally move forward based on the defined [playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#playRate) and
+   * [stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#stops).
+   *
+   * Note that when [loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#loop) is `true`, the `arcgis-slider-time` will restart from the
+   * beginning when it reaches the end of the slider while playing.
+   *
+   * @example
+   * The following example demonstrates how to use the `play` method to start playback of the `arcgis-slider-time` when a button
+   * is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-left" mode="instant"></arcgis-slider-time>
+   * </arcgis-map>
+   * <button id="play-button">Play</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   document.getElementById("play-button").addEventListener("click", () => {
+   *     timeSliderElement.play();
+   *   });
+   * </script>
+   * ```
+   */
+  play(): Promise<void>;
+  /**
+   * Incrementally moves the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-time/#timeExtent) backward one stop.
+   *
+   * @example
+   * The following example demonstrates how to use the `previous` method to move the `arcgis-slider-time`'s time extent backward
+   * one stop when a button is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-left" mode="instant"></arcgis-slider-time>
+   * </arcgis-map>
+   * <button id="previous-button">Previous</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   document.getElementById("previous-button").addEventListener("click", () => {
+   *     timeSliderElement.previous();
+   *   });
+   * </script>
+   * ```
+   */
+  previous(): Promise<void>;
+  /**
+   * Stops `arcgis-slider-time` playback.
+   *
+   * @example
+   * The following example demonstrates how to use the `stop` method to stop `arcgis-slider-time` playback when a button
+   * is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-slider-time slot="top-left" mode="instant"></arcgis-slider-time>
+   * </arcgis-map>
+   * <button id="stop-button">Stop</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   document.getElementById("stop-button").addEventListener("click", () => {
+   *     timeSliderElement.stop();
+   *   });
+   * </script>
+   * ```
+   */
+  stop(): Promise<void>;
+  /**
+   * Updates the `arcgis-slider-time` definition in the parsed web document.
+   *
+   * @param document - The web document to update, either a
+   *   [WebMap](https://developers.arcgis.com/javascript/latest/references/core/WebMap) or
+   *   [WebScene](https://developers.arcgis.com/javascript/latest/references/core/WebScene).
+   * @example
+   * The following example demonstrates how to use the `updateWebDocument` method to update the `arcgis-slider-time`'s
+   * definition in a web document when a button is clicked.
+   * ```html
+   * <arcgis-map item-id="acea555a4b6f412dae98994bcfdbc002">
+   *   <arcgis-slider-time slot="top-left"></arcgis-slider-time>
+   * </arcgis-map>
+   * <button id="save-button">Save</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   await viewElement.viewOnReady();
+   *
+   *   document.getElementById("save-button").addEventListener("click", async () => {
+   *     timeSliderElement.updateWebDocument(viewElement.map);
+   *     const portalItem = await viewElement.map.save();
+   *   });
+   * </script>
+   * ```
+   * @see [timeSlider](https://developers.arcgis.com/javascript/latest/references/core/webdoc/Widgets/#timeSlider)
+   */
+  updateWebDocument(document: WebMap | WebScene): Promise<void>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "effectiveStops" | "fullTimeExtent" | "state" | "timeExtent"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when an action is triggered on the component. */
+  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TriggerActionEvent>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisSliderTime["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisSliderTime["arcgisReady"]["detail"];
+    arcgisTriggerAction: ArcgisSliderTime["arcgisTriggerAction"]["detail"];
+  };
+}