feat(stark-ui): implement ControlValueAccessor on DateRangePicker…

… component

  - provide functionality for displaying errors
  - update stark-date-pickers with two way binding
  - added example
  - added/updated test

ISSUES CLOSED: #1197

BREAKING CHANGES: `stark-date-range-picker` is now implemented as a ControlValueAccessor to better integrate with Angular Forms:

  - new `rangeFormGroup` input to provide the start and end date form
  controls. You can handle validations and error messages via those form
  controls.
  - new `required` input to mark the control as required
  and display the required asterisk '*' in the start/end date pickers
  (same as with the `stark-date-picker`).
  - the `isDisabled` input has been renamed to `disabled`. If you use
  the new `rangeFormGroup` input to provide your start/end date form controls, then you should disable/enable those form
  controls directly yourself instead of using the `disabled` input.

packages/stark-ui/src/modules/date-range-picker/components/_date-range-picker.component.scss

@@ -3,7 +3,7 @@
 /* ============================================================================== */
 /* stark-ui: src/modules/date-range-picker/components/date-range-picker/_date-range-picker.component.scss */
 
-.stark-date-range-picker stark-date-picker:first-child {
+.stark-date-range-picker mat-form-field {
   margin-right: 16px;
 }
 

packages/stark-ui/src/modules/date-range-picker/components/date-range-picker.component.html

@@ -3,30 +3,37 @@
 		#startPicker
 		[pickerId]="rangePickerId + '-start'"
 		[pickerName]="rangePickerName + '-start'"
-		[value]="startDate"
-		[dateFilter]="dateFilter"
-		[disabled]="isDisabled"
+		[formControl]="startDateFormControl"
 		[placeholder]="startDateLabel | translate"
+		[dateFilter]="dateFilter"
+		[dateMask]="dateMask"
 		[min]="startMinDate"
 		[max]="startMaxDate"
-		[dateMask]="dateMask"
-		(dateChange)="onDateStartChanged($event)"
+		[required]="required"
 	>
 	</stark-date-picker>
+	<!-- <mat-error> should always be a direct child of <mat-form-field> -->
+	<mat-error>
+		<ng-content select="[start-date-errors]"></ng-content>
+	</mat-error>
 </mat-form-field>
+
 <mat-form-field>
 	<stark-date-picker
 		#endPicker
 		[pickerId]="rangePickerId + '-end'"
 		[pickerName]="rangePickerName + '-end'"
-		[value]="endDate"
-		[dateFilter]="dateFilter"
-		[disabled]="isDisabled"
+		[formControl]="endDateFormControl"
 		[placeholder]="endDateLabel | translate"
+		[dateFilter]="dateFilter"
+		[dateMask]="dateMask"
 		[min]="endMinDate"
 		[max]="endMaxDate"
-		[dateMask]="dateMask"
-		(dateChange)="onDateEndChanged($event)"
+		[required]="required"
 	>
 	</stark-date-picker>
+	<!-- <mat-error> should always be a direct child of <mat-form-field> -->
+	<mat-error>
+		<ng-content select="[end-date-errors]"></ng-content>
+	</mat-error>
 </mat-form-field>