arcgis-value-picker-label | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/common-components/components/arcgis-value-picker-label";

Inheritance: ArcgisValuePickerLabel→HTMLElement

Demo

Properties

Property	Attribute	Type
autoDestroyDisabled	auto-destroy-disabled	boolean
canNext	can-next	boolean
canPlay	can-play	boolean
canPrevious	can-previous	boolean
currentValue		LabelItem \| undefined
disabled reflected	disabled	boolean
items		LabelItem[] \| undefined

autoDestroyDisabled

Property

Type: boolean

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() method when you are done to prevent memory leaks.

Attribute: auto-destroy-disabled
Default value: false

canNext

Property

Type: boolean

Determines whether the user can interact with the next button. This property is automatically set to false when currentValue matches the last index of items.

Attribute: can-next
Default value: false

Example

const valuePicker = document.querySelector("arcgis-value-picker");
const valuePickerLabel = document.querySelector("arcgis-value-picker-label");

valuePickerLabel.items = [
  { value: "90606", label: "Whittier, CA (90606)" },
  { value: "76001", label: "Arlington, TX (76001)" },
  { value: "92335", label: "Fontana, CA (92335)" }
];
valuePickerLabel.currentValue = valuePickerLabel.items[0];
if (valuePickerLabel.canNext === true) {
  valuePicker.next();
  console.log(valuePickerLabel.currentValue.label); // "Arlington, TX (76001)"
}

canPlay

Property

Type: boolean

Determines whether the user can interact with the play/pause button.

Attribute: can-play
Default value: false

canPrevious

Property

Type: boolean

Determines whether the user can interact with the previous button. This property is automatically set to false when currentValue matches the first index of items.

Attribute: can-previous
Default value: false

Example

const valuePicker = document.querySelector("arcgis-value-picker");
const valuePickerLabel = document.querySelector("arcgis-value-picker-label");

valuePickerLabel.items = [
  { value: "90606", label: "Whittier, CA (90606)" },
  { value: "76001", label: "Arlington, TX (76001)" },
  { value: "92335", label: "Fontana, CA (92335)" }
];
valuePickerLabel.currentValue = valuePickerLabel.items[1];
if (valuePickerLabel.canPrevious === true) {
  valuePicker.previous();
  console.log(valuePickerLabel.currentValue.label); // "Whittier, CA (90606)"
}

currentValue

Property

Type: LabelItem | undefined

The currently selected label item rendered by the component.

disabled

reflected Property

Type: boolean

When true, the component is visually withdrawn and cannot receive user interaction.

Attribute: disabled
Default value: false

items

Property

Type: LabelItem[] | undefined

The array of label items that arcgis-value-picker can iterate over.

Methods

Method	Signature
componentOnReady inherited	componentOnReady(): Promise<this>
destroy	destroy(): Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisValuePickerLabel = document.createElement("arcgis-value-picker-label");
document.body.append(arcgisValuePickerLabel);
await arcgisValuePickerLabel.componentOnReady();
console.log("arcgis-value-picker-label is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroys the component.

Returns: Promise<void>

Events

Name	Type
arcgisPropertyChange	CustomEvent<{ name: "canNext" \| "canPlay" \| "canPrevious" \| "currentValue"; }>

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>