IgxDateRangePickerComponent's calendar should display selected range if both start and end are filled and valid

[jackofdiamond5]

Is your feature request related to a problem? Please describe.

The IgxDateRangePickerComponent with input projections will update its inputs on each calendar interaction. This means that if you were to select a single date - the start input will be filled in, then selecting another date (finalizing the range selection) will fill in the end input. Additionally, clearing the start input will also clear the end input but clearing the end input will not clear the start input and upon opening the calendar we will still have a selected value even though there is no defined range in the editable inputs. Closing the calendar in this state will update the end input with the value of the start input.

Describe the solution you'd like

To fix these inconsistencies we've come to an agreement that the following behavior is preferable:

1. Selecting a single range will update the start input, closing the calendar in this state will not update the end input.
2. Selecting a second value from the calendar will update the second input accordingly.
3. The calendar will display a selected range only if the two projected inputs are filled in.

Also, the validity of the IgxDateRangePickerComponent will continue to be determined based on the following factors:

1. The positioning of ngModel:
   • If it is on the component - the two inputs must be filled in and within a specified range (if any is defined) in order for its state to be valid.
   • if the two projected inputs have ngModel they will be validated separately

Describe alternatives you've considered

n/a

Additional context

n/a