* * $ * * *
* * * * * *
* * * * * * * ``` * * @example Filled and unstyled number fields * Set the `variant` attribute to `normal`, `filled`, or `unstyled` to change the text field's variant. * * ```html *

*
*
* *

* ``` * * @example Pill-shaped number fields * Text fields can be rendered with pill-shaped edges by adding the `pill` attribute. * * ```html * * ``` * * @example Without steppers * Add the `without-steppers` attribute to remove the stepper buttons. * * ```html * * ``` * * **Note:** This will remove the stepper buttons, but keyboard users can still modify the value using the arrow keys. * * @example Changing the size * Use the `size` attribute to change the text field's size. * * ```html *

*
*
*
*
* *

* ``` * * @example Disabling * Use the `disabled` attribute to disable the text field. * * ```html * * ``` * * @example Showing labels on the side * With the `sigvelo-side-label` utility, you can show labels on the side instead of on top of the text field. You can control the width of the label by setting the `--label-width` custom property. * * ```html *

* *
* *

* ``` * * @example Validation * A number of attributes can be used to enable validation using the Constraint Validation API. These include `required`, `pattern`, `minlength`, `maxlength`, `min`, `max`, and `step`. They work exactly like their native counterparts. * * ```html * * ``` * * @example Using custom validation * Use the `setCustomValidity()` method to make the text field invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string. * * ```html * * * * ``` * * @example Styling validation * You can style valid and invalid text fields using the `:valid` and `:invalid` pseudo classes. * * ```html * * * * ``` * * However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted. * * ```html * * * * ``` */ declare class SigveloNumberField extends SigveloFormControlElement { static formAssociated: boolean; static observeSlots: boolean; static styles: CSSResultGroup; private localize; protected get focusableAnchor(): HTMLInputElement; private textBox; isInvalid: boolean; hadUserInteraction: boolean; wasSubmitted: boolean; isPasswordVisible: boolean; /** * The number field's label. If you need to provide HTML in the label, use the `label` slot instead. */ label: string; /** * The number field's description. If you need to provide HTML in the description, use the `description` slot instead. */ description: string; /** The name of the number field. This will be submitted with the form as a name/value pair. */ name: string; /** The number field's value. */ value: string; /** A placeholder to show in the number field when it's blank. */ placeholder: string; /** Disables the number field. */ disabled: boolean; /** Makes the number field a read-only field. */ readonly: boolean; /** The type of number field to render. */ variant: "normal" | "filled" | "unstyled"; /** The number field's size. */ size: "xs" | "sm" | "md" | "lg" | "xl"; /** Draws the number field in a pill shape. */ pill: boolean; /** * The form to associate this control with. If omitted, the closest containing `

` will be used. The value of * this attribute must be an ID of a form in the same document or shadow root. */ form: string; /** * Makes the number field required. Form submission will not be allowed when this is set and the number field is blank. */ required: boolean; /** A regular expression the value should match to be considered valid. */ pattern: string; /** The minimum value for date/time types. */ min: number; /** The maximum value for date/time types. */ max: number; /** The granularity the value must adhere to when incrementing and decrementing. */ step: number | "any"; /** * Tells the browser how to autocomplete the number field. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) * for available values. */ autocomplete: string; /** Tells the browser to focus the number field when the page loads or a dialog is shown. */ autofocus: boolean; /** Sets the enter key label on virtual keyboards. */ enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send"; /** When true, the add/subtract steppers won't be displayed. */ withoutSteppers: boolean; updated(changedProperties: PropertyValues): void; /** @internal Called when the form is reset. */ formResetCallback(): void; private handleBlur; private handleChange; private handleFocus; private handleDecrease; private handleIncrease; private maintainFocusOnPointerDown; private handleInput; private handleKeyDown; private handleVisualBoxPointerDown; /** Sets the form control's validity */ private updateValidity; /** Sets focus to the number field. */ focus(): void; /** Removes focus from the number field. */ blur(): void; /** Selects all text in the number field. */ select(): void; /** Sets the start and end positions of the current text selection in the number field. */ setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void; /** Replaces a range of text in the number field with a new string. */ setRangeText(replacement: string, start?: number, end?: number, selectMode?: "select" | "start" | "end" | "preserve"): void; /** * When a supported `type` is used, this method will decrease the number field's value by `step`. This is a programmatic * change, so `input` and `change` events will not be emitted when this is called. */ stepDown(): void; /** * When a supported `type` is used, this method will increase the number field's value by `step`. This is a programmatic * change, so `input` and `change` events will not be emitted when this is called. */ stepUp(): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-number-field": SigveloNumberField; } } //#endregion export { SigveloNumberField as t };