import { GdsButton } from '../button/button.component'; import { GdsFormControlElement } from '../form/form-control'; declare class Input extends GdsFormControlElement { #private; static styles: (import("lit").CSSResult | import("lit").CSSResult[])[]; /** * The supporting text displayed between the label and the field. * This text provides additional context or information to the user. */ supportingText: string; /** * Whether the supporting text should be displayed or not. */ showExtendedSupportingText: boolean; /** * Whether the field should be clearable or not. Clearable fields will display a clear button when * the field has a value. */ clearable: boolean; /** * The maximum number of characters allowed in the field. */ maxlength: number; /** * Controls the font-size of texts and height of the field. */ size: 'large' | 'small'; /** * Hides the header and the footer, while still keeping the accessible label * * Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set. */ plain: boolean; /** * The type of input. Works the same as a native `` element, but only a subset of types are supported. Defaults * to `text`. */ type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'; /** The input's minimum value. Only applies to date and number input types. */ min?: number | string; /** The input's maximum value. Only applies to date and number input types. */ max?: number | string; /** * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is * implied, allowing any numeric value. Only applies to date and number input types. */ step?: number | 'any'; /** Controls whether and how text input is automatically capitalized as it is entered by the user. */ autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'; /** Indicates whether the browser's autocorrect feature is on or off. */ autocorrect: boolean; /** * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */ autocomplete?: string; /** Indicates that the input should receive focus on page load. */ autofocus: boolean; /** Used to customize the label or icon of the Enter key on virtual keyboards. */ enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; /** Enables spell checking on the input. */ spellcheck: boolean; /** * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual * keyboard on supportive devices. */ inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; /** * This callback allows for customization of the character counter. It should return a tuple * with the first value being the number of remaining characters, and the second value being * the variant of the badge. If the second value is `false`, no badge will be displayed. */ charCounterCallback: (self: GdsFormControlElement & { maxlength: number; }) => readonly [number, false | "positive" | "negative"]; private elInputAsync; private elInput; /** * Move focus to the input element. */ focus(options?: FocusOptions): void; /** * Selects all the text in the input element. */ select(): void; /** * Sets the value of the input element, replacing a range of text. */ setRangeText(...args: Parameters): void; /** * Sets the start and end positions of a selection in the input element. */ setSelectionRange(...args: Parameters): void; /** * Opens the browser's picker interface for inputs that support it (e.g., date picker for date inputs). */ showPicker(): void; /** * Decreases the value of the input element by the specified step. */ stepDown(n?: number): void; /** * Increases the value of the input element by the specified step. */ stepUp(n?: number): void; /** The position of the start of the current text selection in the input element. */ get selectionStart(): number | null; /** Sets the position of the start of the current text selection in the input element. */ set selectionStart(value: number | null); /** The position of the end of the current text selection in the input element. */ get selectionEnd(): number | null; /** Sets the position of the end of the current text selection in the input element. */ set selectionEnd(value: number | null); /** The direction of the current text selection in the input element. */ get selectionDirection(): "none" | "backward" | "forward" | null; /** Sets the direction of the current text selection in the input element. */ set selectionDirection(value: "none" | "backward" | "forward" | null); /** * A reference to the clear button element. Returns null if there is no clear button. * Intended for use in integration tests. */ test_getClearButton(): GdsButton | null | undefined; /** * A reference to the field element. This does not refer to the input element itself, * but the wrapper that makes up the visual field. * Intended for use in integration tests. */ test_getFieldElement(): Element | null | undefined; constructor(); render(): any; private _handleValueChange; _getValidityAnchor(): HTMLInputElement; } declare const GdsInput_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof Input; /** * @summary A custom input element that can be used in forms. * * @element gds-input *. * @slot lead - Accepts `gds-icon-[ICON_NAME]`. Use this to place an icon in the start of the field. * @slot trail - Accepts `gds-badge`. Use this to place a badge in the field, for displaying currency for example. * @slot extended-supporting-text - A longer supporting text can be placed here. It will be * displayed in a panel when the user clicks the info button. * @event gds-input-cleared - Fired when the clear button is clicked. */ export declare class GdsInput extends GdsInput_base { } export {};