@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
116 lines (115 loc) • 4.07 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { Appearance, Scale } from "../interfaces.js";
import type { NumberingSystem } from "../../utils/locale.js";
import type { MeterFillType, MeterLabelType } from "./interfaces.js";
import type { T9nMeta } from "@arcgis/lumina/controllers";
/**
* @cssproperty [--calcite-meter-background-color] - Specifies the background color of the component.
* @cssproperty [--calcite-meter-border-color] - Specifies the border color of the component and displayed step lines.
* @cssproperty [--calcite-meter-shadow] - Specifies the box shadow of the component.
* @cssproperty [--calcite-meter-corner-radius] - Specifies the corner radius of the component.
* @cssproperty [--calcite-meter-fill-color] - Specifies the color of the component's fill.
* @cssproperty [--calcite-meter-range-text-color] - Specifies the color of the component's range labels.
* @cssproperty [--calcite-meter-value-text-color] - Specifies the color of the component's value label.
*/
export abstract class Meter extends LitElement {
/**
* Specifies the appearance of the component.
*
* @default "outline-fill"
*/
accessor appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
/**
* When `true`, interaction is prevented and the component is displayed with lower opacity.
*
* @default false
*/
accessor disabled: boolean;
/**
* Specifies the component's display, where
* `"single"` displays a single color, and
* `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
*
* @default "range"
*/
accessor fillType: MeterFillType;
/**
* Specifies the `id` of the component's associated form.
*
* When not set, the component is associated with its ancestor form element, if one exists.
*/
accessor form: string;
/**
* When `true`, number values are displayed with a group separator corresponding to the language and country format.
*
* @default false
*/
accessor groupSeparator: boolean;
/** Specifies a high value. When `fillType` is `"range"`, displays a different color when above the specified threshold. */
accessor high: number;
/**
* Specifies an accessible label for the component.
*
* @required
*/
accessor label: string;
/** Specifies a low value. When `fillType` is `"range"`, displays a different color when above the specified threshold. */
accessor low: number;
/**
* Specifies the component's highest allowed value.
*
* @default 100
*/
accessor max: number;
/** @internal */
protected messages: Partial<Record<string, never>> & T9nMeta<Record<string, never>>;
/**
* Specifies the component's lowest allowed value.
*
* @default 0
*/
accessor min: number;
/** Specifies the name of the component. Required to pass the component's `value` on form submission. */
accessor name: string;
/** Specifies the Unicode numeral system used by the component for localization. */
accessor numberingSystem: NumberingSystem;
/**
* When `true`, displays the values of `high`, `low`, `min`, and `max`.
*
* @default false
*/
accessor rangeLabels: boolean;
/**
* When `rangeLabels` is `true`, specifies the format of displayed labels.
*
* @default "percent"
*/
accessor rangeLabelType: MeterLabelType;
/**
* Specifies the size of the component.
*
* @default "m"
*/
accessor scale: Scale;
/**
* When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values.
*
* @default ""
*/
accessor unitLabel: string;
/** Specifies the component's value. */
accessor value: number;
/**
* When `true`, displays the `value`.
*
* @default false
*/
accessor valueLabel: boolean;
/**
* When `valueLabel` is `true`, specifies the format of displayed label.
*
* @default "percent"
*/
accessor valueLabelType: MeterLabelType;
}