feat(stark-ui): implement stark-date-time-picker component

[carlo-nomes]

CLOSES ISSUE: #587

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/NationalBankBelgium/stark/blob/master/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #587

What is the new behavior?

Implemented DateTimePicker module and component that integrates with Reactive Forms and Angular Material MatFormField control.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

[coveralls]

Coverage increased (+0.03%) to 93.102% when pulling 6075e6a on cnomes:feature/date-time-picker into 9429f4f on NationalBankBelgium:master.

[christophercr]

@SuperITMan @cnomes I've updated this PR with the "finished" implementation of the DateTime picker.

Can you have a look? There is still one small fix to do in the styling and also the unit tests need to be expanded, but in terms of functionality the feature is done 😉 (or I hope so).

[carlo-nomes]

A couple of remarks:

• when you disable an empty picker the icons get shown again.
• on the example page if you have more than 1 error they overlap with the button below
• and the clear button moves everything around.

Also I think a nice feature would be that when you press tab when in the date input you focus the time input

[carlo-nomes]

I'm really liking how its working. 👍

[christophercr]

@SuperITMan @cnomes I've updated the PR with all the styling fixes and unit tests. I also applied the changes based on your last remarks. However I have some concerns about the following remarks:

when you disable an empty picker the icons get shown again.

In fact this is the same behavior in the Material Date Picker, so I think we should keep it like that in order to be consistent.

Also I think a nice feature would be that when you press tab when in the date input you focus the time input

I don't think this is a good idea in terms of UX because the user should be able to display the calendar also with the keyboard. So if we change the tabbing order, it will be confusing for the user.

Can you guys review again this PR?

[christophercr]

@cnomes @SuperITMan can you guys have a look on this PR? I've done all the fixes mentioned in your remarks. This way we can release today or tomorrow the latest 😉

[carlo-nomes]

Still looks good to me. 👍Is the plan still to release today?

[christophercr]

Mmm, most likely tomorrow :p

[christophercr]

@SuperITMan I've updated this PR with the small fix that you mentioned: the time field can now be entirely cleared manually and type a different time ;)

Can you have a look?
We are almost there!! Hopefully this can be merged now so we can release today! 😉