[FEAT] Update form field implementation and create rest of form components

[xelaint]

💡 Feature request

Feature Name

Update form field implementation and create rest of form components.

The Desired Behavior

https://www.figma.com/design/4A0SIso9uJ7HGKdW9GKMGr/Daffodil-Design-System?node-id=664-12082

• Form field should support native select, custom select, native input, custom input, textarea, quantity field, and quantity select.
• Input types to support:

<input type="date">
<input type="datetime-local">
<input type="email">
<input type="month">
<input type="number">
<input type="password">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

• Manage disabled, focus, mutating, error, hints, and skeleton (loading) states.

The template API of daff-form-field should look something like:

<form>
  <daff-form-field>
    <label for="grace">Name</label>
    <input type="text" id="grace" placeholder="Test"/>
    <div class="error">Error message goes here.</div>
  </daff-form-field>

  <daff-form-field>
    <label for="grace">Name</label>
    <select>
   	<option></option>
    </select>
    <div class="select-arrow">:down_arrow:</div>
    <div class="error">Error message goes here.</div>
  </daff-form-field>

  <daff-form-field>
    <label for="grace">Name</label>
    <textarea id="grace"></textarea>
    <div class="select-arrow">:down_arrow:</div>
    <div class="error">Error message goes here.</div>
  </daff-form-field>

  <button type="submit">Submit</button>
</form>

Things to do:

• Write documentation on the purpose of the form field component
• [FEAT] DaffFormFieldComponent refactor #3407
• [FEAT] Form field control type should be an enum #1688
• daffFormLabel directive
• Prefix/Suffix directives
• Valid/Focused/Raised states
• Move error-message outside of daff-form-field
• Native Select control styles in form field
• Create DaffRadioComponent [FEAT] DaffRadioComponent and DaffRadioSetComponent #781
• Create DaffCheckboxComponent
• Update DaffCheckboxComponent UI
• Create DaffNativeTextareaComponent
• Update DaffSelectComponent to DaffNativeSelectComponent
• Refactor DaffNativeSelectComponent
• Create DaffSelectComponent (feat(design): create select component #2458)
• Upate DaffInputComponent to DaffNativeInputComponent
• Refactor DaffNativeInputComponent

Your Use Case

As a user, I should be able to fill out fields in a form.

Prior Work

Environment

Daffodil version: X.Y.Z
Angular version: X.Y.Z 

 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[shadow0500]

Can I work on this ?

[damienwebdev]

I think this is likely an internal ticket that either @xelaint or I need to work on, but thanks @shadow0500

[shadow0500]

Okay , No problem . Thank you for the feedback and for your response too.