@synergy-design-system/components/dist/components/validate/validate.component.d.ts

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import type { CSSResultGroup, PropertyValues } from 'lit';
import SynergyElement from '../../internal/synergy-element.js';
import SynAlert from '../alert/alert.component.js';
/**
 * @summary Validate provides form field validation messages in a unified way.
 * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
 * and showing the validation message in a consistent, user defined way.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
 * @dependency syn-alert
 *
 * @slot - The form field that should be validated.
 * Avoid slotting in more than one element, as subsequent ones will be ignored.
 *
 * @csspart base - The component's base wrapper.
 * @csspart input-wrapper - The container that wraps the form field.
 * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
 * @csspart alert__base - The container that wraps the alert.
 * @csspart alert__message - The container that wraps the alert message.
 * @csspart alert__icon - The container that wraps the alert icon.
 */
export default class SynValidate extends SynergyElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'syn-alert': typeof SynAlert;
    };
    controller: AbortController;
    observer: MutationObserver;
    private slottedChildren;
    validationMessage: string;
    eagerFirstMount: boolean;
    isInternalTriggeredInvalid: boolean;
    isValid: boolean;
    /**
     * The variant that should be used to show validation alerts.
     *
     * The following variants are supported:
     * - **native** (default): Uses the native browser validation, usually a browser tooltip.
     * - **inline**: Show the validation message underneath the element, using a `<syn-alert>`
     */
    variant: 'native' | 'inline';
    /** Do not show the error icon when using the inline variant validation */
    hideIcon: boolean;
    /**
     * Defines the events that trigger the validation.
     * `invalid` will always automatically be included.
     * You may also use the `live` keyword to validate on every input change.
     * `live` will make sure to listen to the `invalid`, `input` and `blur` events.
     *
     * Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
     * and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.
     *
     * @example ```html
     * <!-- Validate on invalid and change events (invalid, change) -->
     * <syn-validate on="invalid change"></syn-validate>
     *
     * <!-- Validate on live events (invalid, blur, input)-->
     * <syn-validate on="live"></syn-validate>
     *
     * <!-- Validate on live and custom events (invalid, blur, input, focus, change) -->
     * <syn-validate on="live focus change"></syn-validate>
     * ```
     */
    on: string;
    /**
     * Custom validation message to be displayed when the input is invalid.
     * Will override the default browser validation message.
     * Set to an empty string to reset the validation message.
     */
    customValidationMessage: string;
    /**
     * Set this to true to validate the input immediately when it is rendered.
     * Best used with a `variant` of `inline`.
     * When setting eager, the input will not be focused automatically.
     *
     * When using a `variant` of `native` the browser will focus
     * the last eager field as it is using a tooltip.
     * In this case it is better to just provide one eager field.
     */
    eager: boolean;
    handleListenerChange(): void;
    handleEagerChange(): Promise<void>;
    handleCustomValidationMessageChange(): void;
    /**
     * Returns the validity state of the input component.
     * `true` for valid and `false` for invalid.
     */
    getValidity(): boolean;
    /**
     * Get the input element to validate. Defined as the first slotted element
     * @returns The input element or undefined if not found
     */
    private getInput;
    /**
     * Get the event names to listen for.
     * If the input is a synergy element, will use syn- prefixes.
     * @returns The event names to listen for
     */
    private getUsedEventNames;
    /**
     * Update the events on the input element.
     */
    private updateEvents;
    private setValidationMessage;
    /**
     * Set the custom validation message to the input. This will make sure to either:
     * - use the custom message if one is set or
     * - use the default message if the custom message is empty
     */
    private setCustomValidationMessage;
    /**
     * Set the validation message from the input element
     * @param e The event that was received
     */
    private internalRevalidate;
    /**
     * Handle the blur event during validation
     */
    private handleFocus;
    /**
     * Triggers a validation run, showing the validation message if needed.
     */
    private validate;
    firstUpdated(changedProperties: PropertyValues): Promise<void>;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private renderInlineValidation;
    render(): import("lit").TemplateResult<1>;
}