arcgis-value-picker-collection

const valuePicker = document.querySelector("arcgis-value-picker");
const valuePickerCollection = document.querySelector("arcgis-value-picker-collection");

const collection = new Collection([
  { name: "Isaac Newton", dob: new Date(1643, 0, 4)},
  { name: "Albert Einstein", dob: new Date(1879, 2, 14)},
  { name: "Ernest Rutherford", dob: new Date(1871, 7, 20)}
]);
valuePickerCollection.items = collection;
valuePickerCollection.currentValue = valuePickerCollection.items.at(0);
if (valuePickerCollection.canNext === true) {
  valuePicker.next();
  console.log(valuePickerCollection.currentValue.name); // "Albert Einstein"
}

const valuePicker = document.querySelector("arcgis-value-picker");
const valuePickerCollection = document.querySelector("arcgis-value-picker-collection");

const collection = new Collection([
  { name: "Isaac Newton", dob: new Date(1643, 0, 4)},
  { name: "Albert Einstein", dob: new Date(1879, 2, 14)},
  { name: "Ernest Rutherford", dob: new Date(1871, 7, 20)}
]);
valuePickerCollection.items = collection;
valuePickerCollection.currentValue = valuePickerCollection.items.at(1);
if (valuePickerCollection.canPrevious === true) {
  valuePicker.previous();
  console.log(valuePickerCollection.currentValue.name); // "Isaac Newton"
}

const valuePickerCollection = document.querySelector("arcgis-value-picker-collection");

const collection = new Collection([
  { name: "Isaac Newton", dob: new Date(1643, 0, 4)},
  { name: "Albert Einstein", dob: new Date(1879, 2, 14)},
  { name: "Ernest Rutherford", dob: new Date(1871, 7, 20)}
]);
valuePickerCollection.items = collection;

// 3 different approaches to setting currentValue

// Acceptable. currentValue is a reference to items
valuePickerCollection.currentValue = valuePickerCollection.items.at(0);

// Acceptable. currentValue is assigned to the element at the index of items returned by find()
valuePickerCollection.currentValue = valuePickerCollection.items.find(
  ({ name }) => name === "Albert Einstein"
);

// Invalid. The component has no mechanism to predict which field should be used to match this property to an index.
valuePickerCollection.currentValue = { name: "Isaac Newton", dob: new Date(1643, 0, 4) };

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