@arcgis/common-components 5.2.0-next.6 → 5.2.0-next.61

package/dist/components/arcgis-field-info/index.js

@@ -1 +1,2 @@
+import "@esri/calcite-components/components/calcite-scrim";
 export * from "./customElement.js";

package/dist/components/arcgis-field-info/utils/basic.d.ts

@@ -17,10 +17,12 @@ import type VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";
 import type WCSLayer from "@arcgis/core/layers/WCSLayer.js";
 import type WFSLayer from "@arcgis/core/layers/WFSLayer.js";
 import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
+import type DimensionFeatureLayer from "@arcgis/core/layers/DimensionFeatureLayer.js";
+import type AnnotationFeatureLayer from "@arcgis/core/layers/AnnotationFeatureLayer.js";
 
 /**
  * All supported layer types
  *
  * @internal
  */
-export type FieldInfoLayer = CatalogFootprintLayer | CatalogLayer | CSVLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | ImageryTileLayer | KnowledgeGraphSublayer | OGCFeatureLayer | OrientedImageryLayer | ParquetLayer | SceneLayer | StreamLayer | Sublayer | SubtypeGroupLayer | SubtypeSublayer | VoxelLayer | WCSLayer | WFSLayer;
+export type FieldInfoLayer = AnnotationFeatureLayer | CatalogFootprintLayer | CatalogLayer | CSVLayer | DimensionFeatureLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | ImageryTileLayer | KnowledgeGraphSublayer | OGCFeatureLayer | OrientedImageryLayer | ParquetLayer | SceneLayer | StreamLayer | Sublayer | SubtypeGroupLayer | SubtypeSublayer | VoxelLayer | WCSLayer | WFSLayer;

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/general.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-field-pick-list/utils/types.d.ts

@@ -17,10 +17,12 @@ import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
 import type VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";
 import type WCSLayer from "@arcgis/core/layers/WCSLayer.js";
 import type WFSLayer from "@arcgis/core/layers/WFSLayer.js";
+import type DimensionFeatureLayer from "@arcgis/core/layers/DimensionFeatureLayer.js";
+import type AnnotationFeatureLayer from "@arcgis/core/layers/AnnotationFeatureLayer.js";
 
 /**
  * All supported layer types
  *
  * @internal
  */
-export type FieldPickListLayer = CatalogFootprintLayer | CatalogLayer | CSVLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | ImageryTileLayer | KnowledgeGraphSublayer | OGCFeatureLayer | OrientedImageryLayer | ParquetLayer | SceneLayer | StreamLayer | Sublayer | SubtypeGroupLayer | SubtypeSublayer | VoxelLayer | WCSLayer | WFSLayer;
+export type FieldPickListLayer = AnnotationFeatureLayer | CatalogFootprintLayer | CatalogLayer | CSVLayer | DimensionFeatureLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | ImageryTileLayer | KnowledgeGraphSublayer | OGCFeatureLayer | OrientedImageryLayer | ParquetLayer | SceneLayer | StreamLayer | Sublayer | SubtypeGroupLayer | SubtypeSublayer | VoxelLayer | WCSLayer | WFSLayer;

package/dist/components/arcgis-histogram/customElement.d.ts

@@ -188,6 +188,25 @@ export abstract class ArcgisHistogram extends LitElement {
   accessor icon: string | undefined;
   /** The component's default label. */
   accessor label: string | undefined;
+  /**
+   * Allows customizing how the average and standard deviation line labels render on the histogram. Note that this property is only responsible
+   * for formatting the numeric value of the data line it represents, so the average and standard-deviation symbols are preserved regardless of
+   * whether it is set. Return `null` or `undefined` to use the default formatting.
+   *
+   * @example
+   * ```js
+   * histogram.labelFormatter = (value, type, defaultFormatter) => {
+   *   if (type === "average") {
+   *     return value + "%";
+   *   }
+   *
+   *   if (type === "standard-deviation") {
+   *     return value.toFixed(2);
+   *   }
+   * };
+   * ```
+   */
+  accessor labelFormatter: (value: number, type: "average" | "standard-deviation", defaultFormatter: (value: number) => string) => string | null | undefined;
   /**
    * Determines the orientation of the histogram.
    *
@@ -255,4 +274,15 @@ export abstract class ArcgisHistogram extends LitElement {
    * ```
    */
   accessor standardDeviation: number | undefined;
+  /**
+   * Indicates the number of standard deviation lines to render on the histogram from the [average](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-histogram/#average).
+   *
+   * @default 1
+   * @example
+   * ```js
+   * // Will render lines for +σ, +2σ, +3σ, and -σ, -2σ, -3σ
+   * histogram.standardDeviationCount = 3;
+   * ```
+   */
+  accessor standardDeviationCount: number;
 }

package/dist/components/arcgis-histogram/customElement.js

@@ -2,59 +2,61 @@
 import { c as M } from "../../chunks/runtime.js";
 import { u as k } from "../../chunks/useT9n.js";
 import { substitute as E } from "@arcgis/core/intl.js";
-import { LitElement as I, nothing as h, safeStyleMap as v, safeClassMap as O } from "@arcgis/lumina";
-import { css as R, html as y, svg as f } from "lit";
-import { g as z } from "../../chunks/locale.js";
-const F = R`:host{display:block;--arcgis-histogram-bar-color: var(--calcite-color-border-1);--arcgis-histogram-stop-color: color-mix(in srgb, var(--calcite-color-brand) 80%, transparent)}.content{display:block;direction:ltr}.svg{display:block;width:100%;height:100%}.data-line{stroke:#888;stroke-width:1px;shape-rendering:crispEdges}.average-data-line{stroke-width:1px;shape-rendering:crispEdges;stroke:#444}.label,.data-line-symbol{font-size:12px;stroke:#fff;stroke-width:2px;paint-order:stroke;unicode-bidi:plaintext}.data-line-symbol{font-family:"Georgia, serif",sans-serif;font-style:italic}`;
-function S(t, r, n, e, i) {
-  const [s, a] = i;
-  if (!t || a === 0 || s === 0 || n == null || r == null)
+import { LitElement as F, nothing as h, safeStyleMap as x, safeClassMap as I } from "@arcgis/lumina";
+import { css as O, html as y, svg as d } from "lit";
+import { g as R } from "../../chunks/locale.js";
+const z = O`:host{display:block;--arcgis-histogram-bar-color: var(--calcite-color-border-1);--arcgis-histogram-stop-color: color-mix(in srgb, var(--calcite-color-brand) 80%, transparent)}.content{display:block;direction:ltr;width:100%;height:100%}.svg{display:block;width:100%;height:100%}.data-line{stroke:#888;stroke-width:1px;shape-rendering:crispEdges}.average-data-line{stroke-width:1px;shape-rendering:crispEdges;stroke:#444}.label,.data-line-symbol{font-size:12px;stroke:#fff;stroke-width:2px;paint-order:stroke;unicode-bidi:plaintext}.data-line-symbol{font-family:"Georgia, serif",sans-serif;font-style:italic}`;
+function S(t, i, n, e, r) {
+  const [s, a] = r;
+  if (!t || a === 0 || s === 0 || n == null || i == null)
     return null;
-  const o = n - r, c = (t.length > 1 ? t[t.length - 1].maxValue - t[0].minValue : 0) / o, [u, g] = e === "vertical" ? [a * c, s] : [a, s * c], b = t ? t.map((m) => m.count) : [], d = Math.max(...b);
+  const o = n - i, l = (t.length > 1 ? t[t.length - 1].maxValue - t[0].minValue : 0) / o, [u, g] = e === "vertical" ? [a * l, s] : [a, s * l], p = t ? t.map((m) => m.count) : [], f = Math.max(...p);
   return t.map((m) => {
-    const [p, $] = e === "vertical" ? [u / t.length, d !== 0 ? m.count / d * g : 0] : [d !== 0 ? m.count / d * u : 0, g / t.length], { maxValue: D } = m, x = n - D, [_, C] = e === "vertical" ? [0, x * (a / o)] : [s - $ - x * (s / o), a - p];
-    return [_, C, $, p];
+    const [b, $] = e === "vertical" ? [u / t.length, f !== 0 ? m.count / f * g : 0] : [f !== 0 ? m.count / f * u : 0, g / t.length], { maxValue: C } = m, v = n - C, [L, _] = e === "vertical" ? [0, v * (a / o)] : [s - $ - v * (s / o), a - b];
+    return [L, _, $, b];
   });
 }
-function B(t, r, n, e, i) {
-  const s = [];
-  return t != null && s.push({
+function B(t, i, n, e, r, s) {
+  const a = [];
+  return t != null && a.push({
     value: t,
     symbol: "x̄",
     lineClass: "average-data-line"
-  }), r != null && n != null && e != null && s.push(...G(n, e, r, t)), i && s.push(...i), s;
+  }), i != null && e != null && r != null && a.push(
+    ...G(e, r, i, n, t)
+  ), s && a.push(...s), a;
 }
-function N(t, r, n, e, i) {
+function N(t, i, n, e, r) {
   if (n == null)
     return [0, 0, 0, 0];
-  const s = Math.round((i - n) / e * 100) / 100, [a, o] = t;
-  if (r === "vertical") {
-    let c = o - s * o || 1;
-    return c = Math.round(c) + 0.5, [0, "100%", c, c];
+  const s = Math.round((r - n) / e * 100) / 100, [a, o] = t;
+  if (i === "vertical") {
+    let l = o - s * o || 1;
+    return l = Math.round(l) + 0.5, [0, "100%", l, l];
   }
-  let l = s * a || 1;
-  return l = Math.round(l) + 0.5, [l, l, "100%", 0];
+  let c = s * a || 1;
+  return c = Math.round(c) + 0.5, [c, c, "100%", 0];
 }
-function P(t, r, n, e, i) {
+function P(t, i, n, e, r) {
   if (n == null)
     return [0, 0];
-  const s = Math.round((i - n) / e * 100) / 100, [a, o] = t;
-  return r === "vertical" ? [a, o - s * o] : [0, s * a];
+  const s = Math.round((r - n) / e * 100) / 100, [a, o] = t;
+  return i === "vertical" ? [a, o - s * o] : [0, s * a];
 }
-function T(t, r, n) {
+function T(t, i, n) {
   if (!t || t.length === 0)
     return null;
-  if (L(t)) {
-    const e = t.map((i) => ({
-      ...i,
-      color: w(i.color ?? n)
+  if (V(t)) {
+    const e = t.map((r) => ({
+      ...r,
+      color: w(r.color ?? n)
     }));
     return e.unshift({
-      color: r,
+      color: i,
       minValue: Number.NEGATIVE_INFINITY,
       maxValue: e[0].minValue
     }), e.push({
-      color: r,
+      color: i,
       minValue: e[e.length - 1].maxValue,
       maxValue: Number.POSITIVE_INFINITY
     }), e;
@@ -64,45 +66,45 @@ function T(t, r, n) {
       color: w(e.color ?? n)
     }));
 }
-function A(t, r, n, e) {
+function A(t, i, n, e) {
   if (!t || t.length === 0)
     return n;
-  if (L(t)) {
-    const i = H(t, r);
-    if (i.length === 0)
+  if (V(t)) {
+    const r = H(t, i);
+    if (r.length === 0)
       return n;
     if (e) {
-      const { color: s = n, weight: a } = i[0], { color: o = n, weight: l } = i[1] ?? i[0], c = a + l;
-      return `color-mix(in srgb, ${s} ${a / c * 100}%, ${o} ${l / c * 100}%)`;
+      const { color: s = n, weight: a } = r[0], { color: o = n, weight: c } = r[1] ?? r[0], l = a + c;
+      return `color-mix(in srgb, ${s} ${a / l * 100}%, ${o} ${c / l * 100}%)`;
     }
-    return i[0].color ?? n;
+    return r[0].color ?? n;
   }
-  return W(t, r);
+  return W(t, i);
 }
-function H(t, r) {
+function H(t, i) {
   const n = [];
   for (const e of t) {
-    const i = Math.max(0, Math.min(r.maxValue, e.maxValue) - Math.max(r.minValue, e.minValue));
-    i > 0 && n.push({ color: e.color, weight: i });
+    const r = Math.max(0, Math.min(i.maxValue, e.maxValue) - Math.max(i.minValue, e.minValue));
+    r > 0 && n.push({ color: e.color, weight: r });
   }
-  return n.sort((e, i) => i.weight - e.weight);
+  return n.sort((e, r) => r.weight - e.weight);
 }
-function W(t, r) {
-  const n = (r.maxValue - r.minValue) / 2 + r.minValue;
+function W(t, i) {
+  const n = (i.maxValue - i.minValue) / 2 + i.minValue;
   if (n > t[t.length - 1].value)
     return t[t.length - 1].color;
   for (let e = 0; e < t.length - 1; e++) {
-    const i = t[e], s = t[e + 1];
-    if (n <= i.value)
-      return i.color;
+    const r = t[e], s = t[e + 1];
+    if (n <= r.value)
+      return r.color;
     if (n < s.value) {
-      const a = (n - i.value) / (s.value - i.value) * 100;
-      return `color-mix(in srgb, ${i.color}, ${s.color} ${a}%)`;
+      const a = (n - r.value) / (s.value - r.value) * 100;
+      return `color-mix(in srgb, ${r.color}, ${s.color} ${a}%)`;
     }
   }
   return t[t.length - 1].color;
 }
-function L(t) {
+function V(t) {
   return t[0] != null && "minValue" in t[0];
 }
 function w(t) {
@@ -110,76 +112,87 @@ function w(t) {
     return t;
   if (Array.isArray(t))
     return `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${t[3] ?? 1})`;
-  const { r, g: n, b: e, a: i = 1 } = t;
-  return `rgba(${r}, ${n}, ${e}, ${i})`;
+  const { r: i, g: n, b: e, a: r = 1 } = t;
+  return `rgba(${i}, ${n}, ${e}, ${r})`;
 }
-function G(t, r, n, e) {
-  const i = 0.06 * (r - t);
-  return Y(n, e).filter((s) => Math.abs(e - s) > i).map((s, a, o) => {
-    const l = o.length / 2, c = s > e ? "+" : "-", u = a >= l ? a - l + 1 : l - a;
+function G(t, i, n, e, r) {
+  const s = 0.06 * (i - t);
+  return Y(n, e, r).map((a, o, c) => {
+    const l = c.length / 2, u = a > r ? "+" : "-", g = o >= l ? o - l + 1 : l - o;
     return {
-      symbol: `${c}${u === 1 ? "" : u}σ`,
-      value: s
+      symbol: `${u}${g === 1 ? "" : g}σ`,
+      value: a
     };
-  });
+  }).filter(({ value: a }) => Math.abs(r - a) > s);
 }
-function Y(t, r) {
-  if (r == null || t == null)
+function Y(t, i, n) {
+  if (n == null || t == null)
     return [];
-  const n = 1, e = [];
-  for (let i = n * -1; i <= n; i++)
-    i !== 0 && e.push(r + i * t);
-  return e;
+  const e = i, r = [];
+  for (let s = e * -1; s <= e; s++)
+    s !== 0 && r.push(n + s * t);
+  return r;
 }
-const V = "var(--arcgis-histogram-bar-color)", U = "var(--arcgis-histogram-stop-color)";
-class j extends I {
+const D = "var(--arcgis-histogram-bar-color)", U = "var(--arcgis-histogram-stop-color)";
+class j extends F {
   constructor() {
-    super(...arguments), this._messages = k(), this._normalizedStops = null, this._formatLabel = (r) => z(this._messages._lang, this._numberFormatterOptions).format(r), this._numberFormatterOptions = {
+    super(...arguments), this._messages = k(), this._normalizedStops = null, this.#t = (i, n) => {
+      const e = (r) => R(this._messages._lang, this._numberFormatterOptions).format(r);
+      return this.labelFormatter?.(i, n, e) ?? e(i);
+    }, this._numberFormatterOptions = {
       maximumFractionDigits: 2
-    }, this.containerDimensions = [0, 0], this.icon = "graph-histogram", this.layout = "horizontal", this.colorBlendingEnabled = !1;
+    }, this.containerDimensions = [0, 0], this.icon = "graph-histogram", this.layout = "horizontal", this.colorBlendingEnabled = !1, this.standardDeviationCount = 1;
   }
   static {
-    this.properties = { containerDimensions: 16, colorStops: 0, icon: 3, average: 11, messageOverrides: 0, standardDeviation: 11, bins: 0, dataLines: 0, label: 1, layout: 3, max: 11, min: 11, colorBlendingEnabled: 5 };
+    this.properties = { containerDimensions: 16, colorStops: 0, icon: 3, labelFormatter: 0, average: 11, messageOverrides: 0, standardDeviation: 11, bins: 0, dataLines: 0, label: 1, layout: 3, max: 11, min: 11, colorBlendingEnabled: 5, standardDeviationCount: 9 };
   }
   static {
-    this.styles = F;
+    this.styles = z;
   }
+  #t;
   loaded() {
-    const r = new ResizeObserver((i) => {
-      for (const s of i) {
+    const i = new ResizeObserver((r) => {
+      for (const s of r) {
         const { width: a, height: o } = s.contentRect;
         this.containerDimensions = [a, o];
       }
     }), { width: n, height: e } = this.el.getBoundingClientRect();
-    this.containerDimensions = [n, e], r.observe(this.el);
+    this.containerDimensions = [n, e], i.observe(this.el);
   }
-  willUpdate(r) {
-    r.has("colorStops") && (this._normalizedStops = T(this.colorStops, V, U));
+  willUpdate(i) {
+    i.has("colorStops") && (this._normalizedStops = T(this.colorStops, D, U));
   }
   render() {
-    const { label: r } = this;
-    return y`<div role=img .ariaLabel=${r ?? void 0} class="content">${this._renderContent()}</div>`;
+    const { label: i } = this;
+    return y`<div role=img .ariaLabel=${i ?? void 0} class="content">${this._renderContent()}</div>`;
   }
   _renderContent() {
-    const { containerDimensions: [r, n] } = this, e = "bg-fill";
-    return r ? y`<svg class="svg" xmlns=http://www.w3.org/2000/svg>${f`<defs><clipPath id=${e}><rect height=${n ?? h} width=${r ?? h} x=0 y=0 /></clipPath></defs><g style=${v({ clipPath: `url(#${e})` })}><g>${this._renderBars()}</g></g><g>${this._renderLines()}</g>`}</svg>` : null;
+    const { containerDimensions: [i, n] } = this, e = "bg-fill", r = i ? [
+      d`<defs><clipPath id=${e}><rect height=${n ?? h} width=${i ?? h} x=0 y=0 /></clipPath></defs>`,
+      d`<g style=${x({ clipPath: `url(#${e})` })}><g>${this._renderBars()}</g></g>`,
+      d`<g>${this._renderLines()}</g>`
+    ] : [];
+    return y`<svg class="svg" xmlns=http://www.w3.org/2000/svg>${r}</svg>`;
   }
   _renderBars() {
-    const { bins: r, _messages: n } = this, e = S(this.bins, this.min, this.max, this.layout, this.containerDimensions);
-    return !e || !r ? null : e.map((i, s) => {
-      const [a, o, l, c] = i, u = r[s], g = n?.barLabel ? E(n.barLabel, u) : "";
-      return f`<rect style=${v({
-        fill: A(this._normalizedStops, u, V, this.colorBlendingEnabled)
-      })} .ariaLabel=${g} data-index=${s ?? h} height=${c ?? h} role=img shape-rendering=crispEdges stroke-width=0 width=${l ?? h} x=${a ?? h} y=${o ?? h} />`;
+    const { bins: i, _messages: n } = this, e = S(this.bins, this.min, this.max, this.layout, this.containerDimensions);
+    return !e || !i ? null : e.map((r, s) => {
+      const [a, o, c, l] = r, u = i[s], g = n?.barLabel ? E(n.barLabel, u) : "";
+      return d`<rect style=${x({
+        fill: A(this._normalizedStops, u, D, this.colorBlendingEnabled)
+      })} .ariaLabel=${g} data-index=${s ?? h} height=${l ?? h} role=img shape-rendering=crispEdges stroke-width=0 width=${c ?? h} x=${a ?? h} y=${o ?? h} />`;
     });
   }
   _renderLines() {
-    return B(this.average, this.standardDeviation, this.min, this.max, this.dataLines)?.map((n) => q({ dataLine: n, containerDimensions: this.containerDimensions, layout: this.layout, min: this.min, max: this.max, labelFormatter: this._formatLabel }));
+    return B(this.average, this.standardDeviation, this.standardDeviationCount, this.min, this.max, this.dataLines)?.map((n) => q({ dataLine: n, containerDimensions: this.containerDimensions, layout: this.layout, min: this.min, max: this.max, labelFormatter: this.#t }));
   }
 }
 const q = (t) => {
-  const { containerDimensions: r, layout: n, min: e, max: i, dataLine: s, labelFormatter: a } = t, o = i != null && e != null ? i - e : 0, [l, c, u, g] = N(r, n, e, o, s.value), [b, d] = P(r, n, e, o, s.value), m = "symbol" in s ? [f`<tspan class="data-line-symbol">${s.symbol}</tspan>`, f`<tspan>${a(s.value)}</tspan>`] : s.label, p = "lineClass" in s && s.lineClass ? s.lineClass : "data-line";
-  return f`<g><title>${s.value}</title><line class=${O(p)} shape-rendering=crispEdges x1=${l ?? h} x2=${c ?? h} y1=${u ?? h} y2=${g ?? h} /><text class="label" text-anchor=end transform=${(n === "horizontal" ? "rotate(270)" : void 0) ?? h} x=${b ?? h} y=${d - 2}>${m}</text></g>`;
+  const { containerDimensions: i, layout: n, min: e, max: r, dataLine: s, labelFormatter: a } = t, o = r != null && e != null ? r - e : 0, [c, l, u, g] = N(i, n, e, o, s.value), [p, f] = P(i, n, e, o, s.value), m = "symbol" in s ? [
+    d`<tspan class="data-line-symbol">${s.symbol}</tspan>`,
+    d`<tspan>${a(s.value, s.lineClass === "average-data-line" ? "average" : "standard-deviation")}</tspan>`
+  ] : s.label, b = "lineClass" in s && s.lineClass ? s.lineClass : "data-line";
+  return d`<g><title>${s.value}</title><line class=${I(b)} shape-rendering=crispEdges x1=${c ?? h} x2=${l ?? h} y1=${u ?? h} y2=${g ?? h} /><text class="label" text-anchor=end transform=${(n === "horizontal" ? "rotate(270)" : void 0) ?? h} x=${p ?? h} y=${f - 2}>${m}</text></g>`;
 };
 M("arcgis-histogram", j);
 export {

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. */