igniteui-webcomponents/components/validation-container/validation-container.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { LitElement, nothing, type TemplateResult } from 'lit';
import { type IgcFormControl } from '../common/mixins/forms/types.js';
/** Configuration for the validation container. */
interface ValidationContainerConfig {
    /** The id attribute for the validation container. */
    id?: string;
    /** Project the validation container to the given slot inside the host shadow DOM. */
    slot?: string;
    /** Additional part(s) that should be bound to the validation container. */
    part?: string;
    /** Whether the validation container should expose a helper-text slot. */
    hasHelperText?: boolean;
}
/**
 * @element igc-validator
 *
 * @csspart helper-text - The base wrapper
 * @csspart validation-message - The validation error message container
 * @csspart validation-icon - The validation error icon
 */
export default class IgcValidationContainerComponent extends LitElement {
    static readonly tagName = "igc-validator";
    static styles: import("lit").CSSResult[];
    static register(): void;
    /**
     * Creates a validation container for the given form control.
     *
     * The container will render validation messages based on the control's validity state
     * and projected content, and reflect the control's `invalid` state.
     */
    static create(host: IgcFormControl, config?: ValidationContainerConfig): TemplateResult;
    private readonly _abortHandle;
    private _target;
    /**
     * Whether the container is in an invalid state.
     *
     * This is reflected from the target's `invalid` property,
     * and is used to determine whether to render the validation message slots.
     */
    invalid: boolean;
    /**
     * The form control whose validity state is being rendered. The target's `invalid`
     * property is reflected to the container, and its validity state is used to
     * determine which validation message slots to render.
     *
     * @remarks The target must be set for the container to function, and should be
     * set before the first update cycle for SSR compatibility. When using the
     * `create` method, the target is set automatically.
     */
    set target(value: IgcFormControl);
    get target(): IgcFormControl;
    constructor();
    protected createRenderRoot(): HTMLElement | DocumentFragment;
    /** @internal */
    handleEvent(event: Event): void;
    /**
     * Collects the projection state of the container slots in a single DOM pass.
     *
     * @returns Whether every slot is empty and the set of non-empty validation
     * slot names (i.e. excluding `helper-text`).
     */
    private _collectProjectedSlots;
    protected _renderValidationMessage(slotName: string, projectedSlots: ReadonlySet<string>): TemplateResult;
    protected _renderHelper(hasValidationProjection: boolean): TemplateResult | typeof nothing;
    protected firstUpdated(): void;
    protected render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-validator': IgcValidationContainerComponent;
    }
}
export {};