diff --git a/packages/form-core/index.d.ts b/packages/form-core/index.d.ts
new file mode 100644
index 000000000..fc1db61f0
--- /dev/null
+++ b/packages/form-core/index.d.ts
@@ -0,0 +1,52 @@
+export { FocusMixin } from './src/FocusMixin.js';
+export { FormatMixin } from './src/FormatMixin.js';
+export { FormControlMixin } from './src/FormControlMixin.js';
+export { InteractionStateMixin } from './src/InteractionStateMixin.js'; // applies FocusMixin
+export { LionField } from './src/LionField.js';
+export { FormRegisteringMixin } from './src/registration/FormRegisteringMixin.js';
+export { FormRegistrarMixin } from './src/registration/FormRegistrarMixin.js';
+export { FormRegistrarPortalMixin } from './src/registration/FormRegistrarPortalMixin.js';
+export { FormControlsCollection } from './src/registration/FormControlsCollection.js';
+
+// validate
+
+export { ValidateMixin } from './src/validate/ValidateMixin.js';
+export { Unparseable } from './src/validate/Unparseable.js';
+export { Validator } from './src/validate/Validator.js';
+export { ResultValidator } from './src/validate/ResultValidator.js';
+
+export { Required } from './src/validate/validators/Required.js';
+
+export {
+ IsString,
+ EqualsLength,
+ MinLength,
+ MaxLength,
+ MinMaxLength,
+ IsEmail,
+ Pattern,
+} from './src/validate/validators/StringValidators.js';
+
+export {
+ IsNumber,
+ MinNumber,
+ MaxNumber,
+ MinMaxNumber,
+} from './src/validate/validators/NumberValidators.js';
+
+export {
+ IsDate,
+ MinDate,
+ MaxDate,
+ MinMaxDate,
+ IsDateDisabled,
+} from './src/validate/validators/DateValidators.js';
+
+export { DefaultSuccess } from './src/validate/resultValidators/DefaultSuccess.js';
+
+export { LionValidationFeedback } from './src/validate/LionValidationFeedback.js';
+
+export { ChoiceGroupMixin } from './src/choice-group/ChoiceGroupMixin.js';
+export { ChoiceInputMixin } from './src/choice-group/ChoiceInputMixin.js';
+
+export { FormGroupMixin } from './src/form-group/FormGroupMixin.js';
diff --git a/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js b/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js
index 43d853f95..95fd8eb55 100644
--- a/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js
+++ b/packages/form-core/test/choice-group/ChoiceGroupMixin.test.js
@@ -1,5 +1,4 @@
import { html, LitElement } from '@lion/core';
-// @ts-expect-error
import { LionInput } from '@lion/input';
import '@lion/fieldset/lion-fieldset.js';
import { FormGroupMixin, Required } from '@lion/form-core';
@@ -19,7 +18,6 @@ import { ChoiceInputMixin } from '../../src/choice-group/ChoiceInputMixin.js';
describe('ChoiceGroupMixin', () => {
class ChoiceInput extends ChoiceInputMixin(LionInput) {}
- // @ts-expect-error base constructors same return type
customElements.define('choice-group-input', ChoiceInput);
// @ts-expect-error
class ChoiceGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {}
diff --git a/packages/form-core/test/choice-group/ChoiceInputMixin.test.js b/packages/form-core/test/choice-group/ChoiceInputMixin.test.js
index 6ec5aae29..6b729ca0b 100644
--- a/packages/form-core/test/choice-group/ChoiceInputMixin.test.js
+++ b/packages/form-core/test/choice-group/ChoiceInputMixin.test.js
@@ -1,35 +1,28 @@
import { html } from '@lion/core';
-// @ts-expect-error
import { LionInput } from '@lion/input';
import { Required } from '@lion/form-core';
import { expect, fixture } from '@open-wc/testing';
import sinon from 'sinon';
import { ChoiceInputMixin } from '../../src/choice-group/ChoiceInputMixin.js';
-/**
- * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost
- */
-
describe('ChoiceInputMixin', () => {
- /** @typedef {Element & ChoiceClass} ChoiceInput */
class ChoiceClass extends ChoiceInputMixin(LionInput) {
constructor() {
super();
this.type = 'checkbox'; // could also be 'radio', should be tested in integration test
}
}
- // @ts-expect-error base constructors same return type
customElements.define('choice-input', ChoiceClass);
it('is hidden when attribute hidden is true', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(
+ const el = /** @type {ChoiceClass} */ (await fixture(
html``,
));
expect(el).not.to.be.displayed;
});
it('has choiceValue', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(
+ const el = /** @type {ChoiceClass} */ (await fixture(
html``,
));
@@ -43,7 +36,7 @@ describe('ChoiceInputMixin', () => {
it('can handle complex data via choiceValue', async () => {
const date = new Date(2018, 11, 24, 10, 33, 30, 0);
- const el = /** @type {ChoiceInput} */ (await fixture(
+ const el = /** @type {ChoiceClass} */ (await fixture(
html``,
));
@@ -53,7 +46,7 @@ describe('ChoiceInputMixin', () => {
it('fires one "model-value-changed" event if choiceValue or checked state or modelValue changed', async () => {
let counter = 0;
- const el = /** @type {ChoiceInput} */ (await fixture(html`
+ const el = /** @type {ChoiceClass} */ (await fixture(html`
{
counter += 1;
@@ -78,7 +71,7 @@ describe('ChoiceInputMixin', () => {
it('fires one "user-input-changed" event after user interaction', async () => {
let counter = 0;
- const el = /** @type {ChoiceInput} */ (await fixture(html`
+ const el = /** @type {ChoiceClass} */ (await fixture(html`
{
counter += 1;
@@ -97,7 +90,7 @@ describe('ChoiceInputMixin', () => {
});
it('can be required', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(html`
+ const el = /** @type {ChoiceClass} */ (await fixture(html`
`));
expect(el.hasFeedbackFor).to.include('error');
@@ -111,17 +104,17 @@ describe('ChoiceInputMixin', () => {
describe('Checked state synchronization', () => {
it('synchronizes checked state initially (via attribute or property)', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(``));
+ const el = /** @type {ChoiceClass} */ (await fixture(``));
expect(el.checked).to.equal(false, 'initially unchecked');
- const precheckedElementAttr = /** @type {ChoiceInput} */ (await fixture(html`
+ const precheckedElementAttr = /** @type {ChoiceClass} */ (await fixture(html`
`));
expect(precheckedElementAttr.checked).to.equal(true, 'initially checked via attribute');
});
it('can be checked and unchecked programmatically', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(``));
+ const el = /** @type {ChoiceClass} */ (await fixture(``));
expect(el.checked).to.be.false;
el.checked = true;
expect(el.checked).to.be.true;
@@ -131,7 +124,7 @@ describe('ChoiceInputMixin', () => {
});
it('can be checked and unchecked via user interaction', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(``));
+ const el = /** @type {ChoiceClass} */ (await fixture(``));
el._inputNode.click();
expect(el.checked).to.be.true;
el._inputNode.click();
@@ -139,7 +132,7 @@ describe('ChoiceInputMixin', () => {
});
it('synchronizes modelValue to checked state and vice versa', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(
+ const el = /** @type {ChoiceClass} */ (await fixture(
html``,
));
expect(el.checked).to.be.false;
@@ -158,7 +151,7 @@ describe('ChoiceInputMixin', () => {
it('ensures optimal synchronize performance by preventing redundant computation steps', async () => {
/* we are checking private apis here to make sure we do not have cyclical updates
which can be quite common for these type of connected data */
- const el = /** @type {ChoiceInput} */ (await fixture(
+ const el = /** @type {ChoiceClass} */ (await fixture(
html``,
));
expect(el.checked).to.be.false;
@@ -183,10 +176,10 @@ describe('ChoiceInputMixin', () => {
});
it('synchronizes checked state to [checked] attribute for styling purposes', async () => {
- /** @param {ChoiceInput} el */
+ /** @param {ChoiceClass} el */
const hasAttr = el => el.hasAttribute('checked');
- const el = /** @type {ChoiceInput} */ (await fixture(``));
- const elChecked = /** @type {ChoiceInput} */ (await fixture(html`
+ const el = /** @type {ChoiceClass} */ (await fixture(``));
+ const elChecked = /** @type {ChoiceClass} */ (await fixture(html`
@@ -230,22 +223,22 @@ describe('ChoiceInputMixin', () => {
describe('Format/parse/serialize loop', () => {
it('creates a modelValue object like { checked: true, value: foo } on init', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(
+ const el = /** @type {ChoiceClass} */ (await fixture(
html``,
));
expect(el.modelValue).deep.equal({ value: 'foo', checked: false });
- const elChecked = /** @type {ChoiceInput} */ (await fixture(html`
+ const elChecked = /** @type {ChoiceClass} */ (await fixture(html`
`));
expect(elChecked.modelValue).deep.equal({ value: 'foo', checked: true });
});
it('creates a formattedValue based on modelValue.value', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(``));
+ const el = /** @type {ChoiceClass} */ (await fixture(``));
expect(el.formattedValue).to.equal('');
- const elementWithValue = /** @type {ChoiceInput} */ (await fixture(html`
+ const elementWithValue = /** @type {ChoiceClass} */ (await fixture(html`
`));
expect(elementWithValue.formattedValue).to.equal('foo');
@@ -254,12 +247,12 @@ describe('ChoiceInputMixin', () => {
describe('Interaction states', () => {
it('is considered prefilled when checked and not considered prefilled when unchecked', async () => {
- const el = /** @type {ChoiceInput} */ (await fixture(
+ const el = /** @type {ChoiceClass} */ (await fixture(
html``,
));
expect(el.prefilled).equal(true, 'checked element not considered prefilled');
- const elUnchecked = /** @type {ChoiceInput} */ (await fixture(
+ const elUnchecked = /** @type {ChoiceClass} */ (await fixture(
``,
));
expect(elUnchecked.prefilled).equal(false, 'unchecked element not considered prefilled');
diff --git a/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts b/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts
index d895cb95a..88bd3fefc 100644
--- a/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts
+++ b/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts
@@ -17,6 +17,8 @@ export declare class ChoiceInputHost {
modelValue: ChoiceInputModelValue;
serializedValue: ChoiceInputSerializedValue;
+ checked: boolean;
+
get choiceValue(): any;
set choiceValue(value: any);