import { storiesOf, html } from '@open-wc/demoing-storybook';
import '../lion-checkbox-group.js';
import '@lion/checkbox/lion-checkbox.js';
import { Required, Validator } from '@lion/validate';
storiesOf('Forms|Checkbox Group', module)
.add(
'Default',
() => html`
`,
)
.add(
'Pre Select',
() => html`
`,
)
.add(
'Disabled',
() => html`
`,
)
.add('Validation', () => {
const validate = () => {
const checkboxGroup = document.querySelector('#scientistsGroup');
checkboxGroup.submitted = !checkboxGroup.submitted;
};
return html`
`;
})
.add('Validation 2 checked', () => {
class HasMinTwoChecked extends Validator {
constructor(...args) {
super(...args);
this.name = 'HasMinTwoChecked';
}
execute(value) {
let hasError = false;
const selectedValues = value['scientists[]'].filter(v => v.checked === true);
if (!(selectedValues.length >= 2)) {
hasError = true;
}
return hasError;
}
static async getMessage() {
return 'You need to select at least 2 values.';
}
}
const validate = () => {
const checkboxGroup = document.querySelector('#scientistsGroup');
checkboxGroup.submitted = !checkboxGroup.submitted;
};
return html`
`;
});