@arcgis/common-components 5.2.0-next.10 → 5.2.0-next.12

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";

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

@@ -0,0 +1,69 @@
+import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
+
+/**
+ * @since
+ * 5.2
+ *
+ * The minimum API required for components being slotted into [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/). Value Picker will automatically
+ * create an internal reference to the slotted component, so the properties on this interface can be directly referenced without requiring
+ * the the Value Picker component to be aware of the slotted component's unique API. For example, if the user presses play and eventually Value Picker
+ * determines that `slottedComponent.canNext` is false but [arcgis-value-picker.loop](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#loop) is true, Value Picker will call `slottedComponent.reset()`
+ * to reset the slotted component's current value to the first index of its dataset. This will allow playback to continue looping seamlessly.
+ */
+export interface ArcgisValuePickerSubcomponent extends HTMLElement {
+  /**
+   * Indicates whether the component may advance to the next index of its data set. This value is recalculated after the component is interacted with
+   * so the [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/) buttons give the user immediate feedback regarding what interactions are permitted next.
+   */
+  canNext: boolean;
+  /**
+   * Indicates whether the component may begin playing. This value is recalculated after the component is interacted with
+   * so the [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/) buttons give the user immediate feedback regarding what interactions are permitted next.
+   */
+  canPlay: boolean;
+  /**
+   * Indicates whether the component may step backwards to the previous index of its data set. This value is recalculated after the component is interacted with
+   * so the [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/) buttons give the user immediate feedback regarding what interactions are permitted next.
+   */
+  canPrevious: boolean;
+  /**
+   * Function used to change the currently selected value. Pressing the next button will call step("next"), and pressing the previous button will call step("previous").
+   *
+   * @param direction - Indicates whether the next element selected by [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/)
+   * should be the next or previous index of the slotted component's dataset.
+   */
+  step: (direction: "next" | "previous") => void;
+  /**
+   * Function used to reset the currently selected value to the first element of the slotted component's dataset. This method is called automatically
+   * when [arcgis-value-picker.loop](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#loop) is `true` and the selected value index reaches the end of the dataset. Additionally, if [arcgis-value-picker.loop](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#loop)
+   * is `false` and the play button is clicked while the index is at the last element of the slotted component's dataset, Value Picker will call `reset()` on the slotted component
+   * and play through all elements once.
+   */
+  reset: () => void;
+}
+
+export interface AnimateEvent {
+  /** Denotes whether the event is firing for the first time since the play button was pressed. */
+  first: boolean;
+}
+
+/** Object used to define the label items. */
+export interface LabelItem {
+  /** The value of the item. */
+  value: string;
+  /** The label users will see for this item. */
+  label: string;
+}
+
+/** Object used to define the combobox items. */
+export interface ComboboxItem {
+  /** The value of the item. */
+  value: string;
+  /** The label users will see for this item. */
+  label: string;
+}
+
+/** Indicates the axis the component should be oriented along. */
+export type Layout = "horizontal" | "vertical";
+
+export type IconName = Icon["icon"];

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

@@ -0,0 +1,113 @@
+/// <reference path="../../index.d.ts" />
+import type Collection from "@arcgis/core/core/Collection.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+
+export abstract class ArcgisValuePickerCollection 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-collection/#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 [currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/#currentValue) matches the last index of
+   * [items](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/#items).
+   *
+   * @default false
+   * @example
+   * ```js
+   * 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"
+   * }
+   * ```
+   */
+  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 [currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/#currentValue) matches the first index of
+   * [items](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/#items).
+   *
+   * @default false
+   * @example
+   * ```js
+   * 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"
+   * }
+   * ```
+   */
+  accessor canPrevious: boolean;
+  /**
+   * The currently selected collection item. Note that because the type of [items](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/#items) is a
+   * [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/) of any shape, this component
+   * identifies `currentValue` by reference rather than matching a field that may not always be present. Ensure that `currentValue` is always
+   * assigned from an existing element within `items`.
+   *
+   * @example
+   * ```js
+   * 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) };
+   * ```
+   */
+  accessor currentValue: unknown | undefined;
+  /** The collection of arbitrary items that [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/) can iterate over. */
+  accessor items: Collection | undefined;
+  /** Permanently destroys the component. */
+  destroy(): Promise<void>;
+  /** @copyDoc */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisValuePickerCollection["arcgisPropertyChange"]["detail"];
+  };
+}

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

@@ -0,0 +1,43 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as s } from "../../chunks/runtime.js";
+import { LitElement as i } from "@arcgis/lumina";
+import { usePropertyChange as a } from "@arcgis/lumina/controllers";
+class r extends i {
+  constructor() {
+    super(...arguments), this.autoDestroyDisabled = !1, this.canNext = !1, this.canPlay = !1, this.canPrevious = !1, this.arcgisPropertyChange = a()("canNext", "canPlay", "canPrevious", "currentValue");
+  }
+  static {
+    this.properties = { autoDestroyDisabled: 5, items: 0, currentValue: 0, canNext: 5, canPlay: 5, canPrevious: 5 };
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  reset() {
+    this.currentValue = this.items?.at(0);
+  }
+  step(t) {
+    if (!this.items || !this.currentValue)
+      return;
+    const e = this.items.indexOf(this.currentValue) + (t === "next" ? 1 : -1);
+    e >= this.items.length || e < 0 || (this.currentValue = this.items.at(e), this._checkState());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.el.hidden = !0;
+  }
+  willUpdate(t) {
+    (t.has("currentValue") || t.has("items")) && this.items?.length && (this.currentValue ??= this.items.at(0)), this._checkState();
+  }
+  _checkState() {
+    if (!this.items?.length) {
+      this.canPlay = !1, this.canNext = !1, this.canPrevious = !1;
+      return;
+    }
+    this.canPlay = !0;
+    const t = this.items.indexOf(this.currentValue);
+    this.canNext = t >= 0 && t < this.items.length - 1, this.canPrevious = t > 0;
+  }
+}
+s("arcgis-value-picker-collection", r);
+export {
+  r as ArcgisValuePickerCollection
+};

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

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

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

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

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

@@ -0,0 +1,90 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ComboboxItem } from "../arcgis-value-picker/types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+export abstract class ArcgisValuePickerCombobox 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-combobox/#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 [currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/#currentValue) matches the last index of
+   * [items](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/#items).
+   *
+   * @default false
+   * @example
+   * ```js
+   * const valuePicker = document.querySelector("arcgis-value-picker");
+   * const valuePickerCombobox = document.querySelector("arcgis-value-picker-combobox");
+   *
+   * valuePickerCombobox.items = [
+   *   { value: "ind", label: "Industrial" },
+   *   { value: "res", label: "Residential" },
+   *   { value: "com", label: "Commercial" }
+   * ];
+   * valuePickerCombobox.currentValue = valuePickerCombobox.items[0];
+   * if (valuePickerCombobox.canNext === true) {
+   *   valuePicker.next();
+   *   console.log(valuePickerCombobox.currentValue.label); // "Residential"
+   * }
+   * ```
+   */
+  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 [currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/#currentValue) matches the first index of
+   * [items](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/#items).
+   *
+   * @default false
+   * @example
+   * ```js
+   * const valuePicker = document.querySelector("arcgis-value-picker");
+   * const valuePickerCombobox = document.querySelector("arcgis-value-picker-combobox");
+   *
+   * valuePickerCombobox.items = [
+   *   { value: "ind", label: "Industrial" },
+   *   { value: "res", label: "Residential" },
+   *   { value: "com", label: "Commercial" }
+   * ];
+   * valuePickerCombobox.currentValue = valuePickerCombobox.items[1];
+   * if (valuePickerCombobox.canPrevious === true) {
+   *   valuePicker.previous();
+   *   console.log(valuePickerCombobox.currentValue.label); // "Industrial"
+   * }
+   * ```
+   */
+  accessor canPrevious: boolean;
+  /** The currently selected combobox item rendered by the component. */
+  accessor currentValue: ComboboxItem | undefined;
+  /**
+   * When true, the component is visually withdrawn and cannot receive user interaction.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** The array of combobox items that [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/) can iterate over. */
+  accessor items: ComboboxItem[] | undefined;
+  /** @internal */
+  protected messages: { comboboxLabel: string; } & T9nMeta<{ comboboxLabel: string; }>;
+  /** Permanently destroys the component. */
+  destroy(): Promise<void>;
+  /** @copyDoc */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisValuePickerCombobox["arcgisPropertyChange"]["detail"];
+  };
+}

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

@@ -0,0 +1,55 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as l } from "../../chunks/runtime.js";
+import { LitElement as r } from "@arcgis/lumina";
+import { css as n, html as a } from "lit";
+import { usePropertyChange as o } from "@arcgis/lumina/controllers";
+import { u as h } from "../../chunks/useT9n.js";
+const u = n`:host{align-items:center;display:flex;flex:auto;min-width:300px;padding-inline:var(--calcite-space-sm);--calcite-color-border-input: var(--calcite-color-border-3)}calcite-combobox{flex:auto;width:var(--calcite-space-none)}`;
+class m extends r {
+  constructor() {
+    super(...arguments), this.messages = h({ blocking: !0 }), this.autoDestroyDisabled = !1, this.disabled = !1, this.canNext = !1, this.canPlay = !1, this.canPrevious = !1, this.arcgisPropertyChange = o()("canNext", "canPlay", "canPrevious", "currentValue");
+  }
+  static {
+    this.properties = { autoDestroyDisabled: 5, disabled: 5, items: 0, currentValue: 0, canNext: 5, canPlay: 5, canPrevious: 5 };
+  }
+  static {
+    this.styles = u;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  reset() {
+    this.currentValue = this.items?.[0];
+  }
+  step(e) {
+    if (!this.items || !this.currentValue)
+      return;
+    const s = this.items.findIndex(({ value: c }) => c === this.currentValue?.value) + (e === "next" ? 1 : -1);
+    s >= this.items.length || s < 0 || (this.currentValue = this.items[s], this._checkState());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.el.hidden = !0;
+  }
+  willUpdate(e) {
+    (e.has("currentValue") || e.has("items")) && this.items?.length && (this.currentValue ??= this.items[0]), this.el.hidden = !this.items?.length, this._checkState();
+  }
+  _checkState() {
+    if (!this.items?.length) {
+      this.canPlay = !1, this.canNext = !1, this.canPrevious = !1;
+      return;
+    }
+    this.canPlay = !0;
+    const e = this.items.findIndex(({ value: t }) => t === this.currentValue?.value);
+    this.canNext = e < this.items.length - 1, this.canPrevious = e > 0;
+  }
+  render() {
+    return a`<calcite-combobox .disabled=${this.disabled} selection-mode=single .label=${this.messages.comboboxLabel} @calciteComboboxChange=${({ currentTarget: e }) => {
+      const t = e.selectedItems[0]?.value;
+      this.currentValue = this.items?.find(({ value: i }) => i === t), this._checkState();
+    }}>${this.items?.map((e) => a`<calcite-combobox-item .value=${e.value} .heading=${e.label} .selected=${e.value === this.currentValue?.value}></calcite-combobox-item>`)}</calcite-combobox>`;
+  }
+}
+l("arcgis-value-picker-combobox", m);
+export {
+  m as ArcgisValuePickerCombobox
+};

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

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

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

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

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

@@ -0,0 +1,81 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { LabelItem } from "../arcgis-value-picker/types.js";
+
+export abstract class ArcgisValuePickerLabel 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-label/#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 [currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/#currentValue) matches the last index of
+   * [items](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/#items).
+   *
+   * @default false
+   * @example
+   * ```js
+   * 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)"
+   * }
+   * ```
+   */
+  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 [currentValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/#currentValue) matches the first index of
+   * [items](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/#items).
+   *
+   * @default false
+   * @example
+   * ```js
+   * 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)"
+   * }
+   * ```
+   */
+  accessor canPrevious: boolean;
+  /** The currently selected label item rendered by the component. */
+  accessor currentValue: LabelItem | undefined;
+  /** The array of label items that [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/) can iterate over. */
+  accessor items: LabelItem[] | undefined;
+  /** Permanently destroys the component. */
+  destroy(): Promise<void>;
+  /** @copyDoc */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisValuePickerLabel["arcgisPropertyChange"]["detail"];
+  };
+}

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

@@ -0,0 +1,51 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as a } from "../../chunks/runtime.js";
+import { LitElement as r } from "@arcgis/lumina";
+import { css as n, html as c } from "lit";
+import { usePropertyChange as l } from "@arcgis/lumina/controllers";
+const o = n`:host{display:flex;flex:auto;min-width:300px;padding:var(--calcite-space-sm)}.container{align-items:center;border:solid 1px var(--calcite-color-border-3);display:flex;flex:auto;padding-inline:var(--calcite-space-sm)}.text{color:var(--calcite-color-text-1);flex:auto;font-family:inherit;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-normal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--calcite-space-none)}`;
+class h extends r {
+  constructor() {
+    super(...arguments), this.autoDestroyDisabled = !1, this.canNext = !1, this.canPlay = !1, this.canPrevious = !1, this.arcgisPropertyChange = l()("canNext", "canPlay", "canPrevious", "currentValue");
+  }
+  static {
+    this.properties = { autoDestroyDisabled: 5, items: 0, currentValue: 0, canNext: 5, canPlay: 5, canPrevious: 5 };
+  }
+  static {
+    this.styles = o;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  reset() {
+    this.currentValue = this.items?.[0];
+  }
+  step(e) {
+    if (!this.items || !this.currentValue)
+      return;
+    const t = this.items.findIndex(({ value: s }) => s === this.currentValue?.value) + (e === "next" ? 1 : -1);
+    t >= this.items.length || t < 0 || (this.currentValue = this.items[t], this._checkState());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.el.hidden = !0;
+  }
+  willUpdate(e) {
+    (e.has("currentValue") || e.has("items")) && this.items?.length && !this.currentValue && (this.currentValue = this.items[0]), this.el.hidden = !this.items?.length, this._checkState();
+  }
+  _checkState() {
+    if (!this.items?.length) {
+      this.canPlay = !1, this.canNext = !1, this.canPrevious = !1;
+      return;
+    }
+    this.canPlay = !0;
+    const e = this.items.findIndex(({ value: i }) => i === this.currentValue?.value);
+    this.canNext = e < this.items.length - 1, this.canPrevious = e > 0;
+  }
+  render() {
+    return c`<div class="container"><div class="text">${this.currentValue?.label}</div></div>`;
+  }
+}
+a("arcgis-value-picker-label", h);
+export {
+  h as ArcgisValuePickerLabel
+};

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

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

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

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