@arcgis/map-components
Version:
ArcGIS Map Components
174 lines (173 loc) • 10.6 kB
TypeScript
/// <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"];
};
}