@esri/calcite-components 5.0.0-next.9 → 5.0.0

package/dist/components/calcite-input-number/customElement.d.ts

@@ -1,210 +1,223 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Alignment, Scale, Status } from '../interfaces';
-import { FormComponent, MutableValidityState } from '../../utils/form';
-import { InteractiveComponent } from '../../utils/interactive';
-import { LabelableComponent } from '../../utils/label';
-import { NumberingSystem } from '../../utils/locale';
-import { InputPlacement } from '../calcite-input/interfaces';
-import { NumericInputComponent, TextualInputComponent } from '../calcite-input/common/input';
-import { IconName } from '../calcite-icon/interfaces';
-import { Label } from '../calcite-label/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Alignment, Scale, Status } from "../interfaces.js";
+import type { MutableValidityState } from "../../utils/form.js";
+import type { NumberingSystem } from "../../utils/locale.js";
+import type { InputPlacement } from "../calcite-input/interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
- * @slot [action] - A slot for positioning a `calcite-action` or other interactive content.
+ * @cssproperty [--calcite-input-actions-background-color] - Specifies the background color of the component's `clearable` and `number-button-type` elements.
+ * @cssproperty [--calcite-input-actions-background-color-hover] - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
+ * @cssproperty [--calcite-input-actions-background-color-press] - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
+ * @cssproperty [--calcite-input-actions-icon-color] - Specifies the icon color of the component's `clearable` and `number-button-type` elements.
+ * @cssproperty [--calcite-input-actions-icon-color-hover] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
+ * @cssproperty [--calcite-input-actions-icon-color-press] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
+ * @cssproperty [--calcite-input-loading-background-color] - When `loading`, specifies the background color of the component's `loading` element.
+ * @cssproperty [--calcite-input-loading-fill-color] - When `loading`, specifies the fill color of the component's `loading` element.
+ * @cssproperty [--calcite-input-number-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-input-number-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-input-number-corner-radius] - Specifies the component's border radius.
+ * @cssproperty [--calcite-input-number-icon-color] - Specifies the component's icon color.
+ * @cssproperty [--calcite-input-number-height] - Specifies the component's height.
+ * @cssproperty [--calcite-input-number-placeholder-text-color] - Specifies the text color of the component's placeholder.
+ * @cssproperty [--calcite-input-number-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-input-number-text-color-focus] - Specifies the component's text color when focused.
+ * @cssproperty [--calcite-input-prefix-size] - When `prefixText` is provided, specifies the width of the component's prefix element.
+ * @cssproperty [--calcite-input-prefix-text-color] - When `prefixText` is provided, specifies the text color of the component's prefix element.
+ * @cssproperty [--calcite-input-suffix-size] - When `suffixText` is provided, specifies the width of the component's suffix element.
+ * @cssproperty [--calcite-input-suffix-text-color] - When `suffixText` is provided, specifies the text color of the component's suffix element.
+ * @slot [action] - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
-export declare class InputNumber extends LitElement {
-    /**
-     * Specifies the text alignment of the component's value.
-     *
-     * @default "start"
-     */
-    alignment: Alignment;
-    /**
-     * Specifies the type of content to autocomplete, for use in forms.
-     * Read the native attribute's documentation on MDN for more info.
-     *
-     * @mdn [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
-     */
-    autocomplete: AutoFill;
-    /**
-     * When `true`, a clear button is displayed when the component has a value.
-     *
-     * @default false
-     */
-    clearable: boolean;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * The `id` of the form that will be associated with the component.
-     *
-     * When not set, the component will be associated with its ancestor form element, if any.
-     */
-    form: string;
-    /**
-     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
-     *
-     * @default false
-     */
-    groupSeparator: boolean;
-    /**
-     * Specifies an icon to display.
-     *
-     * @futureBreaking Remove boolean type as it is not supported.
-     */
-    icon: IconName | boolean;
-    /**
-     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @default false
-     */
-    iconFlipRtl: boolean;
-    /**
-     * When `true`, restricts the component to integer numbers only and disables exponential notation.
-     *
-     * @default false
-     */
-    integer: boolean;
-    /** Accessible name for the component's button or hyperlink. */
-    label: string;
-    /** When provided, displays label text on the component. */
-    labelText: string;
-    /**
-     * When `true`, the component is in the loading state and `calcite-progress` is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /**
-     * When the component resides in a form,
-     * specifies the maximum value.
-     *
-     * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
-     */
-    max: number;
-    /**
-     * When the component resides in a form,
-     * specifies the maximum length of text for the component's value.
-     *
-     * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
-     * @deprecated in v3.0.0, removal target v6.0.0 - This property has no effect on the component.
-     */
-    maxLength: number;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When the component resides in a form,
-     * specifies the minimum value.
-     *
-     * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
-     */
-    min: number;
-    /**
-     * When the component resides in a form,
-     * specifies the minimum length of text for the component's value.
-     *
-     * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
-     * @deprecated in v3.0.0, removal target v6.0.0 - This property has no effect on the component.
-     */
-    minLength: number;
-    /**
-     * Specifies the name of the component.
-     *
-     * Required to pass the component's `value` on form submission.
-     *
-     * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
-     */
-    name: string;
-    /**
-     * Specifies the placement of the buttons.
-     *
-     * @default "vertical"
-     */
-    numberButtonType: InputPlacement;
-    /** Specifies the Unicode numeral system used by the component for localization. */
-    numberingSystem: NumberingSystem;
-    /**
-     * Specifies placeholder text for the component.
-     *
-     * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
-     */
-    placeholder: string;
-    /** Adds text to the start of the component. */
-    prefixText: string;
-    /**
-     * When `true`, the component's value can be read, but cannot be modified.
-     *
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     * @default false
-     */
-    readOnly: boolean;
-    /**
-     * When `true` and the component resides in a form,
-     * the component must have a value in order for the form to submit.
-     *
-     * @default false
-     */
-    required: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Specifies the status of the input field, which determines message and icons.
-     *
-     * @default "idle"
-     */
-    status: Status;
-    /**
-     * Specifies the granularity that the component's value must adhere to.
-     *
-     * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
-     */
-    step: number | "any";
-    /** Adds text to the end of the component. */
-    suffixText: string;
-    /** Specifies the validation icon to display under the component. */
-    validationIcon: IconName | boolean;
-    /** Specifies the validation message to display under the component. */
-    validationMessage: string;
-    /**
-     * The current validation state of the component.
-     *
-     * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
-     */
-    readonly validity: MutableValidityState;
-    /** The component's value. */
-    get value(): string;
-    set value(value: string);
-    /** Selects the text of the component's `value`. */
-    selectText(): Promise<void>;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires each time a new value is typed and committed. */
-    readonly calciteInputNumberChange: TargetedEvent<this, void>;
-    /** Fires each time a new value is typed. */
-    readonly calciteInputNumberInput: TargetedEvent<this, void>;
-    private messages: Partial<{
-        clear: string;
-        loading: string;
-        required: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        clear: string;
-        loading: string;
-        required: string;
-    }>;
-}
+export abstract class InputNumber extends LitElement {
+  /**
+   * Specifies the text alignment of the component's `value`.
+   *
+   * @default "start"
+   */
+  accessor alignment: Alignment;
+  /**
+   * Specifies the type of content to autocomplete, for use in forms.
+   * Read the native attribute's documentation on MDN for more info.
+   *
+   * @mdn [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+   */
+  accessor autocomplete: AutoFill;
+  /**
+   * When `true` and the component has a `value`, a clear button is displayed.
+   *
+   * @default false
+   */
+  accessor clearable: boolean;
+  /**
+   * When `true`, prevents interaction and decreases the component's opacity.
+   *
+   * @default false
+   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
+   */
+  accessor disabled: boolean;
+  /**
+   * 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 an icon to display.
+   *
+   * @futureBreaking Remove boolean type as it is not supported.
+   */
+  accessor icon: IconName | boolean;
+  /**
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /**
+   * When `true`, restricts the component to integer numbers only and disables exponential notation.
+   *
+   * @default false
+   */
+  accessor integer: boolean;
+  /** Specifies an accessible label for the component's button or hyperlink. */
+  accessor label: string;
+  /** Specifies the component's label text. */
+  accessor labelText: string;
+  /**
+   * When `true`, displays a busy indicator.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /**
+   * When the component resides in a form,
+   * specifies the maximum `value`.
+   *
+   * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
+   */
+  accessor max: number;
+  /**
+   * When the component resides in a form,
+   * specifies the maximum length of text for the component's `value`.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - This property has no effect on the component.
+   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
+   */
+  accessor maxLength: number;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      clear?: string;
+      loading?: string;
+      required?: string;
+  };
+  /**
+   * When the component resides in a form,
+   * specifies the minimum `value`.
+   *
+   * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
+   */
+  accessor min: number;
+  /**
+   * When the component resides in a form,
+   * specifies the minimum length of text for the component's `value`.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - This property has no effect on the component.
+   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
+   */
+  accessor minLength: number;
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   *
+   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
+   */
+  accessor name: string;
+  /**
+   * Specifies the placement of the buttons.
+   *
+   * @default "vertical"
+   */
+  accessor numberButtonType: InputPlacement;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  accessor numberingSystem: NumberingSystem;
+  /**
+   * Specifies the component's placeholder text.
+   *
+   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+   */
+  accessor placeholder: string;
+  /** Specifies text to display at the start of the component. */
+  accessor prefixText: string;
+  /**
+   * When `true`, the component's `value` can be read, but cannot be modified.
+   *
+   * @default false
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  accessor readOnly: boolean;
+  /**
+   * When `true` and the component resides in a form,
+   * the component must have a `value` in order for the form to submit.
+   *
+   * @default false
+   */
+  accessor required: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Specifies the input field's status, which determines message and icons.
+   *
+   * @default "idle"
+   */
+  accessor status: Status;
+  /**
+   * Specifies the granularity that the component's `value` must adhere to.
+   *
+   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
+   */
+  accessor step: number | "any";
+  /** Specifies text to display at the end of the component. */
+  accessor suffixText: string;
+  /** Specifies the validation icon to display under the component. */
+  accessor validationIcon: IconName | boolean;
+  /** Specifies the validation message to display under the component. */
+  accessor validationMessage: string;
+  /**
+   * The component's current validation state.
+   *
+   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): MutableValidityState;
+  /** The component's value. */
+  accessor value: string;
+  /** Selects the text of the component's `value`. */
+  selectText(): Promise<void>;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires each time a new `value` is typed and committed. */
+  readonly calciteInputNumberChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires each time a new `value` is typed. */
+  readonly calciteInputNumberInput: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteInputNumberChange: InputNumber["calciteInputNumberChange"]["detail"];
+    calciteInputNumberInput: InputNumber["calciteInputNumberInput"]["detail"];
+  };
+}