@geoscene/map-components 4.33.20 → 5.0.19

package/dist/components/geoscene-value-picker-legacy/customElement.d.ts

@@ -0,0 +1,632 @@
+/// <reference path="../../index.d.ts" />
+import type { ValuePickerEvents, ValuePickerComponent } from "@geoscene/core/widgets/ValuePicker.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { GeosceneReferenceElement, IconName } from "../types.js";
+import type { AnimateEvent, Layout } from "@geoscene/core/widgets/ValuePicker/types.js";
+import type { Icon } from "@geoscene/calcite-components/components/calcite-icon";
+
+/**
+ * > [!WARNING]
+ * >
+ * > This is a **legacy component**. It relies on an underlying widget as part of our migration to native web components.
+ * >
+ * > A fully native replacement for this component is in development. Once it reaches feature parity, the legacy component will be deprecated and no longer maintained. At that point, development should use the native component.
+ *
+ * Value Picker is a component that allows users to step or play through a list of values. Value Picker component can be configured
+ * with an optional [collection](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#from-collection),
+ * [label](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#from-labels),
+ * [combobox](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#selectable-items) or
+ * [slider](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#numeric-values)
+ * control to help users navigate values.
+ *
+ * Similar to a media player, values can be interactively stepped through using the `next` and `previous` buttons.
+ * Value Picker can also be set to automatically progress (play) through an ordered
+ * list of items at a [playRate](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#playRate).
+ *
+ * ### Configuring Value Picker
+ *
+ * Value Picker can be configured in variety of ways, depending on your use case.
+ * The following are the five possible configurations of the Value Picker component.
+ *
+ * <span id="nodata"></span>
+ * #### 1. Configuring Value Picker without data
+ *
+ * It is important to note that the Value Picker component is not associated with a [View](https://doc.geoscene.cn/javascript/5.0/references/core/views/View/) nor does it
+ * necessarily require data.
+ *
+ * ![option-nodata](https://doc.geoscene.cn/javascript/5.0/assets/references/core/widgets/valuepicker/option-nodata.png)
+ *
+ * ```html
+ * <geoscene-map itemId="462c629e8e604c15baf45627c4f337d6">
+ *   <geoscene-value-picker-legacy slot="top-right"></geoscene-value-picker-legacy>
+ * </geoscene-map>
+ * ```
+ *
+ * Since the component is not associated with any data, it is necessary to listen and respond to component events generated by
+ * the component. This could be useful when data is not static like positional changes for bus features currently in service, for example.
+ *
+ * ```js
+ * valuePicker.addEventListener("geoscenePlay", () => { console.log("user clicks play"); });
+ * valuePicker.addEventListener("geoscenePause", () => { console.log("user clicks pause"); });
+ * valuePicker.addEventListener("geoscenePrevious", () => { console.log("user clicks previous"); });
+ * valuePicker.addEventListener("geosceneNext", () => { console.log("user clicks next"); });
+ * ```
+ *
+ * <span id="nodata"></span>
+ * #### 2. Using the label component to present items
+ *
+ * Consider using the [label component](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerLabel/) to step through a fixed list of predefined values like land use zones.
+ * In the following snippet a Value Picker component is created containing three coded land use zones.
+ *
+ * ![option-labels](https://doc.geoscene.cn/javascript/5.0/assets/references/core/widgets/valuepicker/option-labels.png)
+ *
+ * ```js
+ * const ValuePickerLabel = (await import("@geoscene/core/widgets/ValuePicker/ValuePickerLabel.js")).default;
+ *
+ * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+ *
+ * const labelItems = [
+ *   { value: "ind", label: "Industrial" },
+ *   { value: "res", label: "Residential" },
+ *   { value: "com", label: "Commercial" }
+ * ];
+ *
+ * valuePicker.component = new ValuePickerLabel({
+ *   items: labelItems,
+ * });
+ *
+ * valuePicker.values = ["ind"];
+ * ```
+ *
+ * The user's interaction can be handled by monitoring the [values](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#values) property.
+ *
+ * ```js
+ * valuePicker.addEventListener("geoscenePropertyChange", () => {
+ *   console.log("The current land use zone is: ", valuePicker.values[0]);
+ *   layer.rasterFunction = {
+ *     functionName: valuePicker.values[0],
+ *   };
+ * });
+ * ```
+ *
+ * <span id="from-collection"></span>
+ * #### 3. Using an arbitrary collection component to present predefined list
+ *
+ * It may be required to step through a fixed collection of items like [extents](https://doc.geoscene.cn/javascript/5.0/references/core/geometry/Extent/),
+ * [bookmarks](https://doc.geoscene.cn/javascript/5.0/references/core/webmap/Bookmark/), or
+ * [basemaps](https://doc.geoscene.cn/javascript/5.0/references/core/Basemap/). If only the `play`,
+ * `next` and `previous` buttons are required then the collection component may be used. The [collection component](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCollection/)
+ * consists of the same user interface as option 1 above with the distinction that the current item is accessible and
+ * tracked.
+ *
+ * In the following example, a Value Picker component is created with a [collection](https://doc.geoscene.cn/javascript/5.0/references/core/core/Collection/) of three items. Value Picker is
+ * initialized with starting value of "tianditu-vector". Since "tianditu-vector" is the first item in the collection, only the _next_
+ * button will be enabled.
+ *
+ * ![option-collection](https://doc.geoscene.cn/javascript/5.0/assets/references/core/widgets/valuepicker/option-collection.png)
+ *
+ * ```js
+ * const Collection = (await import("@geoscene/core/core/Collection.js")).default;
+ * const ValuePickerCollection = (await import("@geoscene/core/widgets/ValuePicker/ValuePickerCollection.js")).default;
+ *
+ * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+ *
+ * const basemapCollection = new Collection(["tianditu-vector", "streets", "osm"]);
+ *
+ * valuePicker.component = new ValuePickerCollection({
+ *   collection: basemapCollection,
+ * });
+ *
+ * valuePicker.values = ["tianditu-vector"];
+ * ```
+ *
+ * As the user clicks the _next_, _previous_, and _play_ buttons, the [values](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#values) property updates.
+ * Handle this by listening for the [@geoscenePropertyChange](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#event-geoscenePropertyChange)
+ * event when the component’s [values](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#values)
+ * property changes, as shown below.
+ *
+ * ```js
+ * valuePicker.addEventListener("geoscenePropertyChange", () => {
+ *   console.log("The current basemap is: ", valuePicker.values[0]);
+ *   mapElement.basemap = valuePicker.values[0];
+ * });
+ * ```
+ *
+ * <span id="selectable-items"></span>
+ * #### 4. Using the combobox component to present selectable items
+ *
+ * Consider using the [combobox component](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCombobox/) when a searchable
+ * dropdown list is required. In the following snippet the Value Picker component is created containing three coded land use zones.
+ *
+ * ![option-combobox](https://doc.geoscene.cn/javascript/5.0/assets/references/core/widgets/valuepicker/option-combobox.png)
+ *
+ * ```js
+ * const ValuePickerCombobox = (await import("@geoscene/core/widgets/ValuePicker/ValuePickerCombobox.js")).default;
+ *
+ * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+ *
+ * const comboboxItems = [
+ *   { value: "ind", label: "Industrial" },
+ *   { value: "res", label: "Residential" },
+ *   { value: "com", label: "Commercial" }
+ * ];
+ *
+ * valuePicker.component = new ValuePickerCombobox({
+ *   placeholder: "Pick Zoning Type",
+ *   items: comboboxItems,
+ * });
+ *
+ * valuePicker.values = ["res"];
+ * ```
+ *
+ * The user's interaction can be handled by monitoring the [values](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#values) property.
+ *
+ * ```js
+ * valuePicker.addEventListener("geoscenePropertyChange", () => {
+ *   console.log("The current land use zone is: ", valuePicker.values[0]);
+ *   layer.rasterFunction = {
+ *     functionName: valuePicker.values[0],
+ *   };
+ * });
+ * ```
+ *
+ * <span id="numeric-values"></span>
+ * #### 5. Using the slider component to navigate numeric values
+ *
+ * The [slider component](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerSlider/),
+ * as the name suggests, appends a slider to end of the Value Picker component. The slider is ideal
+ * for users that need to select a value within a fixed numeric range. For example, the snippet below presents a
+ * Value Picker with a slider for picking a layer's opacity. The starting value is 50%.
+ *
+ * ![option-slider](https://doc.geoscene.cn/javascript/5.0/assets/references/core/widgets/valuepicker/option-slider.png)
+ *
+ * ```js
+ * const ValuePickerSlider = (await import("@geoscene/core/widgets/ValuePicker/ValuePickerSlider.js")).default;
+ *
+ * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+ *
+ * valuePicker.component = new ValuePickerSlider({
+ *   min: 0,
+ *   max: 10,
+ *   steps: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+ *   minorTicks: [.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5],
+ *   majorTicks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+ *   labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+ * });
+ *
+ * valuePicker.values = [5];
+ * ```
+ *
+ * Note that [steps](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerSlider/#steps) (positions the slider thumb snaps
+ * to), [minorTicks](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerSlider/#minorTicks),
+ * [majorTicks](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerSlider/#majorTicks) and
+ * [labels](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerSlider/#labels) are independent of each other and optional.
+ *
+ * The following code will watch for changes and apply the user's modification to a feature layer.
+ * ```js
+ * valuePicker.addEventListener("geoscenePropertyChange", () => {
+ *   console.log("The current opacity is: ", valuePicker.values[0]);
+ *   layer.opacity = valuePicker.values[0] / 100;
+ * });
+ * ```
+ *
+ * <span id="orientation"></span>
+ * ### Value Picker Orientation
+ *
+ * By default Value Picker is oriented horizontally. Value Picker (with the exception of combobox and label components) can be oriented
+ * vertically. The following snippet demonstrates how to orient a collection based Value Picker vertically.
+ *
+ * ```js
+ * const Collection = (await import("@geoscene/core/core/Collection.js")).default;
+ * const ValuePickerCollection = (await import("@geoscene/core/widgets/ValuePicker/ValuePickerCollection.js")).default;
+ *
+ * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+ *
+ * const basemapCollection = new Collection(["tianditu-vector", "streets", "osm"]);
+ *
+ * valuePicker.component = new ValuePickerCollection({
+ *   layout: "vertical", // default is "horizontal"
+ *   collection: basemapCollection,
+ * });
+ *
+ * valuePickerBasemap.values = ["tianditu-vector"];
+ * ```
+ *
+ * @since 5.0
+ * @see [ValuePickerCollection](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCollection/)
+ * @see [ValuePickerCombobox](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCombobox/)
+ * @see [ValuePickerLabel](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerLabel/)
+ * @see [ValuePickerSlider](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerSlider/)
+ * @see [Slider](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/Slider/)
+ */
+export abstract class GeosceneValuePickerLegacy 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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Returns `true` if the Value Picker can be advanced to the next position.
+   *
+   * @default false
+   * @example
+   * ```js
+   * // check if canNext is true before advancing.
+   * const basemapCollection = new Collection(["tianditu-vector", "streets", "osm"]);
+   *
+   * valuePicker.component = new ValuePickerCollection({
+   *   collection: basemapCollection,
+   * });
+   *
+   * valuePicker.values = ["tianditu-vector"];
+   *
+   * if (valuePicker.canNext) {
+   *   valuePicker.next();
+   * } else {
+   *   console.log("Already at the end of the collection. Please press the 'previous' button instead.");
+   * }
+   * ```
+   */
+  get canNext(): boolean;
+  /**
+   * Returns `true` if the Value Picker can be played.
+   *
+   * @default false
+   * @example
+   * ```js
+   * // Create a new Value Picker and then check canPlay before playing.
+   * const basemapCollection = new Collection(["tianditu-vector", "streets", "osm"]);
+   *
+   * valuePicker.component = new ValuePickerCollection({
+   *   collection: basemapCollection,
+   * });
+   *
+   * valuePicker.values = ["tianditu-vector"];
+   *
+   * if (valuePicker.canPlay) {
+   *   valuePicker.play();
+   * } else {
+   *   console.log("Cannot play this collection.");
+   * }
+   * ```
+   */
+  get canPlay(): boolean;
+  /**
+   * Returns `true` if the Value Picker can moved to the previous item.
+   *
+   * @default false
+   * @example
+   * ```js
+   * // Create a new Value Picker and then test if canPrevious is true before selecting the preceding item.
+   * const basemapCollection = new Collection(["tianditu-vector", "streets", "osm"]);
+   *
+   * valuePicker.component = new ValuePickerCollection({
+   *   collection: basemapCollection,
+   * });
+   *
+   * valuePicker.values = ["tianditu-vector"];
+   *
+   * if (valuePicker.canPrevious) {
+   *   valuePicker.previous();
+   * } else {
+   *   console.log("Already at the beginning of the collection. Please press the 'next' button instead.");
+   * }
+   * ```
+   */
+  get canPrevious(): boolean;
+  /**
+   * An optional caption that appears on the Value Picker component to give context for the user. This is particularly
+   * useful when an application is using more than one Value Picker component.
+   *
+   * @example
+   * ```js
+   * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+   *
+   * valuePicker.component = new ValuePickerCombobox({
+   *   items: [
+   *     { value: "Newton", label: "Newton" },
+   *     { value: "Einstein", label: "Einstein" }
+   *   ],
+   * });
+   *
+   * valuePicker.caption = "Scientist";
+   * ```
+   */
+  accessor caption: string | null | undefined;
+  /**
+   * An optional component for presenting and managing data. This property can be assigned one of the following:
+   * [ValuePickerCollection](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCollection/)
+   * [ValuePickerCombobox](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCombobox/),
+   * [ValuePickerLabel](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerLabel/), or
+   * [ValuePickerSlider](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerSlider/).
+   *
+   * If this property is not set then the play, next and previous buttons will always be enabled. In this case, listen to the
+   * component events, for example, [@geoscenePrevious](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#event-geoscenePrevious) and
+   * [@geosceneNext](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#event-geosceneNext), when the user interacts with the
+   * component.
+   *
+   * @example
+   * ```js
+   * // Add a Value Picker with a slider ranging from 0 to 10.
+   * const steps = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+   *
+   * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+   *
+   * valuePicker.component = new ValuePickerSlider({
+   *   min: 0,
+   *   max: 10,
+   *   steps,
+   *   labels: steps,
+   *   labelFormatFunction: (value) => value + " km",
+   * });
+   *
+   * valuePicker.values = [0];
+   * ```
+   */
+  accessor component: ValuePickerComponent | null | undefined;
+  /**
+   * When set to `false`, the next button (or up button when vertical) is not displayed.
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor hideNextButton: boolean;
+  /**
+   * When set to `false`, the play/pause button is not displayed.
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor hidePlayButton: boolean;
+  /**
+   * When set to `false`, the previous button (or down button when vertical) is not displayed.
+   *
+   * @default false
+   * @since 5.0
+   */
+  accessor hidePreviousButton: boolean;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "list-rectangle"
+   * @since 5.0
+   * @see [Calcite Icons](https://doc.geoscene.cn/calcite-design-system/icons/)
+   */
+  get icon(): Icon["icon"];
+  set icon(value: IconName);
+  /**
+   * The component's default label.
+   *
+   * @since 5.0
+   */
+  accessor label: string | null | undefined;
+  /**
+   * Indicates if the component should be orientated horizontally (default) or vertically.
+   *
+   * Please note that [ValuePickerCombobox](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCombobox/) and
+   * [ValuePickerLabel](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerLabel/) do not support vertical layout.
+   *
+   * @default "horizontal"
+   * @example
+   * ```js
+   * // Display a Value Picker vertically with a slider component.
+   * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+   *
+   * valuePicker.component = new ValuePickerSlider({
+   *   min: 0,
+   *   max: 10,
+   * });
+   *
+   * valuePicker.values = [0];
+   * valuePicker.layout = "vertical";
+   * ```
+   */
+  accessor layout: Layout;
+  /**
+   * If true, playback will restart when it reaches the end.
+   *
+   * @default false
+   * @example
+   * ```js
+   * // Add a ValuePicker with looping enabled and start playing.
+   * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+   *
+   * valuePicker.component = new ValuePickerSlider({
+   *   min: 0,
+   *   max: 10,
+   * });
+   *
+   * valuePicker.values = [0];
+   * valuePicker.loop = true;
+   *
+   * valuePicker.play();
+   * ```
+   */
+  accessor loop: boolean;
+  /**
+   * The pause, in milliseconds between playback advancement.
+   *
+   * @default 1000
+   * @example
+   * ```js
+   * // Add a playing Value Picker that only passes 100 milliseconds at each step.
+   * // The slider's thumb will start at 0 and move to 10 in exactly one second.
+   * const steps = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+   *
+   * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+   *
+   * valuePicker.component = new ValuePickerSlider({
+   *   min: 0,
+   *   max: 10,
+   *   steps,
+   * });
+   *
+   * valuePicker.values = [0];
+   * valuePicker.playRate = 100;
+   *
+   * valuePicker.play();
+   * ```
+   */
+  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://doc.geoscene.cn/javascript/5.0/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: GeosceneReferenceElement | string | undefined;
+  /**
+   * The current values of the Value Picker component. The type for this property depends on which [component](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#component) is being used. For example, a
+   * [slider](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerSlider/) component will return an array of numbers.
+   *
+   * If the `component` is not set then this property will return `null`. Similarly this property can be `null`
+   * if the component is created without an initial value.
+   *
+   * Once a `component` and an initial value has been assigned this property will return an array
+   * containing a value.
+   *
+   * @see [ValuePickerCollection#collection](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCollection/#collection)
+   * @see [ValuePickerCombobox#items](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerCombobox/#items)
+   * @see [ValuePickerLabel#items](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/ValuePicker/ValuePickerLabel/#items)
+   * @example
+   * ```js
+   * const basemapCollection = new Collection(["tianditu-vector", "streets", "osm"]);
+   *
+   * valuePickerBasemap.component = new ValuePickerCollection({
+   *   collection: basemapCollection,
+   * });
+   *
+   * valuePickerBasemap.values = ["tianditu-vector"];
+   *
+   * valuePickerLandCover.addEventListener("geoscenePropertyChange", () => {
+   *   if (valuePickerLandCover.values?.[0]) {
+   *     layer.rasterFunction = {
+   *       functionName: valuePickerLandCover.values[0],
+   *     };
+   *   }
+   * });
+   * ```
+   */
+  accessor values: [any] | null | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /**
+   * Select the next value or advance to next.
+   *
+   * @example
+   * ```js
+   * // Create a Value Picker with a slider component.
+   * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+   *
+   * valuePicker.component = new ValuePickerSlider({
+   *   min: 0,
+   *   max: 3,
+   *   steps: [0, 1, 2, 3],
+   *   labels: [0, 1, 2, 3]
+   * });
+   *
+   * valuePicker.values = [0];
+   * console.log("Current value:", valuePicker.values[0]); // "Current value: 0"
+   *
+   * valuePicker.next();
+   * console.log("Current value:", valuePicker.values[0]); // "Current value: 1"
+   * ```
+   */
+  next(): Promise<void>;
+  /** Pause playing. */
+  pause(): Promise<void>;
+  /**
+   * Start playing. Value Picker will advance at the rate specified by [playRate](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#playRate).
+   *
+   * @example
+   * ```js
+   * // Add a playing Value Picker widget that is continuously looping.
+   * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+   *
+   * valuePicker.component = new ValuePickerSlider({
+   *   min: 0,
+   *   max: 3,
+   *   steps: [0, 1, 2, 3],
+   *   labels: [0, 1, 2, 3]
+   * });
+   *
+   * valuePicker.loop = true;
+   * valuePicker.values = [0];
+   *
+   * valuePicker.addEventListener("geoscenePropertyChange", () => {
+   *   console.log("Current value:", valuePicker.values[0]);
+   * });
+   *
+   * valuePicker.play();
+   * // output: 1, 2, 3, 0, 1, 2, 3, 0...
+   * ```
+   */
+  play(): Promise<void>;
+  /**
+   * Select the previous value.
+   *
+   * @example
+   * ```js
+   * // Create a Value Picker with a slider component.
+   * const valuePicker = document.querySelector("geoscene-value-picker-legacy");
+   *
+   * valuePicker.component = new ValuePickerSlider({
+   *   min: 0,
+   *   max: 3,
+   *   steps: [0, 1, 2, 3],
+   *   labels: [0, 1, 2, 3]
+   * });
+   *
+   * valuePicker.values = [3];
+   * console.log("Current value:", valuePicker.values[0]); // "Current value: 3"
+   *
+   * valuePicker.previous();
+   * console.log("Current value:", valuePicker.values[0]); // "Current value: 2"
+   * ```
+   */
+  previous(): Promise<void>;
+  "@setterTypes": {
+    icon?: IconName;
+  };
+  /** Fires when the Value Picker is playing at a rate defined by [playRate](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-value-picker-legacy/#playRate). */
+  readonly geosceneAnimate: import("@geoscene/lumina").TargetedEvent<this, AnimateEvent>;
+  /** Fires when the Value Picker's next button is clicked. */
+  readonly geosceneNext: import("@geoscene/lumina").TargetedEvent<this, ValuePickerEvents["next"]>;
+  /** Fires when the Value Picker's pause button is clicked. */
+  readonly geoscenePause: import("@geoscene/lumina").TargetedEvent<this, ValuePickerEvents["pause"]>;
+  /** Fires when the Value Picker's play button is clicked. */
+  readonly geoscenePlay: import("@geoscene/lumina").TargetedEvent<this, ValuePickerEvents["play"]>;
+  /** Fires when the Value Picker's previous button is clicked. */
+  readonly geoscenePrevious: import("@geoscene/lumina").TargetedEvent<this, ValuePickerEvents["previous"]>;
+  /**
+   * Emitted when the value of a property is changed. Use this to listen to changes to properties.
+   *
+   * @example
+   * ```js
+   * // Listen for changes to the values property.
+   * // Update ImageryLayer's raster function accordingly.
+   * valuePicker.addEventListener("geoscenePropertyChange", (event) =>{
+   *   layer.rasterFunction = {
+   *     functionName: rasterFunctionPicker.values[0],
+   *   };
+   * });
+   * ```
+   */
+  readonly geoscenePropertyChange: import("@geoscene/lumina").TargetedEvent<this, { name: "values"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly geosceneReady: import("@geoscene/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    geosceneAnimate: GeosceneValuePickerLegacy["geosceneAnimate"]["detail"];
+    geosceneNext: GeosceneValuePickerLegacy["geosceneNext"]["detail"];
+    geoscenePause: GeosceneValuePickerLegacy["geoscenePause"]["detail"];
+    geoscenePlay: GeosceneValuePickerLegacy["geoscenePlay"]["detail"];
+    geoscenePrevious: GeosceneValuePickerLegacy["geoscenePrevious"]["detail"];
+    geoscenePropertyChange: GeosceneValuePickerLegacy["geoscenePropertyChange"]["detail"];
+    geosceneReady: GeosceneValuePickerLegacy["geosceneReady"]["detail"];
+  };
+}