@arcgis/map-components 5.0.0-next.13 → 5.0.0-next.130

package/dist/components/arcgis-time-of-day-slider/customElement.js

@@ -0,0 +1,80 @@
+import { c as p } from "../../chunks/runtime.js";
+import { keyed as b } from "lit/directives/keyed.js";
+import { substitute as T } from "@arcgis/core/intl.js";
+import { LitElement as k, createEvent as _, safeClassMap as v } from "@arcgis/lumina";
+import { css as f, html as c } from "lit";
+import { u as F } from "../../chunks/useT9n.js";
+import { c as s } from "../../chunks/time-utils.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.128 */
+const L = f`.ticks-container{width:100%;position:relative}.time-range-label{position:relative;width:100%;font-size:var(--calcite-font-size-sm);font-variant-numeric:tabular-nums;line-height:1em;text-align:center;padding-top:3px;padding-bottom:var(--calcite-spacing-lg)}.main-ticks,.secondary-ticks{position:absolute;inset:0}.main-ticks{--arcgis-ticks-label-width: min-content;--arcgis-ticks-label-text-align: center;--calcite-font-size--2: var(--calcite-font-size-xs);word-break:normal;word-break:auto-phrase;white-space:nowrap;font-variant-numeric:tabular-nums}.wrap-labels .main-ticks{white-space:normal}.secondary-ticks{--arcgis-ticks-tick-length: 3px;--arcgis-ticks-gap: 16px}`;
+class w extends k {
+  constructor() {
+    super(...arguments), this.messages = F({ blocking: !0 }), this._shouldWrapLabels = !1, this._sliderLabelFormatter = (t) => "", this._tickLabelFormatter = (t) => "", this.mode = "range", this.startTime = 0, this.endTime = 0, this.arcgisTimeChange = _();
+  }
+  static {
+    this.properties = { _shouldWrapLabels: 16, _values: 16, _sliderLabelFormatter: 16, _tickLabelFormatter: 16, mode: 1, startTime: 9, endTime: 9, label: 1 };
+  }
+  static {
+    this.styles = L;
+  }
+  willUpdate(t) {
+    (t.has("mode") || t.has("startTime") || t.has("endTime")) && (this._values = this.mode === "single" ? [this.startTime] : [this.startTime, this.endTime]), t.has("messages") && this._updateLabelFormatters();
+  }
+  _getSliderLabelFormatter(t) {
+    const e = new Intl.DateTimeFormat(t, h);
+    return (n) => {
+      const o = new Date(n);
+      let a = e.format(o);
+      return n !== 0 && a === "00:00" && (a = "24:00"), a;
+    };
+  }
+  _getTickLabelFormatter(t) {
+    const e = new Intl.DateTimeFormat(t, h), n = new Intl.DateTimeFormat(t, S);
+    return (o) => {
+      const a = Math.round(s(o, "milliseconds", "hours")), m = new Date(s(a, "hours", "milliseconds"));
+      let i = e.format(m);
+      if (i.includes(" ")) {
+        i = n.format(m), i = i.replace(":00", "");
+        const u = "⁠";
+        i = i.split(" ").map((g) => Array.from(g).join(u)).join(" ");
+      }
+      return i;
+    };
+  }
+  _setStartTime(t) {
+    this.startTime = t, this.arcgisTimeChange.emit();
+  }
+  _setRange(t, e) {
+    this.startTime = t, this.endTime = e, this.arcgisTimeChange.emit();
+  }
+  _updateLabelFormatters() {
+    const t = this.messages._lang;
+    this._sliderLabelFormatter = this._getSliderLabelFormatter(t), this._tickLabelFormatter = this._getTickLabelFormatter(t), this._shouldWrapLabels = ["ar", "bg", "el", "en", "ko", "zh-HK", "zh-TW"].includes(this.messages._t9nLocale);
+  }
+  render() {
+    const t = this.mode === "single";
+    return b(this.messages._lang, c`<arcgis-slider class=${v({ "wrap-labels": this._shouldWrapLabels })} .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${l} .steps=${x} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=leading fill-placement=none .values=${this._values} @arcgisInput=${({ currentTarget: { values: e } }) => {
+      this.mode === "single" ? this._setStartTime(e[0]) : this._setRange(e[0], e[1]);
+    }}>${this.mode === "range" ? this._renderTimeRange() : void 0}<div class="ticks-container" slot=content-end><arcgis-ticks class="main-ticks" .interactive=${t} .labelFormatter=${this._tickLabelFormatter} layout=horizontal min=0 .max=${l} mode=value show-labels .values=${d} @arcgisTickClick=${(e) => this._setStartTime(e.detail.value)}></arcgis-ticks><arcgis-ticks class="secondary-ticks" .interactive=${t} layout=horizontal min=0 .max=${l} mode=value .values=${y} @arcgisTickClick=${(e) => this._setStartTime(e.detail.value)}></arcgis-ticks></div></arcgis-slider>`);
+  }
+  _renderTimeRange() {
+    const t = this._sliderLabelFormatter(this.startTime), e = this._sliderLabelFormatter(this.endTime);
+    return c`<div class="time-range-label" aria-live=polite slot=content-start>${T(this.messages?.timeRange ?? "{start} — {end}", { start: t, end: e })}</div>`;
+  }
+}
+const $ = s(24, "hours", "minutes"), l = s($ - 1, "minutes", "milliseconds"), d = [0, 6, 12, 18].map((r) => s(r, "hours", "milliseconds"));
+d.push(l);
+const y = [2, 4, 8, 10, 14, 16, 20, 22].map((r) => s(r, "hours", "milliseconds")), x = s(1, "minutes", "milliseconds"), h = {
+  hour: "numeric",
+  minute: "numeric",
+  timeZone: "UTC"
+}, S = {
+  hour: "numeric",
+  timeZone: "UTC"
+};
+p("arcgis-time-of-day-slider", w);
+export {
+  w as ArcgisTimeOfDaySlider
+};

package/dist/components/arcgis-time-of-day-slider/index.d.ts

@@ -0,0 +1,3 @@
+import "@arcgis/common-components/components/arcgis-slider";
+import "@arcgis/common-components/components/arcgis-ticks";
+export * from "./customElement.js";

package/dist/components/arcgis-time-of-day-slider/index.js

@@ -0,0 +1,3 @@
+import "@arcgis/common-components/components/arcgis-slider";
+import "@arcgis/common-components/components/arcgis-ticks";
+export * from "./customElement.js";

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

@@ -4,15 +4,15 @@ import { Use } from '@arcgis/lumina/controllers';
 import { default as TimeSlider } from '@arcgis/core/widgets/TimeSlider.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
+import { IconName } from '../../utils/action-utils';
 
-declare const useTimeSliderWidget: (component: LitElement & Pick<TimeSlider, "label" | "viewModel" | "icon" | "timeExtent" | "timeZone" | "mode" | "layout" | "disabled" | "actions" | "fullTimeExtent" | "loop" | "playRate" | "stops" | "tickConfigs" | "timeVisible"> & {
+declare const useTimeSliderWidget: (component: LitElement & Pick<TimeSlider, "mode" | "disabled" | "label" | "timeZone" | "viewModel" | "icon" | "actions" | "timeExtent" | "layout" | "stops" | "fullTimeExtent" | "loop" | "playRate" | "tickConfigs" | "timeVisible"> & {
     state?: unknown;
-    viewModel?: __esri.TimeSliderViewModel | undefined;
+    viewModel?: import('@arcgis/core/widgets/TimeSlider/TimeSliderViewModel').default | undefined;
     closed?: boolean;
     icon: import('@arcgis/toolkit/type').nil | string;
     label: import('@arcgis/toolkit/type').nil | string;
     referenceElement?: ArcgisReferenceElement | string;
-    position?: __esri.UIPosition;
     arcgisReady: import('@arcgis/lumina').EventEmitter;
     arcgisPropertyChange: import('@arcgis/lumina').EventEmitter<{
         name: string;
@@ -36,16 +36,94 @@ declare const useTimeSliderWidget: (component: LitElement & Pick<TimeSlider, "la
 export declare class ArcgisTimeSlider extends LitElement {
     /**
      * 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 ArcgisTimeSlider component will be associated with a map or scene component rather than using the `view` property.
+     *   > **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 Time Slider component will be associated with a map or scene component rather than using the `view` property.
+     *
+     * @example
+     * // Create and then add a TimeSlider component and then listen to changes in the View's time extent.
+     * const timeSlider = new TimeSlider({
+     *   container: "timeSliderDiv",
+     *   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");
+     *
+     * reactiveUtils.watch(
+     *   () => view.timeExtent,
+     *   (timeExtent) => {
+     *     console.log("New view time is: ", timeExtent.start);
+     *   }
+     * );
      */
-    view?: __esri.MapView | __esri.SceneView | nullish;
+    view?: import('@arcgis/core/views/MapViewOrSceneView').MapViewOrSceneView | null | undefined;
     /**
      * 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.
+     * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/ellipsis.png) in the component. 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-types.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.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.html#timeExtent) to a specific date or copying the
+     * timeExtent to the browser's clipboard.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#actions)
+     * [![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
+     * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
+     * @example
+     * // Create a TimeSlider with two actions to snap the thumb to
+     * // two specific time extents.
+     * const timeSlider = new TimeSlider({
+     *   container: "timeSliderDiv",
+     *   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"
+     *     }
+     *   ]
+     * });
+     *
+     * // listen to timeSlider's trigger-action event
+     * // check what action user clicked on and respond accordingly.
+     * timeSlider.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":
+     *       timeSlider.timeExtent = {
+     *         start: quake,
+     *         end: quake
+     *       };
+     *       break;
+     *     case "quake-plus-one-month":
+     *       timeSlider.timeExtent = {
+     *         start: oneMonthLater,
+     *         end: oneMonthLater
+     *       };
+     *       break;
+     *   }
+     * });
      */
-    actions: __esri.Collection<__esri.Action>;
+    actions: import('@arcgis/core/core/Collection').default<import('@arcgis/core/widgets/TimeSlider/types').Action>;
     /**
      * 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
@@ -57,65 +135,149 @@ export declare class ArcgisTimeSlider extends LitElement {
      */
     autoDestroyDisabled: boolean;
     /**
-     * When `true`, sets the widget to a disabled state so the user cannot interact with it.
+     * When `true`, sets the component to a disabled state so the user cannot interact with it.
      *
      * @default false
+     * @since 4.16
+     * @example
+     * // Create a timeslider widget that is initially disabled.
+     * const timeSlider = new TimeSlider({
+     *   container: "timeSliderDiv",
+     *   fullTimeExtent: {
+     *     start: new Date(2000, 5, 1),
+     *     end: new Date(2010, 0, 1)
+     *   },
+     *   disabled: true
+     * });
      */
     disabled: boolean;
     /**
      * Lists the specific locations on the timeline where handle(s) will snap to when manipulated.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#effectiveStops)
-     *
-     * @default null
+     * @example
+     * timeSlider.effectiveStops.forEach((stop) => {
+     *   console.log(stop);
+     * });
      */
-    readonly effectiveStops: nullish | Date[];
+    readonly 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 component.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#fullTimeExtent)
+     * @example
+     * // Create a new TimeSlider with set dates
+     * const timeSlider = new TimeSlider({
+     *   container: "timeSliderDiv",
+     *   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
+     *   };
+     * });
      */
-    fullTimeExtent: nullish | __esri.TimeExtent;
+    fullTimeExtent: import('@arcgis/core/time/TimeExtent').default | null | undefined;
     /**
-     * Icon which represents the component.
-     * Typically used when the component is controlled by another component (e.g. by the Expand component).
+     * Icon which represents the widget. It is typically used when the widget is controlled by another
+     * one (e.g. in the Expand widget).
      *
-     * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
      * @default "clock"
+     * @since 4.27
+     * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
      */
-    icon: string;
+    get icon(): typeof this.widget.icon;
+    set icon(value: IconName);
     /**
      * The widget's default label.
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#label)
+     * @since 4.11
      */
     label: string;
     /**
-     * Determines the layout used by the TimeSlider widget.
+     * Determines the layout used by the TimeSlider component.
+     *
+     * Possible values are listed below:
+     * | Value   | Description |
+     * | ---     | --- |
+     * | auto    | Automatically uses the "compact" layout when the component width is less than 858 pixels. Otherwise the "wide" layout it used. |
+     * | compact | Component elements are oriented vertically. This layout is better suited to narrower widths. |
+     * | wide    | Component elements are oriented laterally. This thinner design is better suited to wide applications. |
      *
      * @default "auto"
+     * @since 4.16
+     * @example timeSlider.layout = "compact";
      */
-    layout: "auto" | "compact" | "wide";
+    layout: import('@arcgis/core/widgets/TimeSlider').TimeSliderLayout;
     /**
      * When `true`, the time slider will play its animation in a loop.
      *
      * @default false
+     * @example
+     * // Start a time slider animation that advances every second
+     * // and restarts when it reaches the end.
+     * timeSlider.set({
+     *   loop: true,
+     *   playRate: 1000
+     * });
+     * timeSlider.play();
      */
     loop: boolean;
     /**
-     * The time slider mode.
+     * 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.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.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.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.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"
+     * @see [timeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#timeExtent)
+     * @example
+     * // Create a single thumbed time slider that includes all historic content.
+     * const timeSlider = new TimeSlider({
+     *   container: "timeSliderDiv",
+     *   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) //end date
+     *   }
+     * });
      */
-    mode: "time-window" | "instant" | "cumulative-from-start" | "cumulative-from-end";
+    mode: import('@arcgis/core/widgets/TimeSlider/types').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();
      */
     playRate: number;
-    /** @deprecated since 4.34, use [`slot`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot) instead. */
-    position?: __esri.UIPosition;
     /**
      * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
      *
@@ -126,38 +288,212 @@ export declare class ArcgisTimeSlider extends LitElement {
      * The current state of the component.
      *
      * @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;
+     * }
      */
-    readonly state: "ready" | "disabled" | "playing";
+    readonly state: import('@arcgis/core/widgets/TimeSlider/types').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.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.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 of 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.stops = {
+     *   interval: {
+     *     value: 1,
+     *     unit: "years"
+     *   }
+     * };
+     * ```
+     * Rather than setting the stops as time intervals, the TimeSlider can be divided into evenly spaced
+     * stops using the `count` property. Similar to 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.stops = {
+     *   count: 15
+     * };
+     * ```
+     * For irregularly spaced stops, simply assign an array of dates as demonstrated below.
+     * ```js
+     * // Add nine irregular stops.
+     * timeSlider.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.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.stops = {
+     *   count: 4,
+     *   timeExtent: {
+     *     start: new Date(2019, 0, 1),
+     *     end: new Date(2020, 0, 1)
+     *   }
+     * };
+     * ```
      *
      * @default { count : 10 }
      */
-    stops: nullish | __esri.StopsByDates | __esri.StopsByCount | __esri.StopsByInterval;
+    stops: import('@arcgis/core/widgets/TimeSlider/types').Stops | null | undefined;
     /**
      * When set, overrides the default TimeSlider ticks labelling system.
+     * Please refer to [TickConfig](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider-types.html#TickConfig) for detailed documentation
+     * on how to configure tick placement, style, and behavior.
      *
-     * @default null
+     * @since 4.16
+     * @example
+     * // By default in "en-US" the TimeSlider will display ticks with "2010, 2011, 2012, etc".
+     * // Overwrite TimeSlider tick configuration so that labels display "'10, '12, '14, etc" in red.
+     * const timeSlider = new TimeSlider({
+     *   container: "timeSliderDiv",
+     *   fullTimeExtent: {
+     *     start: new Date(2010, 0, 1),
+     *     end: new Date(2020, 0, 1)
+     *   },
+     *   tickConfigs: [{
+     *     mode: "position",
+     *     values: [
+     *       new Date(2010, 0, 1), new Date(2012, 0, 1), new Date(2014, 0, 1),
+     *       new Date(2016, 0, 1), new Date(2018, 0, 1), new Date(2020, 0, 1)
+     *     ].map((date) => date.getTime()),
+     *     labelsVisible: true,
+     *     labelFormatFunction: (value) => {
+     *       const date = new Date(value);
+     *       return `'${date.getUTCFullYear() - 2000}`;
+     *     },
+     *     tickCreatedFunction: (value, tickElement, labelElement) => {
+     *       tickElement.classList.add("custom-ticks");
+     *       labelElement.classList.add("custom-labels");
+     *     }
+     *   }]
+     * };
+     * @example
+     * // this CSS goes with the snippet above.
+     * #timeSlider .custom-ticks {
+     *   background-color: red;
+     *   width: 1px;
+     *   height: 8px;
+     * }
+     * #timeSlider .custom-labels {
+     *   font-family: Georgia, 'Times New Roman', Times, serif;
+     *   font-size: 15px;
+     *   color: red;
+     * }
      */
-    tickConfigs: nullish | __esri.TickConfig[];
+    tickConfigs: import('@arcgis/core/widgets/Slider/types').TickConfig[] | null | undefined;
     /**
-     * The current time extent of the time slider.
+     * 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.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}` |
      *
-     * @default 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: nullish | __esri.TimeExtent;
+    timeExtent: import('@arcgis/core/time/TimeExtent').default | null | undefined;
     /**
      * Shows/hides time in the display.
      *
      * @default false
+     * @example
+     * // For time sliders with a small time extent it may be useful to display times as shown below.
+     * const timeSlider = new TimeSlider({
+     *   container: "timeSliderDiv",
+     *   mode: "time-window",
+     *   timeVisible: true,
+     *   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)
+     *   }
+     * });
      */
     timeVisible: boolean;
     /**
-     * Dates and times displayed in the widget will be displayed in this time zone.
+     * Dates and times displayed in the component will be displayed in this time zone. By default this time zone is
+     * inherited from [MapView#timeZone](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#timeZone). When a MapView is not associated with the component
+     * then the property will fallback to the `system` time zone.
+     *
+     * **Possible Values**
+     *
+     * Value | Description |
+     * ----- | ----------- |
+     * system  | Dates and times will be displayed in the timezone of the device or browser.
+     * unknown | Dates and time are not adjusted for any timezone. [TimeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html) will be disabled.
+     * Specified IANA timezone | Dates and times will be displayed in the specified IANA time zone. See [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
      *
-     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#timeZone)
+     * @since 4.28
      */
     timeZone: string;
+    /** @param settings */
     applyTimeSliderSettings(settings: Pick<__esri.TimeSliderProperties, "fullTimeExtent" | "loop" | "stops">): Promise<void>;
     /** Permanently destroy the component. */
     destroy(): Promise<void>;
@@ -165,6 +501,7 @@ export declare class ArcgisTimeSlider extends LitElement {
     play(): Promise<void>;
     previous(): Promise<void>;
     stop(): Promise<void>;
+    /** @param webmap */
     updateWebDocument(webmap: __esri.WebMap): Promise<void>;
     /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
     readonly arcgisPropertyChange: TargetedEvent<this, {
@@ -173,6 +510,15 @@ export declare class ArcgisTimeSlider extends LitElement {
     /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
     /** Emitted when an action is triggered on the component. */
-    readonly arcgisTriggerAction: TargetedEvent<this, __esri.TimeSliderTriggerActionEvent>;
+    readonly arcgisTriggerAction: TargetedEvent<this, import('@arcgis/core/widgets/TimeSlider/TimeSliderViewModel').TimeSliderViewModelTriggerActionEvent>;
+    private widget: TimeSlider;
+    readonly _setterTypes: {
+        icon?: IconName;
+    };
+    "@eventTypes": {
+        "arcgisPropertyChange": ArcgisTimeSlider["arcgisPropertyChange"]["detail"];
+        "arcgisReady": ArcgisTimeSlider["arcgisReady"]["detail"];
+        "arcgisTriggerAction": ArcgisTimeSlider["arcgisTriggerAction"]["detail"];
+    };
 }
 export {};