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

package/dist/components/arcgis-field-pick-list/customElement.js

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as F } from "../../chunks/runtime.js";
-import { keyed as y } from "lit/directives/keyed.js";
-import { LitElement as w, createEvent as r, renderElement as $, nothing as h, safeStyleMap as u, safeClassMap as v } from "@arcgis/lumina";
+import { keyed as w } from "lit/directives/keyed.js";
+import { LitElement as $, createEvent as r, renderElement as y, nothing as h, safeStyleMap as u, safeClassMap as v } from "@arcgis/lumina";
 import { createRef as a, ref as c } from "lit/directives/ref.js";
 import { html as l, css as C } from "lit";
-import { Task as k } from "@lit/task";
-import { log as f, composeMissingPropertyMessage as S } from "@arcgis/toolkit/log";
+import { Task as S } from "@lit/task";
+import { log as f, composeMissingPropertyMessage as x } from "@arcgis/toolkit/log";
 import { F as g } from "../../chunks/internal-types.js";
-import { i as x } from "../../chunks/commonFunctions.js";
-import { u as b } from "../../chunks/useT9n.js";
+import { i as b } from "../../chunks/commonFunctions.js";
+import { u as k } from "../../chunks/useT9n.js";
 const n = /* @__PURE__ */ new Map();
 n.set("oid", "key");
 n.set("guid", "key");
@@ -26,13 +26,13 @@ n.set("date-only", "calendar");
 n.set("time-only", "clock");
 n.set("timestamp-offset", "time-zone");
 n.set("string", "string");
-const B = ({ fieldType: m }) => l`<calcite-icon scale=s .icon=${n.get(m)}></calcite-icon>`, E = C`.panel{min-height:250px}.content{max-height:50vh}.field-icons{display:flex;align-items:center;padding:0 var(--calcite-space-sm)}.selection-button-div{padding:var(--calcite-space-2xs) var(--calcite-space-sm-plus)}.no-match-text{padding:var(--calcite-space-md)}.footer{width:100%}.add-cancel-buttons{display:flex;align-content:space-between}`;
-class L extends w {
+const L = ({ fieldType: m }) => l`<calcite-icon scale=s .icon=${n.get(m)}></calcite-icon>`, B = C`.panel{min-height:250px}.content{max-height:50vh}.field-icons{display:flex;align-items:center;padding:0 var(--calcite-space-sm)}.selection-button-div{padding:var(--calcite-space-2xs) var(--calcite-space-sm-plus)}.no-match-text{padding:var(--calcite-space-md)}.footer{width:100%}.add-cancel-buttons{display:flex;align-content:space-between}`;
+class I extends $ {
   constructor() {
-    super(...arguments), this._messages = b({ blocking: !0 }), this.popoverNode = a(), this.listNode = a(), this.flowElement = a(), this.panelElement = a(), this.dropdownNode = a(), this.fieldInfoFlowItemEl = a(), this.allLists = [], this.filterText = "", this.panelCutOffHeight = 0, this._propWatcherTask = new k(this, {
+    super(...arguments), this._messages = k({ blocking: !0 }), this.popoverNode = a(), this.listNode = a(), this.flowElement = a(), this.panelElement = a(), this.dropdownNode = a(), this.fieldInfoFlowItemEl = a(), this.allLists = [], this.filterText = "", this.panelCutOffHeight = 0, this._propWatcherTask = new S(this, {
       task: async ([e]) => {
-        if (!this.listOnly && !x(e?.refElement))
-          throw f("error", this, S("popoverProps")), new Error();
+        if (!this.listOnly && !b(e?.refElement))
+          throw f("error", this, x("popoverProps")), new Error();
         this._propWatcherTask.autoRun = !1;
       },
       args: () => [this.popoverProps]
@@ -42,7 +42,7 @@ class L extends w {
     this.properties = { lastSortBy: 16, filterFields: 16, mapView: 0, view: 0, layer: 0, fields: 0, selectedFields: 0, listOnly: 5, popoverProps: 0, showFieldInfo: 5, showFieldTypeIcon: 5, showFieldName: 5, showDescription: 5, showSelectionAll: 5, showCancel: 5, hideCancel: 5, showSort: 5, hideSort: 5, showFilterLength: 9, multiple: 5, heading: 1, okBtnText: 1, filterPlaceholderText: 1, filterNoResultsText: 1, sortBy: 1, groupFieldsAndExpressions: 5, fieldsGroupHeading: 1, expressionsGroupHeading: 1, customExpressionCheck: 0 };
   }
   static {
-    this.styles = E;
+    this.styles = B;
   }
   async reposition() {
     await this.popoverNode.value?.reposition();
@@ -88,8 +88,8 @@ class L extends w {
   }
   getSortedList(e) {
     let t = [...e];
-    const i = t.filter((s) => s.type === "none");
-    return t = t.filter((s) => s.type !== "none"), this.lastSortBy === "display" ? t.sort((s, o) => s.alias.localeCompare(o.alias)) : this.lastSortBy === "field" ? t.sort((s, o) => s.name.localeCompare(o.name)) : this.lastSortBy === "type" && t.sort((s, o) => s.type.localeCompare(o.type)), t = t.concat(i), t;
+    const s = t.filter((i) => i.type === "none");
+    return t = t.filter((i) => i.type !== "none"), this.lastSortBy === "display" ? t.sort((i, o) => i.alias.localeCompare(o.alias)) : this.lastSortBy === "field" ? t.sort((i, o) => i.name.localeCompare(o.name)) : this.lastSortBy === "type" && t.sort((i, o) => i.type.localeCompare(o.type)), t = t.concat(s), t;
   }
   isExpression(e) {
     return this.customExpressionCheck ? this.customExpressionCheck(e) : e.name.includes(g.expression);
@@ -132,12 +132,12 @@ class L extends w {
       ];
   }
   addFieldInfoFlowItem(e, t) {
-    const i = this.flowElement.value, s = $(l`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.name} class="panel" style=${u(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(o) => {
+    const s = this.flowElement.value, i = y(l`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.name} class="panel" style=${u(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(o) => {
       o.currentTarget.remove(), this.fieldInfoFlowItemEl.value.selected = !1, this.panelElement.value.selected = !0, setTimeout(() => {
         t.setFocus();
       }, 300);
     }} ${c(this.fieldInfoFlowItemEl)}><arcgis-field-info lang=${this._messages._lang ?? h} .fieldName=${e.name} .layer=${this.layer} .view=${this.view} class="content"></arcgis-field-info></calcite-flow-item>`);
-    i.appendChild(s), this.panelElement.value.selected = !1, this.fieldInfoFlowItemEl?.value.setFocus();
+    s.appendChild(i), this.panelElement.value.selected = !1, this.fieldInfoFlowItemEl?.value.setFocus();
   }
   usingCustomGroups() {
     return !!this.fields.length && "fields" in this.fields[0];
@@ -151,12 +151,12 @@ class L extends w {
   reorderSelectedFieldsByCurrentListOrder() {
     if (!this.selectedFields.length)
       return !1;
-    const e = this.getAllFields().map((o) => o.name), t = new Set(this.selectedFields), i = e.filter((o) => t.has(o)), s = (
+    const e = this.getAllFields().map((o) => o.name), t = new Set(this.selectedFields), s = e.filter((o) => t.has(o)), i = (
       // adding/removing fields
-      i.length !== this.selectedFields.length || // reordering fields
-      i.some((o, p) => o !== this.selectedFields[p])
+      s.length !== this.selectedFields.length || // reordering fields
+      s.some((o, p) => o !== this.selectedFields[p])
     );
-    return s && (this.selectedFields = [...i]), s;
+    return i && (this.selectedFields = [...s]), i;
   }
   render() {
     return this._propWatcherTask.render({
@@ -177,30 +177,22 @@ class L extends w {
     });
   }
   renderList() {
-    const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = this.getAllFields(), i = t.length >= this.showFilterLength;
-    return l`${t.length ? l`<calcite-list .label=${e} .selectionMode=${this.multiple ? "multiple" : "single"} class=${v(this.listOnly ? "" : "content")} .filterEnabled=${i} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => {
-      const s = this.listNode.value.selectedItems.map((d) => d.value), o = this.selectedFields.filter((d) => s.includes(d)), p = s.filter((d) => !this.selectedFields.includes(d));
+    const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = this.getAllFields(), s = t.length >= this.showFilterLength;
+    return l`${t.length ? l`<calcite-list .label=${e} .selectionMode=${this.multiple ? "multiple" : "single"} class=${v(this.listOnly ? "" : "content")} .filterEnabled=${s} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => {
+      const i = this.listNode.value.selectedItems.map((d) => d.value), o = this.selectedFields.filter((d) => i.includes(d)), p = i.filter((d) => !this.selectedFields.includes(d));
       this.selectedFields = [.../* @__PURE__ */ new Set([...o, ...p])], this.reorderSelectedFieldsByCurrentListOrder(), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }), this.multiple || (this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields }));
-    }} @calciteListFilter=${(s) => {
-      s.stopPropagation(), this.filterFields = this.listNode.value.filteredItems?.map((o) => o.value), this.filterText = this.listNode.value.filterText;
-    }} ${c(this.listNode)}>${this.renderSortButton()}<slot name=content-center></slot>${this.multiple && this.showSelectionAll && (!i || !this.filterText || this.filterFields?.length) ? this.renderSelectionButton() : null}${this.renderListItems()}</calcite-list>` : l`<slot name=no-fields></slot>`}${this.filterFields && !this.filterFields.length && this.listNode.value && this.filterNoResultsText?.length !== 0 ? l`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}`;
+    }} @calciteListFilter=${(i) => {
+      i.stopPropagation(), this.filterFields = this.listNode.value.filteredItems?.map((o) => o.value), this.filterText = this.listNode.value.filterText;
+    }} ${c(this.listNode)}>${this.renderSortButton()}<slot name=content-center></slot>${this.multiple && this.showSelectionAll && (!s || !this.filterText || this.filterFields?.length) ? this.renderSelectionButton() : null}${this.renderListItems()}</calcite-list>` : l`<slot name=no-fields></slot>`}${this.filterFields && !this.filterFields.length && this.listNode.value && this.filterNoResultsText?.length !== 0 ? l`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}`;
   }
   renderSortButton() {
     const e = this.getAllFields();
     if (!(e.length >= this.showFilterLength && !this.hideSort))
       return "";
-    const i = e.every((s) => !!s.type);
+    const s = e.every((i) => !!i.type);
     return l`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed .disabled=${this.filterFields ? this.filterFields.length < 4 : !1} @calciteDropdownOpen=${() => {
       this.observer?.disconnect(), this.popoverNode.value && this.observer?.observe(this.popoverNode.value, { attributes: !0 });
-    }} @calciteDropdownClose=${() => this.observer?.disconnect()} ${c(this.dropdownNode)}><calcite-action slot=trigger .text=${this._messages.sort ?? ""} title=${this._messages.sort ?? h}><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${this.lastSortBy === "default"} @click=${() => this.setSortBy("default")} @keydown=${(s) => {
-      s.stopPropagation(), (s.key === " " || s.key === "Enter") && this.setSortBy("default");
-    }}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @click=${() => this.setSortBy("display")} @keydown=${(s) => {
-      s.stopPropagation(), (s.key === " " || s.key === "Enter") && this.setSortBy("display");
-    }}>${this._messages.displayName}</calcite-dropdown-item>${i && l`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @click=${() => this.setSortBy("type")} @keydown=${(s) => {
-      s.stopPropagation(), (s.key === " " || s.key === "Enter") && this.setSortBy("type");
-    }}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @click=${() => this.setSortBy("field")} @keydown=${(s) => {
-      s.stopPropagation(), (s.key === " " || s.key === "Enter") && this.setSortBy("field");
-    }}>${this._messages.fieldName}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
+    }} @calciteDropdownClose=${() => this.observer?.disconnect()} ${c(this.dropdownNode)}><calcite-action slot=trigger .text=${this._messages.sort ?? ""} title=${this._messages.sort ?? h}><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${this.lastSortBy === "default"} @calciteDropdownItemSelect=${() => this.setSortBy("default")}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @calciteDropdownItemSelect=${() => this.setSortBy("display")}>${this._messages.displayName}</calcite-dropdown-item>${s && l`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @calciteDropdownItemSelect=${() => this.setSortBy("type")}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @calciteDropdownItemSelect=${() => this.setSortBy("field")}>${this._messages.fieldName}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
   }
   renderSelectionButton() {
     return l`<div class="selection-button-div"><calcite-button appearance=transparent scale=s width=full @click=${() => {
@@ -210,18 +202,18 @@ class L extends w {
         this.selectedFields = [.../* @__PURE__ */ new Set([...this.selectedFields, ...this.filterFields])];
       else {
         const t = this.getAllFields();
-        this.selectedFields = t.map((i) => i.name);
+        this.selectedFields = t.map((s) => s.name);
       }
       this.reorderSelectedFieldsByCurrentListOrder(), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields });
     }}>${this.canDeselectAll() ? this._messages.deselectAll : this._messages.selectAll}</calcite-button></div>`;
   }
   renderListItems() {
     const e = this.allLists.filter((t) => !!t.fields.length);
-    return e.length === 1 && !e[0].title ? e[0].fields.map((t) => this.renderCalciteListItem(t)) : e.map((i) => l`<calcite-list-item-group .heading=${i.title}>${i.fields.map((s) => this.renderCalciteListItem(s))}</calcite-list-item-group>`);
+    return e.length === 1 && !e[0].title ? e[0].fields.map((t) => this.renderCalciteListItem(t)) : e.map((s) => l`<calcite-list-item-group .heading=${s.title}>${s.fields.map((i) => this.renderCalciteListItem(i))}</calcite-list-item-group>`);
   }
   renderCalciteListItem(e) {
-    const t = this.showFieldInfoCheck(e), i = this.showFieldTypeIcon && !!e.type;
-    return y(e.name, l`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
+    const t = this.showFieldInfoCheck(e), s = this.showFieldTypeIcon && !!e.type;
+    return w(e.name, l`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
       if (this.showFieldName && e.hideFieldName !== !0)
         return `{${e.name}}`;
       if (this.showDescription && e.hideDescription !== !0 && e.description)
@@ -229,26 +221,26 @@ class L extends w {
     })()} .value=${e.name} .selected=${!this.multiple && e.name === this.selectedFields[0] || this.multiple && this.selectedFields.includes(e.name)} .metadata=${{
       label: e.alias,
       fieldName: e.name
-    }}>${i && l`<div slot=actions-end class="field-icons">${B({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, t)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
+    }}>${s && l`<div slot=actions-end class="field-icons">${L({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, t)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
   }
   renderInfoAction(e, t) {
-    const { _messages: i } = this;
-    return t ? l`<calcite-action slot=actions-end .text=${i.info} title=${i.info ?? h} scale=s icon=information @click=${(s) => {
-      s.stopPropagation();
-      const o = s.currentTarget;
+    const { _messages: s } = this;
+    return t ? l`<calcite-action slot=actions-end .text=${s.info} title=${s.info ?? h} scale=s icon=information @click=${(i) => {
+      i.stopPropagation();
+      const o = i.currentTarget;
       this.addFieldInfoFlowItem(e, o);
     }}></calcite-action>` : "";
   }
   renderEditAction(e) {
     const { _messages: t } = this;
-    return e.showEditAction ? l`<calcite-action slot=actions-end .text=${t.edit} title=${t.edit ?? h} scale=s icon=pencil @click=${(i) => {
-      i.stopPropagation(), this.arcgisEditField.emit({ fieldName: e.name });
+    return e.showEditAction ? l`<calcite-action slot=actions-end .text=${t.edit} title=${t.edit ?? h} scale=s icon=pencil @click=${(s) => {
+      s.stopPropagation(), this.arcgisEditField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderDeleteAction(e) {
     const { _messages: t } = this;
-    return e.showDeleteAction ? l`<calcite-action slot=actions-end .text=${t.delete} title=${t.delete ?? h} scale=s icon=trash @click=${(i) => {
-      i.stopPropagation(), this.arcgisDeleteField.emit({ fieldName: e.name });
+    return e.showDeleteAction ? l`<calcite-action slot=actions-end .text=${t.delete} title=${t.delete ?? h} scale=s icon=trash @click=${(s) => {
+      s.stopPropagation(), this.arcgisDeleteField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderAddButton() {
@@ -262,7 +254,7 @@ class L extends w {
     }}>${this._messages.cancel}</calcite-button>`;
   }
 }
-F("arcgis-field-pick-list", L);
+F("arcgis-field-pick-list", I);
 export {
-  L as ArcgisFieldPickList
+  I as ArcgisFieldPickList
 };

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

@@ -29,8 +29,12 @@ export abstract class ArcgisPickerInput extends LitElement {
   accessor label: string;
   /** Convenience prop to specify common popover props. */
   accessor popoverProps: PopoverProps | undefined;
-  /** Close the component. */
-  close(): Promise<void>;
+  /**
+   * Close the component.
+   *
+   * @param options
+   */
+  close(options?: { focus: boolean; }): Promise<void>;
   /** Set focus on the component. */
   setFocus(): Promise<void>;
   /** Emitted when the component has been closed. */

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

@@ -14,8 +14,8 @@ class d extends a {
   static {
     this.styles = p;
   }
-  async close() {
-    this.onPopoverClose();
+  async close(e) {
+    this.onPopoverClose(e);
   }
   async setFocus() {
     this.buttonEl?.focus();
@@ -30,16 +30,16 @@ class d extends a {
     this.panelEl.value.closed = !1, this.arcgisPopoverOpen.emit(), e.stopPropagation();
   }
   handlePopoverKeyUp({ key: e }) {
-    e === "Escape" && this.onPopoverClose();
+    e === "Escape" && this.onPopoverClose({ focus: !0 });
   }
   onPopoverOpen(e) {
     this.open && (e.composedPath().includes(this.el) || (this.open = !1));
   }
-  onPopoverClose() {
-    this.open = !1, this.arcgisPopoverClose.emit(), setTimeout(() => this.buttonEl?.focus(), 300);
+  onPopoverClose(e) {
+    this.open = !1, this.arcgisPopoverClose.emit(), e?.focus && setTimeout(() => this.buttonEl?.focus(), 300);
   }
   handlePanelClose(e) {
-    e.stopPropagation(), this.onPopoverClose();
+    e.stopPropagation(), this.onPopoverClose({ focus: !0 });
   }
   handleButtonClick() {
     this.open = !this.open, this.open && setTimeout(() => {
@@ -48,7 +48,7 @@ class d extends a {
   }
   render() {
     const { popoverProps: e } = this;
-    return o`<calcite-popover pointer-disabled trigger-disabled @keyup=${this.handlePopoverKeyUp} .label=${this.label} .offsetDistance=${e?.offsetDistance ?? 0} .offsetSkidding=${e?.offsetSkidding ?? 0} .flipDisabled=${e?.flipDisabled ?? !1} .open=${this.disabled ? !1 : this.open} .overlayPositioning=${e?.overlayPositioning ?? "fixed"} .placement=${e?.placement ?? "bottom"} @calcitePopoverOpen=${this.handlePopoverOpen} @calcitePopoverClose=${(s) => s.stopPropagation()} .referenceElement=${e?.refElement ?? this.previewContainerEl}><calcite-panel closable .heading=${this.heading} style=${r(e?.maxHeight ? { maxHeight: e.maxHeight } : void 0)} @calcitePanelClose=${this.handlePanelClose} ${t(this.panelEl)}><slot name=content></slot><calcite-button appearance=solid slot=footer width=full .label=${this.intlDone} @click=${this.onPopoverClose}>${this.intlDone}</calcite-button></calcite-panel></calcite-popover><div class="container"><div class="preview" ${t(this.setPreviewContainerRef)}><button .disabled=${this.disabled} @click=${this.handleButtonClick} type=button .ariaLabel=${this.label} ${t(this.setButtonRef)}><slot name=preview></slot>${this.iconEnd ? o`<calcite-icon .icon=${this.iconEnd} scale=s></calcite-icon>` : null}</button></div><slot name=content-end></slot></div>`;
+    return o`<calcite-popover pointer-disabled trigger-disabled @keyup=${this.handlePopoverKeyUp} .label=${this.label} .offsetDistance=${e?.offsetDistance ?? 0} .offsetSkidding=${e?.offsetSkidding ?? 0} .flipDisabled=${e?.flipDisabled ?? !1} .open=${this.disabled ? !1 : this.open} .overlayPositioning=${e?.overlayPositioning ?? "fixed"} .placement=${e?.placement ?? "bottom"} @calcitePopoverOpen=${this.handlePopoverOpen} @calcitePopoverClose=${(s) => s.stopPropagation()} .referenceElement=${e?.refElement ?? this.previewContainerEl}><calcite-panel closable .heading=${this.heading} style=${r(e?.maxHeight ? { maxHeight: e.maxHeight } : void 0)} @calcitePanelClose=${this.handlePanelClose} ${t(this.panelEl)}><slot name=content></slot><calcite-button appearance=solid slot=footer width=full .label=${this.intlDone} @click=${() => this.onPopoverClose({ focus: !0 })}>${this.intlDone}</calcite-button></calcite-panel></calcite-popover><div class="container"><div class="preview" ${t(this.setPreviewContainerRef)}><button .disabled=${this.disabled} @click=${this.handleButtonClick} type=button .ariaLabel=${this.label} ${t(this.setButtonRef)}><slot name=preview></slot>${this.iconEnd ? o`<calcite-icon .icon=${this.iconEnd} scale=s></calcite-icon>` : null}</button></div><slot name=content-end></slot></div>`;
   }
 }
 n("arcgis-picker-input", d);

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"];
+  };
+}