Allow custom CSS styles on Typeahead component

[SSchulze1989]

see feature request: #227

Behaviour

When the component is initialized the provided values for "class" and "style" are extracted from the uncaptured attributes parameter AdditionalAttributes. The values are then put into separate private fields:

• string _classAttribute for setting the class
• string _styleAttribute for setting styles
• IReadOnlyDictionary<string, objec> _capturedAttributes for the rest of the additional attributes
  When no values for "class" or "style" are provided the component shows as default.
  Otherwise the css styling from the outer div component will be overriden:

<div class="blazored-typeahead @FieldCssClasses @_classAttribute" style="@_styleAttribute">

Changes

• Added private fields for _capturedAttributes, _classAttribute and _styleAttribute
• Added method to extract "class" and "style" values from uncaptured attributes
• Set _classAttribute and _styleAttribute on the outer div of the component
• Change 'blazored-typeahead__input' css class to inherit color and background-color (default would be set from browser and not inherited)

Example

Here is a quick example showing the component working together with input groups from Bootstrap 5.0:

Default:

<div class="input-group">
    <div class="input-group-text">
        Person
    </div>
    <BlazoredTypeahead @bind-Value=PersonSelected 
                       SearchMethod=SearchPeople 
                       placeholder="Search by name...">
        <SelectedTemplate Context=person>
            @person?.Firstname @person?.Lastname
        </SelectedTemplate>
        <ResultTemplate Context=person>
            @person.Firstname @person.Lastname
        </ResultTemplate>
    </BlazoredTypeahead>
    <button class="btn btn-outline-secondary" type="button">Ok</button>
</div>

Override style

<div class="input-group">
    <div class="input-group-text">
        Person
    </div>
    <BlazoredTypeahead @bind-Value=PersonSelected
                       class="form-control p-0"
                       style="color:red;"
                       SearchMethod=SearchPeople 
                       placeholder="Search by name...">
        <SelectedTemplate Context=person>
            @person?.Firstname @person?.Lastname
        </SelectedTemplate>
        <ResultTemplate Context=person>
            @person.Firstname @person.Lastname
        </ResultTemplate>
    </BlazoredTypeahead>
    <button class="btn btn-outline-secondary" type="button">Ok</button>
</div>

Additional Information

This was just a quickly drawn together experiment because i wanted to use the component in a input-group, but since it seems to work well overall i thought i might propose this a feature.
The styling can be a bit fiddly to get right because it has to work together with all other styles used on the component. As you can see i had to set the default form-control padding to 0 to avoid double margins, but i guess it is up to the user to make this right.

All in all i think this is a good way to give the user enhance control over the design without interfering with the functionality of the component too much - and without any need to override the typehead css classes directly.