[FEAT] DaffFormFieldComponent refactor

[xelaint]

💡 Feature request

Feature Name

Update form field implementation

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>

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: