@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
228 lines (226 loc) • 8.6 kB
TypeScript
/// <reference types="../../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 { IconNameOrString } from '../calcite-icon/interfaces';
import { Label } from '../calcite-label/customElement.js';
import { InputPlacement } from './interfaces';
import { NumericInputComponent, TextualInputComponent } from './common/input';
/** @slot [action] - A slot for positioning a `calcite-button` next to the component. */
export declare class Input extends LitElement {
/**
* Specifies a comma separated list of unique file type specifiers for limiting accepted file types.
* This property only has an effect when `type` is "file".
* Read the native attribute's documentation on MDN for more info.
*
* @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
*/
accept: string;
/**
* Specifies the text alignment of the component's value.
*
* @default "start"
*/
alignment: Extract<"start" | "end", 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. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
*
* @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;
/**
* When `type` is `"file"`, specifies the component's selected files.
*
* @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
*/
files: FileList | undefined;
/**
* 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;
/** When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
icon: IconNameOrString | boolean;
/**
* When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
*
* @default false
*/
iconFlipRtl: boolean;
/** Accessible name for the component. */
label: string;
/**
* When `true`, a busy indicator is displayed.
*
* @default false
*/
loading: boolean;
/**
* When the component resides in a form,
* specifies the maximum value for `type="number"`.
*
* @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)
*/
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 for `type="number"`.
*
* @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)
*/
minLength: number;
/**
* When `true`, the component can accept more than one value.
* This property only has an effect when `type` is "email" or "file".
* Read the native attribute's documentation on MDN for more info.
*
* @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple)
* @default false
*/
multiple: boolean;
/**
* 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 for `type="number"`.
*
* @default "vertical"
*/
numberButtonType: InputPlacement;
/** Specifies the Unicode numeral system used by the component for localization. */
numberingSystem: NumberingSystem;
/**
* When the component resides in a form,
* specifies a regular expression (regex) pattern the component's `value` must match for validation.
* Read the native attribute's documentation on MDN for more info.
*
* @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
*/
pattern: string;
/**
* 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 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 component type.
*
* Note that the following `type`s add type-specific icons by default: `"date"`, `"email"`, `"password"`, `"search"`, `"tel"`, `"time"`.
*
* `"textarea"` [Deprecated] use the `calcite-text-area` component instead.
*
* @default "text"
*/
type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week";
/** Specifies the validation icon to display under the component. */
validationIcon: IconNameOrString | 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. */
setFocus(): Promise<void>;
/** Fires each time a new `value` is typed and committed. */
readonly calciteInputChange: TargetedEvent<this, void>;
/** Fires each time a new `value` is typed. */
readonly calciteInputInput: TargetedEvent<this, void>;
private messages: Partial<{
clear: string;
loading: string;
}> & import('@arcgis/lumina/controllers').T9nMeta<{
clear: string;
loading: string;
}>;
}