/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { Layout } from "../arcgis-value-picker/types.js";

/** @internal */
export abstract class ArcgisValuePickerSlider 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-value-picker-slider/#destroy) method when you are done to
   * prevent memory leaks.
   *
   * @default false
   */
  accessor autoDestroyDisabled: boolean;
  /**
   * Determines whether the user can interact with the next button.
   * This property is automatically set to `false` when the index of [currentValue](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#currentValue) matches the last index of
   * [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). Regardless of the [layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#layout) property's value, the slider thumb will
   * move in the direction that the next button is pointing. This means that when the slider is visually flipped
   * (`layout` is `"horizontal"` and `mirrored` is `true`, or `layout` is `"vertical"` and `mirrored` is `false`), this property becomes `false`
   * when `currentValue` is equal to the first index of `steps` rather than the last.
   *
   * @default false
   * @example
   * ```js
   * const valuePicker = document.querySelector("arcgis-value-picker");
   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
   *
   * valuePickerSlider.steps = [1, 2, 3];
   * valuePickerSlider.currentValue = 3;
   *
   * if (valuePickerSlider.canNext) {
   *   valuePicker.next();
   * } else {
   *   console.log("Cannot step forward."); // this line will execute
   * }
   * ```
   */
  accessor canNext: boolean;
  /**
   * Determines whether the user can interact with the play/pause button.
   *
   * @default false
   */
  accessor canPlay: boolean;
  /**
   * Determines whether the user can interact with the previous button.
   * This property is automatically set to `false` when the index of [currentValue](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#currentValue) matches the first index of
   * [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). Regardless of the [layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#layout) property's value, the slider thumb will
   * move in the direction that the previous button is pointing. This means that when the slider is visually flipped
   * (`layout` is `"horizontal"` and `mirrored` is `true`, or `layout` is `"vertical"` and `mirrored` is `false`), this property becomes `false`
   * when `currentValue` is equal to the last index of `steps` rather than the first.
   *
   * @default false
   * @example
   * ```js
   * const valuePicker = document.querySelector("arcgis-value-picker");
   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
   *
   * // `steps` will be rendered on a vertical track where "3" is the topmost value.
   * // The previous button (pointing upwards) will fail to increment the index of `steps` by 1.
   *
   * valuePickerSlider.steps = [1, 2, 3];
   * valuePickerSlider.currentValue = 1;
   * valuePickerSlider.mirrored = false;
   * valuePicker.layout = "vertical";
   *
   * if (valuePickerSlider.canPrevious) {
   *   valuePicker.previous(); // this line will execute
   * } else {
   *   console.log("Cannot step upward.");
   * }
   * ```
   */
  accessor canPrevious: boolean;
  /**
   * The value of the currently selected index in the slider's [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). If this property is not assigned by the
   * user, it will default to the last index of `steps`.
   */
  accessor currentValue: number | undefined;
  /**
   * When set to `true`, the user may not interact with the slider.
   * Note that if the ValuePicker's [arcgis-value-picker.disabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#disabled) property is mutated, this property will update to match it.
   *
   * @default false
   */
  accessor disabled: boolean;
  /**
   * A function used to format labels. Overrides the default label formatter.
   *
   * @example
   * ```js
   * // Display a label at every step formatted as a percentage.
   *
   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
   * valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
   * valuePickerSlider.labels = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
   * valuePickerSlider.labelFormatter = (value) => `${value}%`;
   * ```
   */
  accessor labelFormatter: (value: number, defaultFormatter: (value: number) => string) => string | null | undefined;
  /**
   * Determines where along the slider track labels should be placed. Labels will be formatted by the [labelFormatter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#labelFormatter) property.
   *
   * @example
   * ```js
   * // Display a label at every other step
   *
   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
   * valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
   * valuePickerSlider.labels = [0, 20, 40, 60, 80, 100];
   * ```
   */
  accessor labels: number[] | undefined;
  /**
   * Determines whether the slider should be oriented horizontally or vertically. Note that if [arcgis-value-picker.layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#layout) on the Value Picker component
   * is mutated, this property will update to match it. The UI will behave as if the indices of [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps) will ascend left to right, or bottom
   * to top on a horizontal or vertical layout, respectively. If you wish for the slider to be visually mirrored, set the [mirrored](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#mirrored)
   * property to true. This will also make the 'next' button responsible for stepping backwards to the previous index of `steps`, and
   * 'previous' responsible for advancing to the next index of `steps`.
   *
   * @default "horizontal"
   * @example
   * ```js
   * // Display a vertical slider with `steps` ascending bottom to top. In this instance, the 'next'
   * // button (pointing downwards) will bring `currentValue` closer to 0 to match the slider's appearance.
   *
   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
   * valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
   * valuePickerSlider.currentValue = 100;
   * valuePickerSlider.layout = "vertical";
   *
   * // Display a horizontal slider with `steps` ascending right to left. Since `mirrored` is true,
   * // the slider will show `currentValue` decreasing from 100 to 0 as the 'next' button (pointing to the right) is pressed.
   *
   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
   * valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
   * valuePickerSlider.currentValue = 100;
   * valuePickerSlider.layout = "horizontal";
   * valuePickerSlider.mirrored = true;
   * ```
   * @see [arcgis-value-picker.layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#layout)
   */
  accessor layout: Layout | undefined;
  /** Positions along the slider track rendered as long tick marks under the track. */
  accessor majorTicks: number[] | undefined;
  /** The greatest possible value on the slider track. If this property is not set, it will be inferred from the last index of [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). */
  accessor max: number | undefined;
  /** The smallest possible value on the slider track. If this property is not set, it will be inferred from the first index of [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps). */
  accessor min: number | undefined;
  /** Positions along the slider track rendered as short tick marks under the track. */
  accessor minorTicks: number[] | undefined;
  /**
   * When `true`, the slider will display its [steps](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#steps) from right to left, or top to bottom,
   * depending on the value of [layout](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#layout). This inverts the direction of the slider.
   *
   * @default false
   */
  accessor mirrored: boolean;
  /**
   * Positions along the slider track between [min](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#min) and [max](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-slider/#max) that
   * the slider thumb will snap to when interacted with.
   */
  accessor steps: number[] | undefined;
  /** Permanently destroy the component. */
  destroy(): 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: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>;
  readonly "@eventTypes": {
    arcgisPropertyChange: ArcgisValuePickerSlider["arcgisPropertyChange"]["detail"];
  };
}