@arcgis/common-components 5.2.0-next.11 → 5.2.0-next.111

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

@@ -0,0 +1,390 @@
+/// <reference path="../../index.d.ts" />
+import type Color from "@arcgis/core/Color.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { LabelFormatter } from "./types.js";
+import type { FieldSliderType } from "../arcgis-slider-field/customElement.js";
+import type { DataLine } from "../arcgis-histogram/types.js";
+import type { HistogramBin, HistogramResult, SummaryStatisticsResult } from "@arcgis/core/smartMapping/statistics/types.js";
+import type { ArcgisSlider } from "../arcgis-slider/customElement.js";
+import type { CssSyntax } from "@arcgis/lumina/utils/cssSyntax";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the height of the histogram.
+   *
+   * @since 5.2
+   */
+  "--arcgis-slider-histogram-range-histogram-height": CssSyntax<"length">;
+}
+}
+
+/**
+ * A slider component with a histogram that can be used for filtering data. This component uses its [fieldType](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fieldType) property
+ * to support numeric and temporal datasets, where values associated with a given [fieldType](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fieldType) are parsed into numbers
+ * that can be used for rendering the histogram and slider. Those values are then serialized back into strings for component properties and readable labels. Much of this work can be
+ * done by the component so the user does not have to manually set component properties. The resulting object from passing the target layer and field to the
+ * [histogram()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/#histogram) and
+ * [summaryStatistics()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/summaryStatistics/#summaryStatistics) functions can
+ * be passed to the [updateFromHistogramResult()](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#updateFromHistogramResult) method to automatically set the component's
+ * [bins](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#bins), [average](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#average), and [standardDeviation](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#standardDeviation)
+ * properties, as well as set the [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#max) bounds for the component.
+ *
+ * Note that when setting properties manually (such as setting the [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#values) property to place thumbs on the slider),
+ * the component expects the inputs to match the format that would be expected by the [fieldType](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fieldType). Below are a few relevant examples
+ *
+ * @example
+ * ```js
+ * // fieldType === "double"
+ * histogramSlider.values = "20.5, 75.25";
+ *
+ * // fieldType === "date"
+ * histogramSlider.values = "1710028800000, 1726617600000";
+ *
+ * // fieldType === "date-only"
+ * histogramSlider.values = "2024-03-10, 2024-09-18";
+ *
+ * // fieldType === "time-only"
+ * histogramSlider.values = "08:15:00, 17:45:00";
+ *
+ * // fieldType === "timestamp-offset"
+ * histogramSlider.values = "2024-03-10T08:00:00-05:00, 2024-09-18T18:30:00-05:00";
+ * ```
+ *
+ * <span id="image-annotations"></span>
+ * See the image below for a summary of the configurable options available on this slider.
+ *
+ * ![HistogramRangeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/histogramrangeslider-labels.avif "HistogramRangeSlider with annotations")
+ * @see [arcgis-histogram](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-histogram/)
+ * @see [arcgis-slider](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/)
+ * @see [updateFromHistogramResult()](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#updateFromHistogramResult)
+ * @see [Field.type](https://developers.arcgis.com/javascript/latest/references/core/layers/support/Field/#type)
+ * @since 5.2
+ */
+export abstract class ArcgisSliderHistogramRange extends LitElement {
+  /**
+   * The active value of the component, based on which thumb or range (segment) is active. This returns the stored value for the active thumb,
+   * so it may reflect the thumb’s last set position.
+   *
+   * It returns:
+   * - `undefined` when no value is active
+   * - a serialized string when a single value is active
+   * - `"all"` when the range (segment) is active
+   *
+   * Listen to [@arcgisActiveValueChange](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#event-arcgisActiveValueChange) to be notified when a value becomes active or inactive.
+   */
+  get activeValue(): string | undefined;
+  /**
+   * The statistical average of the data in the histogram. You would typically get this value from the `avg` property of
+   * [SummaryStatisticsResult](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/summaryStatistics/#SummaryStatisticsResult),
+   * which is the result of the
+   * [summaryStatistics](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/summaryStatistics/#summaryStatistics) function.
+   *
+   * When set, this value will render on the histogram with a symbol indicating it is the average.
+   *
+   * @see [summaryStatistics](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/summaryStatistics/#summaryStatistics)
+   * @example
+   * ```js
+   * // Uses the summaryStatistics() function to compute the average value of a field
+   * const params = { layer, field: "POPULATION" };
+   *
+   * const statistics = await summaryStatistics(params);
+   *
+   * histogramSlider.average = statistics.avg;
+   * ```
+   */
+  accessor average: number | undefined;
+  /**
+   * An array of objects representing each bin in the histogram. This
+   * information is typically returned from the
+   * [histogram](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/#histogram) function.
+   *
+   * @example
+   * ```js
+   * // Sets the bins of the histogram from the bins in the histogram() result
+   * const params = { layer, field: "POPULATION" };
+   *
+   * const histogramResult = await histogram(params);
+   *
+   * await histogramSlider.updateFromHistogramResult(histogramResult);
+   * ```
+   * @example
+   * ```js
+   * // Creates a histogram with 7 bins.
+   * histogramSlider.bins = [
+   *   { minValue: 0, maxValue: 10, count: 4 },
+   *   { minValue: 11, maxValue: 20, count: 14 },
+   *   { minValue: 21, maxValue: 30, count: 9 },
+   *   { minValue: 31, maxValue: 40, count: 34 },
+   *   { minValue: 41, maxValue: 50, count: 351 },
+   *   { minValue: 51, maxValue: 60, count: 100 },
+   *   { minValue: 61, maxValue: 70, count: 1 }
+   * ];
+   * ```
+   * @see [histogram](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/#histogram)
+   */
+  accessor bins: HistogramBin[] | undefined;
+  /**
+   * Renders lines on the histogram that indicate important or meaningful values to the end user. Set the [average](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#average)
+   * and [standardDeviation](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#standardDeviation) properties to display unique data lines for the mean and each standard deviation interval
+   * defined by [standardDeviationCount](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#standardDeviationCount).
+   *
+   * @example
+   * ```js
+   * // Will render lines at the 25th, 50th, 75th, and 99th percentiles
+   * histogramSlider.dataLines = [{
+   *   value: 30,
+   *   label: "25 pctl"
+   * }, {
+   *   value: 45,
+   *   label: "50 pctl"
+   * }, {
+   *   value: 65,
+   *   label: "75 pctl"
+   * }, {
+   *   value: 89,
+   *   label: "99 pctl"
+   * }];
+   * ```
+   */
+  accessor dataLines: DataLine[] | undefined;
+  /**
+   * Sets the color of the histogram bars that are excluded based on the specified
+   * [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement). For example, when a fillPlacement of `between` is used,
+   * all bars **not** between the slider thumbs will be rendered with the color set here.
+   *
+   * To change the style of histogram bars representing included data based on the
+   * [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement), use the [includedBarColor](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#includedBarColor) property.
+   *
+   * @example
+   * ```js
+   * histogramSlider.excludedBarColor = "black";
+   * ```
+   * @see [includedBarColor](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#includedBarColor)
+   * @see [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement)
+   */
+  accessor excludedBarColor: Color | undefined;
+  /**
+   * Defines the ArcGIS field type used to parse, format, and serialize slider values.
+   *
+   * Supported values:
+   * - Numeric: `small-integer`, `integer`, `big-integer`, `single`, `double`, `long`, `oid`
+   * - Temporal: `date`, `date-only`, `time-only`, `timestamp-offset`
+   *
+   * @default "double"
+   * @see [Field.type](https://developers.arcgis.com/javascript/latest/references/core/layers/support/Field/#type)
+   */
+  accessor fieldType: FieldSliderType;
+  /**
+   * Controls where the filled segment is displayed on the slider track and histogram. Note that "between" and "not-between" will
+   * fall back to "start" if a single thumb slider is being used, and "start" and "end" will fall back to "between" for sliders with multiple thumbs.
+   *
+   * @default "start"
+   * @see [arcgis-slider.fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#fillPlacement)
+   */
+  accessor fillPlacement: "between" | "end" | "none" | "not-between" | "start";
+  /**
+   * Sets the color of the histogram bars that are included based on the specified
+   * [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement). For example, when a fillPlacement of `between` is used,
+   * all bars between the slider thumbs will be rendered with the color set here.
+   *
+   * To change the style of histogram bars representing included data based on the
+   * [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement), use the [excludedBarColor](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#excludedBarColor) property.
+   *
+   * @example
+   * ```js
+   * histogramSlider.includedBarColor = "green";
+   * ```
+   * @see [excludedBarColor](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#excludedBarColor)
+   * @see [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement)
+   */
+  accessor includedBarColor: Color | undefined;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /**
+   * A function used to format labels. Overrides the default label formatter.
+   *
+   * @see [arcgis-slider.labelFormatter](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#labelFormatter)
+   * @see [arcgis-histogram.labelFormatter](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-histogram/#labelFormatter)
+   */
+  accessor labelFormatter: LabelFormatter | undefined;
+  /**
+   * Determines the layout/orientation of the component. By default, the slider will render horizontally with the min value on the left side
+   * of the track.
+   *
+   * @default "horizontal"
+   */
+  accessor layout: "horizontal" | "vertical";
+  /** The maximum value or upper bound of the slider. */
+  accessor max: string | undefined;
+  /** The minimum value or lower bound of the slider. */
+  accessor min: string | undefined;
+  /**
+   * When `true`, allows editing the min/max range labels with keyboard input.
+   *
+   * Applies only to: `small-integer`, `integer`, `big-integer`, `single`, `double`, `long`, `oid`.
+   *
+   * @default false
+   * @see [arcgis-slider.rangeLabelsEditingEnabled](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#rangeLabelsEditingEnabled)
+   */
+  accessor rangeLabelsEditingEnabled: boolean;
+  /**
+   * Controls where min/max range labels are positioned relative to the track.
+   *
+   * @default "center"
+   * @see [arcgis-slider-field.showRangeLabels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-field/#showRangeLabels)
+   * @see [arcgis-slider.rangeLabelsPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#rangeLabelsPlacement)
+   */
+  accessor rangeLabelsPlacement: ArcgisSlider["rangeLabelsPlacement"];
+  /**
+   * Indicates whether [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#max) range labels are visible on the slider.
+   *
+   * @default false
+   */
+  accessor showRangeLabels: boolean;
+  /**
+   * The statistical standard deviation of the dataset. You would typically get this value from the `stddev` property of
+   * [SummaryStatisticsResult](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/summaryStatistics/#SummaryStatisticsResult),
+   * which is the result of the
+   * [summaryStatistics](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/summaryStatistics/#summaryStatistics) function.
+   *
+   * When set, multiples of this value will render on the histogram above and below the average with symbols indicating standard deviation intervals. The number of intervals
+   * rendered is determined by the [standardDeviationCount](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#standardDeviationCount) property.
+   *
+   * @see [summaryStatistics](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/summaryStatistics/#summaryStatistics)
+   */
+  accessor standardDeviation: number | undefined;
+  /**
+   * Indicates the number of standard deviation lines to render on the histogram from the [arcgis-histogram.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σ
+   * histogramSlider.standardDeviationCount = 3;
+   * ```
+   */
+  accessor standardDeviationCount: number;
+  /**
+   * Controls when thumb value labels are displayed.
+   *
+   * - `"always"`: Always show labels.
+   * - `"auto"`: Show labels only during interaction.
+   * - `"hidden"`: Never show labels.
+   *
+   * @default "always"
+   * @see [arcgis-slider.valueLabelsDisplay](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#valueLabelsDisplay)
+   */
+  accessor valueLabelsDisplay: ArcgisSlider["valueLabelsDisplay"];
+  /**
+   * When `true`, allows editing value labels with keyboard input.
+   *
+   * Applies only to: `small-integer`, `integer`, `big-integer`, `single`, `double`, `long`, `oid`.
+   *
+   * @default false
+   * @see [arcgis-slider.valueLabelsEditingEnabled](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#valueLabelsEditingEnabled)
+   */
+  accessor valueLabelsEditingEnabled: boolean;
+  /**
+   * A comma delimited string representing absolute thumb positions on the slider.
+   * Each value must match the current format expected by the component's [fieldType](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fieldType) property.
+   *
+   * @example
+   * ```js
+   * // fieldType === "double"
+   * histogramSlider.values = "20.5, 75.25";
+   * ```
+   */
+  accessor values: string | undefined;
+  /** Permanently destroys the component. */
+  destroy(): Promise<void>;
+  /**
+   * Generates a SQL `WHERE` clause based on a given field and the slider's
+   * [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement). This is a convenience function for data filtering
+   * or data queries. It is the user's responsibility to ensure that the [type](https://developers.arcgis.com/javascript/latest/references/core/layers/support/Field/#type)
+   * of the given field matches one of the available values of the component's [fieldType](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fieldType).
+   *
+   * @param field
+   * @example
+   * ```js
+   * // Renders the component's histogram such that all bins between
+   * // the two slider thumbs are shaded with a blue color by default
+   * histogramSlider.fillPlacement = "between";
+   *
+   * // Filters the FeatureLayerView such that only features with
+   * // a particular field value that falls between the two slider thumbs are displayed
+   * layerView.filter = {
+   *   where: await histogramSlider.generateWhereClause("POPULATION")
+   * }
+   * ```
+   *
+   * **Note:**
+   * If a single thumb slider has its [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement) set to
+   * `"between"` or `"not-between"`, the generated clause will use `start` instead. Additionally, if a multi thumb slider has its
+   * [fillPlacement](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fillPlacement) set to `"start"` or `"end"`, the generated clause will use `"between"` instead.
+   */
+  generateWhereClause(field: string): Promise<string | undefined>;
+  /**
+   * A convenience function which allows the [bins](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#bins), [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#min),
+   * [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#max), [average](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#average), and
+   * [standardDeviation](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#standardDeviation) properties to be set automatically from the results of the
+   * [histogram()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/#histogram)
+   * and [summaryStatistics()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/summaryStatistics/#summaryStatistics) functions.
+   * The component will serialize these values based on the [fieldType](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#fieldType) property into a format that is expected by the slider.
+   *
+   * @param histogramResult
+   * @param statistics
+   * @example
+   * ```js
+   * const histogramResult = await histogram({
+   *   layer,
+   *   field: "POPULATION",
+   *   numBins: 30,
+   * });
+   *
+   * const statistics = await summaryStatistics({
+   *   layer,
+   *   field: "POPULATION",
+   * });
+   *
+   * await histogramSlider.updateFromHistogramResult(histogramResult, statistics);
+   * ```
+   */
+  updateFromHistogramResult(histogramResult: HistogramResult, statistics?: SummaryStatisticsResult): Promise<void>;
+  /**
+   * Fires when the [activeValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#activeValue) changes as a thumb or the range gains or loses focus.
+   * This event does not fire when [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#values) change.
+   * Use [@arcgisInput](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#event-arcgisInput) for continuous updates or
+   * [@arcgisChange](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#event-arcgisChange) when the interaction is committed.
+   *
+   * @see [arcgis-slider.activeValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#activeValue)
+   */
+  readonly arcgisActiveValueChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires when a thumb or range is released on the slider. Use [@arcgisInput](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#event-arcgisInput) for continuous updates during a drag.
+   *
+   * @see [arcgis-slider.@arcgisChange](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#event-arcgisChange)
+   */
+  readonly arcgisChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires continuously while the thumb or range is being dragged.
+   * This event can fire frequently; consider debouncing or throttling expensive work.
+   *
+   * @see [arcgis-slider.@arcgisInput](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#event-arcgisInput)
+   */
+  readonly arcgisInput: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires when the slider's range changes.
+   * This occurs when the user edits the [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#min) or
+   * [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider-histogram-range/#max) range labels (when enabled).
+   *
+   * @see [arcgis-slider.@arcgisRangeChange](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#event-arcgisRangeChange)
+   */
+  readonly arcgisRangeChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisActiveValueChange: ArcgisSliderHistogramRange["arcgisActiveValueChange"]["detail"];
+    arcgisChange: ArcgisSliderHistogramRange["arcgisChange"]["detail"];
+    arcgisInput: ArcgisSliderHistogramRange["arcgisInput"]["detail"];
+    arcgisRangeChange: ArcgisSliderHistogramRange["arcgisRangeChange"]["detail"];
+  };
+}

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

@@ -0,0 +1,120 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c } from "../../chunks/runtime.js";
+import { sqlName as p, sqlLiteral as b } from "@arcgis/core/core/sql.js";
+import { LitElement as v, createEvent as d, safeStyleMap as f } from "@arcgis/lumina";
+import { css as $, html as y } from "lit";
+import { createRef as V, ref as x } from "lit/directives/ref.js";
+import { g as u } from "../../chunks/strategies.js";
+import { u as E } from "../../chunks/useT9n.js";
+const L = $`:host{display:block;height:100%;width:100%}arcgis-histogram{align-self:flex-end;height:var(--arcgis-slider-histogram-range-histogram-height, 100%);width:100%}`;
+class C extends v {
+  constructor() {
+    super(...arguments), this.#e = V(), this.#a = (e, i, o) => {
+      const h = (a) => u(this.fieldType).format(this.#t._lang, a, "value", o) ?? o(a);
+      return this.labelFormatter?.(e, i, h) ?? h(e);
+    }, this.#t = E(), this.fieldType = "double", this.fillPlacement = "start", this.layout = "horizontal", this.rangeLabelsEditingEnabled = !1, this.rangeLabelsPlacement = "center", this.showRangeLabels = !1, this.standardDeviationCount = 1, this.valueLabelsDisplay = "always", this.valueLabelsEditingEnabled = !1, this.arcgisActiveValueChange = d({ cancelable: !1 }), this.arcgisChange = d({ cancelable: !1 }), this.arcgisInput = d({ cancelable: !1 }), this.arcgisRangeChange = d({ cancelable: !1 });
+  }
+  static {
+    this.properties = { activeValue: 32, average: 9, bins: 0, dataLines: 0, excludedBarColor: 0, fieldType: 1, fillPlacement: 1, includedBarColor: 0, label: 1, labelFormatter: 0, layout: 1, max: 1, min: 1, rangeLabelsEditingEnabled: 5, rangeLabelsPlacement: 1, showRangeLabels: 5, standardDeviation: 9, standardDeviationCount: 9, valueLabelsDisplay: 1, valueLabelsEditingEnabled: 5, values: 1 };
+  }
+  static {
+    this.styles = L;
+  }
+  #e;
+  #a;
+  #t;
+  get activeValue() {
+    return this.#e.value?.activeValue;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  async generateWhereClause(e) {
+    const { fillPlacement: i, values: o } = this;
+    if (!o?.length)
+      return;
+    const h = u(this.fieldType), a = o.split(",").map((m) => m.trim()).filter((m) => m.length > 0), n = p(e), l = (m) => {
+      const s = h.parse(m);
+      return typeof s == "number" ? b(h.toFieldType(s), { type: this.fieldType }) : void 0;
+    }, t = a[0] ? l(a[0]) : void 0, r = a.length > 1 && a.at(-1) ? l(a.at(-1)) : void 0;
+    if (!(t == null || a.length > 1 && r == null))
+      switch (i) {
+        case "start":
+          return a.length > 1 ? `${n} BETWEEN ${t} AND ${r}` : `${n} <= ${t}`;
+        case "end":
+          return a.length > 1 ? `${n} BETWEEN ${t} AND ${r}` : `${n} >= ${t}`;
+        case "between":
+          return a.length > 1 ? `${n} BETWEEN ${t} AND ${r}` : `${n} <= ${t}`;
+        case "not-between":
+          return a.length > 1 ? `${n} NOT BETWEEN ${t} AND ${r}` : `${n} <= ${t}`;
+        case "none":
+          return "1=0";
+        default:
+          return;
+      }
+  }
+  async updateFromHistogramResult(e, i) {
+    const o = u(this.fieldType);
+    this.bins = e.bins, e.minValue != null && (this.min = o.serialize(e.minValue)), e.maxValue != null && (this.max = o.serialize(e.maxValue)), i && (this.average = i.avg ?? void 0, this.standardDeviation = i.stddev ?? void 0);
+  }
+  willUpdate(e) {
+    (e.has("fieldType") || e.has("max") || e.has("min") || e.has("values")) && this.#s();
+  }
+  #i() {
+    const { bins: e, values: i, fillPlacement: o } = this, h = e?.[0], a = e?.at(-1);
+    if (h == null || a == null || !i)
+      return;
+    const n = u(this.fieldType), l = i.split(",").map((m) => n.parse(m)).filter((m) => Number.isFinite(m)).sort((m, s) => m - s), t = l.at(0), r = l.at(-1);
+    if (!(t == null || r == null))
+      switch (o) {
+        case "start":
+          return l.length > 1 ? [{ minValue: t, maxValue: r }] : [{ minValue: h.minValue, maxValue: t }];
+        case "end":
+          return l.length > 1 ? [{ minValue: t, maxValue: r }] : [{ minValue: r, maxValue: a.maxValue }];
+        case "between":
+          return l.length > 1 ? [{ minValue: t, maxValue: r }] : [{ minValue: h.minValue, maxValue: t }];
+        case "not-between":
+          return l.length > 1 ? [
+            { minValue: h.minValue, maxValue: t },
+            { minValue: t, maxValue: r, color: "var(--arcgis-histogram-bar-color)" },
+            { minValue: r, maxValue: a.maxValue }
+          ] : [{ minValue: h.minValue, maxValue: t }];
+        default:
+          return;
+      }
+  }
+  #s() {
+    const e = u(this.fieldType), i = (this.values ?? "").split(",").map((s) => s.trim()).filter((s) => s.length > 0).map((s) => e.parse(s)).filter((s) => Number.isFinite(s)), o = e.parse(this.min ?? ""), h = e.parse(this.max ?? "");
+    let a = Number.isFinite(o) ? o : void 0, n = Number.isFinite(h) ? h : void 0;
+    a != null && n != null && a >= n && (a = void 0, n = void 0);
+    let l = e.resolveRange(i, a, n);
+    l.min >= l.max && (l = e.resolveRange(i, void 0, void 0));
+    const t = e.serialize(l.min), r = e.serialize(l.max), m = i.map((s) => Math.min(l.max, Math.max(l.min, s))).sort((s, g) => s - g).map((s) => e.serialize(s)).join(",");
+    t !== this.min && (this.min = t), r !== this.max && (this.max = r), m !== this.values && (this.values = m);
+  }
+  #l(e) {
+    e.stopPropagation(), this.values = e.currentTarget.values, this.arcgisInput.emit();
+  }
+  #n(e) {
+    e.stopPropagation();
+    const i = e.currentTarget;
+    this.min = i.min, this.max = i.max, this.values = i.values, this.arcgisRangeChange.emit();
+  }
+  #r(e) {
+    e.stopPropagation(), this.values = e.currentTarget.values, this.arcgisChange.emit();
+  }
+  #o(e) {
+    e.stopPropagation(), this.arcgisActiveValueChange.emit();
+  }
+  render() {
+    const e = u(this.fieldType), i = e.parse(this.min ?? ""), o = e.parse(this.max ?? "");
+    return y`<arcgis-slider-field .fieldType=${this.fieldType} .fillPlacement=${this.fillPlacement} .label=${this.label} .labelFormatter=${this.labelFormatter} .max=${this.max ?? ""} .min=${this.min ?? ""} .layout=${this.layout} @arcgisActiveValueChange=${this.#o} @arcgisChange=${this.#r} @arcgisInput=${this.#l} @arcgisRangeChange=${this.#n} .rangeLabelsEditingEnabled=${this.rangeLabelsEditingEnabled} .valueLabelsEditingEnabled=${this.valueLabelsEditingEnabled} .rangeLabelsPlacement=${this.rangeLabelsPlacement} .valueLabelsDisplay=${this.valueLabelsDisplay} .showRangeLabels=${this.showRangeLabels} .values=${this.values ?? ""} .valueLabelsPlacement=${this.layout === "horizontal" ? "end" : "start"} ${x(this.#e)}><arcgis-histogram .slot=${this.layout === "horizontal" ? "content-start" : "content-end"} .average=${this.average} .bins=${this.bins} .dataLines=${this.dataLines} .max=${o} .min=${i} .label=${this.label} .layout=${this.layout} .standardDeviation=${this.standardDeviation} .standardDeviationCount=${this.standardDeviationCount} color-blending-enabled .colorStops=${this.#i()} style=${f({
+      ...this.includedBarColor && { "--arcgis-histogram-stop-color": this.includedBarColor.toCss() },
+      ...this.excludedBarColor && { "--arcgis-histogram-bar-color": this.excludedBarColor.toCss() }
+    })} .labelFormatter=${this.#a}></arcgis-histogram></arcgis-slider-field>`;
+  }
+}
+c("arcgis-slider-histogram-range", C);
+export {
+  C as ArcgisSliderHistogramRange
+};

package/dist/components/arcgis-slider-histogram-range/index.d.ts

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

package/dist/components/arcgis-slider-histogram-range/index.js

@@ -0,0 +1,3 @@
+import "../arcgis-slider-field/index.js";
+import "../arcgis-histogram/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-slider-histogram-range/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @param value
+ * @param type
+ * @param defaultFormatter
+ */
+export type LabelFormatter = (value: number, type: "average" | "max" | "min" | "standard-deviation" | "value", defaultFormatter: (value: number) => string) => string | null | undefined;

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

@@ -2,6 +2,17 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Layout, TickMode, TickValues } from "./types.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the length of the ticks. */
+  "--arcgis-ticks-tick-length": "*";
+  /** Specifies the color of the ticks. */
+  "--arcgis-ticks-tick-color": "*";
+  /** Specifies the gap between the ticks and labels. */
+  "--arcgis-ticks-gap": "*";
+}
+}
+
 /**
  * The ticks component displays visual markers along a line to indicate scale, intervals, or specific values. It is often used in conjunction with the
  * [Slider component](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/). Ticks help users understand the
@@ -12,9 +23,6 @@ import type { Layout, TickMode, TickValues } from "./types.js";
  * [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 ticks.