feat(stark-ui): date-picker - add support for ControlValueAccessor, M…

…atFormFieldControl, Validator and starkTimestampMask directive

  * add `dateMask` input binding to date-picker. It allows to use
timestampMask directive.
  * add `required` input binding.

ISSUES CLOSED: #1146

BREAKING CHANGE: stark-date-picker now integrates ControlValueAccessor and Validator:

  - The following Input have been changed:
      - **date** is now **value**
      - **maxDate** is now **max**
      - **minDate** is now **min**
      - **label** is now **placeholder** (the date-picker does not
      translate the placeholder anymore, it has to be done by the
      developer when passing the value --> `[placeholder]="'MY_TRANSLATION_KEY' | translate"`)
      - **isDisabled** is now **disabled**
  - The output **dateChanged** is now **dateChange**
  - **dateInput** Output has been added and now the date-picker Input/Output are
    similar to the ones of MatDatepicker component
  - We respect now the Constraint validation standards. See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes

packages/rollup.config.common-data.js

@@ -10,7 +10,9 @@ const globals = {
 	"@angularclass/hmr": "angularclass.hmr",
 	"@angular/animations": "ng.animations",
 	"@angular/cdk": "ng.cdk",
+	"@angular/cdk/a11y": "ng.cdk.a11y",
 	"@angular/cdk/collections": "ng.cdk.collections",
+	"@angular/cdk/coercion": "ng.cdk.coercion",
 	"@angular/cdk/layout": "ng.cdk.layout",
 	"@angular/core": "ng.core",
 	"@angular/common": "ng.common",

packages/stark-ui/src/modules/date-picker/components.ts

@@ -1,2 +1,2 @@
-export * from "./components/date-picker.component";
+export { StarkDatePickerMaskConfig, StarkDatePickerComponent, StarkDatePickerFilter } from "./components/date-picker.component";
 export * from "./components/date-format.constants";

packages/stark-ui/src/modules/date-picker/components/date-format.constants.ts

@@ -1,10 +1,19 @@
+import { MatDateFormats } from "@angular/material/core";
 /**
  * Object containing the format of the dates displayed in the date picker
+ * Because we are using MomentJS internally, we are waiting for MomentJS formats in the configuration.
  * All formats can be found here: https://momentjs.com/docs/#/displaying/
  */
-export const STARK_DATE_FORMATS: Object = {
+export const STARK_DATE_FORMATS: MatDateFormats = {
 	parse: {
-		dateInput: "DD/MM/YYYY"
+		/**
+		 * Defines the dateInput parser for date-picker component.
+		 * This can be a string for a single value or an array for multiple possibilities (ordered by priority).
+		 * In case of array, if we have `dateInput: ["DD/MM/YYYY", "MM/DD/YYYY"]`
+		 * If we set the date "02/10/2019", the result date will be "October 2, 2019" and not "February 10, 2019".
+		 * Of course, if we set the date "02/20/2019", it will result in "February 20, 2019" because cannot be parsed with "DD/MM/YYYY".
+		 */
+		dateInput: ["DD/MM/YYYY", "LL"]
 	},
 	display: {
 		dateInput: "LL",

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

@@ -1,17 +1,22 @@
-<mat-form-field [id]="pickerId">
-	<input
-		matInput
-		[disabled]="isDisabled"
-		[id]="pickerId + '-input'"
-		[matDatepicker]="picker"
-		[placeholder]="label | translate"
-		[matDatepickerFilter]="dateFilterFnWrapper"
-		[min]="minDate"
-		[max]="maxDate"
-		[name]="pickerName"
-		[value]="date"
-		(dateChange)="onDateChange($event)"
-	/>
+<input
+	matInput
+	[id]="pickerId + '-input'"
+	[matDatepicker]="picker"
+	[value]="value"
+	(dateInput)="onDateInput($event)"
+	(dateChange)="onDateChange($event)"
+	[matDatepickerFilter]="dateFilterFnWrapper"
+	[min]="min"
+	[disabled]="disabled"
+	[max]="max"
+	[name]="pickerName"
+	[required]="required"
+	(focus)="onFocus($event)"
+	(blur)="onBlur()"
+	[starkTimestampMask]="getTimestampMaskConfig()"
+/>
+<mat-datepicker [id]="pickerId" #picker></mat-datepicker>
+<!-- This class is necessary to apply the mat-form-field styles on the `mat-datepicker-toggle` element. -->
+<div class="mat-form-field-suffix">
 	<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-	<mat-datepicker [id]="pickerId" #picker></mat-datepicker>
-</mat-form-field>
+</div>