@arcgis/common-components 5.2.0-next.3 → 5.2.0-next.30

package/dist/components/arcgis-unique-values-list/customElement.js

@@ -6,10 +6,10 @@ import { LitElement as K, createEvent as I } from "@arcgis/lumina";
 import { Task as Q } from "@lit/task";
 import { createRef as X, ref as L } from "lit/directives/ref.js";
 import { log as D, composeMissingPropertyMessage as N } from "@arcgis/toolkit/log";
-import { formatDate as F, convertDateFormatToIntlOptions as b, formatDateOnly as Y, formatTimeOnly as ee, formatTimestamp as U, formatNumber as te } from "@arcgis/core/intl.js";
+import { formatDate as F, convertDateFormatToIntlOptions as $, formatDateOnly as Y, formatTimeOnly as ee, formatTimestamp as U, formatNumber as te } from "@arcgis/core/intl.js";
 import ie from "@arcgis/core/smartMapping/statistics/uniqueValues.js";
 import { clone as O } from "@arcgis/core/core/lang.js";
-import { g as T, i as h } from "../../chunks/commonFunctions.js";
+import { g as E, i as h } from "../../chunks/commonFunctions.js";
 import { f as S, e as z, k as B, d as Z } from "../../chunks/layer-utils.js";
 import { u as se } from "../../chunks/useT9n.js";
 function k(i) {
@@ -21,38 +21,38 @@ function R(i) {
 function ne(i, e, s) {
   let t;
   return e === "unknown" ? t = F(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
   }) : t = F(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: e
   }), t;
 }
 function oe(i) {
-  return i ? Y(i, b("short-date")) : "";
+  return i ? Y(i, $("short-date")) : "";
 }
 function ae(i) {
   let e;
-  return typeof i == "string" ? e = ee(i, b("short-date-long-time")) : e = F(i, {
-    ...b("long-time"),
+  return typeof i == "string" ? e = ee(i, $("short-date-long-time")) : e = F(i, {
+    ...$("long-time"),
     timeZone: "utc"
   }), e;
 }
 function le(i, e) {
   return typeof i == "string" ? e && "timeZone" in e && e.timeZone === "unknown" ? U(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
   }) : U(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
   }) : e && "timeZone" in e && e.timeZone === "unknown" ? F(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
   }) : F(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
   });
 }
@@ -60,7 +60,7 @@ function A(i, e, s) {
   if (!S(i) && !z(i) && !B(i) && !Z(i))
     return;
   let t;
-  return T(i, s).fields.forEach((p) => {
+  return E(i, s).fields.forEach((p) => {
     const a = p.name, r = "domain" in p ? p.domain : void 0;
     if (!Z(i) && i.subtypeField === a) {
       let c;
@@ -107,7 +107,7 @@ function A(i, e, s) {
     }
   }), t;
 }
-function E(i, e) {
+function T(i, e) {
   const s = e;
   if (s) {
     let t = "";
@@ -151,7 +151,7 @@ class ue extends K {
         const u = h(e) && h(s) || h(t);
         if (!h(t) && !h(e) && !h(s) ? D("error", this, N("uniqueValues")) : h(t) || (h(e) || D("error", this, N("layer")), h(s) || D("error", this, N("fieldName"))), h(e) && h(s)) {
           const { visualizationSource: p } = this;
-          if (!T(e, p).fields?.filter((c) => c.name === s))
+          if (!E(e, p).fields?.filter((c) => c.name === s))
             throw D("error", this, "Field could not be found."), new Error();
         }
         if (!u)
@@ -185,7 +185,7 @@ class ue extends K {
     this.layer && this.fieldInfo && (setTimeout(() => this.initialRender = !1, 800), this.listNode?.setFocus());
   }
   async processProps() {
-    const { layer: e, fieldName: s, view: t, visualizationSource: u } = this, a = (e ? T(e, u) : void 0)?.fields?.filter((r) => r.name === s)?.[0];
+    const { layer: e, fieldName: s, view: t, visualizationSource: u } = this, a = (e ? E(e, u) : void 0)?.fields?.filter((r) => r.name === s)?.[0];
     if (h(this.uniqueValues))
       this.fieldInfo = {
         layerField: a,
@@ -260,20 +260,20 @@ class ue extends K {
         if (!l?.length)
           return "";
         const g = n ? ["small-integer", "big-integer", "integer", "single", "double", "long", "oid"].includes(n) : !1, v = n ? ["date", "date-only", "time-only"].includes(n) : !1, _ = (y) => {
-          y.sort(($, m) => $.count <= m.count ? 1 : -1);
+          y.sort((m, f) => m.count <= f.count ? 1 : -1);
         }, M = (y) => {
-          const $ = c?.length;
-          y.sort((m, f) => {
-            if (!$ && g)
-              return (typeof m.value == "string" ? Number.parseFloat(m.value) : m.value) - (typeof f.value == "string" ? Number.parseFloat(f.value) : f.value);
+          const m = c?.length;
+          y.sort((f, b) => {
+            if (!m && g)
+              return (typeof f.value == "string" ? Number.parseFloat(f.value) : f.value) - (typeof b.value == "string" ? Number.parseFloat(b.value) : b.value);
             {
-              const q = $ ? E(m.value, c) : m.label ?? m.value, V = $ ? E(f.value, c) : f.label ?? f.value;
+              const q = m ? T(f.value, c) : f.label ?? f.value, V = m ? T(b.value, c) : b.label ?? b.value;
               return `${q}`.startsWith("_") ? 1 : `${V}`.startsWith("_") ? -1 : `${q}`.localeCompare(`${V}`);
             }
           });
-        }, P = (y, $) => {
-          y.sort((m, f) => {
-            const q = $?.indexOf(m.value) ?? -1, V = $?.indexOf(f.value) ?? -1;
+        }, P = (y, m) => {
+          y.sort((f, b) => {
+            const q = m?.indexOf(f.value) ?? -1, V = m?.indexOf(b.value) ?? -1;
             return q === V || q > -1 && V > -1 ? 0 : q > V ? -1 : 1;
           });
         };
@@ -281,7 +281,7 @@ class ue extends K {
         const W = l.map((y) => this.renderUniqueValue(y));
         let x;
         return d && !p && (x = w`<div class="unique-values-content-list-msg">${r.errors.tooManyUniqueValues}</div>`), w`<div class="container"><calcite-list .label=${r.values} class="popover-unique-list" .filterEnabled=${l.length >= a} .selectionMode=${u ? "multiple" : "single"} .filterPlaceholder=${r.searchValues} @calciteListChange=${(y) => {
-          let m = y.target.selectedItems.map((f) => f.value);
+          let m = y.currentTarget.selectedItems.map((f) => f.value);
           !c && n === "date-only" ? m = m?.map((f) => R(f)) : !c && n === "time-only" ? m = m?.map((f) => k(f)) : n && ["date", "oid", "small-integer", "big-integer", "integer", "long"].includes(n) ? m = m?.map((f) => Number.parseInt(f)) : n && ["single", "double"].includes(n) && (m = m?.map((f) => Number.parseFloat(f))), !this.isSameLists(m, this.selectedValues) && (this.selectedValues = m, this.arcgisChange.emit(m));
         }} @calciteListFilter=${() => {
           this.dropdownNode.value && (this.dropdownNode.value.disabled = this.listNode.filteredItems.length < 4);
@@ -295,7 +295,7 @@ class ue extends K {
     return w`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed @calciteDropdownSelect=${this.onSortMenuSelect} ${L(this.dropdownNode)}><calcite-action slot=trigger .label=${u.sortValues} text><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${t === "count" || !h(t)} data-value=count>${u.sortByCount}</calcite-dropdown-item><calcite-dropdown-item .selected=${t === "name"} data-value=name>${e || s ? u.sortAscending : u.sortAlphabetical}</calcite-dropdown-item><calcite-dropdown-item .selected=${t === "selected"} data-value=selected>${u.sortSelected}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
   }
   renderUniqueValue(e) {
-    const { selectedValues: s, initialRender: t, view: u, fieldInfo: p, numberFormatOptions: a } = this, { fieldDomains: r, uniqueValueInfos: c, simpleType: l } = p, d = u && "timeZone" in u && u.timeZone || "system", o = r?.length ? E(e.value, r) : l === "date" ? ne(e.value, d) : l === "date-only" ? oe(e.value) : l === "time-only" ? ae(e.value) : l === "timestamp-offset" ? le(e.value, u) : typeof e.value == "number" ? te(e.value, a) : e.label ?? e.value, n = s ? l === "date-only" ? s.includes(r?.length ? e.value : R(e.value)) : l === "time-only" ? s.includes(r?.length ? e.value : k(e.value)) : s.includes(e.value) : !1;
+    const { selectedValues: s, initialRender: t, view: u, fieldInfo: p, numberFormatOptions: a } = this, { fieldDomains: r, uniqueValueInfos: c, simpleType: l } = p, d = u && "timeZone" in u && u.timeZone || "system", o = r?.length ? T(e.value, r) : l === "date" ? ne(e.value, d) : l === "date-only" ? oe(e.value) : l === "time-only" ? ae(e.value) : l === "timestamp-offset" ? le(e.value, u) : typeof e.value == "number" ? te(e.value, a) : e.label ?? e.value, n = s ? l === "date-only" ? s.includes(r?.length ? e.value : R(e.value)) : l === "time-only" ? s.includes(r?.length ? e.value : k(e.value)) : s.includes(e.value) : !1;
     return J(`list-item_${e.value}`, w`<calcite-list-item .label=${`${o}`} .value=${`${e.value}`} .selected=${n}>${h(e.count) && (c.length > 200 && !t || c.length <= 200) ? w`<div class="count" slot=actions-end>${`${e.count}`}</div>` : null}</calcite-list-item>`);
   }
 }

package/dist/components/arcgis-value-picker/customElement.d.ts

@@ -0,0 +1,377 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { IconName, AnimateEvent, ArcgisValuePickerSubcomponent, Layout } from "./types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * The Value Picker component allows users to step or play through an iterable set of data. The component alone acts as a shell, consisting
+ * of a play/pause button, a next button, a previous button, and a slot for adding a component to Value Picker. Value Picker is not associated with a
+ * [View](https://developers.arcgis.com/javascript/latest/references/core/views/View/) nor does it require that the dataset adheres to a specific structure
+ * for it to function. The [arcgis-value-picker-label](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/), [arcgis-value-picker-slider](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/),
+ * [arcgis-value-picker-combobox](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/), and [arcgis-value-picker-collection](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/) components provide the user with a few different options
+ * for placing their data into a Value Picker with minimal configuration. Value Picker handles the different shapes of these components automatically by asserting
+ * that all slotted components will extend the
+ * [ArcgisValuePickerSubcomponent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/types/#ArcgisValuePickerSubcomponent)
+ * interface, which allows Value picker to send and receive generic sets of instructions that are interpreted by the slotted component.
+ *
+ * ### Configuring Value Picker
+ *
+ * #### Configuring Value Picker without slotted components
+ *
+ * ![value-picker-nodata](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-nodata.avif)
+ *
+ * ```html
+ * <arcgis-map itemId="462c629e8e604c15baf45627c4f337d6">
+ *   <arcgis-value-picker slot="top-right"></arcgis-value-picker>
+ * </arcgis-map>
+ * ```
+ *
+ * If a user wishes to use Value Picker with a component or dataset that can't be accurately represented by the slottable components, the component may be placed
+ * adjacent to the empty Value Picker, and events fired by Value Picker can be used to orchestrate the behavior of the adjacent component.
+ * For example, when the user clicks the play button, Value Picker will emit [@arcgisAnimate](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#event-arcgisAnimate) each time
+ * [playRate](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#playRate) ms have elapsed since the button was clicked, which the user could listen to and iterate the index of
+ * their dataset on an interval as a result.
+ *
+ * ```js
+ * const valuePicker = document.querySelector("arcgis-value-picker");
+ * const basemapGallery = document.querySelector("arcgis-basemap-gallery");
+ *
+ * const basemaps = new Collection([
+ *   Basemap.fromId("topo-vector"),
+ *   Basemap.fromId("hybrid"),
+ *   Basemap.fromId("streets"),
+ *   Basemap.fromId("satellite"),
+ *   Basemap.fromId("oceans"),
+ * ]);
+ *
+ * basemapGallery.source = new LocalBasemapsSource({ basemaps });
+ * basemapGallery.activeBasemap = basemaps.getItemAt(0);
+ *
+ * valuePicker.addEventListener("arcgisAnimate", () => {
+ *   const currentIndex = basemaps.indexOf(basemapGallery.activeBasemap);
+ *   basemapGallery.activeBasemap = basemaps.getItemAt(currentIndex + 1);
+ * });
+ * ```
+ *
+ * #### Configuring Value Picker with slotted components
+ *
+ * A single component may be placed into the Value Picker slot by placing one element inside of the other:
+ *
+ * ```html
+ * <arcgis-value-picker>
+ *   <arcgis-value-picker-slider></arcgis-value-picker-slider>
+ * </arcgis-value-picker>
+ * ```
+ *
+ * #### 1. Using a label component to step through a list of items
+ *
+ * Consider using the [arcgis-value-picker-label](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/) component to step through a small, fixed list of predefined values. This component provides a strict
+ * interface that steps back and forth, so it's a good option for temporal data, or data that shows progression dependent on the element's position in the list.
+ *
+ * ![value-picker-label](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-label.avif)
+ *
+ * ```js
+ * const mapElement = document.querySelector("arcgis-map");
+ * const valuePickerLabel = document.querySelector("arcgis-value-picker-label");
+ *
+ * const labelItems = [
+ *   { value: "2017", label: "Tree cover in 2017" },
+ *   { value: "2018", label: "Tree cover in 2018" },
+ *   { value: "2019", label: "Tree cover in 2019" },
+ *   { value: "2020", label: "Tree cover in 2020" },
+ *   { value: "2021", label: "Tree cover in 2021" }
+ * ];
+ *
+ * valuePickerLabel.items = labelItems;
+ *
+ * valuePickerLabel.currentValue = labelItems[0];
+ * ```
+ *
+ * The user's interaction can be handled by monitoring the [arcgis-value-picker-label.currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/#currentValue) property.
+ *
+ * ```js
+ * valuePickerLabel.addEventListener("arcgisPropertyChange", () => {
+ *   const year = Number(valuePickerLabel.currentValue.value);
+ *   mapElement.view.timeExtent = {
+ *     start: new Date(year, 0, 1),
+ *     end: new Date(year + 1, 0, 1),
+ *   };
+ *   console.log("The current year is: ", valuePickerLabel.currentValue.value);
+ * });
+ * ```
+ *
+ * #### 2. Using a slider component to traverse a list of items
+ *
+ * Consider using the [arcgis-value-picker-slider](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/) component to quickly traverse through a set of data
+ * that can be represented along a fixed numeric range. This is a good option for sets of elements spaced along an interval, or mutating
+ * a continuous parameter such as layer opacity.
+ *
+ * ![value-picker-slider](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-slider.avif)
+ *
+ * ```js
+ * 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];
+ * valuePickerSlider.majorTicks = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+ * valuePickerSlider.minorTicks = [5, 15, 25, 35, 45, 55, 65, 75, 85, 95];
+ * valuePickerSlider.currentValue = 100;
+ * valuePickerSlider.labelFormatter = (value) => `${value}%`;
+ * ```
+ *
+ * The user's interaction can be handled by monitoring the [arcgis-value-picker-slider.currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/#currentValue) property.
+ *
+ * ```js
+ * valuePickerSlider.addEventListener("arcgisPropertyChange", () => {
+ *   layer.opacity = valuePickerSlider.currentValue / 100;
+ *   console.log("The current layer opacity is: ", valuePickerSlider.currentValue / 100);
+ * });
+ * ```
+ *
+ * Note that [arcgis-value-picker-slider.labels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/#labels), [arcgis-value-picker-slider.majorTicks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/#majorTicks), and [arcgis-value-picker-slider.minorTicks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/#minorTicks)
+ * are all independent of each other and optional.
+ *
+ * #### 3. Using a combobox component to select from a list of items
+ *
+ * Consider using the [arcgis-value-picker-combobox](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/) component to step through a longer list of items that cannot be clicked through
+ * one by one. The combobox component allows the user to open the list as a dropdown and make a selection, or narrow the size of the list by searching for an element or keyword.
+ *
+ * ![value-picker-combobox](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-combobox.avif)
+ *
+ * ```js
+ * const valuePickerCombobox = document.querySelector("arcgis-value-picker-combobox");
+ *
+ * const comboboxItems = [
+ *   { value: "Bare", label: "Isolate Bare Ground Areas" },
+ *   { value: "Built", label: "Isolate Built Areas" },
+ *   { value: "Trees", label: "Isolate Trees" },
+ *   { value: "Water", label: "Isolate Water Areas" },
+ *   { value: "Crops", label: "Isolate Crop Areas" },
+ * ];
+ *
+ * valuePickerCombobox.items = comboboxItems;
+ *
+ * valuePickerCombobox.currentValue = comboboxItems[0];
+ * ```
+ *
+ * The user's interaction can be handled by monitoring the [arcgis-value-picker-combobox.currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/#currentValue) property.
+ *
+ * ```js
+ * valuePickerCombobox.addEventListener("arcgisPropertyChange", () => {
+ *   layer.rasterFunction = {
+ *     functionName: valuePickerCombobox.currentValue.value,
+ *   };
+ *   console.log("The current land cover category is: ", valuePickerCombobox.currentValue.value);
+ * });
+ * ```
+ *
+ * #### 4. Using a collection component to step through an arbitrary set of data
+ *
+ * Consider using the [arcgis-value-picker-collection](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/) component when a visual representation for the dataset is not necessary.
+ * This is also a good option for datasets already in the form of a [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/).
+ *
+ * ![value-picker-collection](https://developers.arcgis.com/javascript/latest/assets/references/components/value-picker/value-picker-collection.avif)
+ *
+ * ```js
+ * const Collection = (await import("@arcgis/core/core/Collection.js")).default;
+ *
+ * const mapElement = document.querySelector("arcgis-map");
+ * const valuePickerCollection = document.querySelector("arcgis-value-picker-collection");
+ *
+ * const basemapCollection = new Collection(["topo-vector", "streets", "osm"]);
+ *
+ * valuePickerCollection.items = basemapCollection;
+ *
+ * valuePickerCollection.currentValue = "topo-vector";
+ * ```
+ *
+ * The user's interaction can be handled by monitoring the [arcgis-value-picker-collection.currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/#currentValue) property.
+ *
+ * ```js
+ * valuePickerCollection.addEventListener("arcgisPropertyChange", () => {
+ *   mapElement.basemap = valuePickerCollection.currentValue;
+ *   console.log("The current basemap is: ", valuePickerCollection.currentValue);
+ * });
+ * ```
+ *
+ * @slot  - Default slot for adding a component to value-picker. User is responsible for positioning the content via CSS.
+ * @since 5.2
+ */
+export abstract class ArcgisValuePicker 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/common-components/components/arcgis-value-picker/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * When true, the component is visually withdrawn and cannot be interacted with. If the slotted component also has a `disabled` property,
+   * it will be kept in sync with this property.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When set to `true`, the next button is not displayed.
+   *
+   * @default false
+   */
+  accessor hideNextButton: boolean;
+  /**
+   * When set to `true`, the play/pause button is not displayed.
+   *
+   * @default false
+   */
+  accessor hidePlayButton: boolean;
+  /**
+   * When set to `true`, the previous button is not displayed.
+   *
+   * @default false
+   */
+  accessor hidePreviousButton: boolean;
+  /**
+   * Icon which represents the component.
+   *
+   * @default "list-rectangle"
+   */
+  accessor icon: IconName;
+  /**
+   * The component's default label.
+   *
+   * @default ""
+   */
+  accessor label: string | undefined;
+  /**
+   * Indicates the axis that the Value Picker buttons should be oriented along.
+   *
+   * Horizontal layouts are best for wider components that don't require a lot of vertical space,
+   * or components that iterate from left to right over a dataset. Some examples of these are
+   * horizontal sliders, collapsable dropdowns, or label components.
+   *
+   * Vertical layouts are best for taller components or components that should iterate vertically.
+   * Some examples include vertical sliders or list components that require a larger space to allow the user to scroll through the list.
+   *
+   * @default "horizontal"
+   */
+  accessor layout: Layout;
+  /**
+   * When set to `true`, playback will restart from the first element of the slotted component's dataset
+   * once it reaches the end. Note that this will not allow the Value Picker buttons to be used to manually loop back to the first element.
+   *
+   * @default false
+   */
+  accessor loop: boolean;
+  /** @internal */
+  protected messages: {
+      componentLabel: string;
+      next: string;
+      previous: string;
+      play: string;
+      pause: string;
+  } & T9nMeta<{
+      componentLabel: string;
+      next: string;
+      previous: string;
+      play: string;
+      pause: string;
+  }>;
+  /**
+   * Specifies the interval, in milliseconds, on which the component will call `step("next")` on the slotted component.
+   *
+   * @default 1000
+   */
+  accessor playRate: number;
+  /** The current state of the component. */
+  get state(): "playing" | "ready";
+  /** Permanently destroys the component. */
+  destroy(): Promise<void>;
+  /**
+   * Selects the next index from the slotted component's dataset.
+   *
+   * @example
+   * ```js
+   * const valuePicker = document.querySelector("arcgis-value-picker");
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   *
+   * valuePickerSlider.steps = [1, 2, 3, 4, 5];
+   * valuePickerSlider.currentValue = 1;
+   *
+   * console.log(`Current value: ${valuePickerSlider.currentValue}`); // "Current value: 1"
+   * valuePicker.next();
+   * console.log(`Current value: ${valuePickerSlider.currentValue}`); // "Current value: 2"
+   * ```
+   */
+  next(): void;
+  /** Stops the component from playing. */
+  pause(): void;
+  /**
+   * Start playing. Value Picker will call `step("next")` on the slotted component at an interval defined by [playRate](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#playRate).
+   *
+   * @example
+   * ```js
+   * // Start a continuously looping ValuePicker.
+   * const valuePicker = document.querySelector("arcgis-value-picker");
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   *
+   * valuePickerSlider.steps = [1, 2, 3];
+   * valuePickerSlider.currentValue = 1;
+   * valuePicker.loop = true;
+   *
+   * valuePickerSlider.addEventListener("arcgisPropertyChange", () => {
+   *   console.log(valuePickerSlider.currentValue);
+   * });
+   *
+   * valuePicker.play();
+   * // output: 1, 2, 3, 1, 2, 3, 1...
+   * ```
+   */
+  play(): void;
+  /**
+   * Selects the previous index from the slotted component's dataset.
+   *
+   * @example
+   * ```js
+   * const valuePicker = document.querySelector("arcgis-value-picker");
+   * const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
+   *
+   * valuePickerSlider.steps = [1, 2, 3, 4, 5];
+   * valuePickerSlider.currentValue = 3;
+   *
+   * console.log(`Current value: ${valuePickerSlider.currentValue}`); // "Current value: 3"
+   * valuePicker.previous();
+   * console.log(`Current value: ${valuePickerSlider.currentValue}`); // "Current value: 2"
+   * ```
+   */
+  previous(): void;
+  /**
+   * Fires on each playback tick after the user presses the play button. The event payload contains `{ first: boolean }` and fires for
+   * the first time after [playRate](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#playRate) ms have elapsed since the user pressed the play button. Users should
+   * listen to this event to manually iterate an external dataset on an interval.
+   */
+  readonly arcgisAnimate: import("@arcgis/lumina").TargetedEvent<this, AnimateEvent>;
+  /** Fires when the Value Picker's next button is pressed or when the [next()](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#next) method is invoked. */
+  readonly arcgisNext: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the Value Picker's pause button is pressed or when the [pause()](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#pause) method is invoked. */
+  readonly arcgisPause: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the Value Picker's play button is pressed or when the [play()](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#play) method is invoked. */
+  readonly arcgisPlay: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the Value Picker's previous button is pressed or when the [previous()](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#previous) method is invoked. */
+  readonly arcgisPrevious: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** @copyDoc */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "layout" | "loop" | "playRate" | "state"; }>;
+  /** Fires when the contents of Value Picker's slot changes. */
+  readonly arcgisSlottedElementChange: import("@arcgis/lumina").TargetedEvent<this, { slottedElement: ArcgisValuePickerSubcomponent | undefined; }>;
+  readonly "@eventTypes": {
+    arcgisAnimate: ArcgisValuePicker["arcgisAnimate"]["detail"];
+    arcgisNext: ArcgisValuePicker["arcgisNext"]["detail"];
+    arcgisPause: ArcgisValuePicker["arcgisPause"]["detail"];
+    arcgisPlay: ArcgisValuePicker["arcgisPlay"]["detail"];
+    arcgisPrevious: ArcgisValuePicker["arcgisPrevious"]["detail"];
+    arcgisPropertyChange: ArcgisValuePicker["arcgisPropertyChange"]["detail"];
+    arcgisSlottedElementChange: ArcgisValuePicker["arcgisSlottedElementChange"]["detail"];
+  };
+}

package/dist/components/arcgis-value-picker/customElement.js

@@ -0,0 +1,87 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { LitElement as n, createEvent as i, nothing as l, safeClassMap as h } from "@arcgis/lumina";
+import { getSlotAssignedElements as r } from "@arcgis/toolkit/dom";
+import { css as c, html as s } from "lit";
+import { u as d } from "../../chunks/useT9n.js";
+import { usePropertyChange as m } from "@arcgis/lumina/controllers";
+const p = c`:host{display:inline-flex;max-inline-size:100%}:host([layout="horizontal"]) slot{min-inline-size:300px;min-block-size:48px}:host([layout="vertical"]) slot{min-inline-size:300px;min-block-size:144px}slot{display:flex}slot.empty{display:none}.container{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}.root{display:flex;flex-direction:row;align-items:stretch}calcite-action{width:var(--calcite-font-line-height-fixed-4xl);height:var(--calcite-font-line-height-fixed-4xl)}calcite-action-bar{--calcite-action-bar-items-space: var(--calcite-space-none);--calcite-spacing-sm: var(--calcite-space-none);background-color:var(--calcite-color-foreground-1)}.separator{border-inline-end:solid 1px var(--calcite-color-border-3);width:1px}`;
+class u extends n {
+  constructor() {
+    super(), this.messages = d({ blocking: !0 }), this._isPlaying = !1, this.autoDestroyDisabled = !1, this.disabled = !1, this.hideNextButton = !1, this.hidePlayButton = !1, this.hidePreviousButton = !1, this.icon = "list-rectangle", this.label = "", this.layout = "horizontal", this.loop = !1, this.playRate = 1e3, this.arcgisPropertyChange = m()("layout", "loop", "playRate", "state"), this.arcgisAnimate = i(), this.arcgisNext = i(), this.arcgisPrevious = i(), this.arcgisPlay = i(), this.arcgisPause = i(), this.arcgisSlottedElementChange = i(), this.listen("arcgisPropertyChange", () => this.requestUpdate());
+  }
+  static {
+    this.properties = { _isPlaying: 16, _slottedElement: 16, autoDestroyDisabled: 5, disabled: 5, hideNextButton: 5, hidePlayButton: 5, hidePreviousButton: 5, icon: 1, label: 1, layout: 3, loop: 5, playRate: 9, state: 32 };
+  }
+  static {
+    this.styles = p;
+  }
+  get state() {
+    return this._isPlaying ? "playing" : "ready";
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  next() {
+    this.arcgisNext.emit(), this._slottedElement?.canNext && this._slottedElement.step("next");
+  }
+  pause() {
+    this._isPlaying = !1, this.arcgisPause.emit();
+  }
+  play() {
+    this._isPlaying || (this._isPlaying = !0, this.arcgisPlay.emit(), this._startPlayRate(!0));
+  }
+  previous() {
+    this.arcgisPrevious.emit(), this._slottedElement?.canPrevious && this._slottedElement.step("previous");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._isPlaying && this.pause();
+  }
+  willUpdate(t) {
+    t.has("layout") && this._isElementWithLayout(this._slottedElement) && (this._slottedElement.layout = this.layout), t.has("disabled") && this._isElementWithDisabled(this._slottedElement) && (this._slottedElement.disabled = this.disabled);
+  }
+  _handleSlotChange(t) {
+    const [e] = r(t);
+    this._slottedElement = e, this.arcgisSlottedElementChange.emit({ slottedElement: e }), !e && this._isPlaying && this.pause(), this._isElementWithLayout(e) && (e.layout = this.layout), this._isElementWithDisabled(e) && (e.disabled = this.disabled), this._isElementWithComponentOnReady(e) && e.componentOnReady().then(() => {
+      this._slottedElement === e && this.requestUpdate();
+    });
+  }
+  _isElementWithComponentOnReady(t) {
+    return !!t && "componentOnReady" in t;
+  }
+  _isElementWithLayout(t) {
+    return !!t && "layout" in t;
+  }
+  _isElementWithDisabled(t) {
+    return !!t && "disabled" in t;
+  }
+  _startPlayRate(t) {
+    setTimeout(() => {
+      if (this._isPlaying) {
+        if (!this._slottedElement?.canNext && this.loop)
+          this._slottedElement?.reset();
+        else if (this._slottedElement?.step("next"), this._slottedElement && !this._slottedElement?.canNext && !this.loop) {
+          this.pause();
+          return;
+        }
+        this.arcgisAnimate.emit({ first: t }), this._startPlayRate(!1);
+      }
+    }, this.playRate);
+  }
+  render() {
+    const t = !!this._slottedElement && !this._slottedElement.hidden, e = this.state === "playing";
+    return s`<div class="container"><div class="root"><calcite-action-bar expand-disabled .layout=${this.layout}>${!this.hidePlayButton && s`<calcite-action alignment=center .disabled=${this.disabled || this._slottedElement && !this._slottedElement.canPlay} .icon=${e ? "pause" : "play"} .text=${e ? this.messages.pause : this.messages.play} title=${(e ? this.messages.pause : this.messages.play) ?? l} @click=${() => {
+      if (this._slottedElement && !this._slottedElement.canNext && !this.loop) {
+        this._slottedElement.reset(), this.play();
+        return;
+      }
+      e ? this.pause() : this.play();
+    }}></calcite-action>` || ""}${!this.hidePreviousButton && s`<calcite-action alignment=center .disabled=${this.disabled || e || this._slottedElement && !this._slottedElement.canPrevious} .icon=${this.layout === "horizontal" ? "chevron-left" : "chevron-up"} .text=${this.messages.previous} title=${this.messages.previous ?? l} @click=${this.previous}></calcite-action>` || ""}${!this.hideNextButton && s`<calcite-action alignment=center .disabled=${this.disabled || e || this._slottedElement && !this._slottedElement.canNext} .icon=${this.layout === "horizontal" ? "chevron-right" : "chevron-down"} .text=${this.messages.next} title=${this.messages.next ?? l} @click=${this.next}></calcite-action>` || ""}</calcite-action-bar>${t && s`<div class="separator"></div>` || ""}<slot @slotchange=${({ currentTarget: a }) => {
+      this._handleSlotChange(a);
+    }} class=${h(t ? "component-slot" : "empty")}></slot></div></div>`;
+  }
+}
+o("arcgis-value-picker", u);
+export {
+  u as ArcgisValuePicker
+};

package/dist/components/arcgis-value-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-value-picker/index.js

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-action-bar";
+import "@esri/calcite-components/components/calcite-action";
+export * from "./customElement.js";