@synergy-design-system/angular
Version:
Angular wrappers for the Synergy Design System
125 lines (118 loc) • 5.59 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Component } from '@angular/core';
import '@synergy-design-system/components/components/validate/validate.js';
// ---------------------------------------------------------------------
// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
// Please do not edit this file directly!
// It will get recreated when running pnpm build.
// ---------------------------------------------------------------------
/**
* @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.
*/
class SynValidateComponent {
nativeElement;
_ngZone;
constructor(e, ngZone) {
this.nativeElement = e.nativeElement;
this._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) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
}
get variant() {
return this.nativeElement.variant;
}
/**
* Do not show the error icon when using the inline variant validation
*/
set hideIcon(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.hideIcon = v === '' || v));
}
get hideIcon() {
return this.nativeElement.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) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.on = v));
}
get on() {
return this.nativeElement.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) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.customValidationMessage = v));
}
get customValidationMessage() {
return this.nativeElement.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) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.eager = v === '' || v));
}
get eager() {
return this.nativeElement.eager;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SynValidateComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", type: SynValidateComponent, isStandalone: true, selector: "syn-validate", inputs: { variant: "variant", hideIcon: "hideIcon", on: "on", customValidationMessage: "customValidationMessage", eager: "eager" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SynValidateComponent, decorators: [{
type: Component,
args: [{
selector: 'syn-validate',
standalone: true,
template: '<ng-content></ng-content>',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { variant: [{
type: Input
}], hideIcon: [{
type: Input
}], on: [{
type: Input
}], customValidationMessage: [{
type: Input
}], eager: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { SynValidateComponent };
//# sourceMappingURL=synergy-design-system-angular-components-validate.mjs.map