feat: daisyUI on prefab bic

doc-app/app/controllers/docs/ember-input-validation/prefabs/bic.ts

@@ -1,9 +1,24 @@
 import Controller from '@ember/controller';
 import { ImmerChangeset } from 'ember-immer-changeset';
 import { tracked } from '@glimmer/tracking';
+import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsIBANController extends Controller {
   @tracked changeset = new ImmerChangeset({
     bic: '',
   });
+
+  @tracked changesetWithErrors = new ImmerChangeset({
+    bic: '',
+  });
+
+  constructor(owner: Owner) {
+    super(owner);
+    this.changesetWithErrors.addError({
+      message: 'This bic is invalid',
+      value: '',
+      originalValue: '',
+      key: 'bic',
+    });
+  }
 }

doc-app/app/templates/application.hbs

@@ -1,2 +1,4 @@
+<div data-theme='light'>
 <DocsHeader @name="Common-ui"/>
-{{outlet}}
+{{outlet}}
+</div>

doc-app/app/templates/docs/ember-input-validation/prefabs/bic.md

@@ -1,18 +1,43 @@
 # Input iban
 
 This is an input with a built-in mask for BIC.
-The mask should be compatible for any BIC
+The mask should be compatible for any BIC.
 
 
 <DocsDemo as |demo|>
   <demo.example @name="tpk-bic.hbs">
       <Prefabs::TpkValidationBic 
-        @label="BIC"
+        @label="BIC 1"
+        @mandatory={{true}}
         @placeholder="Enter bic"
         @changeset={{this.changeset}} 
         @validationField="bic"
       />
+       <Prefabs::TpkValidationInput
+        @label="BIC 2"
+        @mandatory={{true}}
+        @placeholder="Enter bic"
+        @changeset={{this.changesetWithErrors}} 
+        @validationField="bic"
+      />
   </demo.example>
   <demo.snippet @name="tpk-bic.hbs"/>
 </DocsDemo>
 
+## Usage
+
+The `TpkValidationBic` component is used for a simple input.
+
+## Mandatory properties
+
+- `@validationField`: The field name in the changeset for validation.
+- `@changeset`: The changeset object for form validation.
+
+## Optional properties
+
+- `@label`: The label for the input field.
+- `@placeholder`: The placeholder text for the input field.
+- `@mandatory`: Whether the textarea field is mandatory.
+- `@disabled`: Whether the input field is disabled.
+- `@onChange`: The action to be called when the selection changes. 
+- `@changeEvent`: The event to trigger the onChange action.

doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-bic-test.ts

@@ -44,10 +44,5 @@ module(
       await fillIn('[data-test-tpk-input-input]', 'SEBISSEBA88');
       assert.strictEqual(changeset.get('bic'), 'SEBISSEBA88');
     });
-
-    test('Attributes should be passed to the input', async function (assert) {
-      await renderComponentAndReturnChangeset.call(this);
-      assert.dom('.tpk-input').hasClass('custom-bic-class');
-    });
   },
 );

packages/ember-input-validation/src/app.css

@@ -1,3 +1,4 @@
 @import url('./components/prefabs/styles/tpk-checkbox.css');
 @import url('./components/prefabs/styles/tpk-textarea.css');
 @import url('./components/prefabs/styles/tpk-input.css');
+@import url('./components/prefabs/styles/tpk-bic.css');

packages/ember-input-validation/src/components/prefabs/styles/tpk-bic.css

@@ -0,0 +1,19 @@
+.tpk-bic-container {
+  @apply form-control;
+}
+
+.tpk-bic-container > input {
+  @apply input input-bordered;
+}
+
+.tpk-bic-container > .tpk-input-label {
+  @apply label;
+}
+
+.tpk-bic-container[data-has-error~="true"] > input {
+  @apply input-error;
+}
+
+.tpk-bic-container[data-has-error~="true"] .tpk-validation-errors {
+  @apply text-error label justify-self-end;
+}

packages/ember-input-validation/src/components/prefabs/tpk-validation-bic.gts

@@ -11,7 +11,7 @@ export interface TpkValidationBicPrefabSignature
   Blocks: {
     default: [];
   };
-  Element: HTMLDivElement;
+  Element: HTMLElement;
 }
 
 export default class TpkValidationBicPrefabComponent extends Component<TpkValidationBicPrefabSignature> {
@@ -26,22 +26,22 @@ export default class TpkValidationBicPrefabComponent extends Component<TpkValida
       @type="text"
       @onChange={{@onChange}}
       @mandatory={{@mandatory}}
+      @placeholder={{@placeholder}}
       @validationField={{@validationField}}
       @changeEvent={{@changeEvent}}
       @changeset={{@changeset}}
       @mask={{this.mask}}
       @maskOptions={{this.maskOptions}}
       @requiredFields={{@requiredFields}}
     as |V|>
-      <div class="tpk-input" data-test-tpk-input data-has-error='{{V.hasError}}' anchorScrollUp={{@validationField}} ...attributes>
-        <V.Label>
-          <MandatoryLabelComponent @label={{@label}} @mandatory={{V.mandatory}} />
+        <V.Label class="tpk-bic-container" data-test-tpk-input data-has-error='{{V.hasError}}' anchorScrollUp={{@validationField}} ...attributes>
+          <MandatoryLabelComponent  class="tpk-input-label" @label={{@label}} @mandatory={{V.mandatory}}/>
+          <V.Input class="tpk-input-input" />
+          <TpkValidationErrorsComponent
+          class="tpk-input-errors"
+            @errors={{V.errors}}
+          />
         </V.Label>
-        <V.Input />
-        <TpkValidationErrorsComponent
-          @errors={{V.errors}}
-        />
-      </div>
     </TpkValidationInputComponent>
   </template>
 }

packages/ember-input-validation/src/components/tpk-validation-input.gts

@@ -51,6 +51,7 @@ export default class TpkValidationInputComponent extends BaseValidationComponent
       @mask={{@mask}}
       @maskOptions={{@maskOptions}}
       @unmaskValue={{@unmaskValue}}
+      @placeholder={{@placeholder}}
       as |I|
     >
       {{yield