DatePicker and DatePickerInput implementation duplicates too many classes #2822
Description
Describe in detail the issue you're having.
I noticed that the implementation for datepicker.component.ts and datepicker-input.component.ts have quite some duplication in the template.
This results in the DOM with a structure like this
<!-- start datepicker.component.ts -->
<div class="cds--form-item">
<div class="cds--date-picker">
<div class="cds--date-picker-container">
<!-- start datepicker-input.component.ts -->
<div class="cds--form-item">
<div class="cds--date-picker">
<div class="cds--date-picker-container">
<label>...</label>
<div class="cds--date-picker-input__wrapper>
<span>
<input />
</span>
</div>
</div>
</div>
</div>
<!-- end datepicker-input.component.ts -->
</div>
</div>
</div>
<!-- end datepicker.component.ts -->
This is a pretty bloated DOM structure and can be simplified a lot. The react implementation is a lot simpler and has not class duplication.
I created this table as comparison, hope this works to show the problem:
| component | angular | react |
|---|---|---|
| datepicker | .cds--form-item > .cds--date-picker > .cds--date-picker--container |
.cds--form-item > .cds--date-picker |
| datepicker-input | .cds--form-item > .cds--date-picker > .cds--date-picker--container |
.cds--date-picker--container |