/** * the IDL types supported by the {@link UwcInputElement#value} attribute, among other things. */ export type SupportedIdlType = string | number | Date | boolean | File | undefined; /** * connect functions are intended to connect a given input * with its Root Element. * * @internal */ export type Connect = (input: UwcInputElement, opts: { disconnect: { signal: AbortSignal; }; config: (typeof UwcInputElement)["config"]; internals: ElementInternals; }) => void; /** * An input element * * For more documentation please consult the [module documentation](./uwc-input.ts) */ export declare class UwcInputElement extends HTMLElement { #private; static config: { date: { defaults: Record; }; file: { defaults: { "en-US": { placeholder: string; buttonText: string; }; }; }; }; /** * add this attribute name to an element with a template to transfer the white-space * separated list of attribute names to this element upon selection of a suggestion */ static readonly SLOT_ATTRIBUTES_NAME = "data-slot-attributes"; /** * the name attribute is necessary to provide if you want * this element to participate in a surrounding form * * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name | MDN input name attribute} */ name?: string; /** * The placeholder to show when the input is empty. * * TODO: use this to enable custom date part placeholders * * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder | MDN placeholder attribute} */ placeholder?: string; /** * When true, this forces the user to select a suggestion. * That is, any custom typed value will not be added to the * selected values or the surrounding form * * @deprecated - use {@link UwcInputElement#omitvalue} instead. */ forceselection: boolean; /** * if this is not fulfilled the {@link UwcInputElement#value-missing | value-missing} attribute * will be used for the `[data-validationmessage]` attribute. * * @example * * */ required: boolean; /** * the given validation message for missing values. */ "value-missing"?: string; /** * the given validation severity for missing values. * * Only `"error"` will prevent form submission and trigger `:invalid` css selectors. */ "value-missing-severity"?: ValidationSeverity; /** * the minimum length required for values to be valid. Only works with `[type=text]` and `[type=search]`. * * If this is underrun the {@link UwcInputElement#too-short | `[too-short]`} attribute will be used as the * `[data-validationmessage]` attribute. * * @example * * * * @see {@link UwcInputElement#type | type} */ minlength?: number; /** * the given validation message for content that isn't long enough */ "too-short"?: string; /** * the given validation severity for values that are too short. * * Only `"error"` will prevent form submission and trigger `:invalid` css selectors. */ "too-short-severity"?: ValidationSeverity; /** * The minimum valid value. * Should be a number in case of `[type=number]` and an ISO8601 date string for `[type=date]`. * * In case of {@link UwcInputElement#multiple | `[multiple]`} at least this amount of values * must be selected */ min?: string | Date | number; /** * the given validation message for range underflows */ "range-underflow"?: string; /** * the given validation severity for values that are too low. * * Only `"error"` will prevent form submission and trigger `:invalid` css selectors. */ "range-underflow-severity"?: ValidationSeverity; /** * the maximum length for values to still be valid. Only works with `[type=text]` and `[type=search]`. * * If this is overrun the {@link UwcInputElement#too-long | `[too-long]`} attribute will be used as the * `[data-validationmessage]` attribute. * * @example * * * * @see {@link UwcInputElement#type | type} */ maxlength?: number; /** * the given validation message for content that isn't long enough */ "too-long"?: string; /** * the given validation severity for values that are too long. * * Only `"error"` will prevent form submission and trigger `:invalid` css selectors. */ "too-long-severity"?: ValidationSeverity; /** * The maximum valid value. * Should be a number in case of [type=number] and an ISO8601 date string for [type=date] * * In case of {@link UwcInputElement#multiple | `[multiple]`} at most this amount of values * may be selected */ max?: string | Date | number; /** * the given validation message for range overflows */ "range-overflow"?: string; /** * the given validation severity for values that are too high. * * Only `"error"` will prevent form submission and trigger `:invalid` css selectors. */ "range-overflow-severity"?: ValidationSeverity; /** * the pattern the value should match. * * In the case of `[type=date]` this will fall back to a default pattern representing a UTS35 format string. * This format string is determined by the closest detected locale. */ pattern?: string; /** * the given validation message for pattern mismatch */ "pattern-mismatch"?: string; /** * the given validation severity for values that do not match the provided pattern. * * Only `"error"` will prevent form submission and trigger `:invalid` css selectors. */ "pattern-mismatch-severity"?: ValidationSeverity; /** * Akin to the native elements type this determines the type of input rendered. * * Note that contrary to native input elements this will also change the type * of the value IDL attribute. * * Detailed documentation is available in the respective type modules * - [`[text]`](./types/text.ts) * - [`[number]`](./types/number.ts) * - [`[date]`](./types/date.ts) * - [`[checkbox]`](./types/checkbox.ts) * - [`[radio]`](./types/radio.ts) * - [`[file]`](./types/file.ts) * - [`[textarea]`](./types/textarea.ts) * * @example * * ```html * * * * ``` * * @default `"text"` */ type: "text" | "number" | "date" | "textarea" | "checkbox" | "radio" | "search" | "range" | "file"; /** * enable multiple values. */ multiple: boolean; /** * the current value of this uwc-inputs "primary element". * * What the "primary element" is depends on the given {@link UwcInputElement#type | type}. * * For `[type=text]` this is a textbox and the value would be a `string`. For * `[type=number]` it is still a textbox but its type would be `number`. * * For other element types, such as `[type=radio]` it would be whatever the `[value]` * attribute is set to. */ value?: SupportedIdlType; /** * whether or not this element is disabled. * Disabled elements do not participate in constraint validation or form submission and are not focusable. */ disabled: boolean; /** * indicates that the whole input is readonly. This means changing it won't be possible but it will * still be focusable. * * Provided suggestions will also not show in this case as selecting them would not have any effect. * * If you only want to make a textbox readonly you should set `aria-readonly="true"` on a given [part=root] element. */ readonly: boolean; /** * the checked state of a radio button or checkbox. */ checked: boolean; /** * the indeterminate attribute means that e.g. a {@link UwcInputElement#type | `[type=checkbox]`} * might relate to children of which some are checked and some are not */ indeterminate?: boolean; /** * set the value of the lower slider of a [type=range][multiple] input */ start?: string | number; /** * set the value of the upper slider of a [type=range][multiple] input */ end?: string | number; /** * set the increments in which the {@link UwcInputElement.value | `.value`} (or the {@link UwcInputElement.start | `.start`} and {@link UwcInputElement.end | `.end`}) attributes change */ step?: string | number; tabIndex: number; /** * omit the value of the .value attribute. According to the passed value and the {@link UwcInputElement.type | `.type`} this has different meanings. * * | value | type | behaviour | * | --- | --- | --- | * | undefined, false, not present | text | the .value attribute is included in every aspect | * | true, present | text | the same as "form" | * | "form" | text | the value is omitted from the surrounding form values | */ omitvalue?: boolean | "form"; get files(): FileList | null; set files(next: FileList | null); /** * the current values of this element as an Array. May include * multiple entries if {@link UwcInputElement#multiple | [multiple]} is set. */ get selected(): SupportedIdlType[]; /** * the closest surrounding form element. * * if this input has no name set `null` is returned because * it does not participate in the forms API */ get form(): HTMLFormElement | null; /** * the current locale as given by the closest `[lang]` attribute */ get locale(): string; /** * get the current validity state */ get validity(): ValidityState; /** * get the current validation message */ get validationMessage(): string; connectedCallback(): void; disconnectedCallback(): void; formAssociatedCallback(): void; formResetCallback(): void; checkValidity: () => boolean; reportValidity(): boolean; /** * add elements unconditionally to the values list. * * While you may pass any element here only {@link ValueElement | `ValueElement`s} are going to be accepted */ addSelected: (...elements: HTMLElement[]) => void; /** * remove elements unconditionally from the values list. Passing the magic string "all" will remove all currently selected elements. * * While you may pass any element here only {@link ValueElement | `ValueElement`s} are going to be accepted. * * Elements that aren't found in the values list will be ignored. */ removeSelected: (head: HTMLElement | "all", ...tail: HTMLElement[]) => void; clear: () => void; showPicker: () => void; } declare global { const UwcInputElement: typeof import("./uwc-input.ts").UwcInputElement; type UwcInputElement = import("./uwc-input.ts").UwcInputElement; interface HTMLElementTagNameMap { "uwc-input": UwcInputElement; } }