@arcgis/map-components/dist/components/arcgis-value-picker/types.d.ts

ArcGIS Map Components

/**
 * @internal
 * @since
 * 5.1
 *
 * The minimum API required for components being slotted into [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/). Value Picker will automatically
 * create an internal reference to the slotted component, so the properties on this interface can be directly referenced without requiring
 * the the Value Picker component to be aware of the slotted component's unique API. For example, if the user presses play and eventually Value Picker
 * determines that `slottedComponent.canNext` is false but [arcgis-value-picker.loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#loop) is true, Value Picker will call `slottedComponent.reset()`
 * to reset the slotted component's current value to the first index of its dataset. This will allow playback to continue looping seamlessly.
 */
export interface ArcgisValuePickerSubcomponent extends HTMLElement {
  /**
   * Indicates whether the component may advance to the next index of its data set. This value is recalculated after the component is interacted with
   * so the [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/) buttons give the user immediate feedback regarding what interactions are permitted next.
   */
  canNext: boolean;
  /**
   * Indicates whether the component may begin playing. This value is recalculated after the component is interacted with
   * so the [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/) buttons give the user immediate feedback regarding what interactions are permitted next.
   */
  canPlay: boolean;
  /**
   * Indicates whether the component may step backwards to the previous index of its data set. This value is recalculated after the component is interacted with
   * so the [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/) buttons give the user immediate feedback regarding what interactions are permitted next.
   */
  canPrevious: boolean;
  /**
   * Function used to change the currently selected value. Pressing the next button will call step("next"), and pressing the previous button will call step("previous").
   *
   * @param direction - Indicates whether the next element selected by [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/)
   * should be the next or previous index of the slotted component's dataset.
   */
  step: (direction: "next" | "previous") => void;
  /**
   * Function used to reset the currently selected value to the first element of the slotted component's dataset. This method is called automatically
   * when [arcgis-value-picker.loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#loop) is `true` and the selected value index reaches the end of the dataset. Additionally, if [arcgis-value-picker.loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#loop)
   * is `false` and the play button is clicked while the index is at the last element of the slotted component's dataset, Value Picker will call `reset()` on the slotted component
   * and play through all elements once.
   */
  reset: () => void;
}

/** @internal */
export interface AnimateEvent {
  /** Denotes whether the event is firing for the first time since the play button was pressed. */
  first: boolean;
}

/**
 * Object used to define the label items.
 *
 * @internal
 */
export interface LabelItem {
  /** The value of the item. */
  value: string;
  /** The label users will see for this item. */
  label: string;
}

/**
 * Object used to define the combobox items.
 *
 * @internal
 */
export interface ComboboxItem {
  /** The value of the item. */
  value: string;
  /** The label users will see for this item. */
  label: string;
}

/**
 * Indicates the axis the component should be oriented along.
 *
 * @internal
 */
export type Layout = "horizontal" | "vertical";