feat:text field wrapper component

[MartinPiq]

Describe pull-request

New text field wrapper component. Instead of current usage where we have a custom text field with tds events this one is a wrapper around a input element. All attributes that belong to input element have been removed from the text field wrapper and are directly added to the input element. This probably still needs some refinement/improvement.

Usage would look something like this.

<tds-text-field-wrapper size="lg" state="default" label="Label" label-position="no label">
    <input type="text" placeholder="Placeholder" />
</tds-text-field-wrapper>

This has been heavily inspired by Porsche Design System components which implement this functionality. The utility code added has mostly been copied from there repository.

Issue Linking:

No issue: Describe the problem being solved.
Current text field component is not always easy to integrate into different solutions since it is a custom component. Using wrappers for elements handling input allows them to be more framework agnostic and avoids the need to add custom functionality to integrate them in different frameworks.

In my opinion this should be the standard for all elements handling user input. (text field, textarea, checkbox, etc...)

How to test

Try it out in the storybook. I will probably have missed a few scenarios or features from the normal tds text field so it requires a proper look through to verify it has all the text field functionality.

Checklist before submission

• [x] I have added unit tests for my changes (if applicable)
• [x] All existing tests pass
• [ ] I have updated the documentation (if applicable) Need to add proper documentation for how to use this component and it's differences from the normal text field. Wanted to create pull request for visibility and invite collaboration.

Suggested test steps

• [ ] Browser testing (Chrome, Safari, Firefox)
• [ ] Keyboard operability
• [ ] Interactive elements have labels.
• [ ] Storybook controls
• [ ] Design/controls/props is aligned with other components
• [ ] Dark/light mode and variants
• [ ] Input fields – values should be displayed properly
• [ ] Events