import { Meta, Story, html } from '@open-wc/demoing-storybook';
/* eslint-disable import/no-extraneous-dependencies */
import { LionInput } from '@lion/input';
import '@lion/input-amount/lion-input-amount.js';
import '@lion/input-date/lion-input-date.js';
import '@lion/input-email/lion-input-email.js';
import '@lion/input/lion-input.js';
import {
DefaultSuccess,
EqualsLength,
IsDate,
IsEmail,
IsNumber,
loadDefaultFeedbackMessages,
MaxDate,
MaxLength,
MaxNumber,
MinDate,
MinLength,
MinMaxDate,
MinMaxLength,
MinMaxNumber,
MinNumber,
Required,
Validator,
} from '../index.js';
## Required Validator
{html`
`}
```html
```
## String Validators
{html`
`}
```html
```
## Number Validators
{html`
`}
```html
```
## Date Validators
{() => {
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth();
const day = today.getDate();
const yesterday = new Date(year, month, day - 1);
const tomorrow = new Date(year, month, day + 1);
return html`
`;
}}
```js
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth();
const day = today.getDate();
const yesterday = new Date(year, month, day - 1);
const tomorrow = new Date(year, month, day + 1);
```
```html
```
## Email Validator
{html`
`}
```html
```
## Validation Types
{() => {
try {
class MyTypesInput extends LionInput {
static get validationTypes() {
return ['error', 'warning', 'info', 'success'];
}
}
customElements.define('my-types-input', MyTypesInput);
} catch (err) {
// expected as it is a demo
}
return html`
`;
}}
```js
try {
class MyTypesInput extends LionInput {
static get validationTypes() {
return ['error', 'warning', 'info', 'success'];
}
}
customElements.define('my-types-input', MyTypesInput);
} catch (err) {
// expected as it is a demo
}
```
```html
```
## Custom Validators
{() => {
class MyValidator extends Validator {
constructor(...args) {
super(...args);
this.name = 'myValidator';
}
execute(modelValue, param) {
return modelValue !== param;
}
static getMessage({ fieldName, modelValue, params: param }) {
if (modelValue.length >= param.length - 1 && param.startsWith(modelValue)) {
return 'Almost there...';
}
return `No "${param}" found in ${fieldName}`;
}
}
return html`
`;
}
}
```js
class MyValidator extends Validator {
constructor(...args) {
super(...args);
this.name = 'myValidator';
}
execute(modelValue, param) {
return modelValue !== param;
}
static getMessage({ fieldName, modelValue, params: param }) {
if (modelValue.length >= param.length - 1 && param.startsWith(modelValue)) {
return 'Almost there...';
}
return `No "${param}" found in ${fieldName}`;
}
}
```
```html
```
## Override default messages
{html`
`}
```html
```
## Override fieldName
{html`
`}
```html
```
## Asynchronous validation
{() => {
function pause(ms = 0) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, ms);
});
}
class AsyncValidator extends Validator {
constructor(...args) {
super(...args);
this.name = 'asyncValidator';
this.async = true;
}
async execute() {
console.log('async pending...');
await pause(2000);
console.log('async done...');
return true;
}
static getMessage({ modelValue }) {
return `validated for modelValue: ${modelValue}...`;
}
}
return html`
`}}
```js
function pause(ms = 0) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, ms);
});
}
class AsyncValidator extends Validator {
constructor(...args) {
super(...args);
this.name = 'asyncValidator';
this.async = true;
}
async execute() {
console.log('async pending...');
await pause(2000);
console.log('async done...');
return true;
}
static getMessage({ modelValue }) {
return `validated for modelValue: ${modelValue}...`;
}
}
```
## Dynamic parameter change
{() => {
const beginDate = new Date('09/09/1990');
const minDateValidatorRef = new MinDate(beginDate, {
message: 'Fill in a date after your birth date',
});
return html`
`}}
```js
const beginDate = new Date('09/09/1990');
const minDateValidatorRef = new MinDate(beginDate, {
message: 'Fill in a date after your birth date',
});
```
```html
```