@arcgis/common-components 5.0.0-next.135 → 5.0.0-next.137

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

@@ -1,8 +1,8 @@
 /// <reference path="../../index.d.ts" />
-import { DataLine, HistogramColorStops, HistogramLabelFormatFunction, HistogramLayout } from './types';
-import { HistogramBin } from '@arcgis/core/smartMapping/statistics/types.js';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { PropertyValues } from 'lit';
+import type { DataLine, HistogramColorStops, HistogramLabelFormatFunction, HistogramLayout } from "./types.js";
+import type { HistogramBin } from "@arcgis/core/smartMapping/statistics/types.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
  * Renders a histogram to visualize the spread of a dataset based on [bins](#bins) representing buckets, or sub-ranges, of
@@ -45,195 +45,206 @@ import { PropertyValues } from 'lit';
  * **See also:**
  * - [histogram module](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html)
  *
- * [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-histogram/)
+ * @cssproperty [--arcgis-histogram-bar-color] - Specifies the color of the histogram bars when the bin doesn't have a corresponding color stop.
+ * @cssproperty [--arcgis-histogram-stop-color] - Specifies the default color for color stops.
  */
-export declare class ArcgisHistogram extends LitElement {
-    /**
-     * An array of color stops used to define the color scheme for the histogram bars.
-     * There are two types of color stops:
-     * - **Continuous color stops**: Each stop is defined by a color and a value. The color of the bar is determined by interpolating between the
-     *   colors of the stops surrounding the value of the bin.
-     * - **Classed color stops**: Each stop is defined by a color and a minValue and maxValue. The color of the bar is determined by the color of the stop
-     *  that contains the value of the bin.
-     *
-     * @example
-     * ```js
-     * // Define continuous color stops on the histogram.
-     * // The color of the bar is determined by interpolating between the colors of the stops surrounding the value of the bin.
-     * histogram.colorStops = [
-     *   { color: "#ff0000", value: 0 },
-     *   { color: "#ffff00", value: 50 },
-     *   { color: "#00ff00", value: 100 }
-     * ];
-     * ```
-     * @example
-     * ```js
-     * // Define classed color stops on the histogram.
-     * // The color of the bar is determined by the color of the stop that contains the value of the bin.
-     * histogram.colorStops = [
-     *   { color: "#ff0000", minValue: 0, maxValue: 50 },
-     *   { color: "#00ff00", minValue: 50, maxValue: 100 },
-     * ];
-     * ```
-     */
-    colorStops?: HistogramColorStops;
-    /**
-     * Icon which represents the component.
-     * Typically used when the component is controlled by another component (e.g. by the Expand component).
-     * Search [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/) for possible values.
-     *
-     * @default "graph-histogram"
-     */
-    icon?: 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/api-reference/esri-smartMapping-statistics-summaryStatistics.html#SummaryStatisticsResult),
-     * which is the result of the
-     * [summaryStatistics](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-summaryStatistics.html#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/api-reference/esri-smartMapping-statistics-summaryStatistics.html#summaryStatistics)
-     * @example
-     * ```js
-     * // sets result returned from a smart mapping method
-     * // to the histogram
-     * histogram.average = response.statistics.avg;
-     * ```
-     * @example
-     * ```js
-     * histogram.average = 34.5;
-     * ```
-     */
-    average?: number;
-    /** Replace localized message strings with your own strings. */
-    messageOverrides?: typeof this._messages._overrides;
-    standardDeviation?: number;
-    /**
-     * An array of objects representing each bin in the histogram. This
-     * information is typically returned from the
-     * [histogram](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html#histogram) function.
-     *
-     * @example
-     * ```js
-     * // sets the bins of the histogram from the bins in the histogram() result
-     * histogram.bins = histogramResult.bins;
-     * ```
-     * @example
-     * ```js
-     * // Creates a histogram with 7 bins.
-     * histogram.bins = [
-     *   { minValue: 0, maxValue: 10, count: 4 },
-     *   { minValue: 10.1, maxValue: 20, count: 14 },
-     *   { minValue: 20.1, maxValue: 30, count: 9 },
-     *   { minValue: 30.1, maxValue: 40, count: 34 },
-     *   { minValue: 40.1, maxValue: 50, count: 351 },
-     *   { minValue: 50.1, maxValue: 60, count: 100 },
-     *   { minValue: 60.1, maxValue: 70, count: 1 }
-     * ];
-     * ```
-     */
-    bins?: HistogramBin[];
-    /**
-     * When set, renders lines on the histogram that indicate important or
-     * meaningful values to the end user.
-     *
-     * @example
-     * ```js
-     * // will render lines at the 25th, 50th, 75th, and 99th percentiles
-     * histogram.dataLines = [{
-     *   value: 30,
-     *   label: "25 pctl"
-     * }, {
-     *   value: 45,
-     *   label: "50 pctl"
-     * }, {
-     *   value: 65,
-     *   label: "75 pctl"
-     * }, {
-     *   value: 89,
-     *   label: "99 pctl"
-     * }];
-     * ```
-     * @example
-     * ```js
-     * // calculate standard deviations from mean using stats
-     * // returned from smart mapping statistic methods
-     * const stddevs = smartMappingUtils.getDeviationValues(stats.stddev, stats.avg, 2);
-     * histogram.dataLines = stddevs.map((stddev) => {
-     *   return {
-     *     value: stddev
-     *   };
-     * });
-     * ```
-     * @see [smartMappingUtils.getDeviationValues](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-support-utils.html#getDeviationValues)
-     */
-    dataLines?: DataLine[];
-    /** The component's default label. */
-    label?: string;
-    /**
-     * A function used to format labels on the histogram. Overrides the default label formatter.
-     *
-     * @example
-     * ```js
-     * // For thumb values, rounds each label to whole numbers.
-     * slider.labelFormatFunction = (value) => {
-     *   return value.toFixed(0);
-     * }
-     * ```
-     */
-    labelFormatFunction?: HistogramLabelFormatFunction;
-    /**
-     * Determines the orientation of the histogram.
-     *
-     * @default "horizontal"
-     * @example
-     * ```js
-     * histogram.layout = "vertical";
-     * ```
-     */
-    layout: HistogramLayout;
-    /**
-     * The maximum value or bound of the entire histogram. This
-     * should match the maximum bound of the last [bin](#bins).
-     *
-     * @example
-     * ```js
-     * histogram.max = 100;
-     * ```
-     * @example
-     * ```js
-     * // sets result returned from a smart mapping method
-     * // to the histogram
-     * histogram.max = response.statistics.max;
-     * ```
-     */
-    max?: number;
-    /**
-     * The minimum value or bound of the entire histogram. This
-     * should match the minimum bound of the first [bin](#bins).
-     *
-     * @example
-     * ```js
-     * histogram.min = 0;
-     * ```
-     * @example
-     * ```js
-     * // sets result returned from a smart mapping method
-     * // to the histogram
-     * histogram.min = response.statistics.min;
-     * ```
-     */
-    min?: number;
-    /**
-     * When set to `true`, overlapping classed color stops will be blended together to create the color of the bar.
-     * This allows to show a if a bar representing a bin overlaps with multiple classed color stops.
-     *
-     * This property is only applicable when the [colorStops](#colorStops) property is set to classed color stops.
-     *
-     * @default false
-     */
-    colorBlendingEnabled: boolean;
-    private _messages;
-}
+export abstract class ArcgisHistogram extends LitElement {
+  /** @internal */
+  protected _messages: Partial<{
+      componentLabel: string;
+      barLabel: string;
+  }> & T9nMeta<{
+      componentLabel: string;
+      barLabel: string;
+  }>;
+  /**
+   * 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/api-reference/esri-smartMapping-statistics-summaryStatistics.html#SummaryStatisticsResult),
+   * which is the result of the
+   * [summaryStatistics](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-summaryStatistics.html#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/api-reference/esri-smartMapping-statistics-summaryStatistics.html#summaryStatistics)
+   * @example
+   * ```js
+   * // sets result returned from a smart mapping method
+   * // to the histogram
+   * histogram.average = response.statistics.avg;
+   * ```
+   * @example
+   * ```js
+   * histogram.average = 34.5;
+   * ```
+   */
+  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/api-reference/esri-smartMapping-statistics-histogram.html#histogram) function.
+   *
+   * @example
+   * ```js
+   * // sets the bins of the histogram from the bins in the histogram() result
+   * histogram.bins = histogramResult.bins;
+   * ```
+   * @example
+   * ```js
+   * // Creates a histogram with 7 bins.
+   * histogram.bins = [
+   *   { minValue: 0, maxValue: 10, count: 4 },
+   *   { minValue: 10.1, maxValue: 20, count: 14 },
+   *   { minValue: 20.1, maxValue: 30, count: 9 },
+   *   { minValue: 30.1, maxValue: 40, count: 34 },
+   *   { minValue: 40.1, maxValue: 50, count: 351 },
+   *   { minValue: 50.1, maxValue: 60, count: 100 },
+   *   { minValue: 60.1, maxValue: 70, count: 1 }
+   * ];
+   * ```
+   */
+  accessor bins: HistogramBin[] | undefined;
+  /**
+   * When set to `true`, overlapping classed color stops will be blended together to create the color of the bar.
+   * This allows to show a if a bar representing a bin overlaps with multiple classed color stops.
+   *
+   * This property is only applicable when the [colorStops](#colorStops) property is set to classed color stops.
+   *
+   * @default false
+   */
+  accessor colorBlendingEnabled: boolean;
+  /**
+   * An array of color stops used to define the color scheme for the histogram bars.
+   * There are two types of color stops:
+   * - **Continuous color stops**: Each stop is defined by a color and a value. The color of the bar is determined by interpolating between the
+   *   colors of the stops surrounding the value of the bin.
+   * - **Classed color stops**: Each stop is defined by a color and a minValue and maxValue. The color of the bar is determined by the color of the stop
+   *  that contains the value of the bin.
+   *
+   * @example
+   * ```js
+   * // Define continuous color stops on the histogram.
+   * // The color of the bar is determined by interpolating between the colors of the stops surrounding the value of the bin.
+   * histogram.colorStops = [
+   *   { color: "#ff0000", value: 0 },
+   *   { color: "#ffff00", value: 50 },
+   *   { color: "#00ff00", value: 100 }
+   * ];
+   * ```
+   * @example
+   * ```js
+   * // Define classed color stops on the histogram.
+   * // The color of the bar is determined by the color of the stop that contains the value of the bin.
+   * histogram.colorStops = [
+   *   { color: "#ff0000", minValue: 0, maxValue: 50 },
+   *   { color: "#00ff00", minValue: 50, maxValue: 100 },
+   * ];
+   * ```
+   */
+  accessor colorStops: HistogramColorStops | undefined;
+  /**
+   * When set, renders lines on the histogram that indicate important or
+   * meaningful values to the end user.
+   *
+   * @example
+   * ```js
+   * // will render lines at the 25th, 50th, 75th, and 99th percentiles
+   * histogram.dataLines = [{
+   *   value: 30,
+   *   label: "25 pctl"
+   * }, {
+   *   value: 45,
+   *   label: "50 pctl"
+   * }, {
+   *   value: 65,
+   *   label: "75 pctl"
+   * }, {
+   *   value: 89,
+   *   label: "99 pctl"
+   * }];
+   * ```
+   * @example
+   * ```js
+   * // calculate standard deviations from mean using stats
+   * // returned from smart mapping statistic methods
+   * const stddevs = smartMappingUtils.getDeviationValues(stats.stddev, stats.avg, 2);
+   * histogram.dataLines = stddevs.map((stddev) => {
+   *   return {
+   *     value: stddev
+   *   };
+   * });
+   * ```
+   * @see [smartMappingUtils.getDeviationValues](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-support-utils.html#getDeviationValues)
+   */
+  accessor dataLines: DataLine[] | undefined;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   * Search [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/) for possible values.
+   *
+   * @default "graph-histogram"
+   */
+  accessor icon: string | undefined;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /**
+   * A function used to format labels on the histogram. Overrides the default label formatter.
+   *
+   * @example
+   * ```js
+   * // For thumb values, rounds each label to whole numbers.
+   * slider.labelFormatFunction = (value) => {
+   *   return value.toFixed(0);
+   * }
+   * ```
+   */
+  accessor labelFormatFunction: HistogramLabelFormatFunction | undefined;
+  /**
+   * Determines the orientation of the histogram.
+   *
+   * @default "horizontal"
+   * @example
+   * ```js
+   * histogram.layout = "vertical";
+   * ```
+   */
+  accessor layout: HistogramLayout;
+  /**
+   * The maximum value or bound of the entire histogram. This
+   * should match the maximum bound of the last [bin](#bins).
+   *
+   * @example
+   * ```js
+   * histogram.max = 100;
+   * ```
+   * @example
+   * ```js
+   * // sets result returned from a smart mapping method
+   * // to the histogram
+   * histogram.max = response.statistics.max;
+   * ```
+   */
+  accessor max: number | undefined;
+  /** Replace localized message strings with your own strings. */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      barLabel?: string | undefined;
+  };
+  /**
+   * The minimum value or bound of the entire histogram. This
+   * should match the minimum bound of the first [bin](#bins).
+   *
+   * @example
+   * ```js
+   * histogram.min = 0;
+   * ```
+   * @example
+   * ```js
+   * // sets result returned from a smart mapping method
+   * // to the histogram
+   * histogram.min = response.statistics.min;
+   * ```
+   */
+  accessor min: number | undefined;
+  accessor standardDeviation: number | undefined;
+}

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

@@ -5,7 +5,7 @@ import { LitElement as k, safeClassMap as p, nothing as u, safeStyleMap as w } f
 import { css as R, html as L, svg as b } from "lit";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.135 */
+v5.0.0-next.137 */
 const f = {
   content: "content",
   svg: "svg",

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

@@ -1,46 +1,38 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+
 /**
  * Function used to format labels. This function should be set to the
  * [labelFormatFunction](#labelFormatFunction) property. This function fires
  * every time a label is created or updated on the histogram.
  *
  * @param value - The value for the line on the data axis.
- *
  * @return The formatted value of the label.
  */
 export type HistogramLabelFormatFunction = (value: number) => string;
+
 export type DataLine = {
-    value: number;
-    label?: nullish | number | string;
+  value: number;
+  label?: nullish | number | string;
+};
+
+export type HistogramColorStops = HistogramClassedColorStop[] | HistogramContinuousColorStop[];
+
+export type HistogramLayout = "horizontal" | "vertical";
+
+export type HistogramContinuousColorStop = {
+  color: HistogramColor;
+  value: number;
+};
+
+export type HistogramClassedColorStop = {
+  color?: HistogramColor;
+  minValue: number;
+  maxValue: number;
 };
-export interface SymbolDataLine {
-    value: number;
-    symbol: "x̄" | `-${number | ""}σ` | `+${number | ""}σ`;
-    lineClass?: string;
-}
+
 export type HistogramColor = number[] | string | {
     r?: number;
     g?: number;
     b?: number;
     a?: number;
-};
-export type HistogramContinuousColorStop = {
-    color: HistogramColor;
-    value: number;
-};
-export type HistogramClassedColorStop = {
-    color?: HistogramColor;
-    minValue: number;
-    maxValue: number;
-};
-export type HistogramColorStops = HistogramClassedColorStop[] | HistogramContinuousColorStop[];
-export type NormalizedHistogramContinuousColorStop = {
-    color: string;
-    value: number;
-};
-export type NormalizedHistogramClassedColorStop = {
-    color: string;
-    minValue: number;
-    maxValue: number;
-};
-export type NormalizedHistogramColorStops = NormalizedHistogramClassedColorStop[] | NormalizedHistogramContinuousColorStop[];
-export type HistogramLayout = "horizontal" | "vertical";
+};

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

@@ -1,47 +1,48 @@
 /// <reference path="../../index.d.ts" />
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { PropertyValues } from 'lit';
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Button as Button } from "@esri/calcite-components/components/calcite-button";
+import type { InputNumber as InputNumber } from "@esri/calcite-components/components/calcite-input-number";
 
-/** [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-label-input/) */
-export declare class ArcgisLabelInput extends LitElement {
-    /**
-     * Specifies the alignment of the component's text elements.
-     *
-     * @default "center"
-     */
-    alignment: HTMLCalciteButtonElement["alignment"] & HTMLCalciteInputNumberElement["alignment"];
-    /**
-     * Indicates whether the component is in edit mode.
-     * This value changes when user interacts with the component or when [edit()](#edit) is called.
-     * The value is always `false` when the component is in [read-only](#readOnly) mode.
-     *
-     * @default false
-     * @see [edit()](#edit)
-     */
-    get editing(): boolean;
-    /** A function used to format the value. */
-    labelFormatter?: (value: number, defaultFormatter: (value: number) => string) => nullish | string;
-    /**
-     * Indicates whether the component is in read-only mode.
-     *
-     * @default false
-     */
-    readOnly: boolean;
-    /**
-     * The value the component displays.
-     *
-     * @default 0
-     */
-    value: number;
-    /**
-     * Initiates the edit mode for the component.
-     *
-     * @see [editing](#editing)
-     */
-    edit(): Promise<void>;
-    /** Fires each time a new value is typed and committed. */
-    readonly arcgisChange: TargetedEvent<this, void>;
-    "@eventTypes": {
-        "arcgisChange": ArcgisLabelInput["arcgisChange"]["detail"];
-    };
-}
+export abstract class ArcgisLabelInput extends LitElement {
+  /**
+   * Specifies the alignment of the component's text elements.
+   *
+   * @default "center"
+   */
+  accessor alignment: Button["alignment"] & InputNumber["alignment"];
+  /**
+   * Indicates whether the component is in edit mode.
+   * This value changes when user interacts with the component or when [edit()](#edit) is called.
+   * The value is always `false` when the component is in [read-only](#readOnly) mode.
+   *
+   * @default false
+   * @see [edit()](#edit)
+   */
+  get editing(): boolean;
+  /** A function used to format the value. */
+  accessor labelFormatter: ((value: number, defaultFormatter: (value: number) => string) => nullish | string) | undefined;
+  /**
+   * Indicates whether the component is in read-only mode.
+   *
+   * @default false
+   */
+  accessor readOnly: boolean;
+  /**
+   * The value the component displays.
+   *
+   * @default 0
+   */
+  accessor value: number;
+  /**
+   * Initiates the edit mode for the component.
+   *
+   * @see [editing](#editing)
+   */
+  edit(): Promise<void>;
+  /** Fires each time a new value is typed and committed. */
+  readonly arcgisChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisChange: ArcgisLabelInput["arcgisChange"]["detail"];
+  };
+}

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

@@ -5,7 +5,7 @@ import { createRef as n, ref as a } from "lit/directives/ref.js";
 import { css as h, html as s } from "lit";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.135 */
+v5.0.0-next.137 */
 const c = h`:host{display:block}:host([hidden]){display:none}.readOnlyLabel{display:block;font-size:var(--calcite-font-size-sm);font-variant-numeric:tabular-nums;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:.5rem;padding-block:3px;border-color:var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px);color:var(--calcite-color-text-1)}:host(:not([read-only])) .readOnlyLabel{position:absolute;opacity:0}:host([alignment="start"]){.readOnlyLabel{text-align:start}}:host([alignment="end"]){.readOnlyLabel{text-align:end}}:host([alignment="center"]){.readOnlyLabel{text-align:center}}calcite-button{inline-size:100%;--calcite-offset-invert-focus: 1;--calcite-internal-animation-timing-fast: 0}calcite-input-number{inline-size:100%;--calcite-internal-animation-timing-fast: 0}`;
 class d extends o {
   constructor() {

package/dist/components/arcgis-label-input/index.d.ts

@@ -1,3 +1 @@
-import "@esri/calcite-components/components/calcite-button";
-import "@esri/calcite-components/components/calcite-input-number";
 export * from "./customElement.js";