diff --git a/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts b/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts
new file mode 100644
index 00000000..ea4d9f2d
--- /dev/null
+++ b/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts
@@ -0,0 +1,63 @@
+import { module, test } from 'qunit';
+import {
+ render,
+ settled,
+ triggerEvent,
+ type TestContext,
+} from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { ImmerChangeset } from 'ember-immer-changeset';
+import { setupRenderingTest } from 'ember-qunit';
+import { setupIntl } from 'ember-intl/test-support';
+
+module(
+ 'Integreation | Component | Prefabs | tpk-validation-email',
+ function (hooks) {
+ setupRenderingTest(hooks);
+ setupIntl(hooks, 'fr-fr');
+
+ async function renderComponent() {
+ await render(hbs`
+
+ `);
+ }
+
+ function setupChangeset(this: TestContext, email: string) {
+ const changeset = new ImmerChangeset({
+ email,
+ });
+
+ this.set('changeset', changeset);
+ return changeset;
+ }
+
+ test('the type of the input is email', async function (assert) {
+ setupChangeset.call(this, 'email');
+
+ await renderComponent();
+ assert.dom('input').hasAttribute('type', 'email');
+ });
+
+ test('It changes data-has-error attribute on error', async function (assert) {
+ const changeset = setupChangeset.call(this, '');
+
+ await renderComponent();
+
+ changeset.addError({
+ message: 'required',
+ value: '',
+ originalValue: '',
+ key: 'email',
+ });
+ await settled();
+ assert.dom('[data-test-tpk-input-input]').hasNoText();
+ assert
+ .dom('[data-test-tpk-input]')
+ .hasAttribute('data-has-error', 'true');
+ });
+ },
+);
diff --git a/doc-app/tests/integration/components/ember-input-validation/tpk-validation-input-test.ts b/doc-app/tests/integration/components/ember-input-validation/tpk-validation-input-test.ts
index e7aa05e7..e7e86c38 100644
--- a/doc-app/tests/integration/components/ember-input-validation/tpk-validation-input-test.ts
+++ b/doc-app/tests/integration/components/ember-input-validation/tpk-validation-input-test.ts
@@ -11,9 +11,11 @@ import {
settled,
} from '@ember/test-helpers';
import { ImmerChangeset } from 'ember-immer-changeset';
+import { setupIntl } from 'ember-intl/test-support';
module('Integration | Component | tpk-validation-input', function (hooks) {
setupRenderingTest(hooks);
+ setupIntl(hooks, 'fr-fr');
async function renderComponent() {
await render(
diff --git a/packages/ember-input-validation/package.json b/packages/ember-input-validation/package.json
index 2946acfe..1cfb00dd 100644
--- a/packages/ember-input-validation/package.json
+++ b/packages/ember-input-validation/package.json
@@ -53,6 +53,7 @@
"@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2",
"ember-concurrency": "~4.0.2",
+ "ember-intl": "~6.5.5",
"ember-modifier": "~4.1.0",
"ember-test-selectors": "~6.0.0",
"yup": "~1.4.0"
@@ -109,6 +110,8 @@
"main": "addon-main.cjs",
"app-js": {
"./components/base.js": "./dist/_app_/components/base.js",
+ "./components/prefabs/tpk-validation-email.js": "./dist/_app_/components/prefabs/tpk-validation-email.js",
+ "./components/prefabs/tpk-validation-errors.js": "./dist/_app_/components/prefabs/tpk-validation-errors.js",
"./components/tpk-form.js": "./dist/_app_/components/tpk-form.js",
"./components/tpk-validation-checkbox.js": "./dist/_app_/components/tpk-validation-checkbox.js",
"./components/tpk-validation-datepicker.js": "./dist/_app_/components/tpk-validation-datepicker.js",
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts
new file mode 100644
index 00000000..c31f4bd2
--- /dev/null
+++ b/packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts
@@ -0,0 +1,55 @@
+import type { TpkInputSignature } from '@triptyk/ember-input/components/tpk-input';
+import { hash } from '@ember/helper';
+import TpkValidationInputComponent, {
+ type TpkValidationInputComponentSignature,
+} from '../tpk-validation-input.gts';
+import {
+ type BaseValidationSignature,
+ BaseValidationComponent,
+} from '../base.ts';
+import TpkValidationErrorsComponent from './tpk-validation-errors.gts';
+
+export interface TpkValidationEmailComponentSignature
+ extends BaseValidationSignature {
+ Args: Omit<
+ TpkValidationInputComponentSignature['Args'],
+ | 'type'
+ | 'min'
+ | 'max'
+ | 'step'
+ | 'mask'
+ | 'unmaskValue'
+ | 'maskOptions'
+ | 'mask'
+ >;
+ Blocks: {
+ default: [];
+ };
+ Element: HTMLDivElement;
+}
+
+export default class TpkValidationEmailComponent extends BaseValidationComponent {
+
+
+
+
+
+
+
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts
new file mode 100644
index 00000000..2f71e313
--- /dev/null
+++ b/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts
@@ -0,0 +1,35 @@
+import { helper } from '@ember/component/helper';
+import Component from '@glimmer/component';
+import { htmlSafe as HS } from '@ember/template';
+import { t } from 'ember-intl';
+
+export interface TpkValidationErrorsComponentSignature {
+ Args: {
+ errors: any;
+ classless?: boolean;
+ };
+ Blocks: {
+ default: [];
+ };
+ Element: HTMLDivElement;
+}
+
+export default class TpkValidationErrorsComponent extends Component {
+ htmlSafe = helper(function htmlSafe(params: [string]) {
+ return HS(params.join());
+ });
+
+
+
+
+}
diff --git a/packages/ember-input-validation/src/components/tpk-validation-input.gts b/packages/ember-input-validation/src/components/tpk-validation-input.gts
index 6ad47a5c..fbfbaadd 100644
--- a/packages/ember-input-validation/src/components/tpk-validation-input.gts
+++ b/packages/ember-input-validation/src/components/tpk-validation-input.gts
@@ -32,7 +32,7 @@ export interface TpkValidationInputComponentSignature
{
Input?: TpkInputSignature['Blocks']['default'][0]['Input'];
Label?: TpkInputSignature['Blocks']['default'][0]['Label'];
- errors: TpkValidationInputComponent['errors'];
+ errors?: TpkValidationInputComponent['errors'];
hasError: TpkValidationInputComponent['hasError'];
firstError: TpkValidationInputComponent['firstError'];
},
@@ -115,11 +115,7 @@ export default class TpkValidationInputComponent extends BaseValidationComponent
maxlength={{@maxlength}}
data-test-input-not-yielded
/>
- {{yield
- (hash
- errors=this.errors hasError=this.hasError firstError=this.firstError
- )
- }}
+ {{yield (hash errors=this.errors hasError=this.hasError firstError=this.firstError)}}
{{/if}}
{{#if @showTogglePasswordButton}}