@arcgis/map-components 5.2.0-next.8 → 5.2.0-next.85

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

@@ -0,0 +1,1006 @@
+/// <reference path="../../index.d.ts" />
+import type TimeExtent from "@arcgis/core/time/TimeExtent.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 { ArcgisReferenceElement, IconName } from "../types.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Format, Mode, State, Stops } from "./types.js";
+
+/**
+ * The `<arcgis-time-bar>` component provides interactive time selection and playback within a defined temporal extent.
+ *
+ * > [!WARNING]
+ * >
+ * > By default, the `<arcgis-time-bar>` component will attempt to load persisted _time slider_ settings from a web map or web scene.
+ * > If this behavior is intended and time slider settings are expected, then it is advisable to refrain from initializing the component's
+ * > [fullTimeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#fullTimeExtent),
+ * > [loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#loop),
+ * > [mode](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#mode),
+ * > [playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#playRate),
+ * > [stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#stops), and
+ * > [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) properties.
+ * > The reason being is that these properties will overwritten when the saved settings are loaded.
+ * > To disable automatic loading of stored settings, set the `loadPersistedSettingsDisabled` property to `true`.
+ *
+ * > [!WARNING]
+ * >
+ * > The `time-extent` slot, if used, must contain a single `<arcgis-time-bar-slider>` component. Other elements or components are not supported.
+ *
+ * @slot [actions-end] - A slot for adding `calcite-action`s that will appear at the end of the component.
+ * @slot
+ * [settings   ] - A slot for adding custom content to the settings popover when the `showSettings` property is `true` and settings button is clicked.
+ *                     If no content is provided, the default settings component will be rendered.
+ * @slot [time-extent] - A slot for optionally inserting a `arcgis-time-bar-slider`.
+ * @since 5.2
+ * @example
+ * The following example demonstrates how to use the `<arcgis-time-bar>` component with the play, next and previous
+ * buttons displayed and the fallback label displayed in the `time-extent` slot.
+ * ```html
+ * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+ *   <arcgis-time-bar showPlay showNext showPrevious slot="top-right"></arcgis-time-bar>
+ * </arcgis-map>
+ * ```
+ * ```js
+ * <script type="module">
+ *   const [TimeExtent] = await $arcgis.import([
+ *     "@arcgis/core/time/TimeExtent.js",
+ *   ]);
+ *
+ *   const viewElement = document.querySelector("arcgis-map");
+ *   const timeBarElement = document.querySelector("arcgis-time-bar");
+ *
+ *   const [_, timeBar] = await Promise.all([
+ *     viewElement.viewOnReady(),
+ *     timeBarElement.componentOnReady(),
+ *   ]);
+ *
+ *   timeBar.fullTimeExtent = new TimeExtent({
+ *     start: new Date(2020, 0, 1),
+ *     end: new Date(2021, 0, 1),
+ *   });
+ * </script>
+ * ```
+ * @example
+ * An alternative to the default label is to use a `<arcgis-time-bar-slider>` component in the `time-extent` slot.
+ * ```html
+ * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+ *   <arcgis-time-bar showPlay showNext showPrevious slot="top-right">
+ *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
+ *   </arcgis-time-bar>
+ * </arcgis-map>
+ * ```
+ * ```js
+ * <script type="module">
+ *   const [TimeExtent] = await $arcgis.import([
+ *     "@arcgis/core/time/TimeExtent.js",
+ *   ]);
+ *
+ *   const viewElement = document.querySelector("arcgis-map");
+ *   const timeBarElement = document.querySelector("arcgis-time-bar");
+ *   const timeBarSliderElement = document.querySelector("arcgis-time-bar-slider");
+ *
+ *   const [_, timeBar] = await Promise.all([
+ *     viewElement.viewOnReady(),
+ *     timeBarElement.componentOnReady(),
+ *     timeBarSliderElement.componentOnReady(),
+ *   ]);
+ *
+ *   timeBar.fullTimeExtent = new TimeExtent({
+ *     start: new Date(2020, 0, 1),
+ *     end: new Date(2021, 0, 1),
+ *   });
+ * </script>
+ * ```
+ */
+export abstract class ArcgisTimeBar extends LitElement {
+  /**
+   * 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-time-bar/#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
+   */
+  accessor disabled: boolean;
+  /**
+   * The dates that the `arcgis-time-bar`'s handles will snap to when manipulated.
+   * This is a read-only property, values are derived from the [stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#stops) and [fullTimeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#fullTimeExtent)  properties.
+   *
+   * @example
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-right" disabled></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *   ]);
+   *
+   *   // The arcgis-slider-time will span the first five days of 2000.
+   *   timeBar.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2000, 0, 6),
+   *   });
+   *
+   *   // Specify stops at five evenly spaced intervals.
+   *   timeBar.stops = {
+   *     count: 5,
+   *   };
+   *
+   *   // Display the effective stops to the console.
+   *   console.log(timeBar.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>
+   * ```
+   * @see [fullTimeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#fullTimeExtent)
+   * @see [stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#stops)
+   */
+  get effectiveStops(): Date[] | undefined;
+  /**
+   * This property determines the format of the date displayed in the minimum, maximum, and time extent labels.
+   * If `"date"` is specified, only the localized day, month, and year components will be displayed, for example, "6/21/2026" in the "en-US" locale.
+   * If `"date-time"` is specified, the localized day, month, year, hour, minute, and second components will be displayed, for example, "6/21/2026, 3:30:00 PM" in the "en-US" locale.
+   *
+   * @default "date"
+   * @example
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-right" format="date-time"></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   */
+  accessor format: Format;
+  /**
+   * The valid or available time extent for the `arcgis-time-bar` component.
+   * When a `arcgis-time-bar-slider` is used, this property defines the range of dates that the slider's handles can be moved to.
+   *
+   * @example
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-right">
+   *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
+   *   </arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *   const timeBarSliderElement = document.querySelector("arcgis-time-bar-slider");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *     timeBarSliderElement.componentOnReady(),
+   *   ]);
+   *
+   *   timeBar.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2020, 0, 1),
+   *     end: new Date(2021, 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;
+  /**
+   * When `true`, `arcgis-time-bar` will not attempt to load persisted _time slider_ settings from a web map or web scene.
+   *
+   * @default false
+   * @example
+   * Disable loading persisted settings from the associated view's web document.
+   * ```html
+   * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
+   *   <arcgis-time-bar slot="top-right" loadPersistedSettingsDisabled></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   */
+  accessor loadPersistedSettingsDisabled: boolean;
+  /**
+   * When `true`, `arcgis-time-bar` will restart from the beginning when it reaches the end of the slider when playing.
+   *
+   * @default false
+   * @example
+   * Set the `arcgis-time-bar` to loop continuously while playing.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-right" loop></arcgis-time-bar>
+   * </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;
+      count?: string | undefined;
+      countPrompt?: string | undefined;
+      date?: string | undefined;
+      display?: string | undefined;
+      displayDescription?: string | undefined;
+      end?: string | undefined;
+      endDescription?: string | undefined;
+      everyDurationPartsTemplate?: string | undefined;
+      everyDurationTemplate?: string | undefined;
+      formatOptions?: {
+          dateAndTime?: string | undefined;
+          dateOnly?: string | undefined;
+      } | undefined;
+      loop?: string | undefined;
+      mode?: string | undefined;
+      modeDescription?: string | undefined;
+      modeOptions?: {
+          "cumulative-from-end"?: string | undefined;
+          "cumulative-from-start"?: string | undefined;
+          instant?: string | undefined;
+          "time-window"?: string | undefined;
+      } | undefined;
+      next?: string | undefined;
+      overview?: string | undefined;
+      play?: string | undefined;
+      playbackRate?: string | undefined;
+      playbackRateDescription?: string | undefined;
+      previous?: string | undefined;
+      regularInterval?: string | undefined;
+      settings?: string | undefined;
+      start?: string | undefined;
+      startDescription?: string | undefined;
+      stop?: string | undefined;
+      stopOptions?: {
+          discreteDates?: string | undefined;
+          evenlySpaced?: string | undefined;
+          evenlySpacedTemplate?: string | undefined;
+          freeMovement?: string | undefined;
+      } | undefined;
+      stops?: string | undefined;
+      stopsDescription?: string | undefined;
+      time?: string | undefined;
+      timeBarSettings?: string | undefined;
+      timeUnitOptions?: {
+          day?: string | undefined;
+          hour?: string | undefined;
+          millisecond?: string | undefined;
+          minute?: string | undefined;
+          month?: string | undefined;
+          second?: string | undefined;
+          week?: string | undefined;
+          year?: string | undefined;
+      } | undefined;
+      timeZone?: string | undefined;
+      timeZoneDescription?: string | undefined;
+      timeZoneOptions?: {
+          specific?: string | undefined;
+          system?: string | undefined;
+          unknown?: string | undefined;
+      } | undefined;
+      unit?: string | undefined;
+      unitPrompt?: string | undefined;
+      units?: string | undefined;
+  };
+  /** @internal */
+  protected readonly messages: {
+      componentLabel: string;
+      count: string;
+      countPrompt: string;
+      date: string;
+      display: string;
+      displayDescription: string;
+      end: string;
+      endDescription: string;
+      everyDurationPartsTemplate: string;
+      everyDurationTemplate: string;
+      formatOptions: {
+          dateAndTime: string;
+          dateOnly: string;
+      };
+      loop: string;
+      mode: string;
+      modeDescription: string;
+      modeOptions: {
+          "cumulative-from-end": string;
+          "cumulative-from-start": string;
+          instant: string;
+          "time-window": string;
+      };
+      next: string;
+      overview: string;
+      play: string;
+      playbackRate: string;
+      playbackRateDescription: string;
+      previous: string;
+      regularInterval: string;
+      settings: string;
+      start: string;
+      startDescription: string;
+      stop: string;
+      stopOptions: {
+          discreteDates: string;
+          evenlySpaced: string;
+          evenlySpacedTemplate: string;
+          freeMovement: string;
+      };
+      stops: string;
+      stopsDescription: string;
+      time: string;
+      timeBarSettings: string;
+      timeUnitOptions: {
+          day: string;
+          hour: string;
+          millisecond: string;
+          minute: string;
+          month: string;
+          second: string;
+          week: string;
+          year: string;
+      };
+      timeZone: string;
+      timeZoneDescription: string;
+      timeZoneOptions: {
+          specific: string;
+          system: string;
+          unknown: string;
+      };
+      unit: string;
+      unitPrompt: string;
+      units: string;
+  } & T9nMeta<{
+      componentLabel: string;
+      count: string;
+      countPrompt: string;
+      date: string;
+      display: string;
+      displayDescription: string;
+      end: string;
+      endDescription: string;
+      everyDurationPartsTemplate: string;
+      everyDurationTemplate: string;
+      formatOptions: {
+          dateAndTime: string;
+          dateOnly: string;
+      };
+      loop: string;
+      mode: string;
+      modeDescription: string;
+      modeOptions: {
+          "cumulative-from-end": string;
+          "cumulative-from-start": string;
+          instant: string;
+          "time-window": string;
+      };
+      next: string;
+      overview: string;
+      play: string;
+      playbackRate: string;
+      playbackRateDescription: string;
+      previous: string;
+      regularInterval: string;
+      settings: string;
+      start: string;
+      startDescription: string;
+      stop: string;
+      stopOptions: {
+          discreteDates: string;
+          evenlySpaced: string;
+          evenlySpacedTemplate: string;
+          freeMovement: string;
+      };
+      stops: string;
+      stopsDescription: string;
+      time: string;
+      timeBarSettings: string;
+      timeUnitOptions: {
+          day: string;
+          hour: string;
+          millisecond: string;
+          minute: string;
+          month: string;
+          second: string;
+          week: string;
+          year: string;
+      };
+      timeZone: string;
+      timeZoneDescription: string;
+      timeZoneOptions: {
+          specific: string;
+          system: string;
+          unknown: string;
+      };
+      unit: string;
+      unitPrompt: string;
+      units: string;
+  }>;
+  /**
+   * The `arcgis-time-bar` 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-time-bar slot="top-right" mode="instant"></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   */
+  accessor mode: Mode;
+  /**
+   * When `arcgis-time-bar` is playing, the play rate determines the interval (in milliseconds) between animation steps.
+   *
+   * > [!WARNING]
+   * >
+   * > When `arcgis-time-bar` 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-time-bar slot="top-right" play-rate="500"></arcgis-time-bar>
+   * </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-time-bar`'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-time-bar slot="top-right" savePersistedSettingsDisabled></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   */
+  accessor savePersistedSettingsDisabled: boolean;
+  /**
+   * When `true`, the `arcgis-time-bar` will display a *next* button on the time bar.
+   * The *next* button, when clicked will advance the time bar's [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) to the
+   * next set of stops in the [effectiveStops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#effectiveStops) array.
+   * Clicking the *next* button is equivalent to calling the [next()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#next) method.
+   *
+   * @default false
+   * @example
+   * Add a `arcgis-time-bar` to a map with the *next* button displayed.
+   * ```html
+   * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
+   *   <arcgis-time-bar slot="top-right" showNext></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   * @see [next()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#next)
+   */
+  accessor showNext: boolean;
+  /**
+   * When `true`, the `arcgis-time-bar` will display a *play* button on the time bar.
+   * The *play* button, when clicked will advance the time bar's [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) every [playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#playRate) milliseconds.
+   * Clicking the *play* button is equivalent to calling the [play()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#play) method.
+   *
+   * @default false
+   * @example
+   * Add a `arcgis-time-bar` to a map with the *play* button displayed.
+   * ```html
+   * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
+   *   <arcgis-time-bar slot="top-right" showPlay></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   * @see [play()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#play)
+   */
+  accessor showPlay: boolean;
+  /**
+   * When `true`, the `arcgis-time-bar` will display a *previous* button on the time bar.
+   * The *previous* button, when clicked will advance the time bar's [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) to the
+   * previous set of stops in the [effectiveStops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#effectiveStops) array.
+   * Clicking the *previous* button is equivalent to calling the [previous()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#previous) method.
+   *
+   * @default false
+   * @example
+   * Add a `arcgis-time-bar` to a map with the *previous* button displayed.
+   * ```html
+   * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
+   *   <arcgis-time-bar slot="top-right" showPrevious></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   * @see [previous()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#previous)
+   */
+  accessor showPrevious: boolean;
+  /**
+   * When `true`, the `arcgis-time-bar` will display a *settings* button.
+   * The *settings* button, when clicked will display a window that allows the user to configure the time-bar.
+   * To customize the content of the settings window, please use the `settings` slot.
+   *
+   * @default false
+   * @example
+   * Add a `arcgis-time-bar` to a map with the *settings* button displayed.
+   * ```html
+   * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
+   *   <arcgis-time-bar slot="top-right" showSettings></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   */
+  accessor showSettings: boolean;
+  /**
+   * The current state of the component.
+   *
+   * @example
+   * The following snippet will log the `arcgis-time-bar`'s state to the console whenever it changes.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-right">
+   *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
+   *   </arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, reactiveUtils] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/core/reactiveUtils.js",
+   *   ]);
+   *
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *   const timeBarSliderElement = document.querySelector("arcgis-time-bar-slider");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *     timeBarSliderElement.componentOnReady(),
+   *   ]);
+   *
+   *   timeBar.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 3, 6),
+   *     end: new Date(2026, 3, 10),
+   *   });
+   *
+   *   reactiveUtils.watch(
+   *     () => timeBar.state,
+   *     (state) => {
+   *       console.log("`arcgis-time-bar` state:", state);
+   *     },
+   *   );
+   * </script>
+   * ```
+   */
+  get state(): State;
+  /**
+   * Defines the stops on the `arcgis-time-bar`. 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 timeBarElement = document.querySelector("arcgis-time-bar");
+   *   const timeBar = await timeBarElement.componentOnReady();
+   *   timeBar.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 timeBarElement = document.querySelector("arcgis-time-bar");
+   *   const timeBar = await timeBarElement.componentOnReady();
+   *   timeBar.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 timeBarElement = document.querySelector("arcgis-time-bar");
+   *   const timeBar = await timeBarElement.componentOnReady();
+   *
+   *   timeBar.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 timeBarElement = document.querySelector("arcgis-time-bar");
+   *   const timeBar = await timeBarElement.componentOnReady();
+   *
+   *   // The arcgis-slider-time will span the entire year of 2026.
+   *   timeBar.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.
+   *   timeBar.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;
+  /**
+   * The current time extent of the `arcgis-time-bar`.
+   *
+   * When the `arcgis-time-bar` is associated with an `arcgis-map` or `arcgis-scene` component,
+   * the `arcgis-time-bar`'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-time-bar`. 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-time-bar` may be used indepentantly of an `arcgis-map` or `arcgis-scene` component.
+   * In the following example, the `arcgis-time-bar` 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, 34"></arcgis-map>
+   *   <arcgis-time-bar mode="time-window" play-rate="50"></arcgis-time-bar>
+   * ```
+   * ```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");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *   ]);
+   *
+   *   viewElement.add(layer);
+   *
+   *   const layerView = await viewElement.whenLayerView(layer);
+   *
+   *
+   *   timeBar.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo("hours");
+   *   timeBar.stops = {
+   *     interval: new TimeInterval({
+   *       value: 1,
+   *       unit: "hours",
+   *     }),
+   *   };
+   *
+   *   // Whenever the `arcgis-time-bar`'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(
+   *     () => timeBar.timeExtent,
+   *     (timeExtent) => {
+   *       layerView.featureEffect = {
+   *         filter: { timeExtent },
+   *         excludedEffect: "grayscale(20%) opacity(12%)",
+   *       };
+   *     }
+   *   );
+   * ```
+   */
+  accessor timeExtent: TimeExtent | undefined;
+  /**
+   * The `arcgis-time-bar` 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-time-bar slot="top-left" time-zone="Pacific/Auckland"></arcgis-time-bar>
+   * </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-time-bar 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-time-bar` 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-time-bar` settings (if any) from a
+   * published web map or web scene. This method can be used to apply those settings to the `arcgis-time-bar` component.
+   *
+   * @param settings - The `arcgis-time-bar` 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 `applyTimeSettings`
+   * together to extract `arcgis-time-bar` settings from a web map and apply them to the `arcgis-time-bar` component.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-left"></arcgis-time-bar>
+   * </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 timeBarElement = document.querySelector("arcgis-time-bar");
+   *   const timeBar = await timeBarElement.componentOnReady();
+   *   timeBar.applyTimeSettings(timeSliderSettings);
+   * </script>
+   * ```
+   */
+  applyTimeSettings(settings: Pick<ArcgisTimeBar, "fullTimeExtent" | "loop" | "mode" | "playRate" | "stops" | "timeExtent">): Promise<void>;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /**
+   * Incrementally moves the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) forward one stop.
+   *
+   * @example
+   * The following example demonstrates how to use the `next` method to move the `arcgis-time-bar`'s time extent forward one
+   * stop when a button is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-left" mode="instant"></arcgis-time-bar>
+   * </arcgis-map>
+   * <button id="next-button">Next</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *   ]);
+   *
+   *   document.getElementById("next-button").addEventListener("click", () => {
+   *     timeBar.next();
+   *   });
+   * </script>
+   * ```
+   */
+  next(): Promise<void>;
+  /**
+   * Initiates playback of the `arcgis-time-bar`, causing the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) to
+   * incrementally move forward based on the defined [playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#playRate) and
+   * [stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#stops).
+   *
+   * Note that when [loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#loop) is `true`, the `arcgis-time-bar` 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-time-bar` when a button
+   * is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-left" mode="instant"></arcgis-time-bar>
+   * </arcgis-map>
+   * <button id="play-button">Play</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *   ]);
+   *
+   *   document.getElementById("play-button").addEventListener("click", () => {
+   *     timeBar.play();
+   *   });
+   * </script>
+   * ```
+   */
+  play(): Promise<void>;
+  /**
+   * Incrementally moves the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) backward one stop.
+   *
+   * @example
+   * The following example demonstrates how to use the `previous` method to move the `arcgis-time-bar`'s time extent backward
+   * one stop when a button is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-left" mode="instant"></arcgis-time-bar>
+   * </arcgis-map>
+   * <button id="previous-button">Previous</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *   ]);
+   *
+   *   document.getElementById("previous-button").addEventListener("click", () => {
+   *     timeBar.previous();
+   *   });
+   * </script>
+   * ```
+   */
+  previous(): Promise<void>;
+  /**
+   * Stops `arcgis-time-bar` playback.
+   *
+   * @example
+   * The following example demonstrates how to use the `stop` method to stop `arcgis-time-bar` playback when a button
+   * is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar slot="top-left" mode="instant"></arcgis-time-bar>
+   * </arcgis-map>
+   * <button id="stop-button">Stop</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *   ]);
+   *
+   *   document.getElementById("stop-button").addEventListener("click", () => {
+   *     timeBar.stop();
+   *   });
+   * </script>
+   * ```
+   */
+  stop(): Promise<void>;
+  /**
+   * Updates the `arcgis-time-bar` 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-time-bar`'s
+   * definition in a web document when a button is clicked.
+   * ```html
+   * <arcgis-map item-id="acea555a4b6f412dae98994bcfdbc002">
+   *   <arcgis-time-bar slot="top-left"></arcgis-time-bar>
+   * </arcgis-map>
+   * <button id="save-button">Save</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *
+   *   const [_, timeBar] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *   ]);
+   *
+   *   document.getElementById("save-button").addEventListener("click", async () => {
+   *     timeBar.updateWebDocument(viewElement.map);
+   *     const portalItem = await viewElement.map.save();
+   *   });
+   * </script>
+   * ```
+   */
+  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>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisTimeBar["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisTimeBar["arcgisReady"]["detail"];
+  };
+}