@arcgis/common-components 5.1.0-next.11 → 5.1.0-next.112

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

@@ -1,5 +1,4 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Layout, TickMode, TickValues } from "./types.js";
 
@@ -8,18 +7,18 @@ import type { Layout, TickMode, TickValues } from "./types.js";
  * [Slider component](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/). Ticks help users understand the
  * slider’s range and make more precise selections.
  *
- * Tick placement is controlled by the [mode](#mode), which defines how the [values](#values) are parsed and translated into positions along the
- * line. Tick positions are derived from the component’s [min](#min) and [max](#max) range, with optional none-linear scaling via
- * [interpolationExponent](#interpolationExponent). Ticks can be displayed in vertical or horizontal [layouts](#layout), with optional [labels](#showLabels) and a [baseline](#showBaseline).
- * The component can also be made [interactive](#interactive) to respond to user clicks on individual ticks. The [labelFormatter](#labelFormatter) property allows customization of tick label formatting.
+ * Tick placement is controlled by the [mode](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#mode), which defines how the [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) are parsed and translated into positions along the
+ * line. Tick positions are derived from the component’s [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#max) range, with optional non-linear scaling via
+ * [interpolationExponent](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#interpolationExponent). Ticks can be displayed in vertical or horizontal [layout](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#layout), with optional [showLabels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#showLabels) and a [showBaseline](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#showBaseline).
+ * The component can also be made [interactive](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#interactive) to respond to user clicks on individual ticks. The [labelFormatter](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#labelFormatter) property allows customization of tick label formatting.
  *
  * @cssproperty [--arcgis-ticks-tick-length] - Specifies the length of the ticks.
  * @cssproperty [--arcgis-ticks-tick-color] - Specifies the color of the ticks.
  * @cssproperty [--arcgis-ticks-gap] - Specifies the gap between the ticks and labels.
  * @since 5.0
  * @example
- * The following example creates a vertical slider with vertical ticks displayed at every 10 units from 0 to 100.
- * The ticks are labeled and positioned on the end side of the slider.
+ * The following example creates a vertical slider with ticks.
+ * The ticks are positioned at the end of the slider and displayed every 10 units from 0 to 100.
  * ```html
  * <arcgis-slider id="sliderComponent" min="0" max="100" show-range-labels values="50" layout="vertical">
  *    <arcgis-ticks slot="content-end" style="flex:1;"
@@ -35,7 +34,7 @@ import type { Layout, TickMode, TickValues } from "./types.js";
  */
 export abstract class ArcgisTicks extends LitElement {
   /**
-   * When `true`, ticks are clickable and the component emits  [@arcgisTickClick](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#event-arcgisTickClick) when the user selects a tick.
+   * When `true`, ticks are clickable and the component emits [@arcgisTickClick](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#event-arcgisTickClick) when the user selects a tick.
    *
    * @default false
    * @see [@arcgisTickClick](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#event-arcgisTickClick)
@@ -66,7 +65,7 @@ export abstract class ArcgisTicks extends LitElement {
    * };
    * ```
    */
-  accessor labelFormatter: ((value: number, defaultFormatter: (value: number) => string) => nullish | string) | undefined;
+  accessor labelFormatter: (value: number, defaultFormatter: (value: number) => string) => string | null | undefined;
   /**
    * Determines whether the labels are placed before or after the ticks.
    *
@@ -99,10 +98,11 @@ export abstract class ArcgisTicks extends LitElement {
    */
   accessor mirrored: boolean;
   /**
-   * The mode or method of positioning ticks along the component. It drives how [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is interpreted.
-   * - `count`: Places a fixed number of ticks (provided in the [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) property) at equal distances from each other.
-   * - `percent`: [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is interpreted as percentage. If [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is a number, it indicates the interval between ticks. If it is an array, it indicates the percentage values at which to place the ticks.
-   * - `value`: Indicates that ticks will only be placed at the values specified in the property.
+   * The manner in which ticks are positioned along the component. It determines how [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is interpreted.
+   *
+   * - `count`: Places a fixed number of ticks (specified in [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values)) at equal intervals.
+   * - `percent`: Interprets [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) as percentages. If it's a single number, that number is the interval between ticks; if it's an array, the array specifies the percentage positions for ticks.
+   * - `value`: Places ticks only at the values listed in [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values).
    *
    * @default "count"
    * @example
@@ -119,8 +119,8 @@ export abstract class ArcgisTicks extends LitElement {
    * </arcgis-slider>
    * ```
    * @example
-   * In count mode, values is the number of ticks to render (not a list of tick values).
-   * For example, use `11` ticks to show 0–100 in steps of 10 (0, 10, 20, ..., 100).
+   * In count mode, the [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) property specifies the number of ticks to render (not a list of tick values).
+   * For example, use `11` ticks to show 0–100 in intervals of 10 (0, 10, 20, ..., 100).
    * ```html
    * <!-- 11 ticks from 0 to 100 -->
    * <arcgis-slider min="0" max="100" show-range-labels values="20, 50">
@@ -164,7 +164,9 @@ export abstract class ArcgisTicks extends LitElement {
    */
   accessor showLabels: boolean;
   /**
-   * Indicates where ticks will be rendered along the component.
+   * Indicates where ticks are rendered along the component. This can be set as comma-separated
+   * numbers in the attribute (e.g., `<arcgis-ticks values="10, 20, 30"></arcgis-ticks>`) or programmatically as
+   * either a single number or an array of numbers (e.g., `ticks.values = 10`, `ticks.values = [10, 20, 30]`).
    * See the description for [mode](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#mode) for more information about how this property is interpreted by each mode.
    *
    * @see [mode](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#mode)

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

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as $ } from "../../chunks/runtime.js";
-import { css as M, html as c } from "lit";
-import { LitElement as _, createEvent as C, safeClassMap as h, safeStyleMap as u, nothing as v } from "@arcgis/lumina";
+import { css as M, html as o } from "lit";
+import { LitElement as _, createEvent as C, safeClassMap as h, nothing as v, safeStyleMap as f } from "@arcgis/lumina";
 import { formatNumber as z } from "@arcgis/core/intl.js";
 const n = {
   container: "container",
@@ -12,7 +12,7 @@ const n = {
   tickMax: "tick--max",
   tickLabel: "tick-label",
   baseline: "baseline"
-}, A = M`:host{display:flex;--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-gap: 1em;--arcgis-ticks-font-size: var(--calcite-font-size--2)}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--calcite-font-weight-medium);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:.125rem;height:var(--arcgis-ticks-tick-length);transform:translate(-50%)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:.125rem;transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
+}, A = M`:host{display:flex;--arcgis-ticks-font-size: var(--calcite-font-size--2);--arcgis-ticks-font-weight: var(--calcite-font-weight-medium);--arcgis-ticks-gap: 1em;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-transform: translateX(-50%);--arcgis-ticks-tick-width: .125rem}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--arcgis-ticks-font-weight);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:var(--arcgis-ticks-tick-width);height:var(--arcgis-ticks-tick-length);transform:var(--arcgis-ticks-tick-transform)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:var(--arcgis-ticks-tick-width);transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
 class F extends _ {
   constructor() {
     super(...arguments), this._formatValue = (e) => z(e, this._formatOptions), this._formatOptions = {
@@ -62,23 +62,23 @@ class F extends _ {
     return i ?? this._formatValue(e);
   }
   render() {
-    return c`<div class=${h(n.container)} touch-action=none @click=${this._handleClick}>${this._renderContent()}${this._renderBaseline()}</div>`;
+    return o`<div class=${h(n.container)} touch-action=none @click=${this._handleClick}>${this._renderContent()}${this._renderBaseline()}</div>`;
   }
   _renderContent() {
-    const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: o, mirrored: l, showLabels: x } = this, g = [], b = [];
-    for (const [f, d] of L(r, i, t, e, a)) {
-      const p = { [o === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${f}%` }, w = {
+    const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: c, mirrored: l, showLabels: w } = this, u = [], b = [];
+    for (const [k, d] of L(r, i, t, e, a)) {
+      const p = { [c === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${k}%` }, x = {
         [n.tick]: !0,
-        [n.tickMin]: f === 0,
-        [n.tickMax]: f === 100
+        [n.tickMin]: k === 0,
+        [n.tickMax]: k === 100
       };
-      g.push(c`<div class=${h(w)} style=${u(p)} data-value=${d ?? v}></div>`), x && b.push(c`<div class=${h(n.tickLabel)} style=${u(p)} data-value=${d ?? v}>${this._internalLabelFormatter(d)}</div>`);
+      u.push(o`<div class=${h(x)} style=${f(p)} data-value=${d ?? v}></div>`), w && b.push(o`<div class=${h(n.tickLabel)} style=${f(p)} data-value=${d ?? v}>${this._internalLabelFormatter(d)}</div>`);
     }
-    return [c`<div class=${h(n.labelsContainer)}>${b}</div>`, c`<div class=${h(n.ticksContainer)}>${g}</div>`];
+    return [o`<div class=${h(n.labelsContainer)}>${b}</div>`, o`<div class=${h(n.ticksContainer)}>${u}</div>`];
   }
   _renderBaseline() {
     const { showBaseline: e, layout: t } = this;
-    return e && c`<div class=${h(n.baseline)} style=${u({
+    return e && o`<div class=${h(n.baseline)} style=${f({
       [t === "horizontal" ? "width" : "height"]: "100%",
       [t === "horizontal" ? "height" : "width"]: "0.125rem"
     })}></div>` || "";
@@ -88,9 +88,9 @@ function* L(s, e, t, i, r) {
   switch (s) {
     case "value": {
       const a = Array.isArray(r) ? r : [r];
-      for (const o of a) {
-        const l = P(e, t, o, i) * 100;
-        l >= 0 && l <= 100 && (yield [l, o]);
+      for (const c of a) {
+        const l = P(e, t, c, i) * 100;
+        l >= 0 && l <= 100 && (yield [l, c]);
       }
       break;
     }
@@ -108,15 +108,15 @@ function* L(s, e, t, i, r) {
       if (a <= 1)
         yield [50, m(e, t, 0.5, i)];
       else
-        for (let o = 0; o < a; o++) {
-          const l = o * 100 / (a - 1);
+        for (let c = 0; c < a; c++) {
+          const l = c * 100 / (a - 1);
           yield [l, m(e, t, l / 100, i)];
         }
       break;
     }
   }
 }
-function k(s, e, t) {
+function g(s, e, t) {
   return t < s ? s : t > e ? e : t;
 }
 function y(s, e, t) {
@@ -124,13 +124,13 @@ function y(s, e, t) {
 }
 function P(s, e, t, i = 0) {
   let r = (t - s) / (e - s);
-  if (r = k(0, 1, r), Math.abs(i) < 1e-9)
+  if (r = g(0, 1, r), Math.abs(i) < 1e-9)
     return r;
   const a = 1 + Math.expm1(i) * r;
-  return r = Math.log(a) / i, k(0, 1, r);
+  return r = Math.log(a) / i, g(0, 1, r);
 }
 function m(s, e, t, i = 0) {
-  if (t = k(0, 1, t), Math.abs(i) < 1e-9)
+  if (t = g(0, 1, t), Math.abs(i) < 1e-9)
     return y(s, e, t);
   const r = Math.expm1(i * t) / Math.expm1(i);
   return y(s, e, r);

package/dist/components/arcgis-unique-values-list/customElement.d.ts

@@ -1,7 +1,10 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type SceneView from "@arcgis/core/views/SceneView.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { UniqueValueCountInfo } from "@arcgis/core/smartMapping/statistics/types.js";
 import type { SupportedLayer } from "./utils/basic.js";
+import type { VisualizationSource } from "../../utils/internal-types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
@@ -85,15 +88,17 @@ export abstract class ArcgisUniqueValuesList extends LitElement {
    * List of all unique values. If not provided component will get the unique values from the layer.
    * An empty list would mean that there are no unique values for this field on the layer. The component renders nothing then.
    */
-  accessor uniqueValues: __esri.UniqueValuesResultUniqueValueInfos[] | undefined;
+  accessor uniqueValues: UniqueValueCountInfo[] | undefined;
   /** MapView instance, required if uniqueValues is not provided and/or to display dates in the correct timezone */
-  accessor view: __esri.MapView | __esri.SceneView | undefined;
+  accessor view: MapView | SceneView | undefined;
+  /** Optional, specify visualization source other than the layer itself. */
+  accessor visualizationSource: VisualizationSource | undefined;
   /**
    * Get all unique values.
    * E.g. to be used to limit how often these unique values need to be requested from the layer.
    */
   getUniqueValues(): Promise<{
-      uniqueValues: __esri.UniqueValuesResultUniqueValueInfos[];
+      uniqueValues: UniqueValueCountInfo[];
       partialUniqueValues: boolean;
   } | undefined>;
   /** Sets focus on component */