import { LitElement, PropertyValues } from "lit"; import "../icon/icon.js"; import "../tooltip/tooltip.js"; declare const WarpTextField_base: import("@open-wc/form-control").Constructor & typeof LitElement; /** * A single-line input component used for entering and editing textual or numeric data. * * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements) * * @slot suffix - Use with `` to include a suffix, for example the unit for a number (e. g. km or sek). * @slot prefix - Use with `` to include a prefix, for example a search icon. */ declare class WarpTextField extends WarpTextField_base { #private; /** @internal */ static shadowRootOptions: { delegatesFocus: boolean; clonable?: boolean; customElementRegistry?: CustomElementRegistry | null; mode: ShadowRootMode; serializable?: boolean; slotAssignment?: SlotAssignmentMode; }; constructor(); /** * Keep in mind that using disabled in its current form is an anti-pattern. * * There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons. * * Please consider more informative alternatives before choosing to use disabled on an element. * * @summary Makes the element not focusable and hides it from form submits */ disabled: boolean; /** * Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem. * * @summary Mark the form field as invalid. */ invalid: boolean; /** * Either a `label` or an `aria-label` must be provided. */ label: string | undefined; /** * Use in combination with `invalid` to show as a validation error message, * or on its own to show a help text. * * @summary Description shown below the input field */ helpText: string | undefined; /** * Whether to show the optional indicator after the label. */ optional: boolean; /** * Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs. */ size: string | undefined; /** * Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). */ max: number | undefined; /** * Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength). */ min: number | undefined; /** * @deprecated Use the native `minlength` attribute */ minLength: number | undefined; /** * For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required. */ minlength: number | undefined; /** * @deprecated Use the native `maxlength` attribute */ maxLength: number | undefined; /** * For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed. */ maxlength: number | undefined; /** * Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern) */ pattern: string | undefined; /** * Set a text that is shown in the textfield when it doesn't have a value. * * Placeholder text should not be used as a substitute for labeling the element with a visible label. * * @summary Shown in the textfield when it doesn't have a value */ placeholder: string | undefined; /** * @deprecated Use the native readonly attribute instead. */ readOnly: boolean; /** * Whether the input can be selected but not changed by the user. */ readonly: boolean; /** * Whether user input is required on the input before form submission. */ required: boolean; /** * The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types). */ type: string | undefined; /** * Lets you set the current value. */ value: string | undefined; /** * The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form. */ name: string | undefined; /** * When used with `number` this attribute forces inputs to be a whole number of `step`. * * For example with a `step="5"` only values that divide evenly on 5 are allowed. * Using arrow up and down in the input field increments and decrements by 5. * * @summary Forces `number` inputs to be a whole number of `step` */ step: number | undefined; /** * A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill. */ autocomplete?: HTMLInputElement["autocomplete"]; /** * Supplementary information that should show in a tooltip behind an information icon after the label. * * You must provide a label to be able to show an info icon with a tooltip. */ tooltip?: string; /** * Function to format value when the input field. * * Only active when the input field does not have focus, * similar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html). * * @summary Function to format value when the input field * @link https://css-tricks.com/input-masking/ */ formatter: ((value: string) => string) | undefined; /** @internal */ mask: HTMLDivElement | undefined; /** @internal */ _hasPrefix: boolean; /** @internal */ _hasSuffix: boolean; private _hasHelpTextSlot; updated(changedProperties: PropertyValues): void; static styles: import("lit").CSSResult[]; firstUpdated(): void; resetFormControl(): void; /** @internal */ get _inputstyles(): string; /** @internal */ get _helptextstyles(): string; /** @internal */ get _label(): import("lit").TemplateResult<1> | undefined; /** @internal */ get _helpId(): string | undefined; /** @internal */ get _id(): string; /** @internal */ get _error(): string | undefined; handler(e: Event): void; prefixSlotChange(): void; suffixSlotChange(): void; helpTextSlotChange(): void; render(): import("lit").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "w-textfield": WarpTextField; } } export { WarpTextField };