@synergy-design-system/angular/components/validate/index.d.ts

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone } from '@angular/core';
import { SynValidate } from '@synergy-design-system/components';

/**
 * @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.
 */
declare class SynValidateComponent {
    nativeElement: SynValidate;
    private _ngZone;
    constructor(e: ElementRef, ngZone: NgZone);
    /**
  * 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>`
   */
    set variant(v: SynValidate['variant']);
    get variant(): SynValidate['variant'];
    /**
     * Do not show the error icon when using the inline variant validation
     */
    set hideIcon(v: '' | SynValidate['hideIcon']);
    get hideIcon(): SynValidate['hideIcon'];
    /**
  * 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.
   */
    set on(v: SynValidate['on']);
    get on(): SynValidate['on'];
    /**
  * 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.
   */
    set customValidationMessage(v: SynValidate['customValidationMessage']);
    get customValidationMessage(): SynValidate['customValidationMessage'];
    /**
  * 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.
   */
    set eager(v: '' | SynValidate['eager']);
    get eager(): SynValidate['eager'];
    static ɵfac: i0.ɵɵFactoryDeclaration<SynValidateComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynValidateComponent, "syn-validate", never, { "variant": { "alias": "variant"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "on": { "alias": "on"; "required": false; }; "customValidationMessage": { "alias": "customValidationMessage"; "required": false; }; "eager": { "alias": "eager"; "required": false; }; }, {}, never, ["*"], true, never>;
}

export { SynValidateComponent };