@arcgis/common-components 4.29.0-test.0 → 5.0.0-next.113

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

@@ -0,0 +1,239 @@
+/// <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';
+
+/**
+ * Renders a histogram to visualize the spread of a dataset based on [bins](#bins) representing buckets, or sub-ranges, of
+ * data. Each [bin](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-types.html#HistogramBin) is defined by a minimum and maximum value and a total count.
+ *
+ * You can generate the underlying histogram's bins with the [histogram](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html)
+ * module, then apply them to the component, as shown in the example below.
+ *
+ * ```js
+ * const params = {
+ *   layer: povLayer,
+ *   field: "POP_POVERTY",
+ *   normalizationField: "TOTPOP_CY",
+ *   numBins: 30
+ * };
+ *
+ * const results = await histogram(params);
+ * const histogramElement = document.querySelector("arcgis-histogram");
+ *
+ * histogramElement.bins = results.bins;
+ * histogramElement.min = results.minValue;
+ * histogramElement.max = results.maxValue;
+ * ```
+ *
+ * Other properties of this component allow you to display meaningful values on the histogram, such as the [average](#average),
+ * [one standard deviation](#standardDeviation), and the [dataLines](#dataLines) properties.
+ *
+ * The [layout](#layout) property allows you to set the orientation of the histogram, and the [colorStops](#colorStops)
+ * property allows you to set a gradient or color scheme for the histogram bars.
+ *
+ * <a name="image-annotations"></a>
+ * See the image below for a summary of the configurable options available on this slider.
+ *
+ * ![Histogram with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/histogram-basic-labels.png "Histogram with annotations")
+ *
+ * The [colorStops](#colorStops) property may be used to define a color scheme for the histogram bars.
+ *
+ * ![Histogram with color](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/histogram-colors.png "Histogram with color")
+ *
+ * **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/)
+ */
+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;
+}

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

@@ -0,0 +1,198 @@
+import { c as I } from "../../chunks/runtime.js";
+import { u as F } from "../../chunks/useT9n.js";
+import { substitute as S } from "@arcgis/core/intl.js";
+import { LitElement as k, safeClassMap as p, nothing as u, safeStyleMap as w } from "@arcgis/lumina";
+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.113 */
+const f = {
+  content: "content",
+  svg: "svg",
+  label: "label",
+  dataLine: "data-line",
+  averageDataLine: "average-data-line",
+  dataLineSymbol: "data-line-symbol"
+}, z = R`:host{display:flex;--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:flex;flex:1;direction:ltr}.svg{display:inline-block;flex:1;overflow:hidden}.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 O(t, i, n, e, r) {
+  const [s, a] = r;
+  if (!t || a === 0 || s === 0 || n == null || i == null)
+    return null;
+  const o = n - i, c = (t.length > 1 ? t[t.length - 1].maxValue - t[0].minValue : 0) / o, [h, g] = e === "vertical" ? [a * c, s] : [a, s * c], x = t ? t.map((d) => d.count) : [], m = Math.max(...x);
+  return t.map((d) => {
+    const [$, v] = e === "vertical" ? [h / t.length, m !== 0 ? d.count / m * g : 0] : [m !== 0 ? d.count / m * h : 0, g / t.length], { maxValue: M } = d, y = n - M, [_, E] = e === "vertical" ? [0, y * (a / o)] : [s - v - y * (s / o), a - $];
+    return [_, E, v, $];
+  });
+}
+function B(t, i, n, e, r) {
+  const s = [];
+  return t != null && s.push({
+    value: t,
+    symbol: "x̄",
+    lineClass: f.averageDataLine
+  }), i != null && n != null && e != null && s.push(...G(n, e, i, t)), r && s.push(...r), s;
+}
+function N(t, i, n, e, r) {
+  if (n == null)
+    return [0, 0, 0, 0];
+  const s = Math.round((r - n) / e * 100) / 100, [a, o] = t;
+  if (i === "vertical") {
+    let c = o - s * o || 1;
+    return c = Math.round(c) + 0.5, [0, "100%", c, c];
+  }
+  let l = s * a || 1;
+  return l = Math.round(l) + 0.5, [l, l, "100%", 0];
+}
+function P(t, i, n, e, r) {
+  if (n == null)
+    return [0, 0];
+  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, i, n) {
+  if (!t || t.length === 0)
+    return null;
+  if (C(t)) {
+    const e = t.map((r) => ({
+      ...r,
+      color: D(r.color ?? n)
+    }));
+    return e.unshift({
+      color: i,
+      minValue: Number.NEGATIVE_INFINITY,
+      maxValue: e[0].minValue
+    }), e.push({
+      color: i,
+      minValue: e[e.length - 1].maxValue,
+      maxValue: Number.POSITIVE_INFINITY
+    }), e;
+  } else
+    return t.map((e) => ({
+      ...e,
+      color: D(e.color ?? n)
+    }));
+}
+function A(t, i, n, e) {
+  if (!t || t.length === 0)
+    return n;
+  if (C(t)) {
+    const r = H(t, i);
+    if (r.length === 0)
+      return n;
+    if (e) {
+      const { color: s = n, weight: a } = r[0], { color: o = n, weight: l } = r[1] ?? r[0], c = a + l;
+      return `color-mix(in srgb, ${s} ${a / c * 100}%, ${o} ${l / c * 100}%)`;
+    }
+    return r[0].color ?? n;
+  }
+  return W(t, i);
+}
+function H(t, i) {
+  const n = [];
+  for (const e of t) {
+    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, r) => r.weight - e.weight);
+}
+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 r = t[e], s = t[e + 1];
+    if (n <= r.value)
+      return r.color;
+    if (n < s.value) {
+      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 C(t) {
+  return t[0] != null && "minValue" in t[0];
+}
+function D(t) {
+  if (!t)
+    return;
+  if (typeof t == "string")
+    return t;
+  if (Array.isArray(t))
+    return `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${t[3] ?? 1})`;
+  const { r: i, g: n, b: e, a: r = 1 } = t;
+  return `rgba(${i}, ${n}, ${e}, ${r})`;
+}
+function G(t, i, n, e) {
+  const r = 0.06 * (i - t);
+  return Y(n, e).filter((s) => Math.abs(e - s) > r).map((s, a, o) => {
+    const l = o.length / 2, c = s > e ? "+" : "-", h = a >= l ? a - l + 1 : l - a;
+    return {
+      symbol: `${c}${h === 1 ? "" : h}σ`,
+      value: s
+    };
+  });
+}
+function Y(t, i) {
+  if (i == null || t == null)
+    return [];
+  const n = 1, e = [];
+  for (let r = n * -1; r <= n; r++)
+    r !== 0 && e.push(i + r * t);
+  return e;
+}
+const V = "var(--arcgis-histogram-bar-color)", U = "var(--arcgis-histogram-stop-color)";
+class j extends k {
+  constructor() {
+    super(...arguments), this._messages = F(), this._normalizedStops = null, this.containerDimensions = [0, 0], this.icon = "graph-histogram", this.layout = "horizontal", this.colorBlendingEnabled = !1;
+  }
+  static {
+    this.properties = { containerDimensions: 16, colorStops: 0, icon: 3, average: 11, messageOverrides: 0, standardDeviation: 11, bins: 0, dataLines: 0, label: 1, labelFormatFunction: 0, layout: 3, max: 11, min: 11, colorBlendingEnabled: 5 };
+  }
+  static {
+    this.styles = z;
+  }
+  loaded() {
+    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], i.observe(this.el);
+  }
+  willUpdate(i) {
+    i.has("colorStops") && (this._normalizedStops = T(this.colorStops, V, U));
+  }
+  render() {
+    const { label: i } = this;
+    return this.containerDimensions ? L`<div role=img .ariaLabel=${i ?? void 0} class=${p(f.content)}>${this._renderContent()}</div>` : null;
+  }
+  _renderContent() {
+    const { containerDimensions: [i, n] } = this, e = "bg-fill";
+    return L`<svg class=${p(f.svg)} xmlns=http://www.w3.org/2000/svg>${b`<defs><clipPath id=${e}><rect height=${n ?? u} width=${i ?? u} x=0 y=0 /></clipPath></defs><g style=${w({ clipPath: `url(#${e})` })}><g>${this._renderBars()}</g></g><g>${this._renderLines()}</g>`}</svg>`;
+  }
+  _renderBars() {
+    const { bins: i, _messages: n } = this, e = O(this.bins, this.min, this.max, this.layout, this.containerDimensions);
+    return !e || !i ? null : e.map((r, s) => {
+      const [a, o, l, c] = r, h = i[s], g = n?.barLabel ? S(n.barLabel, h) : "";
+      return b`<rect style=${w({
+        fill: A(this._normalizedStops, h, V, this.colorBlendingEnabled)
+      })} .ariaLabel=${g} data-index=${s ?? u} height=${c ?? u} role=img shape-rendering=crispEdges stroke-width=0 width=${l ?? u} x=${a ?? u} y=${o ?? u} />`;
+    });
+  }
+  _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, labelFormatFunction: this.labelFormatFunction }));
+  }
+}
+const q = (t) => {
+  const { containerDimensions: i, layout: n, min: e, max: r, dataLine: s, labelFormatFunction: a } = t, o = r != null && e != null ? r - e : 0, [l, c, h, g] = N(i, n, e, o, s.value), [x, m] = P(i, n, e, o, s.value), d = "symbol" in s ? [
+    b`<tspan class=${p(f.dataLineSymbol)}>${s.symbol}</tspan>`,
+    b`<tspan>${a ? a(s.value) : s.value}</tspan>`
+  ] : s.label, $ = "lineClass" in s && s.lineClass ? s.lineClass : f.dataLine;
+  return b`<g><title>${s.value}</title><line class=${p($)} shape-rendering=crispEdges x1=${l ?? u} x2=${c ?? u} y1=${h ?? u} y2=${g ?? u} /><text class=${p(f.label)} text-anchor=end transform=${(n === "horizontal" ? "rotate(270)" : void 0) ?? u} x=${x ?? u} y=${m - 2}>${d}</text></g>`;
+};
+I("arcgis-histogram", j);
+export {
+  j as ArcgisHistogram
+};

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

@@ -0,0 +1,25 @@
+import { ArcgisHistogram } from './customElement.js';
+export declare const histogramData: {
+    minValue: number;
+    maxValue: number;
+    normalizationTotal: null;
+    bins: {
+        minValue: number;
+        maxValue: number;
+        count: number;
+    }[];
+};
+export declare const histogramStats: {
+    min: number;
+    max: number;
+    avg: number;
+    stddev: number;
+    count: number;
+    sum: number;
+    variance: number;
+    median: number;
+    nullcount: number;
+};
+export declare const histogramColorStops: ArcgisHistogram["colorStops"];
+export declare const histogramClassedColorStops: ArcgisHistogram["colorStops"];
+export declare const histogramDataLines: ArcgisHistogram["dataLines"];

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

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

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

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

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

@@ -0,0 +1,46 @@
+/**
+ * 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;
+};
+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-histogram/utils.d.ts

@@ -0,0 +1,19 @@
+import { HistogramBin } from '@arcgis/core/smartMapping/statistics/types.js';
+import { DataLine, HistogramColorStops, HistogramLayout, NormalizedHistogramColorStops, SymbolDataLine } from './types';
+export declare function getRenderedBarsInfo(bins: HistogramBin[] | nullish, min: nullish | number, max: nullish | number, layout: HistogramLayout, containerDimensions: [number, number]): [number, number, number, number][] | nullish;
+export declare function getRenderedDataLines(average: nullish | number, standardDeviation: nullish | number, min: nullish | number, max: nullish | number, dataLines: DataLine[] | nullish): (DataLine | SymbolDataLine)[];
+export declare function getLinePosition(containerDimensions: [number, number], layout: HistogramLayout, min: nullish | number, range: number, value: number): (number | string)[];
+export declare function getLabelPosition(containerDimensions: [number, number], layout: HistogramLayout, min: nullish | number, range: number, value: number): [number, number];
+export declare function normalizeColorStops(colorStops: HistogramColorStops | nullish, defaultColor: string, selectedColor: string): NormalizedHistogramColorStops | nullish;
+/**
+ * Get the color for a bin based on the provided color stops.
+ *
+ * @param colorStops - The color stops to use for the histogram.
+ * @param bin - The histogram bin to get the color for.
+ * @param defaultColor - The default color to use if no color stops are provided or if the bin does not match any color stop.
+ * @param colorBlendingEnabled - When true, overlapping classed color stops will be blended together.
+ *                                  When false, the color with the most overlap will be used.
+ *                                  If colorStops is not classed, this parameter is ignored.
+ * @returns - The color for the bin.
+ */
+export declare function getCSSColorMix(colorStops: NormalizedHistogramColorStops | nullish, bin: HistogramBin, defaultColor: string, colorBlendingEnabled: boolean): string;

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

@@ -0,0 +1,47 @@
+/// <reference path="../../index.d.ts" />
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { PropertyValues } from 'lit';
+
+/** [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"];
+    };
+}