import { LitElement, PropertyValues } from '../../../../../node_modules/lit'; import { ConfirmFieldAutocomplete, ConfirmFieldPart, ConfirmFieldValidation, ConfirmFieldVariant, SbConfirmFieldProps as Props } from './field.types'; /** * Self-validating confirm password input field for use in auth widget forms. * * @part confirm-field - rtg-field: root * @part confirm-field-label - rtg-field-label * @part confirm-field-mark - span: decorative marker text/caret in label * @part confirm-field-description - rtg-field-description * @part confirm-field-input - rtg-input/rtg-password-input * @part confirm-field-error - rtg-field-error: inline validation error message * * @event sb-confirm-field:validate - Fired when validation runs, on form submit or via the public `validate()` method. * Detail: `{ id: string; inputId: string; name: string; value: string; valid: boolean; type: ConfirmFieldValidateType; pair: { selector: string; value: string }; message: string }` * - type: `"success" | "required" | "match"` */ export declare class SbConfirmField extends LitElement implements Props { static readonly ROOT = "confirm-field"; static readonly LABEL = "label"; static readonly MARK = "mark"; static readonly DESCRIPTION = "description"; static readonly INPUT = "input"; static readonly ERROR = "error"; static readonly TAG: string; static readonly VALIDATE_EVENT: string; static readonly PARTS: Record; static readonly INPUT_SELECTORS: string; /** * Substring used in generated part IDs. */ seed: string; /** * Custom ID used as the root part ID and as the base of subpart IDs. */ customId?: string; /** * ID given to the input part, forwarded to its inner input element. */ private _inputId?; private get _defaultInputId(); get inputId(): string; set inputId(value: string | null | undefined); /** * HTML `name` attribute forwarded to the inner input, used as the form data * key on submission. */ private _name; get name(): string; set name(value: string); /** * Pre-fills the input until the user types and their input takes over. * Resetting the form restores this value. */ defaultValue?: string; /** * Text used in the label part of the field. */ private _label; get label(): string; set label(value: string); /** * Placeholder text shown inside the input when empty. */ placeholder?: string; /** * Text used in the description part of the field. */ description?: string; /** * Controls the variation of input element rendered. * When `"toggle"`, a toggleable input with a hide/show button is rendered. */ variant: ConfirmFieldVariant; /** * Custom text used in the mark part of the field label. */ mark?: string; /** * When provided with `required`, the mark part is rendered with an asterisk. * Has no effect if a custom `mark` text is provided. */ caret?: boolean; /** * HTML `autocomplete` hint forwarded to the inner input element. */ autocomplete?: ConfirmFieldAutocomplete; /** * Disables the field and its inner input element, preventing interaction. */ disabled?: boolean; /** * Marks the field as required: validation fails if field is empty. */ required?: boolean; /** * CSS selector for the paired password field element. */ pair: string; /** * Controls validation depth, only enforcing the required check if `"simple"`. */ validation: ConfirmFieldValidation; /** * Error message used when the field is required but empty. */ private _requiredError?; private get _defaultRequiredError(); get requiredError(): string; set requiredError(value: string | null | undefined); /** * Error message used when the field and pair field values do not match. */ private _matchError; get matchError(): string; set matchError(value: string); /** * Tracks whether the field is currently in an invalid state. */ private _invalid; /** * Error message displayed in the error part when the field is invalid. */ private _error; /** * Raw value of the confirm field input, synced on each input event. */ private _value; /** * Gates whether `defaultValue` or `_value` is authoritative for `this.value`. * True once the user has typed into the input. */ private _dirty; /** * Reference to the nearest `
` ancestor. */ private _form; protected createRenderRoot(): this; get rootId(): string; get labelId(): string; get markId(): string; get descriptionId(): string; get errorId(): string; /** * Normalized value of the password field input. */ get value(): string; /** * Value of paired password field, returning an empty string if not found. */ get pairValue(): string; updated(changed: PropertyValues): void; connectedCallback(): void; disconnectedCallback(): void; /** * Triggers validation and returns `true` if the current value is valid, * `false` otherwise. */ validate(): boolean; private _dispatchValidate; private _onValidateSuccess; private _onValidateError; private _validate; private _handleInput; private _handleFormSubmit; private _handleFormReset; private _renderMark; render(): import('../../../../../node_modules/lit-html').TemplateResult<1>; }